@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/layout/Card.md

@@ -0,0 +1,391 @@
+# Card
+
+Story: @alexgorbatchev/shadcn/components/layout/Card
+Source: src/components/stories/layout/Card.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Card.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, Button, Badge, Input, Field, FieldGroup, FieldLabel } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { CSSProperties } from "react";
+import { useId, useState } from "react";
+```
+
+## Default component
+
+```tsx
+Card
+```
+
+## Story controls
+
+```tsx
+{
+    size: { control: "select", options: ["default", "sm"] },
+    variant: { control: "select", options: ["default", "hero"] },
+}
+```
+
+## Default args
+
+```tsx
+{ ref: fn(), onClick: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const titleId = useId();
+    const [isOpen, setIsOpen] = useState(false);
+    return (<Card role="region" aria-labelledby={titleId} {...args}>
+        <CardHeader ref={headerRef} aria-label="Project header">
+          <CardTitle ref={titleRef} id={titleId}>
+            <h2>Project settings</h2>
+          </CardTitle>
+          <CardDescription ref={descriptionRef}>Configure your workspace.</CardDescription>
+          <CardAction ref={actionRef} aria-label="Project state">
+            <Badge variant="success">Ready</Badge>
+          </CardAction>
+        </CardHeader>
+        <CardContent ref={contentRef} aria-label="Project content">
+          {isOpen ? "Project opened" : "Local tools, one consistent interface."}
+        </CardContent>
+        <CardFooter ref={footerRef} aria-label="Project actions">
+          <Button onClick={() => setIsOpen(true)} disabled={isOpen}>
+            Open project
+          </Button>
+        </CardFooter>
+      </Card>);
+}
+```
+
+## 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
+{}
+```
+
+### Small
+
+```tsx
+{
+    args: { size: "sm" }
+}
+```
+
+### Hero
+
+```tsx
+{
+    args: { variant: "hero", onPointerMove: fn(), onPointerLeave: fn() }
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### CompactSmall
+
+```tsx
+{
+    args: { density: "compact", size: "sm" }
+}
+```
+
+### SizeComparison
+
+```tsx
+{
+    render: () => (<div className="flex items-start gap-4">
+      <Card aria-label="Default spacing" role="region" density="comfortable">
+        <CardHeader>
+          <CardTitle>Default spacing</CardTitle>
+          <CardDescription>Comfortable default</CardDescription>
+        </CardHeader>
+        <CardContent>Project ready</CardContent>
+        <CardFooter>Default footer</CardFooter>
+      </Card>
+      <Card aria-label="Small spacing" role="region" size="sm" density="comfortable">
+        <CardHeader>
+          <CardTitle>Small spacing</CardTitle>
+          <CardDescription>Comfortable small</CardDescription>
+        </CardHeader>
+        <CardContent>Project ready</CardContent>
+        <CardFooter>Small footer</CardFooter>
+      </Card>
+      <Card aria-label="Compact spacing" role="region" density="compact">
+        <CardHeader>
+          <CardTitle>Compact spacing</CardTitle>
+          <CardDescription>Compact default</CardDescription>
+        </CardHeader>
+        <CardContent>Project ready</CardContent>
+        <CardFooter>Compact footer</CardFooter>
+      </Card>
+    </div>)
+}
+```
+
+### WithImage
+
+```tsx
+{
+    render: (args) => (<Card role="region" aria-label="Profile" {...args}>
+      <img src={fixture_avatarImage} alt="Alex portrait" className="h-36 w-full object-cover"/>
+      <CardHeader>
+        <CardTitle>Alex</CardTitle>
+        <CardDescription>Project maintainer</CardDescription>
+      </CardHeader>
+      <CardContent>Maintaining accessible components.</CardContent>
+      <CardFooter>Available for collaboration</CardFooter>
+    </Card>)
+}
+```
+
+### WithoutAction
+
+```tsx
+{
+    render: (args) => (<Card {...args} role="region" aria-label="Read-only project">
+      <CardHeader>
+        <CardTitle>Read-only project</CardTitle>
+        <CardDescription>No pending actions.</CardDescription>
+      </CardHeader>
+      <CardContent>Project ready</CardContent>
+      <CardFooter>Last updated today</CardFooter>
+    </Card>)
+}
+```
+
+### WithoutFooter
+
+```tsx
+{
+    render: (args) => (<Card {...args} role="region" aria-label="Project note">
+      <CardHeader>
+        <CardTitle>Project note</CardTitle>
+        <CardDescription>No actions required.</CardDescription>
+      </CardHeader>
+      <CardContent>All changes saved.</CardContent>
+    </Card>)
+}
+```
+
+### CustomSpacing
+
+```tsx
+{
+    render: (args) => {
+        const [spacing, setSpacing] = useState(16);
+        const style: CardSpacingStyle = { "--card-spacing": `${spacing}px` };
+        return (<Card {...args} style={style} role="region" aria-label="Adjustable spacing">
+        <CardHeader>
+          <CardTitle>Adjustable spacing</CardTitle>
+          <CardDescription>Change the inset of every section.</CardDescription>
+        </CardHeader>
+        <CardContent>Project ready</CardContent>
+        <CardFooter>
+          <Button onClick={() => setSpacing(32)}>Increase spacing</Button>
+        </CardFooter>
+      </Card>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### LoginForm
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [email, setEmail] = useState("");
+        return (<Card {...args} role="region" aria-label="Account sign in" className="w-80">
+        <CardHeader>
+          <CardTitle>
+            <h2>Sign in</h2>
+          </CardTitle>
+          <CardDescription>Enter your account details.</CardDescription>
+          <CardAction>
+            <Badge variant="secondary">Account</Badge>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <form id={`${id}-login`} aria-label="Sign in details" onSubmit={(event) => {
+                event.preventDefault();
+                setEmail(String(new FormData(event.currentTarget).get("email")));
+            }}>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor={`${id}-email`}>Email</FieldLabel>
+                <Input id={`${id}-email`} name="email" type="email" autoComplete="email" required/>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor={`${id}-password`}>Password</FieldLabel>
+                <Input id={`${id}-password`} name="password" type="password" autoComplete="current-password" required/>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col gap-2">
+          <Button type="submit" form={`${id}-login`} className="w-full">
+            Submit account details
+          </Button>
+          <output aria-label="Submitted email">{email}</output>
+        </CardFooter>
+      </Card>);
+    }
+}
+```
+
+### RightToLeftLoginForm
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [email, setEmail] = useState("");
+        return (<Card {...args} role="region" aria-label="Account sign in" className="w-80">
+        <CardHeader>
+          <CardTitle>
+            <h2>Sign in</h2>
+          </CardTitle>
+          <CardDescription>Enter your account details.</CardDescription>
+          <CardAction>
+            <Badge variant="secondary">Account</Badge>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <form id={`${id}-login`} aria-label="Sign in details" onSubmit={(event) => {
+                event.preventDefault();
+                setEmail(String(new FormData(event.currentTarget).get("email")));
+            }}>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor={`${id}-email`}>Email</FieldLabel>
+                <Input id={`${id}-email`} name="email" type="email" autoComplete="email" required/>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor={`${id}-password`}>Password</FieldLabel>
+                <Input id={`${id}-password`} name="password" type="password" autoComplete="current-password" required/>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col gap-2">
+          <Button type="submit" form={`${id}-login`} className="w-full">
+            Submit account details
+          </Button>
+          <output aria-label="Submitted email">{email}</output>
+        </CardFooter>
+      </Card>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### EdgeToEdge
+
+```tsx
+{
+    render: function Render(args) {
+        const [spacing, setSpacing] = useState(16);
+        const [choice, setChoice] = useState("");
+        const style: CardSpacingStyle = { "--card-spacing": `${spacing}px` };
+        return (<Card {...args} style={style} role="region" aria-label="Workspace terms" className="w-80">
+        <CardHeader>
+          <CardTitle>Workspace terms</CardTitle>
+          <CardDescription>Review the agreement.</CardDescription>
+        </CardHeader>
+        <CardContent className="-mb-(--card-spacing)">
+          <section aria-label="Agreement text" tabIndex={0} className="-mx-(--card-spacing) flex max-h-32 flex-col gap-4 overflow-y-auto border-t bg-muted/50 px-(--card-spacing) py-4">
+            {Array.from({ length: 8 }, (_, index) => (<p key={index}>Term {index + 1}: Keep project details available to your team.</p>))}
+          </section>
+        </CardContent>
+        <CardFooter className="flex-col items-start gap-2">
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" onClick={() => setChoice("Declined")}>
+              Decline
+            </Button>
+            <Button onClick={() => setChoice("Accepted")}>Accept</Button>
+            <Button variant="ghost" onClick={() => setSpacing(32)}>
+              Increase inset
+            </Button>
+          </div>
+          <output aria-label="Agreement choice">{choice}</output>
+        </CardFooter>
+      </Card>);
+    }
+}
+```
+
+### RightToLeftEdgeToEdge
+
+```tsx
+{
+    render: function Render(args) {
+        const [spacing, setSpacing] = useState(16);
+        const [choice, setChoice] = useState("");
+        const style: CardSpacingStyle = { "--card-spacing": `${spacing}px` };
+        return (<Card {...args} style={style} role="region" aria-label="Workspace terms" className="w-80">
+        <CardHeader>
+          <CardTitle>Workspace terms</CardTitle>
+          <CardDescription>Review the agreement.</CardDescription>
+        </CardHeader>
+        <CardContent className="-mb-(--card-spacing)">
+          <section aria-label="Agreement text" tabIndex={0} className="-mx-(--card-spacing) flex max-h-32 flex-col gap-4 overflow-y-auto border-t bg-muted/50 px-(--card-spacing) py-4">
+            {Array.from({ length: 8 }, (_, index) => (<p key={index}>Term {index + 1}: Keep project details available to your team.</p>))}
+          </section>
+        </CardContent>
+        <CardFooter className="flex-col items-start gap-2">
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" onClick={() => setChoice("Declined")}>
+              Decline
+            </Button>
+            <Button onClick={() => setChoice("Accepted")}>Accept</Button>
+            <Button variant="ghost" onClick={() => setSpacing(32)}>
+              Increase inset
+            </Button>
+          </div>
+          <output aria-label="Agreement choice">{choice}</output>
+        </CardFooter>
+      </Card>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```

package/llms/components/layout/Collapsible.md

@@ -0,0 +1,231 @@
+# Collapsible
+
+Story: @alexgorbatchev/shadcn/components/layout/Collapsible
+Source: src/components/stories/layout/Collapsible.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Collapsible.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Field, FieldGroup, FieldLabel, Input } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId, useState } from "react";
+import { ChevronDownIcon, FolderIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Collapsible
+```
+
+## Default args
+
+```tsx
+{ onOpenChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<Collapsible {...args}>
+      <CollapsibleTrigger render={<Button variant="outline"/>}>Shipping details</CollapsibleTrigger>
+      <CollapsibleContent>Delivery takes 3–5 business days.</CollapsibleContent>
+    </Collapsible>)
+```
+
+## 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.
+
+### Closed
+
+```tsx
+{}
+```
+
+### Open
+
+```tsx
+{
+    args: { defaultOpen: true },
+    beforeEach: () => {
+        const warnings = spyOn(console, "warn");
+        return () => warnings.mockRestore();
+    }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Basic
+
+```tsx
+{
+    render: (args) => (<Card className="w-80">
+      <CardHeader>
+        <CardTitle>Product</CardTitle>
+        <CardDescription>Inspect the product details.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Collapsible {...args}>
+          <CollapsibleTrigger render={<Button variant="outline" className="w-full justify-between"/>}>
+            <span>Product details</span>
+            <ChevronDownIcon aria-hidden="true" data-icon="inline-end"/>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="flex flex-col items-start gap-2 py-2">
+            <p>Delivery includes installation.</p>
+            <Button variant="outline">Learn more</Button>
+          </CollapsibleContent>
+        </Collapsible>
+      </CardContent>
+    </Card>)
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render(args) {
+        const [isOpen, setIsOpen] = useState(false);
+        return (<div className="flex flex-col gap-2">
+        <Button onClick={() => setIsOpen(!isOpen)}>Change disclosure state</Button>
+        <Collapsible {...args} open={isOpen} onOpenChange={setIsOpen}>
+          <CollapsibleTrigger render={<Button variant="outline"/>}>Shipping details</CollapsibleTrigger>
+          <CollapsibleContent>Delivery takes 3–5 business days.</CollapsibleContent>
+        </Collapsible>
+        <output aria-label="Disclosure state">{String(isOpen)}</output>
+      </div>);
+    }
+}
+```
+
+### Settings
+
+```tsx
+{
+    render: function Render() {
+        const id = useId();
+        const [isOpen, setIsOpen] = useState(false);
+        return (<Card className="w-80">
+        <CardHeader>
+          <CardTitle>Corner radius</CardTitle>
+          <CardDescription>Adjust individual corners.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Collapsible open={isOpen} onOpenChange={setIsOpen} className="flex items-start gap-2">
+            <FieldGroup className="grid w-full grid-cols-2 gap-2">
+              <Field>
+                <FieldLabel htmlFor={`${id}-top-left`}>Top left</FieldLabel>
+                <Input id={`${id}-top-left`} type="number" defaultValue={0}/>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor={`${id}-top-right`}>Top right</FieldLabel>
+                <Input id={`${id}-top-right`} type="number" defaultValue={0}/>
+              </Field>
+              <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
+                <Field>
+                  <FieldLabel htmlFor={`${id}-bottom-left`}>Bottom left</FieldLabel>
+                  <Input id={`${id}-bottom-left`} type="number" defaultValue={0}/>
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor={`${id}-bottom-right`}>Bottom right</FieldLabel>
+                  <Input id={`${id}-bottom-right`} type="number" defaultValue={0}/>
+                </Field>
+              </CollapsibleContent>
+            </FieldGroup>
+            <CollapsibleTrigger render={<Button variant="outline" size="icon"/>} aria-label="Toggle individual corners">
+              <ChevronDownIcon aria-hidden="true"/>
+            </CollapsibleTrigger>
+          </Collapsible>
+        </CardContent>
+      </Card>);
+    }
+}
+```
+
+### FileTree
+
+```tsx
+{
+    render: function Render() {
+        const [selected, setSelected] = useState("");
+        return (<div className="flex w-80 flex-col gap-2">
+        <ul aria-label="Project files">
+          <li>
+            <Collapsible>
+              <CollapsibleTrigger render={<Button variant="outline"/>}>
+                <FolderIcon aria-hidden="true" data-icon="inline-start"/>
+                components
+              </CollapsibleTrigger>
+              <CollapsibleContent className="ms-4">
+                <ul>
+                  <li>
+                    <Collapsible>
+                      <CollapsibleTrigger render={<Button variant="outline"/>}>
+                        <FolderIcon aria-hidden="true" data-icon="inline-start"/>
+                        ui
+                      </CollapsibleTrigger>
+                      <CollapsibleContent className="ms-4">
+                        <ul>
+                          <li>
+                            <Button variant="ghost" onClick={() => setSelected("Button.tsx")}>
+                              Button.tsx
+                            </Button>
+                          </li>
+                        </ul>
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </li>
+                </ul>
+              </CollapsibleContent>
+            </Collapsible>
+          </li>
+        </ul>
+        <output aria-label="Selected file">{selected}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<Card className="w-80">
+      <CardHeader>
+        <CardTitle>Product</CardTitle>
+        <CardDescription>Inspect the product details.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Collapsible {...args}>
+          <CollapsibleTrigger render={<Button variant="outline" className="w-full justify-between"/>}>
+            <span>Product details</span>
+            <ChevronDownIcon aria-hidden="true" data-icon="inline-end"/>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="flex flex-col items-start gap-2 py-2">
+            <p>Delivery includes installation.</p>
+            <Button variant="outline">Learn more</Button>
+          </CollapsibleContent>
+        </Collapsible>
+      </CardContent>
+    </Card>),
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```