@alexgorbatchev/shadcn 0.0.48 → 0.0.50

package/llms/components/assistant-ui/elements/data-visualization/RecommendationCard.md

@@ -1,5 +1,7 @@
 # RecommendationCard
 
+RecommendationCard presents one suggestion. Each action renders only when its handler is supplied: `onReject` (`rejectLabel`, default "Not this"), `onAlternatives` (`alternativesLabel`, default "Alternatives"), and `onAccept` (`acceptLabel`, default "Accept"). The `accepted` and `rejected` states replace the actions with `acceptedLabel` or `rejectedLabel` and keep keyboard focus on the card. Omit `confidenceLabel` to hide the confidence indicator; `fullWidth` spans the container.
+
 Story: @alexgorbatchev/shadcn/components/assistant-ui/elements/data-visualization/RecommendationCard
 Source: src/components/stories/assistant-ui/elements/data-visualization/RecommendationCard.stories.tsx
 
@@ -43,6 +45,37 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### CustomActions
+
+```tsx
+{
+    args: {
+        ...Default.args,
+        question: "Harbor noodle bar",
+        children: "Open now, 8 minutes away on foot.",
+        confidenceLabel: undefined,
+        acceptLabel: "Go",
+        alternativesLabel: "More like this",
+        rejectLabel: "Not this",
+        onReject: fn(),
+        fullWidth: true,
+    },
+    decorators: [
+        (Story) => (<div className="w-[560px]">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### WithoutActions
+
+```tsx
+{
+    args: { ...Default.args, onAccept: undefined, onAlternatives: undefined }
+}
+```
+
 ### Accepted
 
 ```tsx
@@ -51,6 +84,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Rejected
+
+```tsx
+{
+    args: { ...CustomActions.args, state: "rejected", rejectedLabel: "Won't suggest this again" }
+}
+```
+
 ### LightTheme
 
 ```tsx

package/llms/components/assistant-ui/elements/data-visualization/Timeline.md

@@ -1,5 +1,7 @@
 # Timeline
 
+Timeline renders events as an ordered list. Each event has an `id`, a `title`, and optional `time`, `detail`, `meta` (such as badges), `actions` (such as a menu button), and `connector`, an annotation for the segment to the next visible event, such as travel time. `when` marks past, now (announced as the current step), or future progress; omit it for neutral entries. `visibleCount` reveals only the leading events and defaults to all of them. `fullWidth` spans the container instead of the compact card width. The time column is omitted when no visible event has a time.
+
 Story: @alexgorbatchev/shadcn/components/assistant-ui/elements/data-visualization/Timeline
 Source: src/components/stories/assistant-ui/elements/data-visualization/Timeline.stories.tsx
 
@@ -8,6 +10,7 @@ Source: src/components/stories/assistant-ui/elements/data-visualization/Timeline
 ## Public imports
 
 ```tsx
+import { Badge, Button } from "@alexgorbatchev/shadcn";
 import { Timeline } from "@alexgorbatchev/shadcn/assistant-ui";
 ```
 
@@ -35,12 +38,83 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         events: [
             { id: "one", when: "past", time: "09:00", title: "Analysis started" },
             { id: "two", when: "now", time: "09:01", title: "Reviewing results", detail: "Three files changed" },
+            { id: "three", when: "future", time: "09:05", title: "Publish report" },
         ],
         visibleCount: 2,
     }
 }
 ```
 
