@alexgorbatchev/shadcn 0.0.31 → 0.0.33

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

@@ -0,0 +1,476 @@
+# JsonRender
+
+Story: @alexgorbatchev/shadcn/components/data-display/JsonRender
+Source: src/components/stories/data-display/JsonRender.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/JsonRender.stories.tsx)
+
+## Public imports
+
+```tsx
+import { components, componentDefinitions } from "@alexgorbatchev/shadcn/json-render";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+import { createStateStore, defineCatalog, type Spec } from "@json-render/core";
+import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
+import { schema } from "@json-render/react/schema";
+```
+
+## Default component
+
+```tsx
+JsonExample
+```
+
+## 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.
+
+### Form
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "form",
+            elements: {
+                form: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: { type: "Input", props: { label: "Name", value: "Ada" } },
+                textarea: { type: "Textarea", props: { label: "Notes", value: "Initial notes" } },
+                select: { type: "Select", props: { label: "Plan", options: ["Free", "Pro"], value: "Free" } },
+                checkbox: { type: "Checkbox", props: { label: "Agree" } },
+                radio: { type: "Radio", props: { label: "Frequency", options: ["Daily", "Weekly"] } },
+                switch: { type: "Switch", props: { label: "Notifications" } },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10 } },
+                toggle: { type: "Toggle", props: { label: "Bold" } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### Overlays
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: ["tabs", "accordion", "collapse", "tooltip", "popover", "dropdown"],
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        tabs: [
+                            { value: "one", label: "First tab" },
+                            { value: "two", label: "Second tab" },
+                        ],
+                    },
+                },
+                accordion: {
+                    type: "Accordion",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { title: "Details", content: "Expanded details" },
+                            { title: "More", content: "More details" },
+                        ],
+                    },
+                },
+                collapse: { type: "Collapsible", props: { title: "Expand section", defaultOpen: false }, children: ["text"] },
+                text: { type: "Text", props: { text: "Collapsed content" } },
+                tooltip: { type: "Tooltip", props: { content: "Keyboard help", text: "Help trigger" } },
+                popover: { type: "Popover", props: { trigger: "Show popover", content: "Popover content" } },
+                dropdown: {
+                    type: "DropdownMenu",
+                    props: { label: "Open menu", items: [{ label: "Choose item", value: "item" }] },
+                },
+            },
+        },
+    }
+}
+```
+
+### Display
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "card",
+            elements: {
+                card: {
+                    type: "Card",
+                    props: { title: "Archive", description: "Rendered from JSON", maxWidth: "full" },
+                    children: ["grid", "table", "progress", "spinner", "skeleton", "separator", "carousel"],
+                },
+                grid: {
+                    type: "Grid",
+                    props: { columns: 2 },
+                    children: ["heading", "text", "badge", "alert", "avatar", "image", "link", "button"],
+                },
+                heading: { type: "Heading", props: { text: "Measurements", level: "h2" } },
+                text: { type: "Text", props: { text: "Last updated today", variant: "muted" } },
+                badge: { type: "Badge", props: { text: "Ready", variant: "secondary" } },
+                alert: { type: "Alert", props: { title: "Synced", message: "All records imported", type: "success" } },
+                avatar: { type: "Avatar", props: { name: "Ada Lovelace" } },
+                image: {
+                    type: "Image",
+                    props: {
+                        src: new URL("../fixtures/avatar.svg", import.meta.url).href,
+                        alt: "Profile",
+                        width: 40,
+                        height: 40,
+                    },
+                },
+                link: { type: "Link", props: { label: "Read documentation", href: "#docs" } },
+                button: { type: "Button", props: { label: "Sync records", variant: "secondary" } },
+                table: {
+                    type: "Table",
+                    props: { caption: "Measurements", columns: ["Day", "Score"], rows: [["Monday", "80"]] },
+                },
+                progress: { type: "Progress", props: { value: 50, max: 100, label: "Import progress" } },
+                spinner: { type: "Spinner", props: { size: "md", label: "Loading records" } },
+                skeleton: { type: "Skeleton", props: { width: "100%", height: "20px" } },
+                separator: { type: "Separator", props: {} },
+                carousel: {
+                    type: "Carousel",
+                    props: {
+                        items: [
+                            { title: "First slide", description: "First record" },
+                            { title: "Second slide", description: "Second record" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### BoundForm
+
+```tsx
+{
+    args: {
+        state: {
+            name: "Ada",
+            notes: "Initial notes",
+            plan: "Free",
+            agree: false,
+            frequency: "Daily",
+            notifications: false,
+            volume: 0,
+            bold: false,
+            position: "left",
+            period: "day",
+        },
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: {
+                    type: "Input",
+                    props: {
+                        label: "Name",
+                        value: { $bindState: "/name" },
+                        checks: [{ type: "required", message: "Name required" }],
+                        validateOn: "change",
+                    },
+                },
+                textarea: {
+                    type: "Textarea",
+                    props: {
+                        label: "Notes",
+                        value: { $bindState: "/notes" },
+                        checks: [{ type: "required", message: "Notes required" }],
+                        validateOn: "blur",
+                    },
+                },
+                select: {
+                    type: "Select",
+                    props: {
+                        label: "Plan",
+                        options: ["Free", "Pro"],
+                        value: { $bindState: "/plan" },
+                        checks: [{ type: "required", message: "Plan required" }],
+                    },
+                },
+                checkbox: {
+                    type: "Checkbox",
+                    props: {
+                        label: "Agree",
+                        checked: { $bindState: "/agree" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Agreement required" }],
+                    },
+                },
+                radio: {
+                    type: "Radio",
+                    props: {
+                        label: "Frequency",
+                        options: ["Daily", "Weekly"],
+                        value: { $bindState: "/frequency" },
+                        checks: [{ type: "required", message: "Frequency required" }],
+                    },
+                },
+                switch: {
+                    type: "Switch",
+                    props: {
+                        label: "Notifications",
+                        checked: { $bindState: "/notifications" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Notification preference required" }],
+                    },
+                },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10, value: { $bindState: "/volume" } } },
+                toggle: { type: "Toggle", props: { label: "Bold", pressed: { $bindState: "/bold" } } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        value: { $bindState: "/position" },
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: { $bindState: "/period" },
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### MissingBoundValues
+
+```tsx
+{
+    args: { ...BoundForm.args, state: {} }
+}
+```
+
+### PaginationAndDialog
+
+```tsx
+{
+    args: {
+        state: { page: 1, show: false, drawer: false },
+        spec: {
+            root: "root",
+            elements: {
+                root: { type: "Stack", props: {}, children: ["pagination", "open", "dialog", "openDrawer", "drawer"] },
+                pagination: { type: "Pagination", props: { page: { $bindState: "/page" }, totalPages: 20 } },
+                open: {
+                    type: "Button",
+                    props: { label: "Open dialog" },
+                    on: { press: { action: "setState", params: { statePath: "/show", value: true } } },
+                },
+                dialog: {
+                    type: "Dialog",
+                    props: { title: "Confirm import", description: "Import your records", openPath: "/show" },
+                },
+                openDrawer: {
+                    type: "Button",
+                    props: { label: "Open drawer" },
+                    on: { press: { action: "setState", params: { statePath: "/drawer", value: true } } },
+                },
+                drawer: {
+                    type: "Drawer",
+                    props: { title: "Archive details", description: "Stored records", openPath: "/drawer" },
+                },
+            },
+        },
+    }
+}
+```
+
+### TypographyAndPlaceholders
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: { direction: "horizontal", gap: "lg", align: "center", justify: "between" },
+                    children: [
+                        "small",
+                        "medium",
+                        "large",
+                        "empty",
+                        "placeholder",
+                        "avatar",
+                        "spinner",
+                        "skeleton",
+                        "progress",
+                        "separator",
+                        "table",
+                    ],
+                },
+                small: {
+                    type: "Card",
+                    props: { maxWidth: "sm", centered: true, title: "Small card" },
+                    children: ["h1", "caption", "alert"],
+                },
+                medium: {
+                    type: "Card",
+                    props: { maxWidth: "md", description: "Medium card" },
+                    children: ["h3", "lead", "warning"],
+                },
+                large: { type: "Card", props: { maxWidth: "lg" }, children: ["h4", "code", "info"] },
+                empty: { type: "Card", props: {}, children: ["body", "badge"] },
+                h1: { type: "Heading", props: { text: "Page heading", level: "h1" } },
+                h3: { type: "Heading", props: { text: "Section heading", level: "h3" } },
+                h4: { type: "Heading", props: { text: "Detail heading", level: "h4" } },
+                caption: { type: "Text", props: { text: "Caption", variant: "caption" } },
+                lead: { type: "Text", props: { text: "Lead paragraph", variant: "lead" } },
+                code: { type: "Text", props: { text: "const ready = true", variant: "code" } },
+                body: { type: "Text", props: { text: "Body paragraph" } },
+                badge: { type: "Badge", props: { text: "Default badge" } },
+                alert: { type: "Alert", props: { title: "Import failed", type: "error" } },
+                warning: { type: "Alert", props: { title: "Warning", type: "warning" } },
+                info: { type: "Alert", props: { title: "Default notice" } },
+                placeholder: { type: "Image", props: { src: null, alt: "Missing photograph" } },
+                avatar: { type: "Avatar", props: { name: "", size: "lg" } },
+                spinner: { type: "Spinner", props: { size: "sm" } },
+                skeleton: { type: "Skeleton", props: { rounded: true } },
+                progress: { type: "Progress", props: { value: 20 } },
+                separator: { type: "Separator", props: { orientation: "vertical" } },
+                table: { type: "Table", props: { columns: ["Name"], rows: [["Ada"]] } },
+            },
+        },
+    }
+}
+```
+
+### InitialSelections
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Grid",
+                    props: { columns: 1, gap: "sm" },
+                    children: [
+                        "buttons",
+                        "tabs",
+                        "toggles",
+                        "pagination",
+                        "slider",
+                        "accordion",
+                        "image",
+                        "avatar",
+                        "spinner",
+                        "button",
+                    ],
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: "month",
+                        buttons: [
+                            { label: "Day view", value: "day" },
+                            { label: "Month view", value: "month" },
+                        ],
+                    },
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        value: "second",
+                        tabs: [
+                            { label: "One", value: "first" },
+                            { label: "Two", value: "second" },
+                        ],
+                    },
+                },
+                toggles: { type: "ToggleGroup", props: { value: "", items: [{ label: "Pin", value: "pin" }] } },
+                pagination: { type: "Pagination", props: { totalPages: 3 } },
+                slider: { type: "Slider", props: { value: 20 } },
+                accordion: { type: "Accordion", props: { items: [{ title: "Single details", content: "Single expanded" }] } },
+                image: {
+                    type: "Image",
+                    props: { src: new URL("../fixtures/avatar.svg", import.meta.url).href, alt: "Small profile" },
+                },
+                avatar: {
+                    type: "Avatar",
+                    props: { name: "Ada", size: "sm", src: new URL("../fixtures/avatar.svg", import.meta.url).href },
+                },
+                spinner: { type: "Spinner", props: { size: "lg", label: "Large loader" } },
+                button: { type: "Button", props: { label: "Delete", variant: "danger", disabled: true } },
+            },
+        },
+    }
+}
+```

