@alexgorbatchev/shadcn 0.0.20 → 0.0.21

package/llms/components/forms/ColorPicker.md

@@ -0,0 +1,70 @@
+# ColorPicker
+
+Story: @alexgorbatchev/shadcn/components/forms/ColorPicker
+Source: src/components/stories/forms/ColorPicker.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/ColorPicker.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ColorPicker } from "@alexgorbatchev/shadcn/color-picker";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+ColorPicker
+```
+
+## Default args
+
+```tsx
+{ label: "Accent", defaultValue: "#ff0000", 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
+{}
+```
+
+### Alpha
+
+```tsx
+{
+    args: { alpha: true, defaultValue: "#ff000000" }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: (args) => {
+        const [value, setValue] = useState("#00ff00");
+        return (<>
+        <ColorPicker {...args} value={value} onValueChange={setValue}/>
+        <output aria-label="Selected color">{value}</output>
+      </>);
+    }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```

package/llms/components/forms/EventForm.md

@@ -0,0 +1,66 @@
+# EventForm
+
+Story: @alexgorbatchev/shadcn/components/forms/EventForm
+Source: src/components/stories/forms/EventForm.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/EventForm.stories.tsx)
+
+## Public imports
+
+```tsx
+import { EventForm } from "@alexgorbatchev/shadcn/event-calendar";
+```
+
+## Default component
+
+```tsx
+EventForm
+```
+
+## Default args
+
+```tsx
+{ label: "Edit event", initialValue, onSave: fn(), onCancel: 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
+{}
+```
+
+### InvalidRange
+
+```tsx
+{
+    args: { initialValue: { ...initialValue, end: new Date(2026, 9, 22, 9) } }
+}
+```
+
+### ServerError
+
+```tsx
+{
+    args: { onSave: fn(() => Promise.reject(new Error("Could not save."))) }
+}
+```
+
+### UnknownError
+
+```tsx
+{
+    args: { onSave: fn(() => Promise.reject("offline")), onCancel: undefined }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```

package/llms/components/forms/FileUpload.md

@@ -0,0 +1,55 @@
+# FileUpload
+
+Story: @alexgorbatchev/shadcn/components/forms/FileUpload
+Source: src/components/stories/forms/FileUpload.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/FileUpload.stories.tsx)
+
+## Public imports
+
+```tsx
+import { FileUpload } from "@alexgorbatchev/shadcn/file-upload";
+```
+
+## Default component
+
+```tsx
+FileUpload
+```
+
+## Default args
+
+```tsx
+{
+    label: "Attachments",
+    description: "Text files, up to 10 bytes each.",
+    accept: { "text/plain": [".txt"] },
+    maxSize: 10,
+    onDrop: fn(),
+    onDropRejected: 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
+{}
+```
+
+### Rejected
+
+```tsx
+{}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```

package/llms/components/forms/FilterBar.md

@@ -0,0 +1,34 @@
+# FilterBar
+
+Story: @alexgorbatchev/shadcn/components/forms/FilterBar
+Source: src/components/stories/forms/FilterBar.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/FilterBar.stories.tsx)
+
+## Public imports
+
+```tsx
+import { FilterBar } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## 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/forms/ImageCrop.md

@@ -0,0 +1,88 @@
+# ImageCrop
+
+Story: @alexgorbatchev/shadcn/components/forms/ImageCrop
+Source: src/components/stories/forms/ImageCrop.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/ImageCrop.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ImageCrop, cropToCanvas, type Crop } from "@alexgorbatchev/shadcn/image-crop";
+import { Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+import "react-image-crop/dist/ReactCrop.css";
+```
+
+## Default component
+
+```tsx
+ImageCrop
+```
+
+## Default args
+
+```tsx
+{ onChange: fn(), onComplete: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const [crop, setCrop] = useState<Crop>({ unit: "px", x: 20, y: 20, width: 100, height: 100 });
+    return (<ImageCrop {...args} crop={crop} onChange={(pixel, percent) => {
+            setCrop(pixel);
+            args.onChange(pixel, percent);
+        }}>
+        <img src={image} alt="Image to crop" width={320} height={240}/>
+      </ImageCrop>);
+}
+```
+
+## 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
+{}
+```
+
+### Export
+
+```tsx
+{
+    render: () => {
+        const [size, setSize] = useState("");
+        return (<>
+        <img src={image} alt="Source" width={320} height={240}/>
+        <Button onClick={async (event) => {
+                const source = event.currentTarget.parentElement?.querySelector("img");
+                if (!source)
+                    return;
+                const canvas = document.createElement("canvas");
+                await cropToCanvas(source, canvas, { unit: "px", x: 20, y: 20, width: 100, height: 80 });
+                setSize(`${canvas.width} × ${canvas.height}`);
+            }}>
+          Export crop
+        </Button>
+        <output aria-label="Export dimensions">{size}</output>
+      </>);
+    }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```

package/llms/components/forms/NumberField.md

@@ -0,0 +1,94 @@
+# NumberField
+
+Story: @alexgorbatchev/shadcn/components/forms/NumberField
+Source: src/components/stories/forms/NumberField.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/NumberField.stories.tsx)
+
+## Public imports
+
+```tsx
+import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, NumberFieldScrubArea, NumberFieldScrubAreaCursor, Field, FieldLabel, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default component
+
+```tsx
+NumberField
+```
+
+## Default args
+
+```tsx
+{ defaultValue: 2, min: 0, max: 5, onValueChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<Field>
+      <FieldLabel htmlFor="quantity">Quantity</FieldLabel>
+      <NumberField {...args} id="quantity">
+        <NumberFieldGroup>
+          <NumberFieldDecrement aria-label="Decrease quantity"/>
+          <NumberFieldInput />
+          <NumberFieldIncrement aria-label="Increase quantity"/>
+        </NumberFieldGroup>
+      </NumberField>
+    </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
+{}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Formatted
+
+```tsx
+{
+    args: { defaultValue: 2.5, max: 100, step: 0.5, format: { style: "currency", currency: "USD" }, locale: "en-US" }
+}
+```
+
+### DensityAndScrub
+
+```tsx
+{
+    render: () => <DensityExample />
+}
+```
+
+### NativeStateCallbacks
+
+```tsx
+{
+    render: (args) => (<NumberField {...args} className={() => "gap-2"}>
+      <NumberFieldScrubArea className={() => "font-medium"}>Quantity</NumberFieldScrubArea>
+      <NumberFieldGroup className={() => "border-input"}>
+        <NumberFieldDecrement className={() => "font-medium"} aria-label="Decrease"/>
+        <NumberFieldInput className={() => "text-center"} aria-label="Quantity" style={(state) => ({ opacity: state.disabled ? 0.5 : 1 })}/>
+        <NumberFieldIncrement className={() => "font-medium"} aria-label="Increase"/>
+      </NumberFieldGroup>
+    </NumberField>)
+}
+```

package/llms/components/forms/Questionnaire.md

@@ -76,6 +76,18 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### NativeChoiceKeyboard
+
+```tsx
+{}
+```
+
+### ItemArrowNavigation
+
+```tsx
+{}
+```
+
 ### SkippedStatus
 
 ```tsx

package/llms/components/forms/RichTextEditor.md

@@ -0,0 +1,62 @@
+# RichTextEditor
+
+Story: @alexgorbatchev/shadcn/components/forms/RichTextEditor
+Source: src/components/stories/forms/RichTextEditor.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/RichTextEditor.stories.tsx)
+
+## Public imports
+
+```tsx
+import { RichTextEditor, useEditor, StarterKit } from "@alexgorbatchev/shadcn/editor";
+```
+
+## Default component
+
+```tsx
+RichTextEditor
+```
+
+## Default args
+
+```tsx
+{ label: "Description" }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const editor = useEditor({
+        extensions: [StarterKit],
+        content: "<p>Initial content</p>",
+        immediatelyRender: false,
+        editorProps: { attributes: { role: "textbox", "aria-label": args.label, "aria-multiline": "true" } },
+    });
+    return <RichTextEditor {...args} editor={editor}/>;
+}
+```
+
+## 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
+{}
+```
+
+### ListsAndItalic
+
+```tsx
+{}
+```
+
+### Loading
+
+```tsx
+{
+    render: (args) => <RichTextEditor {...args} editor={null}/>
+}
+```

package/llms/components/forms/SettingsSection.md

@@ -0,0 +1,65 @@
+# SettingsSection
+
+Story: @alexgorbatchev/shadcn/components/forms/SettingsSection
+Source: src/components/stories/forms/SettingsSection.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/SettingsSection.stories.tsx)
+
+## Public imports
+
+```tsx
+import { SettingsSection, Field, FieldLabel, Input } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+SettingsSection
+```
+
+## Default args
+
+```tsx
+{
+    title: "Profile settings",
+    description: "Keep your details up to date.",
+    onSubmit: fn((event) => event.preventDefault()),
+    footer: "Changes apply to this workspace.",
+    children: (<Field>
+        <FieldLabel htmlFor="profile-name">Display name</FieldLabel>
+        <Input id="profile-name" name="displayName" required defaultValue="Alex"/>
+      </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
+{}
+```
+
+### Saving
+
+```tsx
+{
+    args: { pending: true }
+}
+```
+
+### Destructive
+
+```tsx
+{
+    args: {
+        title: "Delete workspace",
+        description: undefined,
+        destructive: true,
+        saveLabel: "Delete workspace",
+        children: "This action permanently removes the workspace.",
+    }
+}
+```

package/llms/components/forms/Stepper.md

@@ -0,0 +1,85 @@
+# Stepper
+
+Story: @alexgorbatchev/shadcn/components/forms/Stepper
+Source: src/components/stories/forms/Stepper.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/Stepper.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Stepper, StepperList, StepperTrigger, StepperIndicator, StepperContent } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Stepper
+```
+
+## Default args
+
+```tsx
+{ defaultValue: "profile", onValueChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<Stepper {...args}>
+      <StepperList aria-label="Onboarding steps">
+        <StepperTrigger value="profile">
+          <StepperIndicator completed>1</StepperIndicator>Profile
+        </StepperTrigger>
+        <StepperTrigger value="workspace">
+          <StepperIndicator>2</StepperIndicator>Workspace
+        </StepperTrigger>
+        <StepperTrigger value="review" disabled>
+          <StepperIndicator>3</StepperIndicator>Review
+        </StepperTrigger>
+      </StepperList>
+      <StepperContent value="profile">Set up your profile.</StepperContent>
+      <StepperContent value="workspace">Configure your workspace.</StepperContent>
+    </Stepper>)
+```
+
+## 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
+{}
+```
+
+### Vertical
+
+```tsx
+{
+    args: { orientation: "vertical" }
+}
+```
+
+### NativeStateCallbacks
+
+```tsx
+{
+    render: (args) => (<Stepper {...args} className={() => "gap-3"}>
+      <StepperList className={() => "gap-2"} aria-label="Steps">
+        <StepperTrigger className={() => "font-medium"} value="profile">
+          <StepperIndicator className="font-medium">1</StepperIndicator>Profile
+        </StepperTrigger>
+        <StepperTrigger className={() => "font-medium"} value="workspace">
+          Workspace
+        </StepperTrigger>
+      </StepperList>
+      <StepperContent className={() => "p-2"} value="profile">
+        Profile details
+      </StepperContent>
+      <StepperContent className={() => "p-2"} value="workspace">
+        Workspace details
+      </StepperContent>
+    </Stepper>)
+}
+```

package/llms/components/forms/TagInput.md

@@ -0,0 +1,47 @@
+# TagInput
+
+Story: @alexgorbatchev/shadcn/components/forms/TagInput
+Source: src/components/stories/forms/TagInput.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/TagInput.stories.tsx)
+
+## Public imports
+
+```tsx
+import { TagInput } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+TagInput
+```
+
+## Default args
+
+```tsx
+{
+    label: "Project tags",
+    options: ["Design", "Engineering", "Research"],
+    defaultValue: ["Design"],
+    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 }
+}
+```