+### AllEventsByDefault
+
+```tsx
+{
+    args: { ...Default.args, visibleCount: undefined }
+}
+```
+
+### Itinerary
+
+```tsx
+{
+    args: {
+        fullWidth: true,
+        "aria-label": "Itinerary",
+        events: [
+            {
+                id: "coffee",
+                time: "10:00",
+                title: "Coffee at the corner café",
+                detail: "45 min · about $12",
+                meta: <Badge variant="secondary">Locked</Badge>,
+                actions: (<Button variant="ghost" size="sm" onClick={() => removeStop("coffee")}>
+            Remove
+          </Button>),
+                connector: "12 min walk · 0.8 km",
+            },
+            {
+                id: "museum",
+                time: "11:00",
+                title: "Modern art museum",
+                detail: "2 h",
+                connector: "Unused after the last event",
+            },
+        ],
+    },
+    decorators: [
+        (Story) => (<div className="w-[600px]">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### AlignedTimes
+
+```tsx
+{
+    args: {
+        events: [
+            { id: "early", time: "9:00 AM", title: "Breakfast" },
+            { id: "late", time: "10:30 PM", title: "Late show" },
+        ],
+    }
+}
+```
+
+### WithoutTimes
+
+```tsx
+{
+    args: {
+        events: [
+            { id: "idea", title: "Picnic in the park" },
+            { id: "other", title: "Board game café" },
+        ],
+    }
+}
+```
+
 ### LightTheme
 
 ```tsx
@@ -49,6 +123,7 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         events: [
             { id: "one", when: "past", time: "09:00", title: "Analysis started" },
             { id: "two", when: "now", time: "09:01", title: "Reviewing results", detail: "Three files changed" },
+            { id: "three", when: "future", time: "09:05", title: "Publish report" },
         ],
         visibleCount: 2,
     },
@@ -64,6 +139,7 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         events: [
             { id: "one", when: "past", time: "09:00", title: "Analysis started" },
             { id: "two", when: "now", time: "09:01", title: "Reviewing results", detail: "Three files changed" },
+            { id: "three", when: "future", time: "09:05", title: "Publish report" },
         ],
         visibleCount: 2,
     },

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

@@ -0,0 +1,78 @@
+# Heading
+
+Heading renders `h1`–`h6` from the required `level` so the document outline stays correct, while `size` (sm, base, lg, xl) sets the visual size independently. Sizes default by level: 1 xl, 2 lg, 3 base, 4–6 sm. `truncate` keeps one line.
+
+Story: @alexgorbatchev/shadcn/components/data-display/Heading
+Source: src/components/stories/data-display/Heading.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Heading.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Heading } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Heading
+```
+
+## Story controls
+
+```tsx
+{
+    level: { control: "select", options: [1, 2, 3, 4, 5, 6] },
+    size: { control: "select", options: ["sm", "base", "lg", "xl"] },
+}
+```
+
+## Default args
+
+```tsx
+{ level: 2, children: "Upcoming" }
+```
+
+## 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.
+
+### Levels
+
+```tsx
+{
+    render: () => (<>
+      <Heading level={1}>Page</Heading>
+      <Heading level={2}>Section</Heading>
+      <Heading level={3}>Group</Heading>
+      <Heading level={4}>Detail</Heading>
+    </>)
+}
+```
+
+### SizeIndependentOfLevel
+
+```tsx
+{
+    render: () => (<>
+      <Heading level={1}>Default page</Heading>
+      <Heading level={3} size="xl">
+        Large group
+      </Heading>
+    </>)
+}
+```
+
+### Truncated
+
+```tsx
+{
+    args: { truncate: true, children: "A heading far too long to fit within the narrow column" },
+    decorators: [
+        (Story) => (<div className="w-40">
+        <Story />
+      </div>),
+    ]
+}
+```

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

@@ -8,7 +8,7 @@ Source: src/components/stories/data-display/Table.stories.tsx
 ## Public imports
 
 ```tsx
-import { Dialog, DialogContent, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHead, TableHeader, TableRow, Button, DirectionProvider, Checkbox, Input, Field, FieldGroup, FieldLabel, NativeSelect, NativeSelectOption } from "@alexgorbatchev/shadcn";
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHead, TableHeader, TableRow, Button, DirectionProvider, Checkbox, Input, Field, FieldGroup, FieldLabel, OptionSelect } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports

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

