@alexgorbatchev/shadcn 0.0.48 → 0.0.50

package/llms/components/navigation/ContextMenu.md

@@ -8,7 +8,7 @@ Source: src/components/stories/navigation/ContextMenu.stories.tsx
 ## Public imports
 
 ```tsx
-import { Button, DirectionProvider, Toggle, NativeSelect, NativeSelectOption, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@alexgorbatchev/shadcn";
+import { Button, DirectionProvider, Toggle, OptionSelect, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports
@@ -44,10 +44,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -99,10 +99,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -155,10 +155,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -220,10 +220,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu>
           <ContextMenuTrigger className={args.triggerClassName}>Right click for callbacks</ContextMenuTrigger>
           <ContextMenuContent aria-label="Callback actions" className={args.contentClassName}>
@@ -276,10 +276,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -339,10 +339,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">

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, OptionSelect, 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, PageIntro, 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)
@@ -391,8 +396,8 @@ Generated from the public package exports and Storybook sources.
 - [InputGroup](./llms/components/forms/InputGroup.md)
 - [InputOTP](./llms/components/forms/InputOTP.md)
 - [Label](./llms/components/forms/Label.md)
-- [NativeSelect](./llms/components/forms/NativeSelect.md)
 - [NumberField](./llms/components/forms/NumberField.md)
+- [OptionSelect](./llms/components/forms/OptionSelect.md)
 - [Questionnaire](./llms/components/forms/Questionnaire.md)
 - [RadioGroup](./llms/components/forms/RadioGroup.md)
 - [RichTextEditor](./llms/components/forms/RichTextEditor.md)
@@ -413,12 +418,16 @@ 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)
+- [PageIntro](./llms/components/layout/PageIntro.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.50",
   "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/components/Workbench.tsx

@@ -5,8 +5,7 @@ import {
   Field,
   FieldGroup,
   FieldLabel,
-  NativeSelect,
-  NativeSelectOption,
+  OptionSelect,
   ThemeProvider,
 } from "@alexgorbatchev/shadcn";
 import type { PrototypeDefinition, Scenario } from "../types";
@@ -50,60 +49,71 @@ export function Workbench(): ReactElement {
                 <div className="grid grid-cols-2 items-end gap-4 md:grid-cols-4 xl:grid-cols-7">
                   <Field>
                     <FieldLabel htmlFor="prototype">Prototype</FieldLabel>
-                    <NativeSelect id="prototype" value={selected} onChange={(event) => setSelected(event.target.value)}>
-                      {prototypes.map((prototype) => (
-                        <NativeSelectOption key={prototype.id} value={prototype.id}>
-                          {prototype.title}
-                        </NativeSelectOption>
-                      ))}
-                    </NativeSelect>
+                    <OptionSelect
+                      id="prototype"
+                      width="full"
+                      value={selected}
+                      onValueChange={setSelected}
+                      options={prototypes.map((prototype) => ({ value: prototype.id, label: prototype.title }))}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="scenario">Scenario</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="scenario"
+                      width="full"
                       value={scenario}
-                      onChange={(event) => {
-                        const value = event.target.value;
+                      onValueChange={(value) => {
                         if (value === "populated" || value === "empty" || value === "loading" || value === "error")
                           setScenario(value);
                       }}
-                    >
-                      <NativeSelectOption value="populated">Populated</NativeSelectOption>
-                      <NativeSelectOption value="empty">Empty</NativeSelectOption>
-                      <NativeSelectOption value="loading">Loading</NativeSelectOption>
-                      <NativeSelectOption value="error">Error</NativeSelectOption>
-                    </NativeSelect>
+                      options={[
+                        { value: "populated", label: "Populated" },
+                        { value: "empty", label: "Empty" },
+                        { value: "loading", label: "Loading" },
+                        { value: "error", label: "Error" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="theme">Theme</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="theme"
+                      width="full"
                       value={theme}
-                      onChange={(event) => setTheme(event.target.value === "light" ? "light" : "dark")}
-                    >
-                      <NativeSelectOption value="dark">Dark</NativeSelectOption>
-                      <NativeSelectOption value="light">Light</NativeSelectOption>
-                    </NativeSelect>
+                      onValueChange={(value) => setTheme(value === "light" ? "light" : "dark")}
+                      options={[
+                        { value: "dark", label: "Dark" },
+                        { value: "light", label: "Light" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="density">Density</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="density"
+                      width="full"
                       value={density}
-                      onChange={(event) => setDensity(event.target.value === "compact" ? "compact" : "comfortable")}
-                    >
-                      <NativeSelectOption value="comfortable">Comfortable</NativeSelectOption>
-                      <NativeSelectOption value="compact">Compact</NativeSelectOption>
-                    </NativeSelect>
+                      onValueChange={(value) => setDensity(value === "compact" ? "compact" : "comfortable")}
+                      options={[
+                        { value: "comfortable", label: "Comfortable" },
+                        { value: "compact", label: "Compact" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="viewport">Viewport</FieldLabel>
-                    <NativeSelect id="viewport" value={viewport} onChange={(event) => setViewport(event.target.value)}>
-                      <NativeSelectOption value="responsive">Responsive</NativeSelectOption>
-                      <NativeSelectOption value="390">Mobile · 390px</NativeSelectOption>
-                      <NativeSelectOption value="1280">Desktop · 1280px</NativeSelectOption>
-                    </NativeSelect>
+                    <OptionSelect
+                      id="viewport"
+                      width="full"
+                      value={viewport}
+                      onValueChange={setViewport}
+                      options={[
+                        { value: "responsive", label: "Responsive" },
+                        { value: "390", label: "Mobile · 390px" },
+                        { value: "1280", label: "Desktop · 1280px" },
+                      ]}
+                    />
                   </Field>
                   <Button onClick={() => setRevision((value) => value + 1)}>Reset data</Button>
                   <a className="text-sm underline" href={`?${canvasParameters}`} target="_blank" rel="noreferrer">

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

@@ -10,8 +10,8 @@ import {
   Field,
   FieldGroup,
   FieldLabel,
-  NativeSelect,
-  NativeSelectOption,
+  Grid,
+  OptionSelect,
   PageHeader,
   StatCard,
   Table,
@@ -35,17 +35,19 @@ export function Dashboard({ scenario }: PrototypeProps): ReactElement {
         <FieldGroup>
           <Field>
             <FieldLabel htmlFor="team">Team</FieldLabel>
-            <NativeSelect id="team" value={team} onChange={(event) => setTeam(event.target.value)}>
-              <NativeSelectOption>All teams</NativeSelectOption>
-              <NativeSelectOption>Product</NativeSelectOption>
-              <NativeSelectOption>Engineering</NativeSelectOption>
-            </NativeSelect>
+            <OptionSelect
+              id="team"
+              width="full"
+              value={team}
+              onValueChange={setTeam}
+              options={["All teams", "Product", "Engineering"].map((value) => ({ value, label: value }))}
+            />
           </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 };

package/dist/chunk-r4jzz4f2.js

@@ -1,60 +0,0 @@
-import {
-  cn2
-} from "./chunk-cp2m7y7v.js";
-import {
-  useAnalyticsCallback
-} from "./chunk-5mydsjp3.js";
-
-// src/components/NativeSelect.tsx
-import { ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function NativeSelect2({
-  analytics,
-  density,
-  className,
-  dir,
-  size = "default",
-  ...props
-}) {
-  const trackedOnChange = useAnalyticsCallback("NativeSelect", analytics, { name: "ui.change-request" }, props.onChange);
-  return /* @__PURE__ */ jsxs("div", {
-    dir,
-    className: cn2("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
-    "data-density": density,
-    "data-slot": "native-select-wrapper",
-    "data-size": size,
-    children: [
-      /* @__PURE__ */ jsx("select", {
-        dir,
-        "data-slot": "native-select",
-        "data-size": size,
-        className: "h-control w-full min-w-0 appearance-none rounded-sm border border-input bg-secondary py-0 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive data-[size=sm]:h-control-sm data-[size=sm]:rounded-sm",
-        ...props,
-        onChange: trackedOnChange
-      }),
-      /* @__PURE__ */ jsx(ChevronDownIcon, {
-        className: "pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
-        "aria-hidden": "true",
-        "data-slot": "native-select-icon"
-      })
-    ]
-  });
-}
-function NativeSelectOption2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("option", {
-    "data-density": density,
-    "data-slot": "native-select-option",
-    className: cn2("bg-[Canvas] text-[CanvasText]", className),
-    ...props
-  });
-}
-function NativeSelectOptGroup2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("optgroup", {
-    "data-density": density,
-    "data-slot": "native-select-optgroup",
-    className: cn2("bg-[Canvas] text-[CanvasText]", className),
-    ...props
-  });
-}
-
-export { NativeSelect2, NativeSelectOption2, NativeSelectOptGroup2 };

package/dist/components/NativeSelect.d.ts

@@ -1,12 +0,0 @@
-import type { IAnalyticsProps } from "../analytics/types.js";
-import type { IDensityProps } from "../density/types.js";
-import type { ComponentProps, ReactElement } from "react";
-type NativeSelectProps = Omit<ComponentProps<"select">, "size"> & {
-    size?: "sm" | "default";
-};
-declare function NativeSelect({ analytics, density, className, dir, size, ...props }: NativeSelectProps & IDensityProps & IAnalyticsProps): ReactElement;
-type NativeSelectOptionProps = ComponentProps<"option"> & IDensityProps;
-declare function NativeSelectOption({ density, className, ...props }: NativeSelectOptionProps): ReactElement;
-type NativeSelectOptGroupProps = ComponentProps<"optgroup"> & IDensityProps;
-declare function NativeSelectOptGroup({ density, className, ...props }: NativeSelectOptGroupProps): ReactElement;
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };