tembro 2.1.12 → 2.1.13

package/dist/index.js

@@ -90,45 +90,45 @@ import { Timeline as jn } from "./components/display/timeline.js";
 import { TreeView as Mn } from "./components/display/tree-view.js";
 import { UserCard as Nn } from "./components/display/user-card.js";
 import { DeltaBadge as Pn } from "./components/display/delta-badge.js";
-import { BarChart as Fn, ChartFrame as In, ChartLegend as Ln, DonutChart as Rn, LineChart as zn, MetricTrend as Bn, Sparkline as Vn } from "./components/charts/charts.js";
-import { TrendCard as Hn } from "./components/display/trend-card.js";
-import { ComparisonCard as Un } from "./components/display/comparison-card.js";
+import { AreaChart as Fn, BarChart as In, ChartFrame as Ln, ChartLegend as Rn, DonutChart as zn, LineChart as Bn, MetricTrend as Vn, Sparkline as Hn } from "./components/charts/charts.js";
+import { TrendCard as Un } from "./components/display/trend-card.js";
+import { ComparisonCard as Wn } from "./components/display/comparison-card.js";
 import { SmartCard as $ } from "./components/display/smart-card.js";
-import { Carousel as Wn, CarouselItem as Gn } from "./components/display/carousel.js";
-import { QRCode as Kn, QRCodeSvg as qn } from "./components/display/qr-code.js";
-import { Chip as Jn, Tag as Yn, TagGroup as Xn } from "./components/display/tag.js";
-import { Blockquote as Zn, Heading as Qn, Mark as $n, Spoiler as er, SpoilerSummary as tr, Text as nr } from "./components/display/typography.js";
-import { CalendarScheduler as rr } from "./components/modern/calendar-scheduler.js";
-import { DualListPicker as ir } from "./components/modern/dual-list-picker.js";
-import { Menubar as ar, MenubarContent as or, MenubarItem as sr, MenubarMenu as cr, MenubarTrigger as lr } from "./components/modern/menubar.js";
-import { NavigationMenu as ur, NavigationMenuItem as dr, NavigationMenuLink as fr, NavigationMenuList as pr } from "./components/modern/navigation-menu.js";
-import { ResizableHandle as mr, ResizablePanel as hr, ResizablePanelGroup as gr } from "./components/modern/resizable-panel.js";
-import { RichTextEditor as _r } from "./components/modern/rich-text-editor.js";
-import { Tour as vr } from "./components/modern/tour.js";
-import { DataTableBulkActions as yr } from "./components/data-table/data-table-bulk-actions.js";
-import { DataTableColumnVisibilityMenu as br } from "./components/data-table/data-table-column-visibility-menu.js";
-import { DataTablePagination as xr, getDataTablePageCount as Sr } from "./components/data-table/data-table-pagination.js";
-import { DataTable as Cr } from "./components/data-table/data-table.js";
-import { DataTableSortableHeader as wr } from "./components/data-table/data-table-sortable-header.js";
-import { DataTableViewPresets as Tr } from "./components/data-table/data-table-view-presets.js";
-import { ToastProvider as Er, useToast as Dr } from "./components/notifications/toast.js";
-import { NotificationCenter as Or } from "./components/notifications/notification-center.js";
-import { CommandPalette as kr, useCommandPaletteShortcut as Ar } from "./components/command/command-palette.js";
-import { addMonths as jr, getMonthDays as Mr, getMonthLabel as Nr, getWeekdayLabels as Pr, isAfterDate as Fr, isBeforeDate as Ir, isSameMonth as Lr, isWithinRange as Rr, parseDateKey as zr, startOfMonth as Br, toDateKey as Vr } from "./components/calendar/date-utils.js";
-import { Calendar as Hr } from "./components/calendar/calendar.js";
-import { DatePicker as Ur } from "./components/calendar/date-picker.js";
-import { DateRangePicker as Wr } from "./components/calendar/date-range-picker.js";
-import { FileUpload as Gr } from "./components/upload/file-upload.js";
-import { ImageUpload as Kr } from "./components/upload/image-upload.js";
-import { FileDropzone as qr } from "./components/upload/file-dropzone.js";
-import { KpiCard as Jr, KpiGrid as Yr } from "./components/charts/kpi.js";
-import { ProgressRing as Xr } from "./components/charts/progress-ring.js";
-import { HorizontalBarChart as Zr } from "./components/charts/horizontal-bar-chart.js";
-import { Stepper as Qr } from "./components/wizard/stepper.js";
-import { Wizard as $r } from "./components/wizard/wizard.js";
-import { useSessionStorageState as ei } from "./hooks/use-session-storage-state.js";
-import { useBeforeUnloadWhenDirty as ti } from "./hooks/use-before-unload-when-dirty.js";
-import { useDisclosure as ni } from "./hooks/use-disclosure.js";
-import { useDebouncedCallback as ri, useDebouncedValue as ii } from "./hooks/use-debounce.js";
-import { useDataTableViewState as ai } from "./hooks/use-data-table-view-state.js";
-export { Pe as Accordion, Fe as AccordionContent, Ie as AccordionRoot, Le as AccordionTrigger, _ as ActionMenu, ln as ActivityFeed, tn as Alert, yt as AlertDialog, ut as AnchorNav, et as AppSidebar, Lt as AsyncMultiSelect, Rt as AsyncSelect, un as Avatar, dn as AvatarGroup, z as Badge, Fn as BarChart, Zn as Blockquote, nt as Breadcrumbs, ne as Button, v as ButtonGroup, Hr as Calendar, rr as CalendarScheduler, j as Card, M as CardAction, N as CardContent, P as CardDescription, F as CardFooter, I as CardHeader, L as CardTitle, Wn as Carousel, Gn as CarouselItem, In as ChartFrame, Ln as ChartLegend, k as Checkbox, Jn as Chip, mn as CodeBlock, Ae as Collapse, je as CollapseContent, Me as CollapseGroup, Ne as CollapseTrigger, gt as CommandBar, kr as CommandPalette, Un as ComparisonCard, Ct as ConfirmDialog, y as CopyButton, b as CopyField, Qe as DEFAULT_MOBILE_BREAKPOINT, sn as DataList, cn as DataListRow, hn as DataState, Cr as DataTable, yr as DataTableBulkActions, br as DataTableColumnVisibilityMenu, xr as DataTablePagination, wr as DataTableSortableHeader, Tr as DataTableViewPresets, Ur as DatePicker, Wr as DateRangePicker, Q as DateTimePicker, Pn as DeltaBadge, on as DescriptionList, fn as Descriptions, G as Dialog, bt as DialogActionButton, xt as DialogActions, K as DialogClose, q as DialogContent, J as DialogDescription, Y as DialogFooter, X as DialogHeader, Z as DialogOverlay, re as DialogPortal, ie as DialogTitle, ae as DialogTrigger, Ve as Divider, Rn as DonutChart, wt as Drawer, Tt as DrawerCloseButton, t as DropdownMenu, n as DropdownMenuCheckboxItem, r as DropdownMenuContent, i as DropdownMenuGroup, a as DropdownMenuItem, o as DropdownMenuItemDescription, s as DropdownMenuLabel, c as DropdownMenuPortal, l as DropdownMenuRadioGroup, u as DropdownMenuRadioItem, d as DropdownMenuSeparator, f as DropdownMenuShortcut, p as DropdownMenuSub, m as DropdownMenuSubContent, h as DropdownMenuSubTrigger, g as DropdownMenuTrigger, ir as DualListPicker, qr as FileDropzone, Gr as FileUpload, _t as FilterBar, en as FormAsyncSelect, Jt as FormFieldShell, Xt as FormInput, Zt as FormSelect, Qt as FormSwitch, $t as FormTextarea, Qn as Heading, Zr as HorizontalBarChart, Ke as HoverCard, Kr as ImageUpload, $ as InfoCard, Wt as InlineEditable, rn as InlineState, O as Input, S as InputGroup, C as InputGroupAddon, w as InputGroupButton, T as InputGroupInput, E as InputGroupText, D as InputGroupTextarea, Gt as JsonInput, pn as KanbanBoard, qe as Kbd, Jr as KpiCard, Yr as KpiGrid, zn as LineChart, gn as List, _n as ListRow, Ue as LoadingOverlay, nn as LoadingState, $n as Mark, ar as Menubar, or as MenubarContent, sr as MenubarItem, cr as MenubarMenu, lr as MenubarTrigger, vn as MetricGrid, Bn as MetricTrend, St as ModalShell, dt as NavTabs, ur as NavigationMenu, dr as NavigationMenuItem, fr as NavigationMenuLink, pr as NavigationMenuList, Or as NotificationCenter, zt as OtpInput, rt as PageContainer, an as PageState, ft as PageTabs, pt as Pagination, oe as Popover, se as PopoverContent, ce as PopoverDescription, le as PopoverHeader, ue as PopoverTitle, de as PopoverTrigger, yn as Progress, bn as ProgressCard, Sn as ProgressCircle, Xr as ProgressRing, Cn as PropertyGrid, Kn as QRCode, qn as QRCodeSvg, Ze as QuickActionGrid, Je as RadioGroup, Vt as RangeSlider, Bt as Rating, mr as ResizableHandle, hr as ResizablePanel, gr as ResizablePanelGroup, wn as Result, Tn as ResultAction, _r as RichTextEditor, Xe as RightClickMenu, vt as SavedFilterSelect, Ye as ScrollBox, it as Section, st as SectionHeader, He as SegmentedControl, fe as Select, pe as SelectContent, me as SelectGroup, he as SelectItem, ge as SelectLabel, _e as SelectScrollDownButton, ve as SelectScrollUpButton, ye as SelectSeparator, be as SelectTrigger, xe as SelectValue, Et as Sheet, Dt as SheetClose, Ot as SheetContent, kt as SheetDescription, At as SheetFooter, jt as SheetHeader, Mt as SheetOverlay, Nt as SheetPortal, Pt as SheetShell, Ft as SheetTitle, It as SheetTrigger, tt as Sidebar, ct as SidebarNav, Re as Skeleton, ze as SkeletonCard, Be as SkeletonText, Ht as Slider, $ as SmartCard, Vn as Sparkline, We as Spinner, at as SplitLayout, er as Spoiler, tr as SpoilerSummary, En as Statistic, Dn as StatisticCard, On as StatisticGrid, kn as StatusDot, An as StatusLegend, Qr as Stepper, ht as StepperTabs, lt as StickyFooterBar, A as Switch, Se as Table, Ce as TableBody, we as TableCaption, Te as TableCell, Ee as TableFooter, De as TableHead, Oe as TableHeader, ke as TableRow, V as Tabs, H as TabsContent, U as TabsList, W as TabsTrigger, Yn as Tag, Xn as TagGroup, Ut as TagInput, nr as Text, x as Textarea, Kt as TimePicker, qt as TimeRangePicker, jn as Timeline, Er as ToastProvider, ot as Toolbar, Ge as Tooltip, vr as Tour, Mn as TreeView, Hn as TrendCard, Nn as UserCard, $r as Wizard, jr as addMonths, B as badgeVariants, e as buttonVariants, R as cardVariants, ee as cn, Sr as getDataTablePageCount, Mr as getMonthDays, Nr as getMonthLabel, mt as getPaginationItems, xn as getProgressPercent, Pr as getWeekdayLabels, Fr as isAfterDate, Ir as isBeforeDate, Lr as isSameMonth, Rr as isWithinRange, zr as parseDateKey, Yt as resolveFormFieldIds, Br as startOfMonth, te as stopInteractivePropagation, Vr as toDateKey, ti as useBeforeUnloadWhenDirty, Ar as useCommandPaletteShortcut, ai as useDataTableViewState, ri as useDebouncedCallback, ii as useDebouncedValue, ni as useDisclosure, $e as useIsMobile, ei as useSessionStorageState, Dr as useToast };
+import { Carousel as Gn, CarouselItem as Kn } from "./components/display/carousel.js";
+import { QRCode as qn, QRCodeSvg as Jn } from "./components/display/qr-code.js";
+import { Chip as Yn, Tag as Xn, TagGroup as Zn } from "./components/display/tag.js";
+import { Blockquote as Qn, Heading as $n, Mark as er, Spoiler as tr, SpoilerSummary as nr, Text as rr } from "./components/display/typography.js";
+import { CalendarScheduler as ir } from "./components/modern/calendar-scheduler.js";
+import { DualListPicker as ar } from "./components/modern/dual-list-picker.js";
+import { Menubar as or, MenubarContent as sr, MenubarItem as cr, MenubarMenu as lr, MenubarTrigger as ur } from "./components/modern/menubar.js";
+import { NavigationMenu as dr, NavigationMenuItem as fr, NavigationMenuLink as pr, NavigationMenuList as mr } from "./components/modern/navigation-menu.js";
+import { ResizableHandle as hr, ResizablePanel as gr, ResizablePanelGroup as _r } from "./components/modern/resizable-panel.js";
+import { RichTextEditor as vr } from "./components/modern/rich-text-editor.js";
+import { Tour as yr } from "./components/modern/tour.js";
+import { DataTableBulkActions as br } from "./components/data-table/data-table-bulk-actions.js";
+import { DataTableColumnVisibilityMenu as xr } from "./components/data-table/data-table-column-visibility-menu.js";
+import { DataTablePagination as Sr, getDataTablePageCount as Cr } from "./components/data-table/data-table-pagination.js";
+import { DataTable as wr } from "./components/data-table/data-table.js";
+import { DataTableSortableHeader as Tr } from "./components/data-table/data-table-sortable-header.js";
+import { DataTableViewPresets as Er } from "./components/data-table/data-table-view-presets.js";
+import { ToastProvider as Dr, useToast as Or } from "./components/notifications/toast.js";
+import { NotificationCenter as kr } from "./components/notifications/notification-center.js";
+import { CommandPalette as Ar, useCommandPaletteShortcut as jr } from "./components/command/command-palette.js";
+import { addMonths as Mr, getMonthDays as Nr, getMonthLabel as Pr, getWeekdayLabels as Fr, isAfterDate as Ir, isBeforeDate as Lr, isSameMonth as Rr, isWithinRange as zr, parseDateKey as Br, startOfMonth as Vr, toDateKey as Hr } from "./components/calendar/date-utils.js";
+import { Calendar as Ur } from "./components/calendar/calendar.js";
+import { DatePicker as Wr } from "./components/calendar/date-picker.js";
+import { DateRangePicker as Gr } from "./components/calendar/date-range-picker.js";
+import { FileUpload as Kr } from "./components/upload/file-upload.js";
+import { ImageUpload as qr } from "./components/upload/image-upload.js";
+import { FileDropzone as Jr } from "./components/upload/file-dropzone.js";
+import { KpiCard as Yr, KpiGrid as Xr } from "./components/charts/kpi.js";
+import { ProgressRing as Zr } from "./components/charts/progress-ring.js";
+import { HorizontalBarChart as Qr } from "./components/charts/horizontal-bar-chart.js";
+import { Stepper as $r } from "./components/wizard/stepper.js";
+import { Wizard as ei } from "./components/wizard/wizard.js";
+import { useSessionStorageState as ti } from "./hooks/use-session-storage-state.js";
+import { useBeforeUnloadWhenDirty as ni } from "./hooks/use-before-unload-when-dirty.js";
+import { useDisclosure as ri } from "./hooks/use-disclosure.js";
+import { useDebouncedCallback as ii, useDebouncedValue as ai } from "./hooks/use-debounce.js";
+import { useDataTableViewState as oi } from "./hooks/use-data-table-view-state.js";
+export { Pe as Accordion, Fe as AccordionContent, Ie as AccordionRoot, Le as AccordionTrigger, _ as ActionMenu, ln as ActivityFeed, tn as Alert, yt as AlertDialog, ut as AnchorNav, et as AppSidebar, Fn as AreaChart, Lt as AsyncMultiSelect, Rt as AsyncSelect, un as Avatar, dn as AvatarGroup, z as Badge, In as BarChart, Qn as Blockquote, nt as Breadcrumbs, ne as Button, v as ButtonGroup, Ur as Calendar, ir as CalendarScheduler, j as Card, M as CardAction, N as CardContent, P as CardDescription, F as CardFooter, I as CardHeader, L as CardTitle, Gn as Carousel, Kn as CarouselItem, Ln as ChartFrame, Rn as ChartLegend, k as Checkbox, Yn as Chip, mn as CodeBlock, Ae as Collapse, je as CollapseContent, Me as CollapseGroup, Ne as CollapseTrigger, gt as CommandBar, Ar as CommandPalette, Wn as ComparisonCard, Ct as ConfirmDialog, y as CopyButton, b as CopyField, Qe as DEFAULT_MOBILE_BREAKPOINT, sn as DataList, cn as DataListRow, hn as DataState, wr as DataTable, br as DataTableBulkActions, xr as DataTableColumnVisibilityMenu, Sr as DataTablePagination, Tr as DataTableSortableHeader, Er as DataTableViewPresets, Wr as DatePicker, Gr as DateRangePicker, Q as DateTimePicker, Pn as DeltaBadge, on as DescriptionList, fn as Descriptions, G as Dialog, bt as DialogActionButton, xt as DialogActions, K as DialogClose, q as DialogContent, J as DialogDescription, Y as DialogFooter, X as DialogHeader, Z as DialogOverlay, re as DialogPortal, ie as DialogTitle, ae as DialogTrigger, Ve as Divider, zn as DonutChart, wt as Drawer, Tt as DrawerCloseButton, t as DropdownMenu, n as DropdownMenuCheckboxItem, r as DropdownMenuContent, i as DropdownMenuGroup, a as DropdownMenuItem, o as DropdownMenuItemDescription, s as DropdownMenuLabel, c as DropdownMenuPortal, l as DropdownMenuRadioGroup, u as DropdownMenuRadioItem, d as DropdownMenuSeparator, f as DropdownMenuShortcut, p as DropdownMenuSub, m as DropdownMenuSubContent, h as DropdownMenuSubTrigger, g as DropdownMenuTrigger, ar as DualListPicker, Jr as FileDropzone, Kr as FileUpload, _t as FilterBar, en as FormAsyncSelect, Jt as FormFieldShell, Xt as FormInput, Zt as FormSelect, Qt as FormSwitch, $t as FormTextarea, $n as Heading, Qr as HorizontalBarChart, Ke as HoverCard, qr as ImageUpload, $ as InfoCard, Wt as InlineEditable, rn as InlineState, O as Input, S as InputGroup, C as InputGroupAddon, w as InputGroupButton, T as InputGroupInput, E as InputGroupText, D as InputGroupTextarea, Gt as JsonInput, pn as KanbanBoard, qe as Kbd, Yr as KpiCard, Xr as KpiGrid, Bn as LineChart, gn as List, _n as ListRow, Ue as LoadingOverlay, nn as LoadingState, er as Mark, or as Menubar, sr as MenubarContent, cr as MenubarItem, lr as MenubarMenu, ur as MenubarTrigger, vn as MetricGrid, Vn as MetricTrend, St as ModalShell, dt as NavTabs, dr as NavigationMenu, fr as NavigationMenuItem, pr as NavigationMenuLink, mr as NavigationMenuList, kr as NotificationCenter, zt as OtpInput, rt as PageContainer, an as PageState, ft as PageTabs, pt as Pagination, oe as Popover, se as PopoverContent, ce as PopoverDescription, le as PopoverHeader, ue as PopoverTitle, de as PopoverTrigger, yn as Progress, bn as ProgressCard, Sn as ProgressCircle, Zr as ProgressRing, Cn as PropertyGrid, qn as QRCode, Jn as QRCodeSvg, Ze as QuickActionGrid, Je as RadioGroup, Vt as RangeSlider, Bt as Rating, hr as ResizableHandle, gr as ResizablePanel, _r as ResizablePanelGroup, wn as Result, Tn as ResultAction, vr as RichTextEditor, Xe as RightClickMenu, vt as SavedFilterSelect, Ye as ScrollBox, it as Section, st as SectionHeader, He as SegmentedControl, fe as Select, pe as SelectContent, me as SelectGroup, he as SelectItem, ge as SelectLabel, _e as SelectScrollDownButton, ve as SelectScrollUpButton, ye as SelectSeparator, be as SelectTrigger, xe as SelectValue, Et as Sheet, Dt as SheetClose, Ot as SheetContent, kt as SheetDescription, At as SheetFooter, jt as SheetHeader, Mt as SheetOverlay, Nt as SheetPortal, Pt as SheetShell, Ft as SheetTitle, It as SheetTrigger, tt as Sidebar, ct as SidebarNav, Re as Skeleton, ze as SkeletonCard, Be as SkeletonText, Ht as Slider, $ as SmartCard, Hn as Sparkline, We as Spinner, at as SplitLayout, tr as Spoiler, nr as SpoilerSummary, En as Statistic, Dn as StatisticCard, On as StatisticGrid, kn as StatusDot, An as StatusLegend, $r as Stepper, ht as StepperTabs, lt as StickyFooterBar, A as Switch, Se as Table, Ce as TableBody, we as TableCaption, Te as TableCell, Ee as TableFooter, De as TableHead, Oe as TableHeader, ke as TableRow, V as Tabs, H as TabsContent, U as TabsList, W as TabsTrigger, Xn as Tag, Zn as TagGroup, Ut as TagInput, rr as Text, x as Textarea, Kt as TimePicker, qt as TimeRangePicker, jn as Timeline, Dr as ToastProvider, ot as Toolbar, Ge as Tooltip, yr as Tour, Mn as TreeView, Un as TrendCard, Nn as UserCard, ei as Wizard, Mr as addMonths, B as badgeVariants, e as buttonVariants, R as cardVariants, ee as cn, Cr as getDataTablePageCount, Nr as getMonthDays, Pr as getMonthLabel, mt as getPaginationItems, xn as getProgressPercent, Fr as getWeekdayLabels, Ir as isAfterDate, Lr as isBeforeDate, Rr as isSameMonth, zr as isWithinRange, Br as parseDateKey, Yt as resolveFormFieldIds, Vr as startOfMonth, te as stopInteractivePropagation, Hr as toDateKey, ni as useBeforeUnloadWhenDirty, jr as useCommandPaletteShortcut, oi as useDataTableViewState, ii as useDebouncedCallback, ai as useDebouncedValue, ri as useDisclosure, $e as useIsMobile, ti as useSessionStorageState, Or as useToast };

