@kala-ui/react 0.0.1-beta.1

package/dist/src/components/resizable/resizable.stories.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button } from "../button";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable";
+const meta = {
+    title: "Layout/Resizable",
+    parameters: {
+        layout: "padded",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+/**
+ * Basic horizontal resizable panel layout with two panels.
+ * Click and drag the handle to resize the panels.
+ */
+export const Horizontal = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Panel One" }) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Panel Two" }) }) })] })),
+};
+/**
+ * Vertical resizable panel layout.
+ * Use direction="vertical" to create top/bottom panels.
+ */
+export const Vertical = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "vertical", className: "min-h-[400px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 25, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Header" }) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 75, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Content" }) }) })] })),
+};
+/**
+ * Resizable handle with visual grip indicator.
+ * Set withHandle={true} to show the drag handle.
+ */
+export const WithHandle = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 30, minSize: 20, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Sidebar" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 70, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Main Content" }) }) })] })),
+};
+/**
+ * Nested panel groups for complex layouts.
+ * Combine horizontal and vertical panels to create sophisticated layouts.
+ */
+export const NestedPanels = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[500px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 30, minSize: 20, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Sidebar" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 70, children: _jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { defaultSize: 30, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Header" }) }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 70, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Main Content" }) }) })] }) })] })),
+};
+/**
+ * Three-panel layout with multiple handles.
+ * Useful for applications with sidebar, content, and details panels.
+ */
+export const ThreePanels = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 20, minSize: 15, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Left Sidebar" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, minSize: 30, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Main Content" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, minSize: 15, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Right Sidebar" }) }) })] })),
+};
+/**
+ * Panels with size constraints.
+ * Use minSize and maxSize to limit panel dimensions.
+ */
+export const WithConstraints = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 30, minSize: 20, maxSize: 40, className: "p-6", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2", children: [_jsx("span", { className: "font-semibold", children: "Constrained Panel" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Min: 20% | Max: 40%" })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Flexible Panel" }) }) })] })),
+};
+/**
+ * Collapsible panel with imperative controls.
+ * Use the collapse() and expand() API to control panels programmatically.
+ */
+export const CollapsiblePanel = {
+    args: {},
+    render: () => {
+        const [isCollapsed, setIsCollapsed] = useState(false);
+        const panelRef = useRef(null);
+        const togglePanel = () => {
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            if (isCollapsed) {
+                panel.expand();
+            }
+            else {
+                panel.collapse();
+            }
+            setIsCollapsed(!isCollapsed);
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Button, { type: "button", onClick: togglePanel, children: isCollapsed ? "Expand Sidebar" : "Collapse Sidebar" }), _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { ref: panelRef, defaultSize: 30, minSize: 15, collapsible: true, className: "p-6", onCollapse: () => setIsCollapsed(true), onExpand: () => setIsCollapsed(false), children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Collapsible Sidebar" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Main Content" }) }) })] })] }));
+    },
+};
+/**
+ * Imperative panel group controls.
+ * Use getLayout() and setLayout() to manage panel sizes programmatically.
+ */
+export const ImperativeControls = {
+    args: {},
+    render: () => {
+        const groupRef = useRef(null);
+        const [layout, setLayout] = useState([33, 34, 33]);
+        const applyLayout = (sizes) => {
+            groupRef.current?.setLayout(sizes);
+        };
+        const getCurrentLayout = () => {
+            const currentLayout = groupRef.current?.getLayout();
+            if (currentLayout) {
+                setLayout(currentLayout.map((size) => Math.round(size)));
+            }
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", onClick: () => applyLayout([25, 50, 25]), children: "25-50-25" }), _jsx(Button, { type: "button", onClick: () => applyLayout([33, 34, 33]), children: "Equal" }), _jsx(Button, { type: "button", onClick: () => applyLayout([15, 70, 15]), children: "15-70-15" }), _jsx(Button, { type: "button", variant: "outline", onClick: getCurrentLayout, children: "Get Layout" })] }), _jsxs("div", { className: "text-muted-foreground text-sm", children: ["Current layout: ", layout.join("% - "), "%"] }), _jsxs(ResizablePanelGroup, { ref: groupRef, direction: "horizontal", className: "min-h-[300px] rounded-lg border", onLayout: (sizes) => setLayout(sizes.map((size) => Math.round(size))), children: [_jsx(ResizablePanel, { defaultSize: 33, minSize: 15, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Left" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 34, minSize: 15, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Center" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 33, minSize: 15, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Right" }) }) })] })] }));
+    },
+};
+/**
+ * Disabled resize handle.
+ * Use the disabled prop to prevent users from resizing panels.
+ */
+export const DisabledHandle = {
+    args: {},
+    render: () => {
+        const [disabled, setDisabled] = useState(false);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("button", { type: "button", onClick: () => setDisabled(!disabled), className: "hover:bg-primary/90 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground", children: [disabled ? "Enable" : "Disable", " Resizing"] }), _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Left Panel" }) }) }), _jsx(ResizableHandle, { withHandle: true, disabled: disabled }), _jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Right Panel" }) }) })] })] }));
+    },
+};
+/**
+ * Real-world IDE-like layout.
+ * Demonstrates a practical use case for resizable panels.
+ */
+export const IDELayout = {
+    args: {},
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[500px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 20, minSize: 15, maxSize: 30, className: "border-r", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Explorer" }), _jsx("div", { className: "flex-1 p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm", children: "\uD83D\uDCC1 src" }), _jsxs("div", { className: "ml-4 space-y-1 text-sm", children: [_jsx("div", { children: "\uD83D\uDCC4 App.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 index.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 styles.css" })] })] }) })] }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 60, children: _jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { defaultSize: 70, minSize: 30, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Editor" }), _jsx("div", { className: "bg-muted/20 flex-1 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import React from 'react';
+
+function App() {
+  return (
+    <div>Hello World</div>
+  );
+}
+
+export default App;` }) }) })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, minSize: 20, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-t p-4 font-semibold", children: "Terminal" }), _jsx("div", { className: "bg-muted/40 flex-1 p-4", children: _jsxs("div", { className: "font-mono text-sm", children: [_jsx("div", { children: "$ npm run dev" }), _jsx("div", { className: "text-muted-foreground mt-2", children: "Server running on port 3000..." })] }) })] }) })] }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 20, minSize: 15, maxSize: 30, className: "border-l", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Properties" }), _jsxs("div", { className: "flex-1 space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "File Info" }), _jsx("div", { className: "text-sm", children: "App.tsx" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "Lines" }), _jsx("div", { className: "text-sm", children: "9" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "Size" }), _jsx("div", { className: "text-sm", children: "128 bytes" })] })] })] }) })] })),
+};
+/**
+ * Keyboard navigation support.
+ * Use arrow keys to resize panels (default: 10% increments).
+ * Use keyboardResizeBy prop to customize the increment.
+ */
+export const KeyboardResize = {
+    args: {},
+    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "text-muted-foreground rounded-md border p-4 text-sm", children: [_jsx("p", { className: "mb-2 font-semibold", children: "Keyboard Controls:" }), _jsxs("ul", { className: "space-y-1", children: [_jsx("li", { children: "\u2022 Focus the handle (click or Tab key)" }), _jsx("li", { children: "\u2022 Use Arrow keys (\u2190/\u2192 or \u2191/\u2193) to resize" }), _jsx("li", { children: "\u2022 Each keypress adjusts by 5%" })] })] }), _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", keyboardResizeBy: 5, children: [_jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Left Panel" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Right Panel" }) }) })] })] })),
+};
+/**
+ * Persistent layout with localStorage.
+ * Panel sizes are automatically saved and restored across sessions.
+ */
+export const PersistentLayout = {
+    args: {},
+    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "text-muted-foreground rounded-md border p-4 text-sm", children: [_jsx("p", { className: "mb-2 font-semibold", children: "Try it:" }), _jsxs("ul", { className: "space-y-1", children: [_jsx("li", { children: "1. Resize the panels below" }), _jsx("li", { children: "2. Refresh the Storybook page" }), _jsx("li", { children: "3. Your layout will be restored" })] })] }), _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[300px] rounded-lg border", autoSaveId: "resizable-demo-layout", children: [_jsx(ResizablePanel, { defaultSize: 30, minSize: 20, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Sidebar" }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 70, className: "p-6", children: _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("span", { className: "font-semibold", children: "Main Content" }) }) })] })] })),
+};
+//# sourceMappingURL=resizable.stories.js.map

package/dist/src/components/resizable/resizable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.stories.js","sourceRoot":"","sources":["../../../../src/components/resizable/resizable.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/resizable/resizable.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=resizable.test.d.ts.map

package/dist/src/components/resizable/resizable.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.test.d.ts","sourceRoot":"","sources":["../../../../src/components/resizable/resizable.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/resizable/resizable.test.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { useRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable";
+describe("ResizablePanelGroup", () => {
+    it("should render with horizontal direction", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toBeInTheDocument();
+        expect(group).toHaveAttribute("data-panel-group-direction", "horizontal");
+    });
+    it("should render with vertical direction", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toHaveAttribute("data-panel-group-direction", "vertical");
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsx(ResizablePanelGroup, { direction: "horizontal", className: "custom-class", children: _jsx(ResizablePanel, { children: "Panel 1" }) }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toHaveClass("custom-class");
+    });
+    it("should accept autoSaveId prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", autoSaveId: "test-layout", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toBeInTheDocument();
+    });
+    it("should accept keyboardResizeBy prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", keyboardResizeBy: 5, children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toBeInTheDocument();
+    });
+});
+describe("ResizablePanel", () => {
+    it("should render panel content", () => {
+        render(_jsx(ResizablePanelGroup, { direction: "horizontal", children: _jsx(ResizablePanel, { children: _jsx("div", { children: "Panel Content" }) }) }));
+        expect(screen.getByText("Panel Content")).toBeInTheDocument();
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsx(ResizablePanelGroup, { direction: "horizontal", children: _jsx(ResizablePanel, { className: "custom-panel", children: "Panel 1" }) }));
+        const panel = container.querySelector('[data-slot="resizable-panel"]');
+        expect(panel).toHaveClass("custom-panel");
+    });
+    it("should accept defaultSize prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { defaultSize: 30, children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 70, children: "Panel 2" })] }));
+        const panels = container.querySelectorAll('[data-slot="resizable-panel"]');
+        expect(panels).toHaveLength(2);
+    });
+    it("should accept minSize and maxSize props", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { minSize: 20, maxSize: 40, children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const panel = container.querySelector('[data-slot="resizable-panel"]');
+        expect(panel).toBeInTheDocument();
+    });
+    it("should support collapsible prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { collapsible: true, children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const panel = container.querySelector('[data-slot="resizable-panel"]');
+        expect(panel).toBeInTheDocument();
+    });
+    it("should handle onCollapse and onExpand callbacks", () => {
+        const onCollapse = vi.fn();
+        const onExpand = vi.fn();
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { collapsible: true, onCollapse: onCollapse, onExpand: onExpand, children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const panel = container.querySelector('[data-slot="resizable-panel"]');
+        expect(panel).toBeInTheDocument();
+        // Callbacks are tested by the library
+    });
+});
+describe("ResizableHandle", () => {
+    it("should render resize handle", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        expect(handle).toBeInTheDocument();
+    });
+    it("should render without handle indicator by default", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        const svg = handle?.querySelector("svg");
+        expect(svg).not.toBeInTheDocument();
+    });
+    it("should render with handle indicator when withHandle is true", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        const svg = handle?.querySelector("svg");
+        expect(svg).toBeInTheDocument();
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, { className: "custom-handle" }), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        expect(handle).toHaveClass("custom-handle");
+    });
+    it("should support disabled prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, { disabled: true }), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        expect(handle).toBeInTheDocument();
+        // The disabled state is handled by the library
+    });
+    it("should handle onDragging callback", () => {
+        const onDragging = vi.fn();
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, { onDragging: onDragging }), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        expect(handle).toBeInTheDocument();
+    });
+});
+describe("Imperative Panel API", () => {
+    it("should support ref on ResizablePanel", () => {
+        function TestComponent() {
+            const panelRef = useRef(null);
+            return (_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { ref: panelRef, children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        }
+        const { container } = render(_jsx(TestComponent, {}));
+        const panel = container.querySelector('[data-slot="resizable-panel"]');
+        expect(panel).toBeInTheDocument();
+    });
+    it("should support ref on ResizablePanelGroup", () => {
+        function TestComponent() {
+            const groupRef = useRef(null);
+            return (_jsxs(ResizablePanelGroup, { ref: groupRef, direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        }
+        const { container } = render(_jsx(TestComponent, {}));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toBeInTheDocument();
+    });
+});
+describe("Nested Panels", () => {
+    it("should support nested panel groups", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: _jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { children: "Panel 2A" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2B" })] }) })] }));
+        const groups = container.querySelectorAll('[data-slot="resizable-panel-group"]');
+        expect(groups).toHaveLength(2);
+        expect(screen.getByText("Panel 1")).toBeInTheDocument();
+        expect(screen.getByText("Panel 2A")).toBeInTheDocument();
+        expect(screen.getByText("Panel 2B")).toBeInTheDocument();
+    });
+});
+describe("Accessibility", () => {
+    it("should have proper ARIA attributes for keyboard navigation", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const handle = container.querySelector('[data-slot="resizable-handle"]');
+        // react-resizable-panels handles accessibility attributes
+        expect(handle).toBeInTheDocument();
+    });
+    it("should support keyboard resize with keyboardResizeBy prop", () => {
+        const { container } = render(_jsxs(ResizablePanelGroup, { direction: "horizontal", keyboardResizeBy: 5, children: [_jsx(ResizablePanel, { children: "Panel 1" }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { children: "Panel 2" })] }));
+        const group = container.querySelector('[data-slot="resizable-panel-group"]');
+        expect(group).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=resizable.test.js.map

package/dist/src/components/resizable/resizable.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.test.js","sourceRoot":"","sources":["../../../../src/components/resizable/resizable.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea, ScrollBar } from "./scroll-area";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/scroll-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/scroll-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/components/scroll-area/index.js

@@ -0,0 +1,2 @@
+export { ScrollArea, ScrollBar } from "./scroll-area";
+//# sourceMappingURL=index.js.map

package/dist/src/components/scroll-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/scroll-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,6 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/src/components/scroll-area/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,UAAU,+JAgBd,CAAC;AAGH,QAAA,MAAM,SAAS,wKAuBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/scroll-area/scroll-area.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, "data-slot": "scroll-bar", orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-px", orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-px", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-thumb", className: "bg-border relative flex-1 rounded-full transition-colors hover:bg-border/80" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.js.map

package/dist/src/components/scroll-area/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","sourceRoot":"","sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,MAAC,mBAAmB,CAAC,IAAI,IACxB,GAAG,EAAE,GAAG,eACE,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,KAAC,mBAAmB,CAAC,QAAQ,IAAC,SAAS,EAAC,6BAA6B,YACnE,QAAQ,GACqB,EAC/B,KAAC,SAAS,KAAG,EACb,KAAC,mBAAmB,CAAC,MAAM,KAAG,IACJ,CAC3B,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;AAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7D,KAAC,mBAAmB,CAAC,mBAAmB,IACvC,GAAG,EAAE,GAAG,eACE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACZ,+CAA+C,EAC/C,WAAW,KAAK,UAAU;QACzB,iDAAiD,EAClD,WAAW,KAAK,YAAY;QAC3B,mDAAmD,EACpD,SAAS,CACT,KACG,KAAK,YAET,KAAC,mBAAmB,CAAC,eAAe,iBACzB,cAAc,EACxB,SAAS,EAAC,6EAA6E,GACtF,GACuC,CAC1C,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,WAAW,CAAC;AAE5E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/scroll-area/scroll-area.stories.d.ts

@@ -0,0 +1,66 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Basic scroll area with vertical scrolling.
+ * The scroll bar appears when content overflows.
+ */
+export declare const Default: Story;
+/**
+ * Horizontal scrolling with images.
+ * Use orientation="horizontal" on ScrollBar for horizontal scrolling.
+ */
+export declare const Horizontal: Story;
+/**
+ * Scroll area with long text content.
+ * Demonstrates natural text wrapping with vertical scrolling.
+ */
+export declare const LongText: Story;
+/**
+ * Scroll area with both vertical and horizontal scrolling.
+ * Shows how to enable scrolling in both directions.
+ */
+export declare const BothDirections: Story;
+/**
+ * Compact scroll area with small content.
+ * Useful for sidebars or small widgets.
+ */
+export declare const Compact: Story;
+/**
+ * Scroll area with different scroll types.
+ * The type prop controls when scrollbars are visible.
+ */
+export declare const ScrollTypes: Story;
+/**
+ * Styled scroll area with custom appearance.
+ * Shows how to customize the scrollbar appearance.
+ */
+export declare const Styled: Story;
+/**
+ * Code block with scroll area.
+ * Perfect for displaying long code snippets.
+ */
+export declare const CodeBlock: Story;
+/**
+ * Data table with scroll area.
+ * Demonstrates using scroll area with tabular data.
+ */
+export declare const DataTable: Story;
+/**
+ * Chat messages with scroll area.
+ * Useful for chat interfaces or message lists.
+ */
+export declare const ChatMessages: Story;
+/**
+ * Nested scroll areas.
+ * Shows how scroll areas can be nested within each other.
+ */
+export declare const Nested: Story;
+//# sourceMappingURL=scroll-area.stories.d.ts.map

package/dist/src/components/scroll-area/scroll-area.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/scroll-area/scroll-area.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;CAMyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAuCvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiDvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAuCpB,CAAC"}