@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/llms/components/actions/ButtonGroup.md

@@ -0,0 +1,278 @@
+# ButtonGroup
+
+Story: @alexgorbatchev/shadcn/components/actions/ButtonGroup
+Source: src/components/stories/actions/ButtonGroup.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/actions/ButtonGroup.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Button, DirectionProvider, Field, FieldGroup, Input, Label, InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem, Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId, useState } from "react";
+import type { Separator } from "@base-ui/react/separator";
+```
+
+## Default component
+
+```tsx
+ButtonGroup
+```
+
+## Story controls
+
+```tsx
+{ orientation: { control: "select", options: ["horizontal", "vertical"] } }
+```
+
+## Default args
+
+```tsx
+{ "aria-label": "Document actions" }
+```
+
+## Default render
+
+```tsx
+(args) => (<ButtonGroup {...args}>
+      <ButtonGroupText>Draft</ButtonGroupText>
+      <Button variant="outline" onClick={onSave}>
+        Save
+      </Button>
+      <ButtonGroupSeparator />
+      <Button variant="outline">More</Button>
+    </ButtonGroup>)
+```
+
+## 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" }
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### NativeSeparatorCallback
+
+```tsx
+{
+    render: (args) => {
+        const [orientation, setOrientation] = useState<"horizontal" | "vertical">("vertical");
+        return (<ButtonGroup {...args} orientation={orientation === "vertical" ? "horizontal" : "vertical"}>
+        <Button onClick={() => setOrientation(orientation === "vertical" ? "horizontal" : "vertical")}>
+          Change separator orientation
+        </Button>
+        <ButtonGroupSeparator orientation={orientation} className={separatorClassName} ref={separatorRef}/>
+        <Button>Save</Button>
+      </ButtonGroup>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => {
+        const [direction, setDirection] = useState<"ltr" | "rtl">("rtl");
+        return (<DirectionProvider direction={direction}>
+        <ButtonGroup {...args} dir={direction}>
+          <Button variant="outline" onClick={() => setDirection(direction === "rtl" ? "ltr" : "rtl")}>
+            Change direction
+          </Button>
+          <Button variant="outline">Save</Button>
+        </ButtonGroup>
+      </DirectionProvider>);
+    }
+}
+```
+
+### LabeledInput
+
+```tsx
+{
+    render: (args) => {
+        const id = useId();
+        const [submitted, setSubmitted] = useState("");
+        return (<form aria-label="Project search" className="w-80" onSubmit={(event) => {
+                event.preventDefault();
+                setSubmitted(String(new FormData(event.currentTarget).get("query")));
+            }}>
+        <FieldGroup>
+          <Field>
+            <ButtonGroup {...args} className="w-full">
+              <ButtonGroupText render={<Label htmlFor={id}/>}>Search</ButtonGroupText>
+              <Input id={id} name="query" required/>
+              <Button variant="outline" type="submit">
+                Find
+              </Button>
+            </ButtonGroup>
+          </Field>
+          <output aria-label="Search result">{submitted}</output>
+        </FieldGroup>
+      </form>);
+    }
+}
+```
+
+### NestedInputGroup
+
+```tsx
+{
+    render: (args) => {
+        const [message, setMessage] = useState("");
+        const [sent, setSent] = useState("");
+        return (<FieldGroup>
+        <Field>
+          <ButtonGroup {...args} aria-label="Message composer">
+            <ButtonGroup aria-label="Message actions">
+              <Button variant="outline" onClick={() => setMessage("")}>
+                Clear
+              </Button>
+            </ButtonGroup>
+            <ButtonGroup aria-label="Message input">
+              <InputGroup aria-label="Message entry">
+                <InputGroupInput aria-label="Message" value={message} onValueChange={setMessage}/>
+                <InputGroupAddon align="inline-end" aria-label="Send action">
+                  <InputGroupButton disabled={!message} onClick={() => setSent(message)}>
+                    Send
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+            </ButtonGroup>
+          </ButtonGroup>
+        </Field>
+        <output aria-label="Sent message">{sent}</output>
+      </FieldGroup>);
+    }
+}
+```
+
+### SmallButtons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-col items-start gap-4">
+      <ButtonGroup {...args}>
+        <Button variant="outline" size="sm" onClick={onSave}>
+          Save
+        </Button>
+        <Button variant="outline" size="sm">
+          Archive
+        </Button>
+      </ButtonGroup>
+      <Button variant="outline">Default size</Button>
+    </div>)
+}
+```
+
+### LargeButtons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-col items-start gap-4">
+      <ButtonGroup {...args}>
+        <Button variant="outline" size="lg" onClick={onSave}>
+          Save
+        </Button>
+        <Button variant="outline" size="lg">
+          Archive
+        </Button>
+      </ButtonGroup>
+      <Button variant="outline">Default size</Button>
+    </div>)
+}
+```
+
+### SplitDropdown
+
+```tsx
+{
+    render: (args) => {
+        const [result, setResult] = useState("Draft");
+        return (<div className="flex flex-col items-start gap-4">
+        <ButtonGroup {...args}>
+          <Button onClick={() => setResult("Saved")}>Save</Button>
+          <ButtonGroupSeparator />
+          <DropdownMenu>
+            <DropdownMenuTrigger render={<Button />}>Save options</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => setResult("Saved as copy")}>Save a copy</DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+        <output aria-label="Save result">{result}</output>
+      </div>);
+    }
+}
+```
+
+### WithSelect
+
+```tsx
+{
+    render: (args) => (<ButtonGroup {...args}>
+      <Select items={fixture_runtimes} defaultValue="bun">
+        <SelectTrigger aria-label="Runtime">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent alignItemWithTrigger={false}>
+          <SelectGroup>
+            {fixture_runtimes.map((runtime) => (<SelectItem key={runtime.label} value={runtime.value}>
+                {runtime.label}
+              </SelectItem>))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Button variant="outline" onClick={onSave}>
+        Run
+      </Button>
+    </ButtonGroup>)
+}
+```
+
+### WithPopover
+
+```tsx
+{
+    render: (args) => (<ButtonGroup {...args}>
+      <Button variant="outline" onClick={onSave}>
+        Run
+      </Button>
+      <Popover>
+        <PopoverTrigger render={<Button variant="outline"/>}>Run details</PopoverTrigger>
+        <PopoverContent>
+          <PopoverHeader>
+            <PopoverTitle>Local workspace</PopoverTitle>
+            <PopoverDescription>Run the project using your selected runtime.</PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </Popover>
+    </ButtonGroup>)
+}
+```

package/llms/components/actions/ButtonLink.md

@@ -0,0 +1,189 @@
+# ButtonLink
+
+Story: @alexgorbatchev/shadcn/components/actions/ButtonLink
+Source: src/components/stories/actions/ButtonLink.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/actions/ButtonLink.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, ButtonLink } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, MouseEvent, ReactElement } from "react";
+import { ArrowRightIcon, BookOpenIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+ButtonLink
+```
+
+## Story controls
+
+```tsx
+{
+    variant: { control: "select", options: VARIANTS },
+    size: { control: "select", options: ["default", "content", ...TEXT_SIZES, ...ICON_SIZES] },
+    density: { control: "select", options: ["compact", "comfortable"] },
+}
+```
+
+## Default args
+
+```tsx
+{
+    href: "#docs",
+    children: "Docs",
+    onClick: fn((event: MouseEvent<HTMLAnchorElement>) => event.preventDefault()),
+}
+```
+
+## 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
+{}
+```
+
+### Outline
+
+```tsx
+{
+    args: { variant: "outline" }
+}
+```
+
+### Variants
+
+```tsx
+{
+    render: (args) => (<div className="grid grid-cols-2 gap-4">
+      {VARIANTS.map((variant) => (<div key={variant} className="contents">
+          <ButtonLink {...args} variant={variant}>{`${variant} link`}</ButtonLink>
+          <Button variant={variant}>{`${variant} button`}</Button>
+        </div>))}
+    </div>)
+}
+```
+
+### Sizes
+
+```tsx
+{
+    render: (args) => (<div className="grid grid-cols-2 items-center gap-4">
+      {TEXT_SIZES.map((size) => (<div key={size} className="contents">
+          <ButtonLink {...args} size={size}>{`${size} link`}</ButtonLink>
+          <Button size={size}>{`${size} button`}</Button>
+        </div>))}
+      {ICON_SIZES.map((size) => (<div key={size} className="contents">
+          <ButtonLink {...args} size={size} aria-label={`${size} link`}>
+            <ArrowRightIcon />
+          </ButtonLink>
+          <Button size={size} aria-label={`${size} button`}>
+            <ArrowRightIcon />
+          </Button>
+        </div>))}
+    </div>)
+}
+```
+
+### CompactDensity
+
+```tsx
+{
+    render: (args) => (<div className="flex items-center gap-4">
+      <ButtonLink {...args} density="compact">
+        Compact link
+      </ButtonLink>
+      <Button density="compact">Compact button</Button>
+      <ButtonLink {...args} density="comfortable">
+        Comfortable link
+      </ButtonLink>
+    </div>)
+}
+```
+
+### WithIcons
+
+```tsx
+{
+    render: (args) => (<div className="grid grid-cols-2 gap-4">
+      <ButtonLink {...args} aria-label="Leading link">
+        <BookOpenIcon data-icon="inline-start" data-testid="ButtonLink--leading-icon"/>
+        <span>Docs</span>
+      </ButtonLink>
+      <Button aria-label="Leading button">
+        <BookOpenIcon data-icon="inline-start"/>
+        <span>Docs</span>
+      </Button>
+      <ButtonLink {...args} aria-label="Trailing link">
+        <span>Next</span>
+        <ArrowRightIcon data-icon="inline-end" data-testid="ButtonLink--trailing-icon"/>
+      </ButtonLink>
+      <Button aria-label="Trailing button">
+        <span>Next</span>
+        <ArrowRightIcon data-icon="inline-end"/>
+      </Button>
+    </div>)
+}
+```
+
+### RouterLink
+
+```tsx
+{
+    args: { variant: "outline", ref: fn() },
+    render: ({ href: _href, ...args }) => (<div className="flex items-center gap-4">
+      <ButtonLink {...args} render={<AppLink to="/staging" onClick={routerNavigate}/>}>
+        Open Staging
+      </ButtonLink>
+      <Button variant="outline">Outline button</Button>
+    </div>)
+}
+```
+
+### RenderCallback
+
+```tsx
+{
+    args: { density: "compact" },
+    render: (args) => (<ButtonLink {...args} render={(props, state) => <a {...props} title={`${state.slot} ${state.density}`}/>}>
+      Docs
+    </ButtonLink>)
+}
+```
+
+### TruncatedLabel
+
+```tsx
+{
+    args: { truncate: true, children: "A very long playlist title that must fit its container" },
+    decorators: [
+        (Story) => (<div className="w-36">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### FullWidthStartAligned
+
+```tsx
+{
+    args: { fullWidth: true, align: "start", variant: "outline", children: "Open settings" },
+    decorators: [
+        (Story) => (<section aria-label="Link area" className="w-96">
+        <Story />
+      </section>),
+    ]
+}
+```

package/llms/components/actions/Toggle.md

@@ -0,0 +1,191 @@
+# Toggle
+
+Story: @alexgorbatchev/shadcn/components/actions/Toggle
+Source: src/components/stories/actions/Toggle.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/actions/Toggle.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Toggle } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { BookmarkIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Toggle
+```
+
+## Story controls
+
+```tsx
+{
+    variant: { control: "select", options: ["default", "outline"] },
+    size: { control: "select", options: ["default", "sm", "lg"] },
+    density: { control: "select", options: ["compact", "comfortable"] },
+}
+```
+
+## Default args
+
+```tsx
+{ children: "Bold", "aria-label": "Bold", onPressedChange: 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
+{}
+```
+
+### Outline
+
+```tsx
+{
+    args: { variant: "outline" }
+}
+```
+
+### Small
+
+```tsx
+{
+    args: { size: "sm" }
+}
+```
+
+### Large
+
+```tsx
+{
+    args: { size: "lg" }
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### Pressed
+
+```tsx
+{
+    args: { defaultPressed: true }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### StateCallback
+
+```tsx
+{
+    args: { className: fn(() => "font-normal") }
+}
+```
+
+### IconOnly
+
+```tsx
+{
+    args: { children: <BookmarkIcon aria-hidden="true"/>, "aria-label": "Bookmark" }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<div className="flex gap-4">
+      <Toggle {...args} dir="ltr" aria-label="Bookmark LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Bookmark RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+    </div>)
+}
+```
+
+### SmallRightToLeft
+
+```tsx
+{
+    render: (args) => (<div className="flex gap-4">
+      <Toggle {...args} dir="ltr" aria-label="Bookmark LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Bookmark RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+    </div>),
+    args: { size: "sm" }
+}
+```
+
+### LargeRightToLeft
+
+```tsx
+{
+    render: (args) => (<div className="flex gap-4">
+      <Toggle {...args} dir="ltr" aria-label="Bookmark LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Bookmark RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Bookmark</span>
+      </Toggle>
+      <Toggle {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+      <Toggle {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Bookmark</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Toggle>
+    </div>),
+    args: { size: "lg" }
+}
+```