@@ -0,0 +1,94 @@
+# Text
+
+Text renders body copy as a paragraph with semantic `size` (xs, sm, base, lg), `tone` (default, muted, faint, primary, success, warning, destructive), `weight`, and `align`. `truncate` keeps one line with an ellipsis; otherwise long words wrap. `tabular` aligns digits. Use `render={<span />}` for inline text, or another element such as `<li />` or `<time />`.
+
+Story: @alexgorbatchev/shadcn/components/data-display/Text
+Source: src/components/stories/data-display/Text.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Text.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Text } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Text
+```
+
+## Story controls
+
+```tsx
+{
+    size: { control: "select", options: ["xs", "sm", "base", "lg"] },
+    tone: { control: "select", options: ["default", "muted", "faint", "primary", "success", "warning", "destructive"] },
+    weight: { control: "select", options: ["normal", "medium", "semibold"] },
+    align: { control: "select", options: ["start", "center", "end"] },
+}
+```
+
+## Default args
+
+```tsx
+{ children: "Members can continue any shared plan." }
+```
+
+## 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.
+
+### Paragraph
+
+```tsx
+{}
+```
+
+### MutedSmall
+
+```tsx
+{
+    args: { tone: "muted", size: "sm" },
+    render: (args) => (<>
+      <Text>Reference</Text>
+      <Text {...args}/>
+    </>)
+}
+```
+
+### InlineSpan
+
+```tsx
+{
+    args: { weight: "semibold", children: "Saved" },
+    render: (args) => <Text {...args} render={<span />}/>
+}
+```
+
+### Truncated
+
+```tsx
+{
+    args: { truncate: true, children: "A remarkably long venue description that cannot fit in the narrow column" },
+    decorators: [
+        (Story) => (<div className="w-40">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### WrappingLongWords
+
+```tsx
+{
+    args: { children: "https://example.com/a/very/long/path/that/has/no/spaces/at/all" },
+    decorators: [
+        (Story) => (<div className="w-40">
+        <Story />
+      </div>),
+    ]
+}
+```

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

@@ -0,0 +1,76 @@
+# WeatherForecast
+
+WeatherForecast renders several WeatherSummary days as a list named by `label`. Each day takes an `id` plus the WeatherSummary day fields; `unit` and `locale` apply to every day. `variant="strip"` (default) shows compact days side by side and wraps them to the available width; `variant="list"` shows one detailed day per row.
+
+Story: @alexgorbatchev/shadcn/components/data-display/WeatherForecast
+Source: src/components/stories/data-display/WeatherForecast.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/WeatherForecast.stories.tsx)
+
+## Public imports
+
+```tsx
+import { WeatherForecast } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+WeatherForecast
+```
+
+## Story controls
+
+```tsx
+{ variant: { control: "inline-radio", options: ["strip", "list"] } }
+```
+
+## Default args
+
+```tsx
+{
+    label: "Three-day forecast",
+    locale: "en-US",
+    days: [
+        { id: "fri", label: "Fri", condition: "clear", high: 21, low: 11, precipitationProbability: 0 },
+        { id: "sat", label: "Sat", condition: "drizzle", high: 17, low: 10, precipitationProbability: 45 },
+        { id: "sun", label: "Sun", condition: "snow", high: 2, low: -4, precipitationProbability: 80 },
+    ],
+}
+```
+
+## 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.
+
+### Strip
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-96">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### List
+
+```tsx
+{
+    args: { variant: "list", unit: "fahrenheit" }
+}
+```
+
+### NarrowStripWraps
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-52">
+        <Story />
+      </div>),
+    ]
+}
+```

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

@@ -0,0 +1,103 @@
+# WeatherSummary
+
+WeatherSummary shows one day's forecast: a `label` such as a date, a `condition` from the closed set clear, partly-cloudy, cloudy, fog, drizzle, rain, snow, and thunderstorm with its icon, `high` and `low` temperatures in `unit` (celsius by default), and an optional `precipitationProbability` from 0 to 100. Numbers are rounded and formatted with Intl for `locale`. `conditionLabel` localizes the condition name. The icon is decorative; screen readers hear the condition, high, low, and precipitation chance. `variant="compact"` hides the condition name visually. Use `render` to choose the element, such as `<li />`.
+
+Story: @alexgorbatchev/shadcn/components/data-display/WeatherSummary
+Source: src/components/stories/data-display/WeatherSummary.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/WeatherSummary.stories.tsx)
+
+## Public imports
+
+```tsx
+import { WeatherSummary } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+WeatherSummary
+```
+
+## Story controls
+
+```tsx
+{
+    condition: { control: "select", options: CONDITIONS },
+    unit: { control: "inline-radio", options: ["celsius", "fahrenheit"] },
+    variant: { control: "inline-radio", options: ["default", "compact"] },
+}
+```
+
+## Default args
+
+```tsx
+{
+    label: "Sat, Nov 1",
+    condition: "partly-cloudy",
+    high: 18.4,
+    low: 9.2,
+    precipitationProbability: 30,
+    locale: "en-US",
+}
+```
+
+## 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
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { variant: "compact" }
+}
+```
+
+### FahrenheitLocalized
+
+```tsx
+{
+    args: {
+        unit: "fahrenheit",
+        locale: "de-DE",
+        high: 64.6,
+        low: 48,
+        condition: "rain",
+        conditionLabel: "Regen",
+        precipitationProbability: 85,
+    }
+}
+```
+
+### WithoutPrecipitation
+
+```tsx
+{
+    args: { precipitationProbability: undefined, condition: "clear" }
+}
+```
+
+### ProbabilityClamped
+
+```tsx
+{
+    args: { precipitationProbability: 140, condition: "thunderstorm" }
+}
+```
+
+### AllConditions
+
+```tsx
+{
+    render: (args) => (<>
+      {CONDITIONS.map((condition) => (<WeatherSummary key={condition} {...args} label={condition} condition={condition}/>))}
+    </>)
+}
+```

