@alexgorbatchev/shadcn 0.0.20 → 0.0.22

package/dist/options/types.d.ts

@@ -3,3 +3,8 @@ export interface INamedOption {
     id: string;
     name: string;
 }
+/** A display label paired with its submitted value. */
+export interface ILabelValue {
+    label: string;
+    value: string;
+}

package/llms/components/actions/Toolbar.md

@@ -0,0 +1,89 @@
+# Toolbar
+
+Story: @alexgorbatchev/shadcn/components/actions/Toolbar
+Source: src/components/stories/actions/Toolbar.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/actions/Toolbar.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Toolbar
+```
+
+## Default args
+
+```tsx
+{ "aria-label": "Document actions" }
+```
+
+## Default render
+
+```tsx
+(args) => (<Toolbar {...args}>
+      <ToolbarGroup aria-label="Editing">
+        <ToolbarButton onClick={fn()}>Undo</ToolbarButton>
+        <ToolbarButton>Redo</ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarSeparator />
+      <ToolbarInput aria-label="Document title" defaultValue="Untitled"/>
+      <ToolbarLink href="#toolbar-help">Help</ToolbarLink>
+    </Toolbar>)
+```
+
+## 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) => (<Toolbar {...args} className={toolbarClasses} style={(state) => ({ opacity: state.orientation === "vertical" ? 0.9 : 1 })}>
+      <ToolbarGroup className={toolbarClasses}>
+        <ToolbarButton className={toolbarClasses} disabled style={(state) => ({ opacity: state.disabled ? 0.5 : 1 })}>
+          Unavailable
+        </ToolbarButton>
+        <ToolbarButton className={toolbarClasses}>Enabled</ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarSeparator className={toolbarClasses}/>
+      <ToolbarInput className={toolbarClasses} aria-label="Title"/>
+      <ToolbarLink className={toolbarClasses} href="#help">
+        Help
+      </ToolbarLink>
+    </Toolbar>)
+}
+```
+
+### DisabledState
+
+```tsx
+{
+    render: (args) => (<Toolbar {...args}>
+      <ToolbarButton disabled onClick={disabledAction}>
+        Unavailable
+      </ToolbarButton>
+      <ToolbarButton>Enabled</ToolbarButton>
+    </Toolbar>)
+}
+```

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

@@ -0,0 +1,48 @@
+# AnalyticsChart
+
+Story: @alexgorbatchev/shadcn/components/data-display/AnalyticsChart
+Source: src/components/stories/data-display/AnalyticsChart.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/AnalyticsChart.stories.tsx)
+
+## Public imports
+
+```tsx
+import { AnalyticsChart } from "@alexgorbatchev/shadcn/chart";
+```
+
+## Default component
+
+```tsx
+AnalyticsChart
+```
+
+## Default args
+
+```tsx
+{
+    label: "Revenue and signups",
+    index: "month",
+    data: [
+        { month: "Jan", revenue: 100, signups: 30, total: 130 },
+        { month: "Feb", revenue: 200, signups: 50, total: 250 },
+        { month: "Mar", revenue: 150, signups: 60, total: 210 },
+    ],
+    series: [
+        { key: "revenue", label: "Revenue", type: "bar" },
+        { key: "signups", label: "Signups", type: "area" },
+        { key: "total", label: "Total" },
+    ],
+    valueFormatter: (value) => `$${value}`,
+}
+```
+
+## 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/data-display/BarList.md

@@ -0,0 +1,50 @@
+# BarList
+
+Story: @alexgorbatchev/shadcn/components/data-display/BarList
+Source: src/components/stories/data-display/BarList.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/BarList.stories.tsx)
+
+## Public imports
+
+```tsx
+import { BarList } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+BarList
+```
+
+## Default args
+
+```tsx
+{ label: "Traffic sources", items, onItemSelect: 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
+{}
+```
+
+### ReadOnly
+
+```tsx
+{
+    args: { onItemSelect: undefined, valueFormatter: (value) => `${value} visits` }
+}
+```
+
+### Empty
+
+```tsx
+{
+    args: { items: [] }
+}
+```

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

