@alexgorbatchev/shadcn 0.0.47 → 0.0.49

package/llms/components/forms/EmailCodeAuthForm.md

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

package/llms/components/forms/InlineEdit.md

@@ -60,8 +60,41 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 {
     args: {
         onCommit: async () => {
-            throw new Error("Could not save");
+            throw new Error("Private storage diagnostic");
         },
     }
 }
 ```
+
+### UnchangedEnter
+
+```tsx
+{
+    args: { hasChanges: false }
+}
+```
+
+### UnchangedBlur
+
+```tsx
+{
+    args: { hasChanges: false }
+}
+```
+
+### UnchangedCreate
+
+```tsx
+{}
+```
+
+### AuthoredValidationAndRetry
+
+```tsx
+{
+    args: {
+        onCommit: fn(),
+        renderError: () => "A title is required.",
+    }
+}
+```

package/llms/components/layout/AppShell.md

@@ -8,7 +8,8 @@ Source: src/components/stories/layout/AppShell.stories.tsx
 ## Public imports
 
 ```tsx
-import { AppShell, PageHeader, StatCard } from "@alexgorbatchev/shadcn";
+import { AnalyticsProvider } from "@alexgorbatchev/shadcn/analytics";
+import { AppShell, PageHeader, Stack, StatCard, Text } from "@alexgorbatchev/shadcn";
 ```
 
 ## Default component
@@ -61,3 +62,36 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     }
 }
 ```
+
+### RouterLinks
+
+```tsx
+{
+    args: {
+        navigation: [
+            { id: "plans", label: "Plans", render: <ClientRouterLink to="/plans" onNavigate={navigate}/>, active: true },
+            { id: "settings", label: "Settings", render: <ClientRouterLink to="/settings" onNavigate={navigate}/> },
+            { id: "help", label: "Help", href: "#help" },
+        ],
+    },
+    decorators: [
+        (Story) => (<AnalyticsProvider enabled transport={{ track: trackNavigation }}>
+        <Story />
+      </AnalyticsProvider>),
+    ]
+}
+```
+
+### FillContent
+
+```tsx
+{
+    args: {
+        content: "fill",
+        footer: undefined,
+        children: (<Stack height="full" render={<section aria-label="Workspace canvas"/>}>
+        <Text>Full-height content owns its own scrolling.</Text>
+      </Stack>),
+    }
+}
+```

package/llms/components/layout/Container.md

@@ -0,0 +1,97 @@
+# Container
+
+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 />}`.
+
+Story: @alexgorbatchev/shadcn/components/layout/Container
+Source: src/components/stories/layout/Container.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/Container.stories.tsx)
+
+## Public imports
+
+```tsx
+import { AuthForm, Container, Stack, Text } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Container
+```
+
+## Story controls
+
+```tsx
+{
+    width: { control: "select", options: ["xs", "sm", "md", "lg", "xl", "full"] },
+    padding: { control: "select", options: ["none", "control", "panel-sm", "panel", "field", "section"] },
+}
+```
+
+## Default args
+
+```tsx
+{ width: "md", padding: "panel" }
+```
+
+## Default render
+
+```tsx
+(args) => (<Container {...args} render={<article aria-label="Article"/>}>
+      <Text>Plans, notes, and decisions stay in one place.</Text>
+    </Container>)
+```
+
+## 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.
+
+### Centered
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-[900px]">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### NarrowParent
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-60">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### SignInPage
+
+```tsx
+{
+    args: { width: "sm", padding: "none" },
+    render: (args) => (<Stack height="min-viewport" align="center" justify="center" padding="panel" render={<main aria-label="Sign in page"/>}>
+      <Container {...args}>
+        <AuthForm onSubmit={fn()}/>
+      </Container>
+    </Stack>)
+}
+```
+
+### DefaultWidth
+
+```tsx
+{
+    args: { width: undefined, padding: undefined },
+    decorators: [
+        (Story) => (<div className="w-[1200px]">
+        <Story />
+      </div>),
+    ]
+}
+```

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>)
+}
+```