@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/llms/components/layout/Resizable.md

@@ -0,0 +1,267 @@
+# Resizable
+
+Story: @alexgorbatchev/shadcn/components/layout/Resizable
+Source: src/components/stories/layout/Resizable.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Resizable.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DirectionProvider } from "@alexgorbatchev/shadcn";
+import { Resizable, ResizableHandle, ResizablePanel } from "@alexgorbatchev/shadcn/resizable";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+import { usePanelRef } from "react-resizable-panels";
+```
+
+## Default component
+
+```tsx
+Resizable
+```
+
+## Story controls
+
+```tsx
+{ orientation: { control: "select", options: ["horizontal", "vertical"] } }
+```
+
+## Default args
+
+```tsx
+{ orientation: "horizontal", onLayoutChanged: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<div className="h-64 w-96 border border-border">
+      <Resizable {...args}>
+        <ResizablePanel id="primary" defaultSize="50%" minSize="20%" maxSize="80%">
+          <div className="flex size-full items-center justify-center">Primary</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle aria-label="Resize panels"/>
+        <ResizablePanel id="secondary" defaultSize="50%" minSize="20%">
+          <div className="flex size-full items-center justify-center">Secondary</div>
+        </ResizablePanel>
+      </Resizable>
+    </div>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Horizontal
+
+```tsx
+{}
+```
+
+### Vertical
+
+```tsx
+{
+    args: { orientation: "vertical" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Nested
+
+```tsx
+{
+    render: (args) => (<div className="h-64 w-96 border border-border">
+      <Resizable {...args} orientation="horizontal">
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="Navigation panel">
+          <div className="p-panel">Navigation</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle aria-label="Resize navigation"/>
+        <ResizablePanel defaultSize="50%" minSize="20%">
+          <Resizable orientation="vertical">
+            <ResizablePanel defaultSize="25%" minSize="10%" role="region" aria-label="Editor panel">
+              <div className="p-panel">Editor</div>
+            </ResizablePanel>
+            <ResizableHandle withHandle aria-label="Resize editor"/>
+            <ResizablePanel defaultSize="75%" minSize="20%" role="region" aria-label="Preview panel">
+              <div className="p-panel">Preview</div>
+            </ResizablePanel>
+          </Resizable>
+        </ResizablePanel>
+      </Resizable>
+    </div>)
+}
+```
+
+### RightToLeftNested
+
+```tsx
+{
+    render: (args) => (<div className="h-64 w-96 border border-border">
+      <Resizable {...args} orientation="horizontal">
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="Navigation panel">
+          <div className="p-panel">Navigation</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle aria-label="Resize navigation"/>
+        <ResizablePanel defaultSize="50%" minSize="20%">
+          <Resizable orientation="vertical">
+            <ResizablePanel defaultSize="25%" minSize="10%" role="region" aria-label="Editor panel">
+              <div className="p-panel">Editor</div>
+            </ResizablePanel>
+            <ResizableHandle withHandle aria-label="Resize editor"/>
+            <ResizablePanel defaultSize="75%" minSize="20%" role="region" aria-label="Preview panel">
+              <div className="p-panel">Preview</div>
+            </ResizablePanel>
+          </Resizable>
+        </ResizablePanel>
+      </Resizable>
+    </div>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### WithoutGrip
+
+```tsx
+{
+    render: (args) => (<div className="h-64 w-96 border border-border">
+      <Resizable {...args} orientation="horizontal">
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="First panel">
+          <div className="p-panel">First</div>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize without grip"/>
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="Second panel">
+          <div className="p-panel">Second</div>
+        </ResizablePanel>
+      </Resizable>
+    </div>)
+}
+```
+
+### RightToLeftWithoutGrip
+
+```tsx
+{
+    render: (args) => (<div className="h-64 w-96 border border-border">
+      <Resizable {...args} orientation="horizontal">
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="First panel">
+          <div className="p-panel">First</div>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize without grip"/>
+        <ResizablePanel defaultSize="50%" minSize="20%" role="region" aria-label="Second panel">
+          <div className="p-panel">Second</div>
+        </ResizablePanel>
+      </Resizable>
+    </div>),
+    decorators: RightToLeftNested.decorators
+}
+```
+
+### Collapsible
+
+```tsx
+{
+    render: function Render() {
+        const panelRef = usePanelRef();
+        const [size, setSize] = useState(50);
+        return (<div className="flex flex-col items-start gap-panel">
+        <div className="flex gap-control-gap">
+          <Button onClick={() => panelRef.current?.collapse()}>Collapse navigation</Button>
+          <Button onClick={() => panelRef.current?.expand()}>Expand navigation</Button>
+          <Button onClick={() => panelRef.current?.resize("60%")}>Resize to sixty</Button>
+        </div>
+        <div className="h-64 w-96 border border-border">
+          <Resizable orientation="horizontal">
+            <ResizablePanel panelRef={panelRef} defaultSize="50%" minSize="20%" maxSize="80%" collapsible collapsedSize="0%" onResize={(next) => setSize(next.asPercentage)} role="region" aria-label="Collapsible navigation">
+              <div className="p-panel">Navigation</div>
+            </ResizablePanel>
+            <ResizableHandle withHandle aria-label="Resize collapsible navigation"/>
+            <ResizablePanel defaultSize="50%" minSize="20%">
+              <div className="p-panel">Editor</div>
+            </ResizablePanel>
+          </Resizable>
+        </div>
+        <output aria-label="Navigation size">{Math.round(size)}%</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftCollapsible
+
+```tsx
+{
+    render: function Render() {
+        const panelRef = usePanelRef();
+        const [size, setSize] = useState(50);
+        return (<div className="flex flex-col items-start gap-panel">
+        <div className="flex gap-control-gap">
+          <Button onClick={() => panelRef.current?.collapse()}>Collapse navigation</Button>
+          <Button onClick={() => panelRef.current?.expand()}>Expand navigation</Button>
+          <Button onClick={() => panelRef.current?.resize("60%")}>Resize to sixty</Button>
+        </div>
+        <div className="h-64 w-96 border border-border">
+          <Resizable orientation="horizontal">
+            <ResizablePanel panelRef={panelRef} defaultSize="50%" minSize="20%" maxSize="80%" collapsible collapsedSize="0%" onResize={(next) => setSize(next.asPercentage)} role="region" aria-label="Collapsible navigation">
+              <div className="p-panel">Navigation</div>
+            </ResizablePanel>
+            <ResizableHandle withHandle aria-label="Resize collapsible navigation"/>
+            <ResizablePanel defaultSize="50%" minSize="20%">
+              <div className="p-panel">Editor</div>
+            </ResizablePanel>
+          </Resizable>
+        </div>
+        <output aria-label="Navigation size">{Math.round(size)}%</output>
+      </div>);
+    },
+    decorators: RightToLeftNested.decorators
+}
+```
+
+### KeyboardCollapse
+
+```tsx
+{
+    render: function Render() {
+        const panelRef = usePanelRef();
+        const [size, setSize] = useState(50);
+        return (<div className="flex flex-col items-start gap-panel">
+        <div className="flex gap-control-gap">
+          <Button onClick={() => panelRef.current?.collapse()}>Collapse navigation</Button>
+          <Button onClick={() => panelRef.current?.expand()}>Expand navigation</Button>
+          <Button onClick={() => panelRef.current?.resize("60%")}>Resize to sixty</Button>
+        </div>
+        <div className="h-64 w-96 border border-border">
+          <Resizable orientation="horizontal">
+            <ResizablePanel panelRef={panelRef} defaultSize="50%" minSize="20%" maxSize="80%" collapsible collapsedSize="0%" onResize={(next) => setSize(next.asPercentage)} role="region" aria-label="Collapsible navigation">
+              <div className="p-panel">Navigation</div>
+            </ResizablePanel>
+            <ResizableHandle withHandle aria-label="Resize collapsible navigation"/>
+            <ResizablePanel defaultSize="50%" minSize="20%">
+              <div className="p-panel">Editor</div>
+            </ResizablePanel>
+          </Resizable>
+        </div>
+        <output aria-label="Navigation size">{Math.round(size)}%</output>
+      </div>);
+    }
+}
+```

package/llms/components/layout/ScrollArea.md

@@ -0,0 +1,170 @@
+# ScrollArea
+
+Story: @alexgorbatchev/shadcn/components/layout/ScrollArea
+Source: src/components/stories/layout/ScrollArea.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/ScrollArea.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ScrollArea, ScrollBar, cn, DirectionProvider } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps } from "react";
+```
+
+## Default component
+
+```tsx
+ScrollArea
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### NativeScrollbars
+
+```tsx
+{
+    render: () => (<div role="region" aria-label="Native release history" tabIndex={0} className="h-48 w-64 overflow-auto border border-border bg-background focus-visible:outline-1 focus-visible:outline-ring">
+      <ol className="flex w-192 flex-col gap-4 p-panel">
+        {Array.from({ length: 30 }, (_, index) => (<li key={index}>Release {index + 1} — native browser scrolling in both directions</li>))}
+      </ol>
+    </div>)
+}
+```
+
+### Default
+
+```tsx
+{
+    render: ({ barClassName, ...args }) => (<ScrollArea {...args} aria-label="Release history" scrollbars={<ScrollBar className={barClassName}/>} className={(state) => cn("h-48 w-64 border border-border", typeof args.className === "function" ? args.className(state) : args.className)}>
+      <ol className="flex flex-col gap-4 p-panel">
+        {Array.from({ length: 30 }, (_, index) => (<li key={index}>Release {index + 1}</li>))}
+      </ol>
+    </ScrollArea>)
+}
+```
+
+### FlexHeight
+
+```tsx
+{
+    render: () => (<section data-scroll="none" aria-label="Release panel" className="flex max-h-64 w-64 flex-col gap-3 border p-4">
+      <h2 className="shrink-0">Release panel</h2>
+      <ScrollArea>
+        <ol className="flex flex-col gap-3">
+          {Array.from({ length: 30 }, (_, index) => (<li key={index}>Release {index + 1}</li>))}
+        </ol>
+      </ScrollArea>
+      <p className="shrink-0">Stationary footer</p>
+    </section>)
+}
+```
+
+### StateCallback
+
+```tsx
+{
+    render: ({ barClassName, ...args }) => (<ScrollArea {...args} aria-label="Release history" scrollbars={<ScrollBar className={barClassName}/>} className={(state) => cn("h-48 w-64 border border-border", typeof args.className === "function" ? args.className(state) : args.className)}>
+      <ol className="flex flex-col gap-4 p-panel">
+        {Array.from({ length: 30 }, (_, index) => (<li key={index}>Release {index + 1}</li>))}
+      </ol>
+    </ScrollArea>),
+    args: { className: fn(() => "min-w-64"), barClassName: fn(() => "") }
+}
+```
+
+### Horizontal
+
+```tsx
+{
+    render: () => (<ScrollArea aria-label="Horizontal releases" className="h-24 w-64 border border-border" scrollbars={<ScrollBar orientation="horizontal"/>}>
+      <ol className="flex w-max gap-4 p-panel">
+        {Array.from({ length: 12 }, (_, index) => (<li key={index} className="w-32 shrink-0">
+            Release {index + 1}
+          </li>))}
+      </ol>
+    </ScrollArea>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: () => (<ScrollArea aria-label="Horizontal releases" className="h-24 w-64 border border-border" scrollbars={<ScrollBar orientation="horizontal"/>}>
+      <ol className="flex w-max gap-4 p-panel">
+        {Array.from({ length: 12 }, (_, index) => (<li key={index} className="w-32 shrink-0">
+            Release {index + 1}
+          </li>))}
+      </ol>
+    </ScrollArea>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### BothDirections
+
+```tsx
+{
+    render: () => (<ScrollArea aria-label="Release matrix" className="h-48 w-64 border border-border" scrollbars={<>
+          <ScrollBar />
+          <ScrollBar orientation="horizontal"/>
+        </>}>
+      <ol className="grid w-192 grid-cols-3 gap-4 p-panel">
+        {Array.from({ length: 90 }, (_, index) => (<li key={index}>Release {index + 1}</li>))}
+      </ol>
+    </ScrollArea>)
+}
+```
+
+### NoOverflow
+
+```tsx
+{
+    render: () => (<ScrollArea aria-label="Short release history" className="h-48 w-64 border border-border">
+      <p>Release 1</p>
+    </ScrollArea>)
+}
+```
+
+### KeepMounted
+
+```tsx
+{
+    render: () => (<ScrollArea aria-label="Persistent track" className="h-48 w-64 border border-border" scrollbars={<ScrollBar keepMounted/>}>
+      <p>Release 1</p>
+    </ScrollArea>)
+}
+```
+
+### VerticalRightToLeft
+
+```tsx
+{
+    render: ({ barClassName, ...args }) => (<ScrollArea {...args} aria-label="Release history" scrollbars={<ScrollBar className={barClassName}/>} className={(state) => cn("h-48 w-64 border border-border", typeof args.className === "function" ? args.className(state) : args.className)}>
+      <ol className="flex flex-col gap-4 p-panel">
+        {Array.from({ length: 30 }, (_, index) => (<li key={index}>Release {index + 1}</li>))}
+      </ol>
+    </ScrollArea>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```

package/llms/components/layout/Separator.md

@@ -0,0 +1,104 @@
+# Separator
+
+Story: @alexgorbatchev/shadcn/components/layout/Separator
+Source: src/components/stories/layout/Separator.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Separator.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Separator } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Separator
+```
+
+## Default render
+
+```tsx
+(args) => (<div className="flex flex-col gap-4">
+      <span>Project</span>
+      <Separator {...args}/>
+      <span>Settings</span>
+    </div>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Horizontal
+
+```tsx
+{}
+```
+
+### Vertical
+
+```tsx
+{
+    render: () => (<div className="flex h-10 items-center gap-4">
+      <span>Overview</span>
+      <Separator orientation="vertical"/>
+      <span>Settings</span>
+    </div>)
+}
+```
+
+### NativeCallback
+
+```tsx
+{
+    args: { orientation: "vertical", className: (state) => (state.orientation === "vertical" ? "h-12" : "h-8") }
+}
+```
+
+### Navigation
+
+```tsx
+{
+    render: () => (<nav aria-label="Project navigation" className="flex h-10 items-center gap-4">
+      <a href="#overview" onClick={(event) => event.preventDefault()}>
+        Overview
+      </a>
+      <Separator orientation="vertical"/>
+      <a href="#settings" onClick={(event) => event.preventDefault()}>
+        Settings
+      </a>
+    </nav>)
+}
+```
+
+### List
+
+```tsx
+{
+    render: () => (<div className="flex w-80 flex-col gap-2">
+      <dl>
+        <dt>Project</dt>
+        <dd>Design system</dd>
+      </dl>
+      <Separator />
+      <dl>
+        <dt>Status</dt>
+        <dd>Active</dd>
+      </dl>
+    </div>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: () => (<div dir="rtl" className="flex h-10 items-center gap-4">
+      <span>Overview</span>
+      <Separator orientation="vertical"/>
+      <span>Settings</span>
+    </div>)
+}
+```

package/llms/components/layout/SplitView.md

@@ -0,0 +1,92 @@
+# SplitView
+
+Story: @alexgorbatchev/shadcn/components/layout/SplitView
+Source: src/components/stories/layout/SplitView.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/SplitView.stories.tsx)
+
+## Public imports
+
+```tsx
+import { SplitView } from "@alexgorbatchev/shadcn/resizable";
+import { Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId, useState } from "react";
+```
+
+## Default component
+
+```tsx
+SplitView
+```
+
+## Default args
+
+```tsx
+{
+    sidebarLabel: "Navigation",
+    contentLabel: "Content",
+    resizeLabel: "Resize navigation",
+    storageKey: "split-view-story",
+    defaultSidebarSize: 220,
+}
+```
+
+## Default render
+
+```tsx
+function Example(args) {
+    const key = useId();
+    const [isVisible, setVisible] = useState(true);
+    return (<div className="flex w-[900px] max-w-full flex-col gap-4">
+        <Button onClick={() => setVisible(!isVisible)}>{isVisible ? "Hide panels" : "Show panels"}</Button>
+        {isVisible && (<SplitView {...args} storageKey={key} sidebar={<h2>Navigation heading</h2>}>
+            <h2>Content heading</h2>
+            <p>Resizable content</p>
+          </SplitView>)}
+      </div>);
+}
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Persistent
+
+```tsx
+{}
+```
+
+### ExternalStorage
+
+```tsx
+{
+    render: function Example(args) {
+        const [values] = useState(() => new Map<string, string>());
+        const [isSaved, setSaved] = useState(false);
+        const [storage] = useState(() => ({
+            getItem: (key: string) => values.get(key) ?? null,
+            setItem: (key: string, value: string) => {
+                values.set(key, value);
+                setSaved(true);
+            },
+        }));
+        const [isVisible, setVisible] = useState(true);
+        return (<div className="flex w-[900px] flex-col gap-4">
+        <Button onClick={() => setVisible(!isVisible)}>{isVisible ? "Hide panels" : "Show panels"}</Button>
+        {isVisible && (<SplitView {...args} storageKey="external-layout" storage={storage} sidebar={<h2>Navigation</h2>}>
+            <h2>Content</h2>
+          </SplitView>)}
+        <Button onClick={() => setVisible(values.has("react-resizable-panels:external-layout"))}>
+          Restore saved panels
+        </Button>
+        <p role="status">{isSaved ? "Layout saved" : "No saved layout"}</p>
+      </div>);
+    }
+}
+```