feat(): Add resizeable component.

package.json

@@ -104,13 +104,14 @@
     "lucide-react": "^0.298.0",
     "react-day-picker": "^8.9.1",
     "react-hook-form": "^7.49.2",
+    "react-resizable-panels": "^1.0.5",
     "tailwind-merge": "^2.1.0"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.6",
-    "tailwindcss-animate": "^1.0.7",
-    "@tailwindcss/typography": "^0.5.10"
+    "tailwindcss-animate": "^1.0.7"
   }
 }

src/atoms/resizable.tsx

@@ -0,0 +1,43 @@
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "src/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/index.ts

@@ -22,6 +22,7 @@ export * from "./atoms/navigation-menu";
 export * from "./atoms/popover";
 export * from "./atoms/progress";
 export * from "./atoms/radio-group";
+export * from "./atoms/resizable";
 export * from "./atoms/scroll-area";
 export * from "./atoms/select";
 export * from "./atoms/separator";
@@ -42,3 +43,4 @@ export * from "./molecules/slide-in";
 export * from "./molecules/theme-selector";
 export * from "./tailwindTheme";
 export * from "./utils";
+

src/molecules/theme-selector.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import { Button } from "src/atoms/button";
 import { theme as _theme } from "src/utils";
 
-type Mode = ReturnType<typeof _theme['get']>['mode']
 export const useTheme = () => {
 
   const [theme, _setTheme] = React.useState<ReturnType<typeof _theme['get']>>(typeof window !== "undefined" ? _theme.get() : {mode: "dark", isDark: true});

stories/atoms/resizeable.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "src";
+
+function ResizeableDemo() {
+    return (
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="max-w-md rounded-lg border"
+      >
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    )
+  }
+
+
+const meta: Meta<typeof ResizeableDemo> = {
+  component: ResizeableDemo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ResizeableDemo> = {
+  args: {},
+};