@alexgorbatchev/shadcn 0.0.48 → 0.0.50

package/README.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/dist/{chunk-snq5m541.js → chunk-02a3sgge.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-tcefvfr8.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   ShimmerLabel2
-} from "./chunk-s3wqwhxc.js";
+} from "./chunk-228jkv3n.js";
 import {
   SwapLabel2
-} from "./chunk-wgxs6b5t.js";
+} from "./chunk-39q6906v.js";
 import {
   Collapsible2,
   CollapsibleTrigger2,

package/dist/{chunk-mqea74ex.js → chunk-032fn19y.js}

@@ -1,12 +1,12 @@
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   useReceiptFocus
 } from "./chunk-vxvaaptq.js";
 import {
   OptionList2
-} from "./chunk-dy4ghe9p.js";
+} from "./chunk-nay3qsgw.js";
 
 // src/components/assistant-ui/elements/QuestionFlow.tsx
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/{chunk-tg5grn8f.js → chunk-056z8fc3.js}

@@ -1,9 +1,9 @@
 import {
   ContextDisplayRoot3
-} from "./chunk-8q0xpeh4.js";
+} from "./chunk-t4y934a5.js";
 import {
   ContextDisplayRuntimeRoot2
-} from "./chunk-qky9999p.js";
+} from "./chunk-x8ftt0wm.js";
 
 // src/components/assistant-ui/native/ContextDisplayRoot.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-fz2x6hvf.js → chunk-09x5ne2y.js}

@@ -1,10 +1,10 @@
 import {
   Badge2
-} from "./chunk-wjx6zf94.js";
+} from "./chunk-9t530p75.js";
 import {
   Card2,
   CardContent2
-} from "./chunk-bygq5yqf.js";
+} from "./chunk-k1f35j55.js";
 import {
   FieldSet2,
   FieldLegend2,
@@ -12,11 +12,11 @@ import {
   FieldContent2,
   FieldLabel2,
   FieldDescription2
-} from "./chunk-6jpz5geq.js";
+} from "./chunk-9n0axzd5.js";
 import {
   RadioGroup2,
   RadioGroupItem2
-} from "./chunk-ekbesw9t.js";
+} from "./chunk-kgqe8gpb.js";
 
 // src/components/assistant-ui/elements/ModelPicker.tsx
 import { useId } from "react";

package/dist/{chunk-0q9n4syq.js → chunk-0bwg27nq.js}

@@ -1,16 +1,16 @@
 import {
   CommandList2,
   CommandGroup2
-} from "./chunk-0twprqdp.js";
+} from "./chunk-5bq2j907.js";
 import {
   useModelSelectorContext
 } from "./chunk-ydfx8r6d.js";
 import {
   ModelSelectorEmpty2
-} from "./chunk-cvg5366s.js";
+} from "./chunk-zthc8ajd.js";
 import {
   ModelSelectorItem2
-} from "./chunk-prp1x0by.js";
+} from "./chunk-8sktrf74.js";
 
 // src/components/assistant-ui/elements/ModelSelectorList.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";

package/dist/{chunk-hyq4nwg2.js → chunk-0hq6rg7w.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 
 // src/components/Avatar.tsx
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";

package/dist/{chunk-6kygf29c.js → chunk-0jz2mp48.js}

@@ -1,9 +1,9 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   InputGroup2
-} from "./chunk-14mh00z3.js";
+} from "./chunk-rxjxb4vy.js";
 
 // src/components/assistant-ui/elements/ComposerBar.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-fvg93469.js → chunk-0ybqnkcy.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/{chunk-m9rrhywc.js → chunk-10bcpsft.js}

@@ -1,21 +1,21 @@
 import {
   MarkdownText2
-} from "./chunk-bt7ramb0.js";
+} from "./chunk-mxcfz56p.js";
 import {
   ReasoningRoot3
-} from "./chunk-3v95p5js.js";
+} from "./chunk-m0kavf2m.js";
 import {
   ReasoningTrigger2
-} from "./chunk-pa8yemp1.js";
+} from "./chunk-a1c1yrkz.js";
 import {
   ReasoningFade2
-} from "./chunk-3g8p9apn.js";
+} from "./chunk-zyxzn7xf.js";
 import {
   ReasoningContent2
-} from "./chunk-qv3b2jvc.js";
+} from "./chunk-x0p3g392.js";
 import {
   ReasoningText2
-} from "./chunk-m99hfsps.js";
+} from "./chunk-f2p7w894.js";
 import {
   REASONING_ANIMATION_DURATION
 } from "./chunk-fgmcbtyt.js";