@@ -0,0 +1,51 @@
+# DataGrid
+
+Story: @alexgorbatchev/shadcn/components/data-display/DataGrid
+Source: src/components/stories/data-display/DataGrid.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/DataGrid.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataGrid, DataGridColumnHeader, DataGridFilter, dataGridFeatures } from "@alexgorbatchev/shadcn/data-grid";
+import { Checkbox, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { createColumnHelper, useTable } from "@tanstack/react-table";
+```
+
+## 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
+{}
+```
+
+### Loading
+
+```tsx
+{
+    render: () => <Example loading/>
+}
+```
+
+### WithoutPagination
+
+```tsx
+{
+    render: () => <Example pagination={false}/>
+}
+```

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

@@ -0,0 +1,74 @@
+# Meter
+
+Story: @alexgorbatchev/shadcn/components/data-display/Meter
+Source: src/components/stories/data-display/Meter.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Meter.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Meter, MeterLabel, MeterValue, MeterTrack, MeterIndicator, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default component
+
+```tsx
+Meter
+```
+
+## Default args
+
+```tsx
+{ value: 25 }
+```
+
+## Default render
+
+```tsx
+() => <StorageExample />
+```
+
+## 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
+{}
+```
+
+### Formatted
+
+```tsx
+{
+    render: (args) => (<Meter {...args} min={0} max={1000} value={500} locale="en-US" format={{ style: "unit", unit: "gigabyte" }}>
+      <MeterLabel>Disk capacity</MeterLabel>
+      <MeterValue />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>)
+}
+```
+
+### NativeStateCallbacks
+
+```tsx
+{
+    render: () => (<Meter value={30} className={() => "font-medium"} style={() => ({ opacity: 0.9 })}>
+      <MeterLabel className={() => "font-medium"}>Queue capacity</MeterLabel>
+      <MeterValue className={() => "font-medium"}/>
+      <MeterTrack className={() => "h-2"}>
+        <MeterIndicator className={() => "bg-primary"}/>
+      </MeterTrack>
+    </Meter>)
+}
+```

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

@@ -0,0 +1,50 @@
+# Sparkline
+
+Story: @alexgorbatchev/shadcn/components/data-display/Sparkline
+Source: src/components/stories/data-display/Sparkline.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Sparkline.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Sparkline } from "@alexgorbatchev/shadcn/chart";
+```
+
+## Default component
+
+```tsx
+Sparkline
+```
+
+## Default args
+
+```tsx
+{ label: "Weekly revenue", values: [4, 6, 3, 8, 10] }
+```
+
+## 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.
+
+### Line
+
+```tsx
+{}
+```
+
+### Area
+
+```tsx
+{
+    args: { type: "area" }
+}
+```
+
+### Bar
+
+```tsx
+{
+    args: { type: "bar" }
+}
+```

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

@@ -0,0 +1,65 @@
+# StatCard
+
+Story: @alexgorbatchev/shadcn/components/data-display/StatCard
+Source: src/components/stories/data-display/StatCard.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/StatCard.stories.tsx)
+
+## Public imports
+
+```tsx
+import { StatCard } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+StatCard
+```
+
+## Default args
+
+```tsx
+{
+    label: "Revenue",
+    value: "$24,580",
+    change: "+12%",
+    changeIntent: "positive",
+    description: "Compared with the previous month.",
+    children: <a href="#revenue">View revenue report</a>,
+}
+```
+
+## 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
+{}
+```
+
+### Decrease
+
+```tsx
+{
+    args: { change: "-5%", changeIntent: "negative", children: undefined, description: undefined }
+}
+```
+
+### Neutral
+
+```tsx
+{
+    args: { change: "No change", changeIntent: "neutral" }
+}
+```
+
+### Loading
+
+```tsx
+{
+    args: { loading: true, change: undefined }
+}
+```

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

@@ -0,0 +1,51 @@
+# StatusTracker
+
+Story: @alexgorbatchev/shadcn/components/data-display/StatusTracker
+Source: src/components/stories/data-display/StatusTracker.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/StatusTracker.stories.tsx)
+
+## Public imports
+
+```tsx
+import { StatusTracker } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+StatusTracker
+```
+
+## Default args
+
+```tsx
+{
+    label: "API uptime",
+    items: [
+        { id: "1", label: "Monday", status: "success", description: "All systems operational" },
+        { id: "2", label: "Tuesday", status: "warning" },
+        { id: "3", label: "Wednesday", status: "error", description: "Incident resolved" },
+        { id: "4", label: "Thursday", status: "unknown" },
+    ],
+    onItemSelect: 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
+{}
+```
+
+### ReadOnly
+
+```tsx
+{
+    args: { onItemSelect: undefined }
+}
+```

package/llms/components/dates/DatePicker.md

@@ -0,0 +1,97 @@
+# DatePicker
+
+Story: @alexgorbatchev/shadcn/components/dates/DatePicker
+Source: src/components/stories/dates/DatePicker.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/dates/DatePicker.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DatePicker, DateRangePicker } from "@alexgorbatchev/shadcn/calendar";
+import { Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { fr } from "@daypicker/react/locale/fr";
+import { useState, type ReactElement } from "react";
+```
+
+## Default component
+
+```tsx
+DatePicker
+```
+
+## Default args
+
+```tsx
+{
+    label: "Appointment date",
+    calendarProps: { defaultMonth: new Date(2026, 9), today: new Date(2026, 9, 8) },
+    onValueChange: fn(),
+}
+```
+
+## Default render
+
+```tsx
+(args) => <DatePicker {...args}/>
+```
+
+## 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 }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: () => <ControlledExample />
+}
+```
+
+### Range
+
+```tsx
+{
+    render: () => (<DateRangePicker label="Reporting period" startName="start" endName="end" calendarProps={{ defaultMonth: new Date(2026, 9), today: new Date(2026, 9, 8) }}/>)
+}
+```
+
+### FormValues
+
+```tsx
+{
+    render: () => (<form aria-label="Dates">
+      <DatePicker label="Appointment" name="appointment" defaultValue={new Date(2026, 9, 9)}/>
+      <DateRangePicker label="Period" startName="start" endName="end" defaultValue={{ from: new Date(2026, 9, 9), to: new Date(2026, 9, 12) }}/>
+      <DatePicker label="Unavailable date" name="disabled-date" defaultValue={new Date(2026, 9, 9)} disabled/>
+      <DateRangePicker label="Unavailable period" startName="disabled-start" endName="disabled-end" defaultValue={{ from: new Date(2026, 9, 9) }} disabled/>
+    </form>)
+}
+```
+
+### Localized
+
+```tsx
+{
+    render: () => <DatePicker label="Date française" locale={fr} defaultValue={new Date(2026, 9, 9)}/>
+}
+```

package/llms/components/forms/AuthForm.md

@@ -0,0 +1,70 @@
+# AuthForm
+
+Story: @alexgorbatchev/shadcn/components/forms/AuthForm
+Source: src/components/stories/forms/AuthForm.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/AuthForm.stories.tsx)
+
+## Public imports
+
+```tsx
+import { AuthForm } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+AuthForm
+```
+
+## Default args
+
+```tsx
+{ onSubmit: 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.
+
+### SignIn
+
+```tsx
+{}
+```
+
+### SignUp
+
+```tsx
+{
+    args: { mode: "sign-up" }
+}
+```
+
+### ResetPassword
+
+```tsx
+{
+    args: { mode: "reset-password" }
+}
+```
+
+### ServerError
+
+```tsx
+{
+    args: { onSubmit: fn(() => Promise.reject(new Error("Invalid credentials"))) }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: {
+        disabled: true,
+        footer: <a href="#terms">Terms of service</a>,
+        alternativeActions: <a href="#provider">Continue with provider</a>,
+    }
+}
+```