package/llms/components/forms/EmailCodeAuthForm.md

@@ -0,0 +1,94 @@
+# EmailCodeAuthForm
+
+EmailCodeAuthForm is passwordless sign-in in two steps. Import it from `@alexgorbatchev/shadcn/input-otp`. The email step calls `onRequestCode(email)`; when it resolves, the code step shows an InputOTP for a numeric code of `codeLength` digits (default 6) with one-time-code autofill. Completing the code or pressing Verify calls `onVerifyCode(email, code)` once. Resend code calls `onRequestCode` again and announces the new code; Use a different email returns to the first step. Rejected promises show their message and keep the current step; buttons show pending state while a handler runs. The consumer owns sending, verifying, rate limits, and navigation after success.
+
+Story: @alexgorbatchev/shadcn/components/forms/EmailCodeAuthForm
+Source: src/components/stories/forms/EmailCodeAuthForm.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/EmailCodeAuthForm.stories.tsx)
+
+## Public imports
+
+```tsx
+import { EmailCodeAuthForm } from "@alexgorbatchev/shadcn/input-otp";
+```
+
+## Default component
+
+```tsx
+EmailCodeAuthForm
+```
+
+## Default args
+
+```tsx
+{ onRequestCode: fn(), onVerifyCode: 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.
+
+### RequestAndVerify
+
+```tsx
+{}
+```
+
+### FourDigitCode
+
+```tsx
+{
+    args: { codeLength: 4, defaultEmail: "member@example.com" }
+}
+```
+
+### RequestFailure
+
+```tsx
+{
+    args: { onRequestCode: fn(() => Promise.reject(new Error("This email cannot sign in."))) }
+}
+```
+
+### VerifyFailure
+
+```tsx
+{
+    args: { onVerifyCode: fn(() => Promise.reject("rejected")) }
+}
+```
+
+### Resend
+
+```tsx
+{}
+```
+
+### ChangeEmail
+
+```tsx
+{}
+```
+
+### Pending
+
+```tsx
+{
+    args: { onVerifyCode: fn(() => pendingVerification.promise) }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: {
+        disabled: true,
+        title: "Join the workspace",
+        description: "Use the address your invitation was sent to.",
+        footer: <a href="#help">Need help?</a>,
+        alternativeActions: <a href="#provider">Continue with provider</a>,
+    }
+}
+```