@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/forms/Textarea.md

@@ -0,0 +1,219 @@
+# Textarea
+
+Story: @alexgorbatchev/shadcn/components/forms/Textarea
+Source: src/components/stories/forms/Textarea.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/Textarea.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Textarea, Field, FieldGroup, FieldLabel, FieldDescription, FieldError, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId, useState } from "react";
+```
+
+## Default component
+
+```tsx
+Textarea
+```
+
+## Default args
+
+```tsx
+{ placeholder: "Describe your project", onChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const storyId = useId();
+    return (<Field data-invalid={args["aria-invalid"]} data-disabled={args.disabled}>
+        <FieldLabel htmlFor={`${storyId}-textarea-demo`}>Description</FieldLabel>
+        <Textarea id={`${storyId}-textarea-demo`} aria-describedby={`${storyId}-textarea-help`} aria-errormessage={args["aria-invalid"] ? `${storyId}-textarea-error` : undefined} {...args}/>
+        <FieldDescription id={`${storyId}-textarea-help`}>Optional notes for your team.</FieldDescription>
+        {args["aria-invalid"] && <FieldError id={`${storyId}-textarea-error`}>Check this value.</FieldError>}
+      </Field>);
+}
+```
+
+## 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
+{}
+```
+
+### Filled
+
+```tsx
+{
+    args: { defaultValue: "Build a shared design system." }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Invalid
+
+```tsx
+{
+    args: { "aria-invalid": true }
+}
+```
+
+### ReadOnly
+
+```tsx
+{
+    args: { readOnly: true, defaultValue: "Read only value" }
+}
+```
+
+### MultipleRows
+
+```tsx
+{
+    args: { rows: 5, defaultValue: "First line\nSecond line\nThird line" }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render(args) {
+        const [value, setValue] = useState("");
+        return (<Field>
+        <Textarea {...args} aria-label="Controlled description" value={value} onChange={(event) => setValue(event.currentTarget.value)}/>
+        <output aria-label="Current description">{value}</output>
+      </Field>);
+    }
+}
+```
+
+### AutoSize
+
+```tsx
+{}
+```
+
+### NativeRef
+
+```tsx
+{
+    args: { ref: fn() }
+}
+```
+
+### MaxLength
+
+```tsx
+{
+    args: { maxLength: 5 }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### WithSubmitButton
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [message, setMessage] = useState("");
+        return (<form aria-label="Message form" className="w-80" onSubmit={(event) => {
+                event.preventDefault();
+                setMessage(String(new FormData(event.currentTarget).get("message")));
+            }}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor={`${id}-message`}>Message</FieldLabel>
+            <Textarea {...args} id={`${id}-message`} name="message" required aria-describedby={`${id}-help`}/>
+            <FieldDescription id={`${id}-help`}>Share an update with your team.</FieldDescription>
+          </Field>
+          <Button type="submit">Send message</Button>
+          <output aria-label="Sent message">{message}</output>
+        </FieldGroup>
+      </form>);
+    }
+}
+```
+
+### RightToLeftSubmitButton
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [message, setMessage] = useState("");
+        return (<form aria-label="Message form" className="w-80" onSubmit={(event) => {
+                event.preventDefault();
+                setMessage(String(new FormData(event.currentTarget).get("message")));
+            }}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor={`${id}-message`}>Message</FieldLabel>
+            <Textarea {...args} id={`${id}-message`} name="message" required aria-describedby={`${id}-help`}/>
+            <FieldDescription id={`${id}-help`}>Share an update with your team.</FieldDescription>
+          </Field>
+          <Button type="submit">Send message</Button>
+          <output aria-label="Sent message">{message}</output>
+        </FieldGroup>
+      </form>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### FormSubmissionAndReset
+
+```tsx
+{
+    render: function Render(args) {
+        const [result, setResult] = useState("");
+        return (<form aria-label="Notes form" onSubmit={(event) => {
+                event.preventDefault();
+                setResult(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget))));
+            }}>
+        <Field>
+          <Textarea {...args} name="notes" aria-label="Project notes" defaultValue="Initial notes" required/>
+          <Textarea name="omitted" aria-label="Disabled notes" disabled defaultValue="hidden"/>
+          <Button type="submit">Save notes</Button>
+          <Button type="reset">Reset notes</Button>
+        </Field>
+        <output aria-label="Saved notes">{result}</output>
+      </form>);
+    }
+}
+```

package/llms/components/layout/Accordion.md

@@ -0,0 +1,249 @@
+# Accordion
+
+Story: @alexgorbatchev/shadcn/components/layout/Accordion
+Source: src/components/stories/layout/Accordion.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Accordion.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DirectionProvider, Card, CardContent, CardDescription, CardHeader, CardTitle, Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+Accordion
+```
+
+## Default args
+
+```tsx
+{ onValueChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<Accordion {...args}>
+      <AccordionItem value="install">
+        <AccordionTrigger>How do I install the package?</AccordionTrigger>
+        <AccordionContent>
+          Install the package with Bun, import the theme, and scan the package output with Tailwind.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="density">
+        <AccordionTrigger>Which densities are available?</AccordionTrigger>
+        <AccordionContent>Compact and comfortable.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="disabled" disabled>
+        <AccordionTrigger>Unavailable section</AccordionTrigger>
+        <AccordionContent>This section is disabled.</AccordionContent>
+      </AccordionItem>
+    </Accordion>)
+```
+
+## 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
+{}
+```
+
+### Expanded
+
+```tsx
+{
+    args: { defaultValue: ["install"] }
+}
+```
+
+### Multiple
+
+```tsx
+{
+    args: { multiple: true, defaultValue: ["install", "density"] }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### DisabledItem
+
+```tsx
+{}
+```
+
+### NativeRootCallback
+
+```tsx
+{
+    args: { className: (state) => (state.value.length > 0 ? "gap-6" : "gap-2") }
+}
+```
+
+### NativePartCallbacks
+
+```tsx
+{
+    render: (args) => (<Accordion {...args}>
+      <AccordionItem value="details" className={(state) => (state.open ? "p-6" : "p-2")}>
+        <AccordionTrigger className={(state) => (state.open ? "h-12" : "h-8")}>Details</AccordionTrigger>
+        <AccordionContent className={(state) => (state.open ? "min-h-16" : "min-h-0")}>More details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>)
+}
+```
+
+### PanelClassOwnership
+
+```tsx
+{
+    render: (args) => (<Accordion {...args} defaultValue={["details"]}>
+      <AccordionItem value="details">
+        <AccordionTrigger>Details</AccordionTrigger>
+        <AccordionContent className="min-h-16">More details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>)
+}
+```
+
+### KeepMounted
+
+```tsx
+{
+    args: { keepMounted: true }
+}
+```
+
+### HiddenUntilFound
+
+```tsx
+{
+    args: { hiddenUntilFound: true }
+}
+```
+
+### CancelledChange
+
+```tsx
+{
+    args: { onValueChange: (_value, details) => details.cancel() }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render(args) {
+        const [value, setValue] = useState<string[]>([]);
+        return (<Accordion {...args} value={value} onValueChange={setValue}>
+        <AccordionItem value="details">
+          <AccordionTrigger>Details</AccordionTrigger>
+          <AccordionContent>More details.</AccordionContent>
+        </AccordionItem>
+        <output aria-label="Expanded sections">{JSON.stringify(value)}</output>
+      </Accordion>);
+    }
+}
+```
+
+### DynamicContent
+
+```tsx
+{
+    render: function Render(args) {
+        const [hasMore, setHasMore] = useState(false);
+        return (<Accordion {...args} defaultValue={["details"]}>
+        <AccordionItem value="details">
+          <AccordionTrigger>Details</AccordionTrigger>
+          <AccordionContent>
+            <Button onClick={() => setHasMore(true)}>Show more details</Button>
+            {hasMore && (<p>
+                Additional details.
+                <br />
+                Second line.
+                <br />
+                Third line.
+                <br />
+                Fourth line.
+                <br />
+                Fifth line.
+              </p>)}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <Accordion {...args} dir="rtl" className="w-80">
+        <AccordionItem value="details">
+          <AccordionTrigger>
+            <span>How do I install the package and configure its theme?</span>
+          </AccordionTrigger>
+          <AccordionContent>Import the theme and scan the package output.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="density">
+          <AccordionTrigger>Which densities are available?</AccordionTrigger>
+          <AccordionContent>Compact and comfortable.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </DirectionProvider>)
+}
+```
+
+### Borders
+
+```tsx
+{
+    args: { defaultValue: ["install"] },
+    render: (args) => (<Accordion {...args} className="w-80 border">
+      <AccordionItem value="install" className="px-4">
+        <AccordionTrigger>How do I install the package?</AccordionTrigger>
+        <AccordionContent>Import the theme and scan the package output.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="density" className="px-4">
+        <AccordionTrigger>Which densities are available?</AccordionTrigger>
+        <AccordionContent>Compact and comfortable.</AccordionContent>
+      </AccordionItem>
+    </Accordion>)
+}
+```
+
+### InCard
+
+```tsx
+{
+    args: { defaultValue: ["install"] },
+    render: (args, context) => (<Card className="w-80">
+      <CardHeader>
+        <CardTitle>Package setup</CardTitle>
+        <CardDescription>Common installation questions.</CardDescription>
+      </CardHeader>
+      <CardContent>{meta.render?.(args, context)}</CardContent>
+    </Card>)
+}
+```

package/llms/components/layout/AspectRatio.md

@@ -0,0 +1,68 @@
+# AspectRatio
+
+Story: @alexgorbatchev/shadcn/components/layout/AspectRatio
+Source: src/components/stories/layout/AspectRatio.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/AspectRatio.stories.tsx)
+
+## Public imports
+
+```tsx
+import { AspectRatio } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+AspectRatio
+```
+
+## Default args
+
+```tsx
+{ ratio: 16 / 9 }
+```
+
+## Default render
+
+```tsx
+(args) => (<div className="w-80">
+      <AspectRatio {...args} aria-label="Preview frame">
+        <img src={fixture_avatarImage} alt="Media preview" className="absolute inset-0 size-full object-cover"/>
+      </AspectRatio>
+    </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.
+
+### Widescreen
+
+```tsx
+{}
+```
+
+### Square
+
+```tsx
+{
+    args: { ratio: 1 }
+}
+```
+
+### Portrait
+
+```tsx
+{
+    args: { ratio: 9 / 16 }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    args: { ratio: 16 / 9, dir: "rtl" }
+}
+```