@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/llms/components/data-display/Item.md

@@ -0,0 +1,502 @@
+# Item
+
+Story: @alexgorbatchev/shadcn/components/data-display/Item
+Source: src/components/stories/data-display/Item.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Item.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, Avatar, AvatarFallback, AvatarGroup, AvatarImage, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { Separator } from "@base-ui/react/separator";
+import { useState, type MouseEvent } from "react";
+import { FileIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Item
+```
+
+## Story controls
+
+```tsx
+{
+    variant: { control: "select", options: ["default", "outline", "muted"] },
+    size: { control: "select", options: ["default", "sm", "xs"] },
+    density: { control: "select", options: ["compact", "comfortable"] },
+}
+```
+
+## 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
+{
+    render: function Render(args) {
+        const [saved, setSaved] = useState(false);
+        return (<ItemGroup aria-label="Documents">
+        <Item {...args} role="listitem">
+          <ItemHeader>Workspace</ItemHeader>
+          <ItemMedia variant="icon">
+            <FileIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Shared notes for the team.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setSaved(true)}>Save notes</Button>
+          </ItemActions>
+          <ItemFooter>
+            <output aria-label="Save status">{saved ? "Saved" : "Unsaved"}</output>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+        <div role="listitem">
+          <Item render={<a href="#archive"/>}>
+            <ItemContent>
+              <ItemTitle>Archive</ItemTitle>
+              <ItemDescription>Browse earlier notes.</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </ItemGroup>);
+    }
+}
+```
+
+### Outline
+
+```tsx
+{
+    render: function Render(args) {
+        const [saved, setSaved] = useState(false);
+        return (<ItemGroup aria-label="Documents">
+        <Item {...args} role="listitem">
+          <ItemHeader>Workspace</ItemHeader>
+          <ItemMedia variant="icon">
+            <FileIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Shared notes for the team.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setSaved(true)}>Save notes</Button>
+          </ItemActions>
+          <ItemFooter>
+            <output aria-label="Save status">{saved ? "Saved" : "Unsaved"}</output>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+        <div role="listitem">
+          <Item render={<a href="#archive"/>}>
+            <ItemContent>
+              <ItemTitle>Archive</ItemTitle>
+              <ItemDescription>Browse earlier notes.</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </ItemGroup>);
+    },
+    args: { variant: "outline" }
+}
+```
+
+### Muted
+
+```tsx
+{
+    render: function Render(args) {
+        const [saved, setSaved] = useState(false);
+        return (<ItemGroup aria-label="Documents">
+        <Item {...args} role="listitem">
+          <ItemHeader>Workspace</ItemHeader>
+          <ItemMedia variant="icon">
+            <FileIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Shared notes for the team.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setSaved(true)}>Save notes</Button>
+          </ItemActions>
+          <ItemFooter>
+            <output aria-label="Save status">{saved ? "Saved" : "Unsaved"}</output>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+        <div role="listitem">
+          <Item render={<a href="#archive"/>}>
+            <ItemContent>
+              <ItemTitle>Archive</ItemTitle>
+              <ItemDescription>Browse earlier notes.</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </ItemGroup>);
+    },
+    args: { variant: "muted", size: "sm" }
+}
+```
+
+### Compact
+
+```tsx
+{
+    render: function Render(args) {
+        const [saved, setSaved] = useState(false);
+        return (<ItemGroup aria-label="Documents">
+        <Item {...args} role="listitem">
+          <ItemHeader>Workspace</ItemHeader>
+          <ItemMedia variant="icon">
+            <FileIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Shared notes for the team.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setSaved(true)}>Save notes</Button>
+          </ItemActions>
+          <ItemFooter>
+            <output aria-label="Save status">{saved ? "Saved" : "Unsaved"}</output>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+        <div role="listitem">
+          <Item render={<a href="#archive"/>}>
+            <ItemContent>
+              <ItemTitle>Archive</ItemTitle>
+              <ItemDescription>Browse earlier notes.</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </ItemGroup>);
+    },
+    args: { density: "compact", size: "xs" }
+}
+```
+
+### NativeSeparatorCallback
+
+```tsx
+{
+    render: () => {
+        const [orientation, setOrientation] = useState<"horizontal" | "vertical">("horizontal");
+        return (<ItemGroup aria-label="Orientation-aware documents" className={orientation === "horizontal" ? "flex-col" : "flex-row"}>
+        <Item role="listitem">
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Adjust the document separator.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setOrientation(orientation === "horizontal" ? "vertical" : "horizontal")}>
+              Change separator orientation
+            </Button>
+          </ItemActions>
+        </Item>
+        <ItemSeparator orientation={orientation} className={separatorClassName}/>
+        <Item role="listitem">
+          <ItemContent>
+            <ItemTitle>Archive</ItemTitle>
+            <ItemDescription>Earlier project notes.</ItemDescription>
+          </ItemContent>
+        </Item>
+      </ItemGroup>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: function Render(args) {
+        const [saved, setSaved] = useState(false);
+        return (<ItemGroup aria-label="Documents">
+        <Item {...args} role="listitem">
+          <ItemHeader>Workspace</ItemHeader>
+          <ItemMedia variant="icon">
+            <FileIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Project notes</ItemTitle>
+            <ItemDescription>Shared notes for the team.</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button onClick={() => setSaved(true)}>Save notes</Button>
+          </ItemActions>
+          <ItemFooter>
+            <output aria-label="Save status">{saved ? "Saved" : "Unsaved"}</output>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+        <div role="listitem">
+          <Item render={<a href="#archive"/>}>
+            <ItemContent>
+              <ItemTitle>Archive</ItemTitle>
+              <ItemDescription>Browse earlier notes.</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </ItemGroup>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### WithAvatar
+
+```tsx
+{
+    render: (args) => (<Item {...args} variant="outline">
+      <ItemMedia>
+        <Avatar>
+          <AvatarImage src={fixture_avatarImage} alt="Alex"/>
+          <AvatarFallback>AG</AvatarFallback>
+        </Avatar>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Alex</ItemTitle>
+        <ItemDescription>Project owner</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button variant="outline" onClick={onOpenProfile}>
+          Open profile
+        </Button>
+      </ItemActions>
+    </Item>)
+}
+```
+
+### WithAvatarGroup
+
+```tsx
+{
+    render: function Render(args) {
+        const [invited, setInvited] = useState(false);
+        return (<Item {...args} variant="outline" className="max-w-lg">
+        <ItemMedia>
+          <AvatarGroup aria-label="Team members">
+            {["Alex", "Jordan", "Sam"].map((name) => (<Avatar key={name}>
+                <AvatarImage src={fixture_avatarImage} alt={name}/>
+                <AvatarFallback>{name.slice(0, 1)}</AvatarFallback>
+              </Avatar>))}
+          </AvatarGroup>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project team</ItemTitle>
+          <ItemDescription>Invite your team to collaborate.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm" onClick={() => setInvited(true)}>
+            Invite team
+          </Button>
+        </ItemActions>
+        <ItemFooter>
+          <output aria-label="Invitation status">{invited ? "Invited" : "Pending"}</output>
+        </ItemFooter>
+      </Item>);
+    }
+}
+```
+
+### RightToLeftAvatarGroup
+
+```tsx
+{
+    render: function Render(args) {
+        const [invited, setInvited] = useState(false);
+        return (<Item {...args} variant="outline" className="max-w-lg">
+        <ItemMedia>
+          <AvatarGroup aria-label="Team members">
+            {["Alex", "Jordan", "Sam"].map((name) => (<Avatar key={name}>
+                <AvatarImage src={fixture_avatarImage} alt={name}/>
+                <AvatarFallback>{name.slice(0, 1)}</AvatarFallback>
+              </Avatar>))}
+          </AvatarGroup>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project team</ItemTitle>
+          <ItemDescription>Invite your team to collaborate.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm" onClick={() => setInvited(true)}>
+            Invite team
+          </Button>
+        </ItemActions>
+        <ItemFooter>
+          <output aria-label="Invitation status">{invited ? "Invited" : "Pending"}</output>
+        </ItemFooter>
+      </Item>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### WithImage
+
+```tsx
+{
+    render: (args) => (<Item {...args} variant="outline">
+      <ItemMedia variant="image">
+        <img src={fixture_avatarImage} alt="Project preview"/>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Project preview</ItemTitle>
+        <ItemDescription>Latest project snapshot.</ItemDescription>
+      </ItemContent>
+    </Item>)
+}
+```
+
+### SmallImage
+
+```tsx
+{
+    render: (args) => (<Item {...args} variant="outline">
+      <ItemMedia variant="image">
+        <img src={fixture_avatarImage} alt="Project preview"/>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Project preview</ItemTitle>
+        <ItemDescription>Latest project snapshot.</ItemDescription>
+      </ItemContent>
+    </Item>),
+    args: { size: "sm" }
+}
+```
+
+### ExtraSmallImage
+
+```tsx
+{
+    render: (args) => (<Item {...args} variant="outline">
+      <ItemMedia variant="image">
+        <img src={fixture_avatarImage} alt="Project preview"/>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Project preview</ItemTitle>
+        <ItemDescription>Latest project snapshot.</ItemDescription>
+      </ItemContent>
+    </Item>),
+    args: { size: "xs" }
+}
+```
+
+### Header
+
+```tsx
+{
+    render: () => (<ItemGroup aria-label="Project stages" className="grid grid-cols-3">
+      <Item variant="outline" role="listitem">
+        <ItemHeader>
+          <img src={fixture_avatarImage} alt="Build preview" className="aspect-square w-full object-cover"/>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Build</ItemTitle>
+          <ItemDescription>Create the project.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" role="listitem">
+        <ItemHeader>
+          <img src={fixture_avatarImage} alt="Ship preview" className="aspect-square w-full object-cover"/>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Ship</ItemTitle>
+          <ItemDescription>Release the project.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" role="listitem">
+        <ItemHeader>
+          <img src={fixture_avatarImage} alt="Observe preview" className="aspect-square w-full object-cover"/>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Observe</ItemTitle>
+          <ItemDescription>Monitor the project.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>)
+}
+```
+
+### NativeLink
+
+```tsx
+{
+    args: { ref: fn(), onClick: fn((event: MouseEvent<HTMLDivElement>) => event.preventDefault()) },
+    render: (args) => (<Item {...args} render={<a href="#project-notes" ref={renderedLinkRef} onClick={renderedLinkClick}/>} variant="outline">
+      <ItemContent>
+        <ItemTitle>Project notes</ItemTitle>
+        <ItemDescription>Browse shared notes.</ItemDescription>
+      </ItemContent>
+    </Item>)
+}
+```
+
+### InDropdown
+
+```tsx
+{
+    render: function Render() {
+        const [owner, setOwner] = useState("");
+        return (<div>
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>Choose owner</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={() => setOwner("Alex")}>
+                <Item size="xs">
+                  <ItemMedia>
+                    <Avatar size="sm">
+                      <AvatarFallback>AG</AvatarFallback>
+                    </Avatar>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle>Alex</ItemTitle>
+                    <ItemDescription>Project owner</ItemDescription>
+                  </ItemContent>
+                </Item>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setOwner("Jordan")}>
+                <Item size="xs">
+                  <ItemMedia>
+                    <Avatar size="sm">
+                      <AvatarFallback>JD</AvatarFallback>
+                    </Avatar>
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle>Jordan</ItemTitle>
+                    <ItemDescription>Project editor</ItemDescription>
+                  </ItemContent>
+                </Item>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Selected owner">{owner}</output>
+      </div>);
+    }
+}
+```

package/llms/components/data-display/JsonViewer.md

@@ -0,0 +1,38 @@
+# JsonViewer
+
+Story: @alexgorbatchev/shadcn/components/data-display/JsonViewer
+Source: src/components/stories/data-display/JsonViewer.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/JsonViewer.stories.tsx)
+
+## Public imports
+
+```tsx
+import { JsonViewer } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+JsonViewer
+```
+
+## 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.
+
+### Object
+
+```tsx
+{
+    args: { value: { track: "First light", playlists: ["Warm up"] } }
+}
+```
+
+### Empty
+
+```tsx
+{
+    args: { value: undefined, label: "Result", rows: 3 }
+}
+```

package/llms/components/data-display/Kbd.md

@@ -0,0 +1,99 @@
+# Kbd
+
+Story: @alexgorbatchev/shadcn/components/data-display/Kbd
+Source: src/components/stories/data-display/Kbd.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Kbd.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Kbd, KbdGroup, Button, Tooltip, TooltipProvider, TooltipContent, TooltipTrigger, InputGroup, InputGroupAddon, InputGroupInput } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Kbd
+```
+
+## Default args
+
+```tsx
+{ children: "Esc" }
+```
+
+## 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.
+
+### Single
+
+```tsx
+{}
+```
+
+### Shortcut
+
+```tsx
+{
+    render: () => (<KbdGroup aria-label="Command K">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>)
+}
+```
+
+### InButton
+
+```tsx
+{
+    render: () => (<Button variant="outline" onClick={onAccept}>
+      Accept <Kbd data-icon="inline-end">⏎</Kbd>
+    </Button>)
+}
+```
+
+### InTooltip
+
+```tsx
+{
+    render: () => (<TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline"/>} aria-label="Save changes">
+          Save
+        </TooltipTrigger>
+        <TooltipContent>
+          Save changes <Kbd>S</Kbd>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>)
+}
+```
+
+### InInputGroup
+
+```tsx
+{
+    render: () => (<InputGroup>
+      <InputGroupInput aria-label="Search"/>
+      <InputGroupAddon align="inline-end" aria-label="Search shortcut">
+        <KbdGroup>
+          <Kbd>⌘</Kbd>
+          <Kbd>K</Kbd>
+        </KbdGroup>
+      </InputGroupAddon>
+    </InputGroup>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: () => (<KbdGroup dir="rtl" aria-label="Command K">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>)
+}
+```