@alexgorbatchev/shadcn 0.0.48 → 0.0.49

package/llms/components/layout/Grid.md

@@ -0,0 +1,133 @@
+# Grid
+
+Grid lays out equal columns without consumer classes. `columns` is 1–6 or 12, or a viewport breakpoint map such as `{ base: 1, md: 2, xl: 4 }`. `minColumnWidth` (xs 8rem, sm 12rem, md 16rem, lg 22rem) instead fits as many columns as the grid's own width allows, which suits card grids inside panes of any size. `gap` defaults to the density-aware `panel` token. GridItem `span` (1–6 or `full`, optionally per breakpoint) widens a cell; `full` always spans every column. Both accept `render` for semantic elements such as `<ul />` and `<li />`.
+
+Story: @alexgorbatchev/shadcn/components/layout/Grid
+Source: src/components/stories/layout/Grid.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Grid.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Card, CardContent, CardHeader, CardTitle, Field, FieldLabel, Grid, GridItem, Input, Textarea } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Grid
+```
+
+## Story controls
+
+```tsx
+{
+    columns: { control: "select", options: [1, 2, 3, 4, 5, 6, 12] },
+    gap: { control: "select", options: ["none", "control", "panel-sm", "panel", "field", "section"] },
+    align: { control: "select", options: ["start", "center", "end", "stretch"] },
+}
+```
+
+## Default args
+
+```tsx
+{ columns: 2 }
+```
+
+## Default render
+
+```tsx
+(args) => (<Grid {...args} render={<ul aria-label="Venues"/>}>
+      {["Harbor walk", "Night market", "Rooftop bar", "Botanical garden"].map((venue) => (<GridItem key={venue} render={<li />}>
+          <Card>
+            <CardHeader>
+              <CardTitle>{venue}</CardTitle>
+            </CardHeader>
+            <CardContent>Open until late.</CardContent>
+          </Card>
+        </GridItem>))}
+    </Grid>)
+```
+
+## 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.
+
+### Columns
+
+```tsx
+{}
+```
+
+### ResponsiveColumns
+
+```tsx
+{
+    args: { columns: { base: 1, md: 2 } }
+}
+```
+
+### IntrinsicColumns
+
+```tsx
+{
+    args: { columns: undefined, minColumnWidth: "sm" },
+    decorators: [
+        (Story) => (<div className="w-[440px]">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### IntrinsicColumnsInNarrowPane
+
+```tsx
+{
+    args: { columns: undefined, minColumnWidth: "sm" },
+    decorators: [
+        (Story) => (<div className="w-[160px]">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### TwoColumnForm
+
+```tsx
+{
+    args: { columns: 2, gap: "field" },
+    render: (args) => (<Grid {...args} render={<form aria-label="Contact"/>}>
+      <Field>
+        <FieldLabel htmlFor="grid-first-name">First name</FieldLabel>
+        <Input id="grid-first-name"/>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="grid-last-name">Last name</FieldLabel>
+        <Input id="grid-last-name"/>
+      </Field>
+      <GridItem span="full">
+        <Field>
+          <FieldLabel htmlFor="grid-notes">Notes</FieldLabel>
+          <Textarea id="grid-notes"/>
+        </Field>
+      </GridItem>
+    </Grid>)
+}
+```
+
+### ResponsiveSpan
+
+```tsx
+{
+    args: { columns: 4, gap: "control" },
+    render: (args) => (<Grid {...args}>
+      <GridItem span={{ base: 2, md: 4 }} render={<section aria-label="Wide"/>}>
+        Wide
+      </GridItem>
+      <GridItem render={<section aria-label="Narrow"/>}>Narrow</GridItem>
+    </Grid>)
+}
+```

package/llms/components/layout/Stack.md

@@ -0,0 +1,170 @@
+# Stack
+
+Stack arranges children along one axis without consumer classes. `gap` and `padding` accept the density-aware tokens none, control, panel-sm, panel, field, and section. `direction` is vertical or horizontal, or a breakpoint map such as `{ base: "vertical", md: "horizontal" }`. `align` and `justify` position children; `wrap` lets a row wrap. `grow` takes the remaining space of a parent Stack and lets content shrink, and `height` is auto, full (the parent's height), viewport, or min-viewport. Pass `render={<section />}`, `<ul />`, `<li />`, `<form />`, or `<main />` for semantic elements; props, handlers, and refs merge.
+
+Story: @alexgorbatchev/shadcn/components/layout/Stack
+Source: src/components/stories/layout/Stack.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Stack.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Badge, Button, Heading, ScrollArea, Stack, Text } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Stack
+```
+
+## Story controls
+
+```tsx
+{
+    direction: { control: "inline-radio", options: ["vertical", "horizontal"] },
+    gap: { control: "select", options: ["none", "control", "panel-sm", "panel", "field", "section"] },
+    padding: { control: "select", options: ["none", "control", "panel-sm", "panel", "field", "section"] },
+    align: { control: "select", options: ["start", "center", "end", "stretch", "baseline"] },
+    justify: { control: "select", options: ["start", "center", "end", "between"] },
+    height: { control: "select", options: ["auto", "full", "viewport", "min-viewport"] },
+}
+```
+
+## Default args
+
+```tsx
+{ gap: "panel" }
+```
+
+## Default render
+
+```tsx
+(args) => (<Stack {...args} render={<section aria-label="Profile"/>}>
+      <Heading level={2}>Profile</Heading>
+      <Text tone="muted">Shown to everyone in the workspace.</Text>
+      <Text>Members see your name and avatar.</Text>
+    </Stack>)
+```
+
+## 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.
+
+### Vertical
+
+```tsx
+{}
+```
+
+### CompactDensity
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### HeaderWithTrailingActions
+
+```tsx
+{
+    args: { direction: "horizontal", justify: "between", align: "center", gap: "control", wrap: true },
+    render: (args) => (<Stack {...args} render={<section aria-label="Section header"/>}>
+      <Heading level={2}>Members</Heading>
+      <Stack direction="horizontal" gap="control">
+        <Button variant="outline">Export</Button>
+        <Button>Invite</Button>
+      </Stack>
+    </Stack>)
+}
+```
+
+### Wrapping
+
+```tsx
+{
+    args: { direction: "horizontal", gap: "control", wrap: true },
+    decorators: [
+        (Story) => (<div className="w-48">
+        <Story />
+      </div>),
+    ],
+    render: (args) => (<Stack {...args} render={<ul aria-label="Interests"/>}>
+      {["Museums", "Live music", "Hiking", "Street food", "Cinema"].map((interest) => (<Stack key={interest} render={<li />}>
+          <Badge variant="secondary">{interest}</Badge>
+        </Stack>))}
+    </Stack>)
+}
+```
+
+### ResponsiveDirection
+
+```tsx
+{
+    args: { direction: { base: "vertical", md: "horizontal" } },
+    render: (args) => (<Stack {...args}>
+      <Text>First</Text>
+      <Text>Second</Text>
+    </Stack>)
+}
+```
+
+### FullHeightRegion
+
+```tsx
+{
+    args: { height: "full", gap: "none" },
+    decorators: [
+        (Story) => (<div className="h-60 w-72 border border-border" data-scroll="none">
+        <Story />
+      </div>),
+    ],
+    render: (args) => (<Stack {...args}>
+      <Stack padding="panel-sm">
+        <Heading level={2}>Activity</Heading>
+      </Stack>
+      <ScrollArea grow aria-label="Activity log">
+        <Stack padding="panel-sm" gap="control" render={<ol />}>
+          {Array.from({ length: 30 }, (_, index) => (<Text key={index} render={<li />}>
+              Update {index + 1}
+            </Text>))}
+        </Stack>
+      </ScrollArea>
+      <Stack padding="panel-sm" direction="horizontal" justify="end">
+        <Button>Refresh</Button>
+      </Stack>
+    </Stack>)
+}
+```
+
+### GrowingPane
+
+```tsx
+{
+    args: { direction: "horizontal", gap: "panel", height: "full" },
+    decorators: [
+        (Story) => (<div className="h-24 w-96">
+        <Story />
+      </div>),
+    ],
+    render: (args) => (<Stack {...args}>
+      <Text>Fixed</Text>
+      <Stack grow padding="control" render={<section aria-label="Remaining space"/>}>
+        <Text truncate>A very long description that must shrink to the remaining width instead of overflowing</Text>
+      </Stack>
+    </Stack>)
+}
+```
+
+### FormElement
+
+```tsx
+{
+    render: (args) => (<Stack {...args} render={<form aria-label="Rename" onSubmit={submitForm}/>}>
+      <Text>Rename the workspace.</Text>
+      <Button type="submit">Save</Button>
+    </Stack>)
+}
+```

package/llms/setup.md

@@ -261,8 +261,10 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 | Area                     | Components                                                                                                                                                                                    |
 | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions and status       | Alert, Badge, Button, ButtonGroup, ButtonLink, Sonner, Toast, Toggle, ToggleGroup                                                                                                             |
-| Forms and selections     | Calendar, Checkbox, Combobox, Command, Field, Input, InputGroup, InputOTP, Label, NativeSelect, Questionnaire, RadioGroup, Select, Slider, Switch, Textarea                                   |
+| Forms and selections     | AuthForm, Calendar, Checkbox, Combobox, Command, EmailCodeAuthForm, Field, Input, InputGroup, InputOTP, Label, NativeSelect, Questionnaire, RadioGroup, Select, Slider, Switch, Textarea      |
 | Structure and navigation | Accordion, AspectRatio, Avatar, Breadcrumb, Card, Carousel, Chart, Collapsible, Empty, Item, Kbd, Menubar, NavigationMenu, Pagination, Resizable, ScrollArea, Separator, Sidebar, Table, Tabs |
+| Layout and typography    | AppShell, Container, Grid, GridItem, Heading, PageHeader, Stack, Text                                                                                                                         |
+| Data display             | WeatherForecast, WeatherSummary                                                                                                                                                               |
 | Overlays                 | AlertDialog, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Popover, Sheet, Tooltip                                                                                                    |
 | Loading                  | Progress, Skeleton, Spinner                                                                                                                                                                   |
 | Conversations            | Attachment, Bubble, Marker, Message, MessageScroller                                                                                                                                          |
@@ -316,7 +318,7 @@ Compose data tables with the exported Table parts and `@tanstack/react-table@9.2
 
 Compose `Sidebar` and `SidebarInset` inside `SidebarProvider`. Use Header, Content, Group, Menu, and Footer parts to organize navigation, and `SidebarTrigger` or `SidebarRail` to toggle it. `useSidebar` exposes desktop and mobile state. Desktop collapse supports `offcanvas`, `icon`, and `none`; the mobile panel uses a titled Sheet with Escape dismissal and focus restoration. Menu buttons accept native custom elements through `render`; use anchors for navigation and keep their accessible text when collapsed. Cmd/Ctrl+B toggles the sidebar while focus is inside its provider. Set `open`/`onOpenChange` for controlled desktop state, or observe changes without supplying `open`. Persist changes in your application through `onOpenChange`, and restore them through `defaultOpen` or controlled `open`. Set widths through the typed `SidebarStyle` variables `--sidebar-width`, `--sidebar-width-mobile`, and `--sidebar-width-icon`. Sidebar colors follow the palette of the subtree they render in; set `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, or `--sidebar-ring` to give the sidebar its own colors.
 
-`InputOTP` uses one real input for typing, selection, paste, and autofill. Compose its visual slots inside `InputOTPGroup`; supply `maxLength` and an accessible label. Use `defaultValue` to initialize an uncontrolled code, or `value` and `onChange` to control it. Changing `defaultValue` after mounting preserves the current input. Import the OTP parts together from `@alexgorbatchev/shadcn/input-otp`; its bundled implementation owns their context. `Calendar` supports single, multiple, and range selection. `ResizablePanelGroup` sizes use explicit percentage strings such as `defaultSize="50%"`; numeric sizes are pixels. `CommandDialog` supplies the modal title and description; set `Command`'s `label` to name its search input.
+`InputOTP` uses one real input for typing, selection, paste, and autofill. Compose its visual slots inside `InputOTPGroup`; supply `maxLength` and an accessible label. Use `defaultValue` to initialize an uncontrolled code, or `value` and `onChange` to control it. Changing `defaultValue` after mounting preserves the current input. Import the OTP parts together from `@alexgorbatchev/shadcn/input-otp`; its bundled implementation owns their context. `EmailCodeAuthForm` from the same entry point is passwordless sign-in in two steps: the email step calls `onRequestCode(email)`, and the code step collects a numeric code of `codeLength` digits (default 6) and calls `onVerifyCode(email, code)` when the code is complete or submitted. It offers Resend code and Use a different email, shows pending state while a handler runs, and shows a rejected handler's message without leaving the current step. `Calendar` supports single, multiple, and range selection. `ResizablePanelGroup` sizes use explicit percentage strings such as `defaultSize="50%"`; numeric sizes are pixels. `CommandDialog` supplies the modal title and description; set `Command`'s `label` to name its search input.
 
 Use the Theme toolbar to select light, dark, or system palettes; Docs and example frames follow that selection. Local and routed previews can run on separate ports with independent dependency caches. Reload an open preview after restarting it on a different port.
 
@@ -358,6 +360,66 @@ Bun 1.4.0's CSS bundler lowers logical positioning to language-based selectors.
 
 Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Questionnaire`, which renders a native form. `QuestionnaireChoice` supplies native radios or, with `multiple`, checkboxes; label every `QuestionnaireInput`. Read answers with `FormData.get()` or `getAll()`. `QuestionnaireProgress` and the Previous, Skip, Next, and Submit parts follow the active item. Optional steps need an answer or an explicit skip; observe `onStatusChange` to distinguish skipped answers. Letter and number shortcuts select answers without advancing. Use `item`/`onItemChange` for controlled navigation and `invalid` for external validation. Draft defaults and native reset restore initial answers and navigation. These parts accept density overrides and native render/ref props where supported. See the [upstream composition guide](https://ui.shadcn.com/docs/components/base/questionnaire).
 
+# Page layout
+
+Compose screens from layout components instead of utility classes. Each one accepts `render` for a semantic element, such as `render={<section aria-label="Members" />}`, `<ul />`, `<li />`, `<form />`, or `<main />`; props, handlers, and refs merge with the rendered element.
+
+- `Stack` arranges children along one axis. `direction` is `vertical` (default) or `horizontal`, or a breakpoint map such as `{ base: "vertical", md: "horizontal" }`. `gap` and `padding` take the density-aware spacing tokens `none`, `control`, `panel-sm`, `panel`, `field`, and `section`. `align`, `justify`, and `wrap` position children. `grow` takes the remaining space of a parent `Stack` and lets its content shrink; `height` is `auto`, `full`, `viewport`, or `min-viewport`.
+- `Grid` lays out equal columns: `columns` is 1–6 or 12, or a breakpoint map such as `{ base: 1, md: 2, xl: 4 }`. `minColumnWidth` (`xs`, `sm`, `md`, `lg`) instead fits as many columns as the grid's own width allows, so card grids adapt inside narrow panes. `GridItem span` widens a cell; `span="full"` always spans every column.
+- `Container` centers a column with a maximum `width` (`xs` 20rem, `sm` 24rem, `md` 42rem, `lg` 64rem, `xl` 80rem, or `full`).
+- `Text` renders body copy as a paragraph with semantic `size`, `tone`, `weight`, `align`, `truncate`, and `tabular` options; use `render={<span />}` for inline text. `Heading` renders `h1`–`h6` from its required `level`, with a `size` chosen independently of the outline level.
+- `ScrollArea grow` scrolls inside the remaining space of a parent `Stack`.
+
+A header row with trailing actions, a two-column form, and a centered sign-in page:
+
+```tsx
+import {
+  AuthForm,
+  Button,
+  Container,
+  Field,
+  FieldLabel,
+  Grid,
+  GridItem,
+  Heading,
+  Input,
+  Stack,
+  Textarea,
+} from "@alexgorbatchev/shadcn";
+
+<Stack direction="horizontal" justify="between" align="center" gap="control" wrap render={<header />}>
+  <Heading level={2}>Members</Heading>
+  <Button>Invite</Button>
+</Stack>;
+
+<Grid columns={{ base: 1, md: 2 }} gap="field" render={<form onSubmit={save} />}>
+  <Field>
+    <FieldLabel htmlFor="first-name">First name</FieldLabel>
+    <Input id="first-name" />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="last-name">Last name</FieldLabel>
+    <Input id="last-name" />
+  </Field>
+  <GridItem span="full">
+    <Field>
+      <FieldLabel htmlFor="notes">Notes</FieldLabel>
+      <Textarea id="notes" />
+    </Field>
+  </GridItem>
+</Grid>;
+
+<Stack height="min-viewport" align="center" justify="center" padding="panel" render={<main />}>
+  <Container width="sm">
+    <AuthForm onSubmit={signIn} />
+  </Container>
+</Stack>;
+```
+
+`AppShell` navigation items take either `href` or `render`, a router link element such as `{ id: "plans", label: "Plans", render: <Link to="/plans" />, active: true }`; the router element owns its destination and client-side navigation while the item keeps its active state, `aria-current="page"`, and activation analytics. `content="scroll"` (default) places children in a padded scrolling column; `content="fill"` gives them the remaining area without padding or scrolling, for full-height screens that manage their own scroll regions.
+
+`WeatherSummary` shows one day's forecast: a `label`, a `condition` from `clear`, `partly-cloudy`, `cloudy`, `fog`, `drizzle`, `rain`, `snow`, or `thunderstorm` with its icon, `high` and `low` temperatures in `unit` (`celsius` by default), and an optional `precipitationProbability` from 0 to 100. Values are rounded and formatted with `Intl` for `locale`; `conditionLabel` localizes the condition name. `WeatherForecast` renders several days, each with an `id`, as a list named by `label`: `variant="strip"` (default) wraps compact days side by side, and `variant="list"` shows one detailed day per row.
+
 # Inline editing and ratings
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Set `hasChanges={false}` to cancel an unchanged edit before calling `onCommit`; the caller owns normalization and comparison. It defaults to true, so creation sessions can commit their initial value. Rejected saves display a generic error and allow retry; `renderError` can map the unknown failure to application-authored guidance.

package/llms.txt

@@ -143,11 +143,11 @@ Generated from the public package exports and Storybook sources.
 - [NumberRollDigit](./llms/components/assistant-ui/elements/data-visualization/NumberRollDigit.md)
 - [NumberRollPart](./llms/components/assistant-ui/elements/data-visualization/NumberRollPart.md)
 - [NumberTicker](./llms/components/assistant-ui/elements/data-visualization/NumberTicker.md)
-- [RecommendationCard](./llms/components/assistant-ui/elements/data-visualization/RecommendationCard.md)
+- [RecommendationCard](./llms/components/assistant-ui/elements/data-visualization/RecommendationCard.md): 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.
 - [ScoreBreakdown](./llms/components/assistant-ui/elements/data-visualization/ScoreBreakdown.md)
 - [ShareMeter](./llms/components/assistant-ui/elements/data-visualization/ShareMeter.md)
 - [SpecSheet](./llms/components/assistant-ui/elements/data-visualization/SpecSheet.md)
-- [Timeline](./llms/components/assistant-ui/elements/data-visualization/Timeline.md)
+- [Timeline](./llms/components/assistant-ui/elements/data-visualization/Timeline.md): 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.
 - [TraceWaterfall](./llms/components/assistant-ui/elements/data-visualization/TraceWaterfall.md)
 
 ## assistant-ui/elements/media-voice
@@ -339,6 +339,7 @@ Generated from the public package exports and Storybook sources.
 - [DataGridSelectCell](./llms/components/data-display/DataGridSelectCell.md)
 - [DataGridSelectHeader](./llms/components/data-display/DataGridSelectHeader.md)
 - [DataViewer](./llms/components/data-display/DataViewer.md)
+- [Heading](./llms/components/data-display/Heading.md): 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.
 - [Item](./llms/components/data-display/Item.md)
 - [JsonRender](./llms/components/data-display/JsonRender.md)
 - [JsonViewer](./llms/components/data-display/JsonViewer.md)
@@ -348,8 +349,11 @@ Generated from the public package exports and Storybook sources.
 - [StatCard](./llms/components/data-display/StatCard.md)
 - [StatusTracker](./llms/components/data-display/StatusTracker.md)
 - [Table](./llms/components/data-display/Table.md)
+- [Text](./llms/components/data-display/Text.md): 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 />`.
 - [VirtualDataGrid](./llms/components/data-display/VirtualDataGrid.md)
 - [VirtualTable](./llms/components/data-display/VirtualTable.md)
+- [WeatherForecast](./llms/components/data-display/WeatherForecast.md): 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.
+- [WeatherSummary](./llms/components/data-display/WeatherSummary.md): 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 />`.
 
 ## dates
 
@@ -380,6 +384,7 @@ Generated from the public package exports and Storybook sources.
 - [Checkbox](./llms/components/forms/Checkbox.md)
 - [ColorPicker](./llms/components/forms/ColorPicker.md)
 - [Combobox](./llms/components/forms/Combobox.md)
+- [EmailCodeAuthForm](./llms/components/forms/EmailCodeAuthForm.md): 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.
 - [EventForm](./llms/components/forms/EventForm.md)
 - [Field](./llms/components/forms/Field.md)
 - [FileUpload](./llms/components/forms/FileUpload.md)
@@ -413,12 +418,15 @@ Generated from the public package exports and Storybook sources.
 - [BillingUsage](./llms/components/layout/BillingUsage.md)
 - [Card](./llms/components/layout/Card.md)
 - [Collapsible](./llms/components/layout/Collapsible.md)
+- [Container](./llms/components/layout/Container.md): Container centers a column with a maximum width: xs 20rem, sm 24rem, md 42rem, lg 64rem (default), xl 80rem, or full. `padding` uses the density-aware spacing tokens. For a centered single-column page such as sign-in, wrap it in a `Stack` with `height="min-viewport"`, `align="center"`, and `justify="center"`, and render the page landmark with `render={<main />}`.
 - [DashboardLayout](./llms/components/layout/DashboardLayout.md)
+- [Grid](./llms/components/layout/Grid.md): Grid lays out equal columns without consumer classes. `columns` is 1–6 or 12, or a viewport breakpoint map such as `{ base: 1, md: 2, xl: 4 }`. `minColumnWidth` (xs 8rem, sm 12rem, md 16rem, lg 22rem) instead fits as many columns as the grid's own width allows, which suits card grids inside panes of any size. `gap` defaults to the density-aware `panel` token. GridItem `span` (1–6 or `full`, optionally per breakpoint) widens a cell; `full` always spans every column. Both accept `render` for semantic elements such as `<ul />` and `<li />`.
 - [PageHeader](./llms/components/layout/PageHeader.md)
 - [Resizable](./llms/components/layout/Resizable.md)
 - [ScrollArea](./llms/components/layout/ScrollArea.md)
 - [Separator](./llms/components/layout/Separator.md)
 - [SplitView](./llms/components/layout/SplitView.md)
+- [Stack](./llms/components/layout/Stack.md): Stack arranges children along one axis without consumer classes. `gap` and `padding` accept the density-aware tokens none, control, panel-sm, panel, field, and section. `direction` is vertical or horizontal, or a breakpoint map such as `{ base: "vertical", md: "horizontal" }`. `align` and `justify` position children; `wrap` lets a row wrap. `grow` takes the remaining space of a parent Stack and lets content shrink, and `height` is auto, full (the parent's height), viewport, or min-viewport. Pass `render={<section />}`, `<ul />`, `<li />`, `<form />`, or `<main />` for semantic elements; props, handlers, and refs merge.
 
 ## messaging
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {

package/templates/prototype/src/components/ScenarioContent.tsx

@@ -8,6 +8,7 @@ import {
   EmptyTitle,
   EmptyDescription,
   Spinner,
+  Stack,
 } from "@alexgorbatchev/shadcn";
 import type { Scenario } from "../types";
 
@@ -16,10 +17,10 @@ type ScenarioContentProps = { scenario: Scenario; children: ReactNode };
 export function ScenarioContent({ scenario, children }: ScenarioContentProps): ReactElement {
   if (scenario === "loading")
     return (
-      <div role="status" className="flex items-center gap-2">
+      <Stack role="status" direction="horizontal" align="center" gap="control">
         <Spinner />
         Loading sample data…
-      </div>
+      </Stack>
     );
   if (scenario === "error")
     return (

package/templates/prototype/src/prototypes/dashboard/components/Dashboard.tsx

@@ -10,6 +10,7 @@ import {
   Field,
   FieldGroup,
   FieldLabel,
+  Grid,
   NativeSelect,
   NativeSelectOption,
   PageHeader,
@@ -42,10 +43,10 @@ export function Dashboard({ scenario }: PrototypeProps): ReactElement {
             </NativeSelect>
           </Field>
         </FieldGroup>
-        <div className="grid gap-4 sm:grid-cols-2">
+        <Grid columns={{ base: 1, sm: 2 }} gap="panel">
           <StatCard label="Active projects" value={visible.length} />
           <StatCard label="Ready for review" value={visible.filter((delivery) => delivery.status === "Ready").length} />
-        </div>
+        </Grid>
         <Card>
           <CardHeader>
             <CardTitle>Delivery queue</CardTitle>

package/dist/chunk-4710gn6d.js

@@ -1,15 +0,0 @@
-import {
-  useAnalyticsCallback
-} from "./chunk-5mydsjp3.js";
-
-// src/components/analytics/AnalyticsLink.tsx
-import { jsx } from "react/jsx-runtime";
-function AnalyticsLink({ component, analytics, ...props }) {
-  const onClick = useAnalyticsCallback(component, analytics, { name: "ui.activate" }, props.onClick);
-  return /* @__PURE__ */ jsx("a", {
-    ...props,
-    onClick
-  });
-}
-
-export { AnalyticsLink };

package/dist/chunk-dg14mg3y.js

@@ -1,56 +0,0 @@
-import {
-  cn2
-} from "./chunk-cp2m7y7v.js";
-import {
-  take
-} from "./chunk-v8ks0cfq.js";
-import {
-  paper,
-  mono
-} from "./chunk-fgmcbtyt.js";
-
-// src/components/assistant-ui/elements/Timeline.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function Timeline2({ events, visibleCount, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-testid": "Timeline",
-    "data-slot": "timeline",
-    className: cn2(cn2(paper, "flex w-full max-w-sm flex-col rounded-md p-4"), className),
-    ...props,
-    children: take(events, visibleCount).map((event, i, shown) => /* @__PURE__ */ jsxs("div", {
-      className: "fade-in slide-in-from-left-1 animate-in fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300",
-      children: [
-        /* @__PURE__ */ jsx("span", {
-          className: cn2(mono, "text-muted-foreground pt-[3px] text-end tabular-nums"),
-          children: event.time
-        }),
-        /* @__PURE__ */ jsxs("span", {
-          className: "flex flex-col items-center",
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: cn2("mt-1 size-2 shrink-0 rounded-full", event.when === "now" && "bg-primary ring-4 ring-primary/15 bg-primary forced-colors:bg-[Highlight]", event.when === "past" && "bg-muted-foreground forced-colors:bg-[CanvasText]", event.when === "future" && "border-muted-foreground border bg-transparent")
-            }),
-            i < shown.length - 1 && /* @__PURE__ */ jsx("span", {
-              className: cn2("w-px flex-1", event.when === "future" ? "bg-foreground/[0.08]" : "bg-foreground/15")
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          className: cn2("flex flex-col gap-0.5", i < shown.length - 1 && "pb-3"),
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: cn2("text-base break-words", event.when === "future" ? "text-muted-foreground" : "text-foreground", event.when === "now" && "font-medium"),
-              children: event.title
-            }),
-            event.detail && /* @__PURE__ */ jsx("span", {
-              className: "text-muted-foreground text-sm leading-relaxed break-words",
-              children: event.detail
-            })
-          ]
-        })
-      ]
-    }, event.id))
-  });
-}
-
-export { Timeline2 };