package/dist/{chunk-cfnkbp0y.js → chunk-10vjajh7.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-jpvw9xqy.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   useAnalyticsCallback
 } from "./chunk-5mydsjp3.js";

package/dist/{chunk-588wj6g4.js → chunk-11m1mwv4.js}

@@ -1,12 +1,12 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   ShimmerLabel2
-} from "./chunk-s3wqwhxc.js";
+} from "./chunk-228jkv3n.js";
 import {
   mono
 } from "./chunk-fgmcbtyt.js";

package/dist/{chunk-wnhxn2se.js → chunk-16qrkr8k.js}

@@ -1,6 +1,6 @@
 import {
   CommandInput2
-} from "./chunk-0twprqdp.js";
+} from "./chunk-5bq2j907.js";
 
 // src/components/assistant-ui/elements/ModelSelectorSearch.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-c9ypcp4s.js → chunk-1f6p05qh.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-x90xmrba.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   useDirection2
 } from "./chunk-jpvw9xqy.js";
@@ -18,19 +18,19 @@ import {
   TooltipTrigger2,
   TooltipContent2,
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   AnalyticsButton
 } from "./chunk-tcefvfr8.js";
 import {
   Input2
-} from "./chunk-0fmrwsgp.js";
+} from "./chunk-7vg045gd.js";
 import {
   Separator2
-} from "./chunk-rajgnfbr.js";
+} from "./chunk-52aadmkc.js";
 import {
   Skeleton2
-} from "./chunk-d70rcwk7.js";
+} from "./chunk-1fzwfn11.js";
 import {
   useAnalyticsCallback
 } from "./chunk-5mydsjp3.js";

package/dist/{chunk-d70rcwk7.js → chunk-1fzwfn11.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 
 // src/components/Skeleton.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-3wap1z7h.js → chunk-1k2g7rpj.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-tcefvfr8.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   clamp
 } from "./chunk-v8ks0cfq.js";

package/dist/{chunk-c4m53x5s.js → chunk-1wrsg75m.js}

@@ -1,6 +1,6 @@
 import {
   TooltipIconButton2
-} from "./chunk-kzar67tq.js";
+} from "./chunk-s2f3zzbb.js";
 
 // src/components/assistant-ui/native/VoiceDisconnectButton.tsx
 import { useVoiceControls } from "@assistant-ui/react";

package/dist/{chunk-zj30cfgx.js → chunk-1xgqshkv.js}

@@ -1,6 +1,6 @@
 import {
   Badge2
-} from "./chunk-wjx6zf94.js";
+} from "./chunk-9t530p75.js";
 
 // src/components/assistant-ui/elements/DiffViewerFileBadge.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-s3wqwhxc.js → chunk-228jkv3n.js}

@@ -1,6 +1,6 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 
 // src/components/assistant-ui/elements/ShimmerLabel.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-f6rbv5gf.js → chunk-2b5f37wj.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-tcefvfr8.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   Collapsible2,
   CollapsibleTrigger2,
@@ -11,10 +11,10 @@ import {
 } from "./chunk-fw86vanx.js";
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   Textarea2
-} from "./chunk-tq0pfv5h.js";
+} from "./chunk-er6e5fj8.js";
 
 // src/components/assistant-ui/native/ToolFallbackRoot.tsx
 import { forwardRef, memo, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";

package/dist/{chunk-kxx5fnpb.js → chunk-2fxzw0xc.js}

@@ -1,9 +1,9 @@
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 import {
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   field,
   mono

package/dist/{chunk-xq579zwh.js → chunk-2z53taz1.js}

@@ -1,6 +1,6 @@
 import {
   InputGroupInput2
-} from "./chunk-14mh00z3.js";
+} from "./chunk-rxjxb4vy.js";
 
 // src/components/assistant-ui/elements/ComposerInput.tsx
 import { jsx } from "react/jsx-runtime";