feat: add component resizable

Author: Ohh-889

packages/ui/package.json

@@ -11,7 +11,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -60,6 +62,7 @@
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-resizable-panels": "^3.0.4",
     "sonner": "2.0.6",
     "tailwind-merge": "3.3.0",
     "tailwind-variants": "1.0.0",

packages/ui/src/components/resizable/ResizableHandle.tsx

@@ -0,0 +1,35 @@
+import { Slot } from '@radix-ui/react-slot';
+import { GripVertical } from 'lucide-react';
+import { PanelResizeHandle } from 'react-resizable-panels';
+
+import { cn } from '@/lib/utils';
+
+import { resizableVariants } from './resizable-variants';
+import type { ResizableHandleProps } from './types';
+
+const ResizableHandle = (props: ResizableHandleProps) => {
+  const { children, className, classNames, size, withHandle, ...rest } = props;
+
+  const { handle, handleIcon, handleIconRoot } = resizableVariants({ size });
+
+  const mergedCls = {
+    handle: cn(handle(), className),
+    handleIcon: cn(handleIcon(), classNames?.handleIcon),
+    handleIconRoot: cn(handleIconRoot(), classNames?.handleIconRoot)
+  };
+
+  return (
+    <PanelResizeHandle
+      className={mergedCls.handle}
+      {...rest}
+    >
+      {withHandle && (
+        <div className={mergedCls.handleIconRoot}>
+          <Slot className={mergedCls.handleIcon}>{children || <GripVertical />}</Slot>
+        </div>
+      )}
+    </PanelResizeHandle>
+  );
+};
+
+export default ResizableHandle;

packages/ui/src/components/resizable/ResizablePanelGroup.tsx

@@ -0,0 +1,23 @@
+import { PanelGroup } from 'react-resizable-panels';
+
+import { cn } from '@/lib/utils';
+
+import { resizableVariants } from './resizable-variants';
+import type { ResizablePanelGroupProps } from './types';
+
+const ResizablePanelGroup = (props: ResizablePanelGroupProps) => {
+  const { className, size, ...rest } = props;
+
+  const { panelGroup } = resizableVariants({ size });
+
+  const mergedCls = cn(panelGroup(), className);
+
+  return (
+    <PanelGroup
+      className={mergedCls}
+      {...rest}
+    />
+  );
+};
+
+export default ResizablePanelGroup;

packages/ui/src/components/resizable/index.ts

@@ -0,0 +1,9 @@
+'use client';
+
+export { Panel as ResizablePanel } from 'react-resizable-panels';
+
+export { default as ResizableHandle } from './ResizableHandle';
+
+export { default as ResizablePanelGroup } from './ResizablePanelGroup';
+
+export * from './types';

packages/ui/src/components/resizable/resizable-variants.ts

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+
+export const resizableVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    handle: [
+      '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-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary',
+      ' 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  data-[panel-group-direction=vertical]:after:translate-x-0',
+      '[&[data-panel-group-direction=vertical]>div]:rotate-90'
+    ],
+    handleIcon: '',
+    handleIconRoot: 'z-2 flex items-center justify-center rounded-sm border bg-border',
+    panelGroup: 'flex h-full w-full data-[panel-group-direction=vertical]:flex-col'
+  },
+  variants: {
+    size: {
+      '2xl': {
+        handleIconRoot: 'w-4.5 h-6',
+        panelGroup: 'text-xl'
+      },
+      lg: {
+        handleIconRoot: 'w-3.5 h-4.5',
+        panelGroup: 'text-base'
+      },
+      md: {
+        handleIconRoot: 'w-3 h-4',
+        panelGroup: 'text-sm'
+      },
+      sm: {
+        handleIconRoot: 'w-2.5 h-3.25',
+        panelGroup: 'text-xs'
+      },
+      xl: {
+        handleIconRoot: 'w-4 h-5.25',
+        panelGroup: 'text-lg'
+      },
+      xs: {
+        handleIconRoot: 'w-2 h-2.625',
+        panelGroup: 'text-2xs'
+      }
+    }
+  }
+});
+
+export type ResizableSlots = keyof typeof resizableVariants.slots;

packages/ui/src/components/resizable/types.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+// eslint-disable-next-line sort-imports
+import type { PanelGroupProps as _PanelGroupProps, PanelResizeHandle } from 'react-resizable-panels';
+
+import type { BaseNodeProps, ClassValue } from '@/types/other';
+
+import type { ResizableSlots } from './resizable-variants';
+
+export type ResizableClassNames = Partial<Record<ResizableSlots, ClassValue>>;
+
+export interface ResizableHandleProps extends BaseNodeProps<ComponentProps<typeof PanelResizeHandle>> {
+  classNames?: Pick<ResizableClassNames, 'handleIcon' | 'handleIconRoot'>;
+  withHandle?: boolean;
+}
+
+export interface ResizablePanelGroupProps extends BaseNodeProps<_PanelGroupProps> {}

packages/ui/src/index.ts

@@ -56,6 +56,8 @@ export * from './components/progress';
 
 export * from './components/radio';
 
+export * from './components/resizable';
+
 export * from './components/scroll-area';
 
 export * from './components/select';

playground/src/app/(demo)/resizable/modules/Default.tsx

@@ -0,0 +1,72 @@
+import { CircleDashed } from 'lucide-react';
+import { Card, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'soybean-react-ui';
+
+const Default = () => {
+  return (
+    <Card
+      split
+      title="Resizable"
+    >
+      <ResizablePanelGroup
+        className="max-w-md border rounded-lg"
+        direction="horizontal"
+        id="demo-group-1"
+      >
+        <ResizablePanel
+          collapsible
+          collapsedSize={10}
+          defaultSize={50}
+          id="demo-panel-1"
+          minSize={20}
+        >
+          <div className="h-[200px] flex items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle
+          withHandle
+          id="demo-handle-1"
+        />
+        <ResizablePanel
+          defaultSize={50}
+          id="demo-panel-2"
+          minSize={20}
+        >
+          <ResizablePanelGroup
+            direction="vertical"
+            id="demo-group-2"
+          >
+            <ResizablePanel
+              defaultSize={25}
+              id="demo-panel-3"
+              minSize={25}
+            >
+              <div className="h-full flex items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </ResizablePanel>
+
+            <ResizableHandle
+              withHandle
+              id="demo-handle-2"
+            >
+              <CircleDashed />
+            </ResizableHandle>
+
+            <ResizablePanel
+              defaultSize={75}
+              id="demo-panel-4"
+              minSize={25}
+            >
+              <div className="h-full flex items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </Card>
+  );
+};
+
+export default Default;

playground/src/app/(demo)/resizable/page.tsx

@@ -0,0 +1,7 @@
+import Default from './modules/Default';
+
+const ResizablePage = () => {
+  return <Default />;
+};
+
+export default ResizablePage;