package/dist/showcase/create-demo.cjs

@@ -1,140 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs");let t=require("react/jsx-runtime");function n(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function r(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:i(e),Showcase:n=>(0,t.jsx)(l,{definition:e,...n})}]))}function i(e){return{cliCommand:`npx tembro add ${e.slug}`,code:a(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function a(e){return o[e.slug]??s(e)}var o={"search-input":`import { Input } from "tembro"
-
-export function Demo() {
-  return (
-    <Input
-      type="search"
-      value="invoice"
-      onValueChange={(value) => console.log(value)}
-      placeholder="Search invoices..."
-      resultCount={12}
-      shortcut="Ctrl K"
-    />
-  )
-}`,"password-input":`import { PasswordInput } from "tembro"
-
-export function Demo() {
-  return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
-}`,"clearable-input":`import { Input } from "tembro"
-
-export function Demo() {
-  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
-}`,"tag-input":`import { TagInput } from "tembro"
-
-export function Demo() {
-  return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
-}`,"action-menu":`import { ActionMenu, Button } from "tembro"
-
-export function Demo() {
-  return (
-    <ActionMenu
-      label="Row actions"
-      actions={[
-        { key: "open", label: "Open" },
-        { key: "duplicate", label: "Duplicate" },
-        { key: "archive", label: "Archive", destructive: true },
-      ]}
-      trigger={<Button variant="outline">Actions</Button>}
-    />
-  )
-}`,"button-group":`import { ButtonGroup } from "tembro"
-
-export function Demo() {
-  return (
-    <ButtonGroup
-      items={[
-        { key: "day", label: "Day" },
-        { key: "week", label: "Week" },
-        { key: "month", label: "Month" },
-      ]}
-    />
-  )
-}`,"quick-action-grid":`import { QuickActionGrid } from "tembro"
-
-export function Demo() {
-  return (
-    <QuickActionGrid
-      columns={3}
-      items={[
-        { key: "new", label: "New invoice", description: "Create a billing row." },
-        { key: "import", label: "Import CSV", description: "Upload operational data." },
-        { key: "share", label: "Share", description: "Invite a teammate." },
-      ]}
-    />
-  )
-}`,"filter-bar":`import { Button, FilterBar, Input } from "tembro"
-
-export function Demo() {
-  return (
-    <FilterBar
-      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
-      chips={[
-        { key: "status", label: "Status", value: "Active", tone: "success" },
-        { key: "owner", label: "Owner", value: "Azamat" },
-      ]}
-      filters={<Button variant="outline">Status</Button>}
-      actions={<Button>Export</Button>}
-      onReset={() => undefined}
-    />
-  )
-}`,"description-list":`import { DescriptionList } from "tembro"
-
-export function Demo() {
-  return (
-    <DescriptionList
-      title="Invoice details"
-      items={[
-        { key: "id", label: "Invoice", value: "#4821" },
-        { key: "amount", label: "Amount", value: "$12,420" },
-        { key: "status", label: "Status", value: "Paid" },
-      ]}
-    />
-  )
-}`,"stat-card":`import { StatCard } from "tembro"
-
-export function Demo() {
-  return (
-    <StatCard
-      title="Revenue"
-      value="$84.2k"
-      description="Compared with last month"
-      trend={{ value: "+12.4%", tone: "success" }}
-      helperText="Updated just now"
-    />
-  )
-}`,pagination:`import { Pagination } from "tembro"
-
-export function Demo() {
-  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
-}`,"dialog-actions":`import { DialogActionButton, DialogActions } from "tembro"
-
-export function Demo() {
-  return (
-    <DialogActions align="end">
-      <DialogActionButton variant="ghost">Cancel</DialogActionButton>
-      <DialogActionButton variant="outline">Save draft</DialogActionButton>
-      <DialogActionButton>Publish</DialogActionButton>
-    </DialogActions>
-  )
-}`,"file-dropzone":`import { FileDropzone } from "tembro"
-
-export function Demo() {
-  return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
-}`,stepper:`import { Stepper } from "tembro"
-
-export function Demo() {
-  return (
-    <Stepper
-      currentStep="billing"
-      steps={[
-        { id: "profile", title: "Profile", completed: true },
-        { id: "billing", title: "Billing" },
-        { id: "review", title: "Review" },
-      ]}
-      onStepChange={() => undefined}
-    />
-  )
-}`};function s(e){let t=e.importName??e.component,n=`tembro`;return e.kind===`data-table`?`import { ${t} } from "${n}"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs"),t=require("./demo-snippets/index.cjs");let n=require("react/jsx-runtime");function r(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function i(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:a(e),Showcase:t=>(0,n.jsx)(l,{definition:e,...t})}]))}function a(e){return{cliCommand:`npx tembro add ${e.slug}`,code:o(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function o(e){return t.demoCodeSnippets[e.slug]??s(e)}function s(e){let t=e.importName??e.component,n=`tembro`;return e.kind===`data-table`?`import { ${t} } from "${n}"
 
 export function Demo() {
   return (
@@ -158,4 +22,4 @@ export function Demo() {
 
 export function Demo() {
   return <${t} />
-}`}function c(e){return[`Add ${e.slug} into your local source with the CLI.`,`Open the ${e.title} page to review props, copyable code, and a live state preview.`,p(e.kind)]}function l({definition:n,state:r,setState:i}){return(0,t.jsxs)(`div`,{className:`space-y-5`,children:[(0,t.jsxs)(`header`,{className:`space-y-2`,children:[(0,t.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,t.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:n.component}),(0,t.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:n.kind})]}),(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`h3`,{className:`text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]`,children:n.title}),(0,t.jsx)(`p`,{className:`mt-2 max-w-2xl text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:n.summary})]})]}),(0,t.jsxs)(`div`,{className:`overflow-hidden rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)]`,children:[(0,t.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:`Live example`}),(0,t.jsx)(`p`,{className:`mt-1 text-sm font-medium text-[color:var(--aui-page-foreground)]`,children:`Realistic dashboard state`})]}),(0,t.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 text-[11px] font-semibold text-[color:var(--aui-brand-strong)]`,children:`CLI ready`})]}),(0,t.jsx)(`div`,{className:`p-4 sm:p-5`,children:e.renderShowcasePreview(n,r,i)})]}),(0,t.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:n.highlights.slice(0,3).map(e=>(0,t.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:e},e))}),(0,t.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:n.scenarios.slice(0,2).map(e=>(0,t.jsxs)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,t.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:e.title}),(0,t.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:e.description})]},e.title))})]})}function u(e){return{actions:`Actions include labels, destructive states and compact row controls.`,calendar:`Calendar examples keep date value and month state visible.`,"data-table":`Table demos show toolbar, selection, rows, actions and pagination context.`,display:`Display demos use real entity, metric and workflow copy.`,feedback:`Feedback demos include status, action and recovery context.`,form:`Form demos keep label, hint and validation spacing visible.`,inputs:`Input demos show controlled values, placeholder copy and useful affordances.`,layout:`Layout demos show how the component frames a production screen.`,navigation:`Navigation demos show active state and route-sized labels.`,overlay:`Overlay demos keep trigger, content and action semantics together.`,patterns:`Pattern demos show page-level composition, not just isolated atoms.`,upload:`Upload demos show accepted content and empty state messaging.`,wizard:`Wizard demos include steps, progress and content slots.`}[e]}function d(e,t){return e===`data-table`?`Use on operational pages where search, filters, selection and row actions must stay visible together.`:e===`patterns`?`Use when a whole route needs consistent header, stats, filters, sections and detail content.`:e===`overlay`?`Use when the user needs a focused decision without leaving the current route.`:e===`inputs`||e===`form`?`Use inside controlled forms where label, value and validation behavior must be predictable.`:t}function f(e,t){return`Run the CLI add command for ${e}, import ${t}, then replace the preview data with your product state.`}function p(e){return{actions:`Keep action labels explicit and mark destructive operations clearly.`,calendar:`Keep date values normalized before passing them into calendar state.`,"data-table":`Wire table state first, then add visual density and presets.`,display:`Use real empty, loading and long-text cases before shipping.`,feedback:`Pair every alert or state with the next useful user action.`,form:`Validate with RHF or controlled state before styling the wrapper.`,inputs:`Keep value and onChange behavior stable for filtering and forms.`,layout:`Use layout components at route level instead of nesting them deep inside widgets.`,navigation:`Keep active state route-driven where possible.`,overlay:`Preserve focus return, escape close and mobile behavior.`,patterns:`Treat patterns as starting points for full pages, not tiny widgets.`,upload:`Validate file type, size and async error states in your app layer.`,wizard:`Persist current step and form state between step changes.`}[e]}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(` `)}exports.component=n,exports.createShowcaseDemoRegistry=r;
+}`}function c(e){return[`Add ${e.slug} into your local source with the CLI.`,`Open the ${e.title} page to review props, copyable code, and a live state preview.`,p(e.kind)]}function l({definition:t,state:r,setState:i}){return(0,n.jsxs)(`div`,{className:`space-y-5`,children:[(0,n.jsxs)(`header`,{className:`space-y-2`,children:[(0,n.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,n.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:t.component}),(0,n.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:t.kind})]}),(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`h3`,{className:`text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]`,children:t.title}),(0,n.jsx)(`p`,{className:`mt-2 max-w-2xl text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:t.summary})]})]}),(0,n.jsxs)(`div`,{className:`overflow-hidden rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)]`,children:[(0,n.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:`Live example`}),(0,n.jsx)(`p`,{className:`mt-1 text-sm font-medium text-[color:var(--aui-page-foreground)]`,children:`Realistic dashboard state`})]}),(0,n.jsx)(`span`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 text-[11px] font-semibold text-[color:var(--aui-brand-strong)]`,children:`CLI ready`})]}),(0,n.jsx)(`div`,{className:`p-4 sm:p-5`,children:e.renderShowcasePreview(t,r,i)})]}),(0,n.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:t.highlights.slice(0,3).map(e=>(0,n.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:e},e))}),(0,n.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:t.scenarios.slice(0,2).map(e=>(0,n.jsxs)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]`,children:e.title}),(0,n.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:e.description})]},e.title))})]})}function u(e){return{actions:`Actions include labels, destructive states and compact row controls.`,calendar:`Calendar examples keep date value and month state visible.`,"data-table":`Table demos show toolbar, selection, rows, actions and pagination context.`,display:`Display demos use real entity, metric and workflow copy.`,feedback:`Feedback demos include status, action and recovery context.`,form:`Form demos keep label, hint and validation spacing visible.`,inputs:`Input demos show controlled values, placeholder copy and useful affordances.`,layout:`Layout demos show how the component frames a production screen.`,navigation:`Navigation demos show active state and route-sized labels.`,overlay:`Overlay demos keep trigger, content and action semantics together.`,patterns:`Pattern demos show page-level composition, not just isolated atoms.`,upload:`Upload demos show accepted content and empty state messaging.`,wizard:`Wizard demos include steps, progress and content slots.`}[e]}function d(e,t){return e===`data-table`?`Use on operational pages where search, filters, selection and row actions must stay visible together.`:e===`patterns`?`Use when a whole route needs consistent header, stats, filters, sections and detail content.`:e===`overlay`?`Use when the user needs a focused decision without leaving the current route.`:e===`inputs`||e===`form`?`Use inside controlled forms where label, value and validation behavior must be predictable.`:t}function f(e,t){return`Run the CLI add command for ${e}, import ${t}, then replace the preview data with your product state.`}function p(e){return{actions:`Keep action labels explicit and mark destructive operations clearly.`,calendar:`Keep date values normalized before passing them into calendar state.`,"data-table":`Wire table state first, then add visual density and presets.`,display:`Use real empty, loading and long-text cases before shipping.`,feedback:`Pair every alert or state with the next useful user action.`,form:`Validate with RHF or controlled state before styling the wrapper.`,inputs:`Keep value and onChange behavior stable for filtering and forms.`,layout:`Use layout components at route level instead of nesting them deep inside widgets.`,navigation:`Keep active state route-driven where possible.`,overlay:`Preserve focus return, escape close and mobile behavior.`,patterns:`Treat patterns as starting points for full pages, not tiny widgets.`,upload:`Validate file type, size and async error states in your app layer.`,wizard:`Persist current step and form state between step changes.`}[e]}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(` `)}exports.component=r,exports.createShowcaseDemoRegistry=i;

package/dist/showcase/create-demo.js

@@ -1,7 +1,8 @@
 import { renderShowcasePreview as e } from "./render-registry-preview.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { demoCodeSnippets as t } from "./demo-snippets/index.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/create-demo.tsx
-function r(e, t, n, r, i = t) {
+function i(e, t, n, r, i = t) {
 	let a = h(e);
 	return {
 		slug: e,
@@ -24,43 +25,27 @@ function r(e, t, n, r, i = t) {
 		}]
 	};
 }
-function i(e) {
+function a(e) {
 	return Object.fromEntries(e.map((e) => [e.slug, {
-		mock: a(e),
-		Showcase: (n) => /* @__PURE__ */ t(u, {
+		mock: o(e),
+		Showcase: (t) => /* @__PURE__ */ n(u, {
 			definition: e,
-			...n
+			...t
 		})
 	}]));
 }
-function a(e) {
+function o(e) {
 	return {
 		cliCommand: `npx tembro add ${e.slug}`,
-		code: o(e),
+		code: s(e),
 		highlights: e.highlights,
 		scenarios: e.scenarios,
 		capabilityNotes: l(e)
 	};
 }
-function o(e) {
-	return s[e.slug] ?? c(e);
+function s(e) {
+	return t[e.slug] ?? c(e);
 }
-var s = {
-	"search-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Input\n      type=\"search\"\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
-	"password-input": "import { PasswordInput } from \"tembro\"\n\nexport function Demo() {\n  return <PasswordInput placeholder=\"Enter secure token\" autoComplete=\"current-password\" />\n}",
-	"clearable-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return <Input defaultValue=\"Azamat UI\" placeholder=\"Search customer\" clearable />\n}",
-	"tag-input": "import { TagInput } from \"tembro\"\n\nexport function Demo() {\n  return <TagInput defaultValue={[\"dashboard\", \"billing\"]} placeholder=\"Add tag\" />\n}",
-	"action-menu": "import { ActionMenu, Button } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n      trigger={<Button variant=\"outline\">Actions</Button>}\n    />\n  )\n}",
-	"button-group": "import { ButtonGroup } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"day\", label: \"Day\" },\n        { key: \"week\", label: \"Week\" },\n        { key: \"month\", label: \"Month\" },\n      ]}\n    />\n  )\n}",
-	"quick-action-grid": "import { QuickActionGrid } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <QuickActionGrid\n      columns={3}\n      items={[\n        { key: \"new\", label: \"New invoice\", description: \"Create a billing row.\" },\n        { key: \"import\", label: \"Import CSV\", description: \"Upload operational data.\" },\n        { key: \"share\", label: \"Share\", description: \"Invite a teammate.\" },\n      ]}\n    />\n  )\n}",
-	"filter-bar": "import { Button, FilterBar, Input } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <FilterBar\n      search={<Input type=\"search\" value=\"\" placeholder=\"Search rows...\" readOnly />}\n      chips={[\n        { key: \"status\", label: \"Status\", value: \"Active\", tone: \"success\" },\n        { key: \"owner\", label: \"Owner\", value: \"Azamat\" },\n      ]}\n      filters={<Button variant=\"outline\">Status</Button>}\n      actions={<Button>Export</Button>}\n      onReset={() => undefined}\n    />\n  )\n}",
-	"description-list": "import { DescriptionList } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DescriptionList\n      title=\"Invoice details\"\n      items={[\n        { key: \"id\", label: \"Invoice\", value: \"#4821\" },\n        { key: \"amount\", label: \"Amount\", value: \"$12,420\" },\n        { key: \"status\", label: \"Status\", value: \"Paid\" },\n      ]}\n    />\n  )\n}",
-	"stat-card": "import { StatCard } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <StatCard\n      title=\"Revenue\"\n      value=\"$84.2k\"\n      description=\"Compared with last month\"\n      trend={{ value: \"+12.4%\", tone: \"success\" }}\n      helperText=\"Updated just now\"\n    />\n  )\n}",
-	pagination: "import { Pagination } from \"tembro\"\n\nexport function Demo() {\n  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />\n}",
-	"dialog-actions": "import { DialogActionButton, DialogActions } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DialogActions align=\"end\">\n      <DialogActionButton variant=\"ghost\">Cancel</DialogActionButton>\n      <DialogActionButton variant=\"outline\">Save draft</DialogActionButton>\n      <DialogActionButton>Publish</DialogActionButton>\n    </DialogActions>\n  )\n}",
-	"file-dropzone": "import { FileDropzone } from \"tembro\"\n\nexport function Demo() {\n  return <FileDropzone label=\"Drop contract files\" description=\"PDF, PNG or CSV up to 10MB.\" />\n}",
-	stepper: "import { Stepper } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Stepper\n      currentStep=\"billing\"\n      steps={[\n        { id: \"profile\", title: \"Profile\", completed: true },\n        { id: \"billing\", title: \"Billing\" },\n        { id: \"review\", title: \"Review\" },\n      ]}\n      onStepChange={() => undefined}\n    />\n  )\n}"
-};
 function c(e) {
 	let t = e.importName ?? e.component, n = "tembro";
 	return e.kind === "data-table" ? `import { ${t} } from "${n}"
@@ -96,63 +81,63 @@ function l(e) {
 		m(e.kind)
 	];
 }
