@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/navigation/Tabs.md

@@ -0,0 +1,418 @@
+# Tabs
+
+Story: @alexgorbatchev/shadcn/components/navigation/Tabs
+Source: src/components/stories/navigation/Tabs.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Tabs.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DirectionProvider, Button, Input, Card, CardHeader, CardTitle, CardDescription, CardContent, Tabs, TabsList, TabsTrigger, TabsContent } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+import { AppWindowIcon, CodeIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Tabs
+```
+
+## Default args
+
+```tsx
+{ defaultValue: "overview", onValueChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<Tabs {...args}>
+      <TabsList aria-label="Project sections">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+        <TabsTrigger value="disabled" disabled>
+          Unavailable
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">Your project is ready.</TabsContent>
+      <TabsContent value="settings">Configure your preferences.</TabsContent>
+    </Tabs>)
+```
+
+## 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.
+
+### Default
+
+```tsx
+{}
+```
+
+### Settings
+
+```tsx
+{
+    args: { defaultValue: "settings" }
+}
+```
+
+### Vertical
+
+```tsx
+{
+    args: { orientation: "vertical" }
+}
+```
+
+### Line
+
+```tsx
+{
+    render: (args) => (<Tabs {...args}>
+      <TabsList variant="line" aria-label="Project sections">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">Project overview.</TabsContent>
+      <TabsContent value="settings">Project settings.</TabsContent>
+    </Tabs>)
+}
+```
+
+### NativeRootCallback
+
+```tsx
+{
+    args: { className: (state) => (state.orientation === "horizontal" ? "gap-6" : "gap-2") }
+}
+```
+
+### NativePartCallbacks
+
+```tsx
+{
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Project sections" className={(state) => (state.orientation === "horizontal" ? "gap-6" : "gap-2")}>
+        <TabsTrigger value="overview" className={(state) => (state.active ? "h-8" : "h-6")}>
+          Overview
+        </TabsTrigger>
+        <TabsTrigger value="settings" className={(state) => (state.active ? "h-8" : "h-6")}>
+          Settings
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className={(state) => (state.hidden ? "min-h-0" : "min-h-16")}>
+        Project overview.
+      </TabsContent>
+      <TabsContent value="settings" className={(state) => (state.hidden ? "min-h-0" : "min-h-16")}>
+        Project settings.
+      </TabsContent>
+    </Tabs>)
+}
+```
+
+### ActivateOnFocus
+
+```tsx
+{
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Project sections" activateOnFocus loopFocus={false}>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">Project overview.</TabsContent>
+      <TabsContent value="settings">Project settings.</TabsContent>
+    </Tabs>)
+}
+```
+
+### CancelledChange
+
+```tsx
+{
+    args: { onValueChange: (_value, details) => details.cancel() }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render(args) {
+        const [value, setValue] = useState("overview");
+        return (<Tabs {...args} value={value} onValueChange={setValue}>
+        <TabsList aria-label="Project sections">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Project overview.</TabsContent>
+        <TabsContent value="settings">Project settings.</TabsContent>
+        <output aria-label="Current section">{value}</output>
+      </Tabs>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <Tabs {...args} dir="rtl">
+        <TabsList aria-label="Project sections">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Project overview.</TabsContent>
+        <TabsContent value="settings">Project settings.</TabsContent>
+      </Tabs>
+    </DirectionProvider>)
+}
+```
+
+### VerticalRightToLeftLine
+
+```tsx
+{
+    args: { orientation: "vertical" },
+    render: (args) => (<DirectionProvider direction="rtl">
+      <Tabs {...args} dir="rtl">
+        <TabsList aria-label="Project sections" variant="line" activateOnFocus>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Project overview.</TabsContent>
+        <TabsContent value="settings">Project settings.</TabsContent>
+      </Tabs>
+    </DirectionProvider>)
+}
+```
+
+### NullSelection
+
+```tsx
+{
+    args: { defaultValue: null }
+}
+```
+
+### MissingInitialValue
+
+```tsx
+{
+    args: { defaultValue: "missing" }
+}
+```
+
+### KeepMounted
+
+```tsx
+{
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Project sections">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" keepMounted>
+        <Input aria-label="Project name"/>
+      </TabsContent>
+      <TabsContent value="settings">Project settings.</TabsContent>
+    </Tabs>)
+}
+```
+
+### SelectedTabRemoved
+
+```tsx
+{
+    render: function Render(args) {
+        const [hasOverview, setHasOverview] = useState(true);
+        return (<Tabs {...args}>
+        <TabsList aria-label="Project sections">
+          {hasOverview && <TabsTrigger value="overview">Overview</TabsTrigger>}
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Project overview.</TabsContent>
+        <TabsContent value="settings">Project settings.</TabsContent>
+        <Button onClick={() => setHasOverview(false)}>Remove overview</Button>
+      </Tabs>);
+    }
+}
+```
+
+### SelectedTabDisabled
+
+```tsx
+{
+    render: function Render(args) {
+        const [isDisabled, setIsDisabled] = useState(false);
+        return (<Tabs {...args}>
+        <TabsList aria-label="Project sections">
+          <TabsTrigger value="overview" disabled={isDisabled}>
+            Overview
+          </TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Project overview.</TabsContent>
+        <TabsContent value="settings">Project settings.</TabsContent>
+        <Button onClick={() => setIsDisabled(true)}>Disable overview</Button>
+      </Tabs>);
+    }
+}
+```
+
+### Icons
+
+```tsx
+{
+    args: { defaultValue: "preview" },
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Example view">
+        <TabsTrigger value="preview">
+          <AppWindowIcon aria-hidden data-icon="inline-start"/>
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          Code
+          <CodeIcon aria-hidden data-icon="inline-end"/>
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview">Rendered example.</TabsContent>
+      <TabsContent value="code">
+        <pre>
+          <code>{'const view = "example";'}</code>
+        </pre>
+      </TabsContent>
+    </Tabs>)
+}
+```
+
+### RightToLeftIcons
+
+```tsx
+{
+    args: { defaultValue: "preview" },
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Example view">
+        <TabsTrigger value="preview">
+          <AppWindowIcon aria-hidden data-icon="inline-start"/>
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          Code
+          <CodeIcon aria-hidden data-icon="inline-end"/>
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview">Rendered example.</TabsContent>
+      <TabsContent value="code">
+        <pre>
+          <code>{'const view = "example";'}</code>
+        </pre>
+      </TabsContent>
+    </Tabs>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### CompactRightToLeftIcons
+
+```tsx
+{
+    args: { ...Icons.args, density: "compact" },
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Example view">
+        <TabsTrigger value="preview">
+          <AppWindowIcon aria-hidden data-icon="inline-start"/>
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          Code
+          <CodeIcon aria-hidden data-icon="inline-end"/>
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview">Rendered example.</TabsContent>
+      <TabsContent value="code">
+        <pre>
+          <code>{'const view = "example";'}</code>
+        </pre>
+      </TabsContent>
+    </Tabs>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### CompactIcons
+
+```tsx
+{
+    args: { ...Icons.args, density: "compact" },
+    render: (args) => (<Tabs {...args}>
+      <TabsList aria-label="Example view">
+        <TabsTrigger value="preview">
+          <AppWindowIcon aria-hidden data-icon="inline-start"/>
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          Code
+          <CodeIcon aria-hidden data-icon="inline-end"/>
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview">Rendered example.</TabsContent>
+      <TabsContent value="code">
+        <pre>
+          <code>{'const view = "example";'}</code>
+        </pre>
+      </TabsContent>
+    </Tabs>)
+}
+```
+
+### WithCards
+
+```tsx
+{
+    render: (args) => (<Tabs {...args} className="w-96">
+      <TabsList aria-label="Project dashboard">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <Card>
+          <CardHeader>
+            <CardTitle>Project overview</CardTitle>
+            <CardDescription>Track your active work.</CardDescription>
+          </CardHeader>
+          <CardContent>Twelve active projects and three pending tasks.</CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="settings">
+        <Card>
+          <CardHeader>
+            <CardTitle>Project settings</CardTitle>
+            <CardDescription>Manage your preferences.</CardDescription>
+          </CardHeader>
+          <CardContent>Configure notifications, security and themes.</CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>)
+}
+```

package/llms/components/navigation/Tree.md

@@ -0,0 +1,28 @@
+# Tree
+
+Story: @alexgorbatchev/shadcn/components/navigation/Tree
+Source: src/components/stories/navigation/Tree.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Tree.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Tree, useTree, syncDataLoaderFeature, hotkeysCoreFeature, selectionFeature } from "@alexgorbatchev/shadcn/tree";
+```
+
+## Default render
+
+```tsx
+() => <Example />
+```
+
+## 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.
+
+### Default
+
+```tsx
+{}
+```

package/llms/components/navigation/WorkspaceSwitcher.md

@@ -0,0 +1,48 @@
+# WorkspaceSwitcher
+
+Story: @alexgorbatchev/shadcn/components/navigation/WorkspaceSwitcher
+Source: src/components/stories/navigation/WorkspaceSwitcher.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/WorkspaceSwitcher.stories.tsx)
+
+## Public imports
+
+```tsx
+import { WorkspaceSwitcher } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+WorkspaceSwitcher
+```
+
+## Default args
+
+```tsx
+{
+    workspaces: [
+        { value: "personal", label: "Personal" },
+        { value: "team", label: "Team" },
+    ],
+    onValueChange: fn(),
+}
+```
+
+## 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.
+
+### Default
+
+```tsx
+{}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```