package/llms/components/feedback/Alert.md

@@ -26,7 +26,7 @@ Alert
 ## Story controls
 
 ```tsx
-{ variant: { control: "select", options: ["default", "destructive"] } }
+{ variant: { control: "select", options: ["default", "destructive", "success", "warning", "info"] } }
 ```
 
 ## Default render
@@ -57,6 +57,22 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Success
+
+```tsx
+{
+    args: { variant: "success" }
+}
+```
+
+### Info
+
+```tsx
+{
+    args: { variant: "info" }
+}
+```
+
 ### Compact
 
 ```tsx
@@ -80,14 +96,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
-### CustomColors
+### Warning
 
 ```tsx
 {
-    render: (args) => (<Alert {...args} className="border-warning/30 bg-warning/10 text-warning">
+    render: (args) => (<Alert {...args} variant="warning">
       <TriangleAlertIcon aria-hidden="true"/>
       <AlertTitle>Subscription expires soon</AlertTitle>
-      <AlertDescription className="text-warning">Renew your subscription to keep access.</AlertDescription>
+      <AlertDescription>Renew your subscription to keep access.</AlertDescription>
     </Alert>)
 }
 ```

package/llms/setup.md

@@ -38,10 +38,10 @@ The package targets client-rendered Bun React applications.
 
 # Installation
 
-Install the package in a consuming project:
+Install the package and the libraries its core components use. The package installs no third-party packages itself, so the consuming project owns every dependency version:
 
 ```sh
-bun add @alexgorbatchev/shadcn
+bun add @alexgorbatchev/shadcn @base-ui/react@^1.9.0 @base-ui/utils@0.5.0 class-variance-authority@^0.7.1 clsx@^2.1.1 lucide-react@^1.53.0 tailwind-merge@^3.7.0 tw-animate-css@^1.4.0 usehooks-ts@^3.1.1
 ```
 
 Package preparation and contributor commands are documented in [AGENTS.md](https://github.com/alexgorbatchev/shadcn/blob/main/AGENTS.md#commands).
@@ -52,6 +52,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 
 | Import path suffix   | Components                                               | Install alongside the package                                                                       |
 | -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/json-render`       | JSON Render component registry and catalog               | `bun add @json-render/core@0.21.1 @json-render/react@0.21.1 embla-carousel-react@^8.6.0`            |
 | `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
 | `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
 | `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
@@ -59,11 +60,11 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 | `/command`           | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
 | `/resizable`         | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
 | `/fonts.css`         | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
-| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
-| `/input-otp`         | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
+| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | `bun add sonner@2.0.8`; the patched runtime is bundled                                              |
+| `/input-otp`         | InputOTP components                                      | `bun add input-otp@1.5.0`; the patched runtime is bundled                                           |
 | `/virtual-table`     | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
-| `/message-scroller`  | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
-| `/questionnaire`     | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
+| `/message-scroller`  | MessageScroller components, hooks, and types             | `bun add @shadcn/react@0.3.1`; the patched runtime is bundled                                       |
+| `/questionnaire`     | Questionnaire components and types                       | `bun add @shadcn/react@0.3.1`; the patched runtime is bundled                                       |
 | `/data-grid`         | DataGrid, column picker, and native table helpers        | `bun add @tanstack/react-table@9.2.8`                                                               |
 | `/virtual-data-grid` | VirtualDataGrid and row measurement props                | `bun add @tanstack/react-table@9.2.8 @tanstack/react-virtual@3.14.13`                               |
 | `/file-upload`       | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
@@ -84,7 +85,7 @@ import { ChartContainer, type ChartConfig } from "@alexgorbatchev/shadcn/chart";
 import { Carousel, CarouselContent, CarouselItem } from "@alexgorbatchev/shadcn/carousel";
 ```
 
-The patched `sonner`, `input-otp`, and `@shadcn/react` packages remain regular dependencies pending upstream fixes. `react-big-calendar` is also a regular dependency: the calendar and its patched `uncontrollable` wrapper are bundled so React 19 consumers receive the JSX-runtime fix even when their package manager does not apply Bun patches. The corrected calendar runtime is isolated behind `/event-calendar`; React and declared peers remain external. This exception increases the installed dependency size even for core-only consumers. `@base-ui/utils` is a regular dependency at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without installing a second copy. Other feature dependencies are optional peers, so a core-only installation does not request them. Shared providers work across entry points.
+A production install of this package adds no third-party packages: every library is an optional peer that consumers install themselves, or is bundled into the package. Core peers are listed under Installation; feature peers are listed per entry point above. The patched `sonner`, `input-otp`, and `@shadcn/react` runtimes, and the calendar with its patched `uncontrollable` wrapper, are bundled so consumers receive the fixes even when their package manager does not apply Bun patches; consumers of those three entry points still install the upstream packages for the types the declarations reference; the calendar runtime stays isolated behind `/event-calendar`. Install `@base-ui/utils` at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without a second copy. Shared providers work across entry points.
 
 The optional assistant-ui catalog provides presentational families under `/assistant-ui/<family>` and runtime adapters under `/assistant-ui/native/<family>`. For example, import `ApprovalCard` from `@alexgorbatchev/shadcn/assistant-ui/approval-card`. Add `@alexgorbatchev/shadcn/assistant-ui.css` to your stylesheet. Native threads require an actual assistant-ui runtime and the selected family's optional peers. See the [assistant-ui reference](https://github.com/alexgorbatchev/shadcn/blob/main/docs/internal/assistant-ui.md) for imports, dependency-bearing styles, source inventory, and the SelectionToolbar isolation limitation.
 

package/llms.txt

@@ -335,6 +335,7 @@ Generated from the public package exports and Storybook sources.
 - [DataGrid](./llms/components/data-display/DataGrid.md)
 - [DataGridColumnOptions](./llms/components/data-display/DataGridColumnOptions.md)
 - [Item](./llms/components/data-display/Item.md)
+- [JsonRender](./llms/components/data-display/JsonRender.md)
 - [JsonViewer](./llms/components/data-display/JsonViewer.md)
 - [Kbd](./llms/components/data-display/Kbd.md)
 - [Meter](./llms/components/data-display/Meter.md)