-function u({ definition: r, state: i, setState: a }) {
-	return /* @__PURE__ */ n("div", {
+function u({ definition: t, state: i, setState: a }) {
+	return /* @__PURE__ */ r("div", {
 		className: "space-y-5",
 		children: [
-			/* @__PURE__ */ n("header", {
+			/* @__PURE__ */ r("header", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ n("div", {
+				children: [/* @__PURE__ */ r("div", {
 					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ t("span", {
+					children: [/* @__PURE__ */ n("span", {
 						className: "rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]",
-						children: r.component
-					}), /* @__PURE__ */ t("span", {
+						children: t.component
+					}), /* @__PURE__ */ n("span", {
 						className: "rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]",
-						children: r.kind
+						children: t.kind
 					})]
-				}), /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h3", {
+				}), /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h3", {
 					className: "text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]",
-					children: r.title
-				}), /* @__PURE__ */ t("p", {
+					children: t.title
+				}), /* @__PURE__ */ n("p", {
 					className: "mt-2 max-w-2xl text-sm leading-6 text-[color:var(--aui-page-muted)]",
-					children: r.summary
+					children: t.summary
 				})] })]
 			}),
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ r("div", {
 				className: "overflow-hidden rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)]",
-				children: [/* @__PURE__ */ n("div", {
+				children: [/* @__PURE__ */ r("div", {
 					className: "flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] px-4 py-3",
-					children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("p", {
+					children: [/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("p", {
 						className: "text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]",
 						children: "Live example"
-					}), /* @__PURE__ */ t("p", {
+					}), /* @__PURE__ */ n("p", {
 						className: "mt-1 text-sm font-medium text-[color:var(--aui-page-foreground)]",
 						children: "Realistic dashboard state"
-					})] }), /* @__PURE__ */ t("span", {
+					})] }), /* @__PURE__ */ n("span", {
 						className: "rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 text-[11px] font-semibold text-[color:var(--aui-brand-strong)]",
 						children: "CLI ready"
 					})]
-				}), /* @__PURE__ */ t("div", {
+				}), /* @__PURE__ */ n("div", {
 					className: "p-4 sm:p-5",
-					children: e(r, i, a)
+					children: e(t, i, a)
 				})]
 			}),
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: "grid gap-3 md:grid-cols-3",
-				children: r.highlights.slice(0, 3).map((e) => /* @__PURE__ */ t("div", {
+				children: t.highlights.slice(0, 3).map((e) => /* @__PURE__ */ n("div", {
 					className: "rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 text-[color:var(--aui-page-muted)]",
 					children: e
 				}, e))
 			}),
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: "grid gap-3 md:grid-cols-2",
-				children: r.scenarios.slice(0, 2).map((e) => /* @__PURE__ */ n("div", {
+				children: t.scenarios.slice(0, 2).map((e) => /* @__PURE__ */ r("div", {
 					className: "rounded-2xl border border-dashed border-[color:var(--aui-divider)] px-4 py-3",
-					children: [/* @__PURE__ */ t("p", {
+					children: [/* @__PURE__ */ n("p", {
 						className: "text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted)]",
 						children: e.title
-					}), /* @__PURE__ */ t("p", {
+					}), /* @__PURE__ */ n("p", {
 						className: "mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]",
 						children: e.description
 					})]
@@ -205,4 +190,4 @@ function h(e) {
 	return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
 }
 //#endregion
-export { r as component, i as createShowcaseDemoRegistry };
+export { i as component, a as createShowcaseDemoRegistry };

package/dist/showcase/demo-snippets/actions/index.cjs

@@ -0,0 +1,64 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={"action-menu":`import { ActionMenu, Button } from "tembro"
+
+export function Demo() {
+  return (
+    <ActionMenu
+      label="Row actions"
+      actions={[
+        { key: "open", label: "Open" },
+        { key: "duplicate", label: "Duplicate" },
+        { key: "archive", label: "Archive", destructive: true },
+      ]}
+      trigger={<Button variant="outline">Actions</Button>}
+    />
+  )
+}`,"button-group":`import { ButtonGroup } from "tembro"
+
+export function Demo() {
+  return (
+    <ButtonGroup
+      items={[
+        { key: "day", label: "Day" },
+        { key: "week", label: "Week" },
+        { key: "month", label: "Month" },
+      ]}
+    />
+  )
+}`,"quick-action-grid":`import { QuickActionGrid } from "tembro"
+
+export function Demo() {
+  return (
+    <QuickActionGrid
+      columns={3}
+      items={[
+        { key: "new", label: "New invoice", description: "Create a billing row." },
+        { key: "import", label: "Import CSV", description: "Upload operational data." },
+        { key: "share", label: "Share", description: "Invite a teammate." },
+      ]}
+    />
+  )
+}`,"dialog-actions":`import { DialogActionButton, DialogActions } from "tembro"
+
+export function Demo() {
+  return (
+    <DialogActions align="end">
+      <DialogActionButton variant="ghost">Cancel</DialogActionButton>
+      <DialogActionButton variant="outline">Save draft</DialogActionButton>
+      <DialogActionButton>Publish</DialogActionButton>
+    </DialogActions>
+  )
+}`,stepper:`import { Stepper } from "tembro"
+
+export function Demo() {
+  return (
+    <Stepper
+      currentStep="billing"
+      steps={[
+        { id: "profile", title: "Profile", completed: true },
+        { id: "billing", title: "Billing" },
+        { id: "review", title: "Review" },
+      ]}
+      onStepChange={() => undefined}
+    />
+  )
+}`};exports.actionDemoCodeSnippets=e;

package/dist/showcase/demo-snippets/actions/index.d.ts

@@ -0,0 +1 @@
+export declare const actionDemoCodeSnippets: Record<string, string>;

package/dist/showcase/demo-snippets/actions/index.js

@@ -0,0 +1,10 @@
+//#region src/showcase/demo-snippets/actions/index.ts
+var e = {
+	"action-menu": "import { ActionMenu, Button } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n      trigger={<Button variant=\"outline\">Actions</Button>}\n    />\n  )\n}",
+	"button-group": "import { ButtonGroup } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"day\", label: \"Day\" },\n        { key: \"week\", label: \"Week\" },\n        { key: \"month\", label: \"Month\" },\n      ]}\n    />\n  )\n}",
+	"quick-action-grid": "import { QuickActionGrid } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <QuickActionGrid\n      columns={3}\n      items={[\n        { key: \"new\", label: \"New invoice\", description: \"Create a billing row.\" },\n        { key: \"import\", label: \"Import CSV\", description: \"Upload operational data.\" },\n        { key: \"share\", label: \"Share\", description: \"Invite a teammate.\" },\n      ]}\n    />\n  )\n}",
+	"dialog-actions": "import { DialogActionButton, DialogActions } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DialogActions align=\"end\">\n      <DialogActionButton variant=\"ghost\">Cancel</DialogActionButton>\n      <DialogActionButton variant=\"outline\">Save draft</DialogActionButton>\n      <DialogActionButton>Publish</DialogActionButton>\n    </DialogActions>\n  )\n}",
+	stepper: "import { Stepper } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Stepper\n      currentStep=\"billing\"\n      steps={[\n        { id: \"profile\", title: \"Profile\", completed: true },\n        { id: \"billing\", title: \"Billing\" },\n        { id: \"review\", title: \"Review\" },\n      ]}\n      onStepChange={() => undefined}\n    />\n  )\n}"
+};
+//#endregion
+export { e as actionDemoCodeSnippets };

package/dist/showcase/demo-snippets/forms/index.cjs

@@ -0,0 +1,26 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={"search-input":`import { Input } from "tembro"
+
+export function Demo() {
+  return (
+    <Input
+      type="search"
+      value="invoice"
+      onValueChange={(value) => console.log(value)}
+      placeholder="Search invoices..."
+      resultCount={12}
+      shortcut="Ctrl K"
+    />
+  )
+}`,"password-input":`import { PasswordInput } from "tembro"
+
+export function Demo() {
+  return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
+}`,"clearable-input":`import { Input } from "tembro"
+
+export function Demo() {
+  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+}`,"tag-input":`import { TagInput } from "tembro"
+
+export function Demo() {
+  return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
+}`};exports.formDemoCodeSnippets=e;

package/dist/showcase/demo-snippets/forms/index.d.ts

@@ -0,0 +1 @@
+export declare const formDemoCodeSnippets: Record<string, string>;

package/dist/showcase/demo-snippets/forms/index.js

@@ -0,0 +1,9 @@
+//#region src/showcase/demo-snippets/forms/index.ts
+var e = {
+	"search-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Input\n      type=\"search\"\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
+	"password-input": "import { PasswordInput } from \"tembro\"\n\nexport function Demo() {\n  return <PasswordInput placeholder=\"Enter secure token\" autoComplete=\"current-password\" />\n}",
+	"clearable-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return <Input defaultValue=\"Azamat UI\" placeholder=\"Search customer\" clearable />\n}",
+	"tag-input": "import { TagInput } from \"tembro\"\n\nexport function Demo() {\n  return <TagInput defaultValue={[\"dashboard\", \"billing\"]} placeholder=\"Add tag\" />\n}"
+};
+//#endregion
+export { e as formDemoCodeSnippets };

package/dist/showcase/demo-snippets/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./actions/index.cjs"),t=require("./forms/index.cjs"),n=require("./layout/index.cjs"),r=require("./upload/index.cjs");var i={...e.actionDemoCodeSnippets,...t.formDemoCodeSnippets,...n.layoutDemoCodeSnippets,...r.uploadDemoCodeSnippets};exports.demoCodeSnippets=i;

package/dist/showcase/demo-snippets/index.d.ts

@@ -0,0 +1 @@
+export declare const demoCodeSnippets: Record<string, string>;

package/dist/showcase/demo-snippets/index.js

@@ -0,0 +1,13 @@
+import { actionDemoCodeSnippets as e } from "./actions/index.js";
+import { formDemoCodeSnippets as t } from "./forms/index.js";
+import { layoutDemoCodeSnippets as n } from "./layout/index.js";
+import { uploadDemoCodeSnippets as r } from "./upload/index.js";
+//#region src/showcase/demo-snippets/index.ts
+var i = {
+	...e,
+	...t,
+	...n,
+	...r
+};
+//#endregion
+export { i as demoCodeSnippets };