tembro 2.0.6 → 2.1.0

package/dist/index.js

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

package/dist/public-component-surface.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{slug:`button`,registryName:`button`,surface:`documented`},{slug:`input`,registryName:`input`,surface:`documented`},{slug:`select`,registryName:`select`,surface:`documented`},{slug:`card`,registryName:`card`,surface:`documented`},{slug:`badge`,registryName:`badge`,surface:`documented`},{slug:`checkbox`,registryName:`checkbox`,surface:`documented`},{slug:`overlay`,registryName:`dialog`,surface:`documented`},{slug:`form-field`,registryName:`form-field-shell`,surface:`documented`},{slug:`data-table`,registryName:`data-table`,surface:`documented`},{slug:`alert`,registryName:`alert`,surface:`documented`},{slug:`bar-chart`,registryName:`charts`,surface:`documented`},{slug:`sidebar`,registryName:`sidebar`,surface:`documented`},{slug:`file-upload`,registryName:`file-upload`,surface:`documented`},{slug:`progress`,registryName:`progress`,surface:`documented`}],t=[{slug:`accordion`,registryName:`accordion`,surface:`standalone`},{slug:`divider`,registryName:`divider`,surface:`standalone`},{slug:`segmented-control`,registryName:`segmented-control`,surface:`standalone`},{slug:`skeleton`,registryName:`skeleton`,surface:`standalone`},{slug:`spinner`,registryName:`spinner`,surface:`standalone`},{slug:`command-bar`,registryName:`command-bar`,surface:`standalone`},{slug:`quantity-stepper`,registryName:`quantity-stepper`,surface:`standalone`},{slug:`inline-editable`,registryName:`inline-editable`,surface:`standalone`},{slug:`avatar`,registryName:`avatar`,surface:`standalone`},{slug:`code-block`,registryName:`code-block`,surface:`standalone`},{slug:`data-state`,registryName:`data-state`,surface:`standalone`},{slug:`kanban`,registryName:`kanban`,surface:`standalone`},{slug:`list`,registryName:`list`,surface:`standalone`},{slug:`property-grid`,registryName:`property-grid`,surface:`standalone`},{slug:`statistic`,registryName:`statistic`,surface:`standalone`},{slug:`tree-view`,registryName:`tree-view`,surface:`standalone`},{slug:`copy-button`,registryName:`copy-button`,surface:`standalone`},{slug:`section`,registryName:`section`,surface:`standalone`},{slug:`sticky-footer-bar`,registryName:`sticky-footer-bar`,surface:`standalone`},{slug:`calendar-scheduler`,registryName:`calendar-scheduler`,surface:`standalone`},{slug:`dual-list-picker`,registryName:`dual-list-picker`,surface:`standalone`},{slug:`menubar`,registryName:`menubar`,surface:`standalone`},{slug:`navigation-menu`,registryName:`navigation-menu`,surface:`standalone`},{slug:`resizable-panel`,registryName:`resizable-panel`,surface:`standalone`},{slug:`rich-text-editor`,registryName:`rich-text-editor`,surface:`standalone`},{slug:`tour`,registryName:`tour`,surface:`standalone`},{slug:`qr-code`,registryName:`qr-code`,surface:`standalone`},{slug:`tag`,registryName:`tag`,surface:`standalone`},{slug:`carousel`,registryName:`carousel`,surface:`standalone`},{slug:`typography`,registryName:`typography`,surface:`standalone`},{slug:`json-input`,registryName:`json-input`,surface:`standalone`},{slug:`time-picker`,registryName:`time-picker`,surface:`standalone`}],n=[...e,...t],r=new Map(n.map((e,t)=>[e.slug,t])),i=new Map(n.map(e=>[e.slug,e.registryName])),a=n.map(e=>e.slug),o=new Set(a),s=t.map(e=>e.slug),c=e.map(e=>e.registryName),l=t.map(e=>e.registryName),u=n.map(e=>e.registryName);function d(e){return r.get(e)??2**53-1}function f(e){return o.has(e)}function p(e){return i.get(e)}function m(e,t){return d(e)-d(t)}exports.comparePublicComponentSurfaceOrder=m,exports.documentedPublicComponentSurfaces=e,exports.documentedPublicRegistrySurfaceNames=c,exports.getPublicComponentRegistryName=p,exports.getPublicComponentSurfaceOrder=d,exports.isPublicComponentSurfaceSlug=f,exports.publicComponentSurfaceEntries=n,exports.publicComponentSurfaceSlugSet=o,exports.publicComponentSurfaceSlugs=a,exports.publicRegistrySurfaceNames=u,exports.standalonePublicComponentSlugs=s,exports.standalonePublicComponentSurfaces=t,exports.standalonePublicRegistrySurfaceNames=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{slug:`button`,registryName:`button`,surface:`documented`},{slug:`input`,registryName:`input`,surface:`documented`},{slug:`select`,registryName:`select`,surface:`documented`},{slug:`card`,registryName:`card`,surface:`documented`},{slug:`badge`,registryName:`badge`,surface:`documented`},{slug:`checkbox`,registryName:`checkbox`,surface:`documented`},{slug:`overlay`,registryName:`dialog`,surface:`documented`},{slug:`form-field`,registryName:`form-field-shell`,surface:`documented`},{slug:`data-table`,registryName:`data-table`,surface:`documented`},{slug:`calendar`,registryName:`calendar`,surface:`documented`},{slug:`date-picker`,registryName:`date-picker`,surface:`documented`},{slug:`date-range-picker`,registryName:`date-range-picker`,surface:`documented`},{slug:`alert`,registryName:`alert`,surface:`documented`},{slug:`bar-chart`,registryName:`charts`,surface:`documented`},{slug:`sidebar`,registryName:`sidebar`,surface:`documented`},{slug:`file-upload`,registryName:`file-upload`,surface:`documented`},{slug:`progress`,registryName:`progress`,surface:`documented`}],t=[{slug:`accordion`,registryName:`accordion`,surface:`standalone`},{slug:`divider`,registryName:`divider`,surface:`standalone`},{slug:`segmented-control`,registryName:`segmented-control`,surface:`standalone`},{slug:`skeleton`,registryName:`skeleton`,surface:`standalone`},{slug:`spinner`,registryName:`spinner`,surface:`standalone`},{slug:`command-bar`,registryName:`command-bar`,surface:`standalone`},{slug:`quantity-stepper`,registryName:`quantity-stepper`,surface:`standalone`},{slug:`inline-editable`,registryName:`inline-editable`,surface:`standalone`},{slug:`avatar`,registryName:`avatar`,surface:`standalone`},{slug:`code-block`,registryName:`code-block`,surface:`standalone`},{slug:`data-state`,registryName:`data-state`,surface:`standalone`},{slug:`kanban`,registryName:`kanban`,surface:`standalone`},{slug:`list`,registryName:`list`,surface:`standalone`},{slug:`property-grid`,registryName:`property-grid`,surface:`standalone`},{slug:`statistic`,registryName:`statistic`,surface:`standalone`},{slug:`tree-view`,registryName:`tree-view`,surface:`standalone`},{slug:`copy-button`,registryName:`copy-button`,surface:`standalone`},{slug:`section`,registryName:`section`,surface:`standalone`},{slug:`sticky-footer-bar`,registryName:`sticky-footer-bar`,surface:`standalone`},{slug:`calendar-scheduler`,registryName:`calendar-scheduler`,surface:`standalone`},{slug:`dual-list-picker`,registryName:`dual-list-picker`,surface:`standalone`},{slug:`menubar`,registryName:`menubar`,surface:`standalone`},{slug:`navigation-menu`,registryName:`navigation-menu`,surface:`standalone`},{slug:`resizable-panel`,registryName:`resizable-panel`,surface:`standalone`},{slug:`rich-text-editor`,registryName:`rich-text-editor`,surface:`standalone`},{slug:`tour`,registryName:`tour`,surface:`standalone`},{slug:`qr-code`,registryName:`qr-code`,surface:`standalone`},{slug:`tag`,registryName:`tag`,surface:`standalone`},{slug:`carousel`,registryName:`carousel`,surface:`standalone`},{slug:`typography`,registryName:`typography`,surface:`standalone`},{slug:`json-input`,registryName:`json-input`,surface:`standalone`},{slug:`time-picker`,registryName:`time-picker`,surface:`standalone`}],n=[...e,...t],r=new Map(n.map((e,t)=>[e.slug,t])),i=new Map(n.map(e=>[e.slug,e.registryName])),a=n.map(e=>e.slug),o=new Set(a),s=t.map(e=>e.slug),c=e.map(e=>e.registryName),l=t.map(e=>e.registryName),u=n.map(e=>e.registryName);function d(e){return r.get(e)??2**53-1}function f(e){return o.has(e)}function p(e){return i.get(e)}function m(e,t){return d(e)-d(t)}exports.comparePublicComponentSurfaceOrder=m,exports.documentedPublicComponentSurfaces=e,exports.documentedPublicRegistrySurfaceNames=c,exports.getPublicComponentRegistryName=p,exports.getPublicComponentSurfaceOrder=d,exports.isPublicComponentSurfaceSlug=f,exports.publicComponentSurfaceEntries=n,exports.publicComponentSurfaceSlugSet=o,exports.publicComponentSurfaceSlugs=a,exports.publicRegistrySurfaceNames=u,exports.standalonePublicComponentSlugs=s,exports.standalonePublicComponentSurfaces=t,exports.standalonePublicRegistrySurfaceNames=l;

package/dist/public-component-surface.js

@@ -45,6 +45,21 @@ var e = [
 		registryName: "data-table",
 		surface: "documented"
 	},
+	{
+		slug: "calendar",
+		registryName: "calendar",
+		surface: "documented"
+	},
+	{
+		slug: "date-picker",
+		registryName: "date-picker",
+		surface: "documented"
+	},
+	{
+		slug: "date-range-picker",
+		registryName: "date-range-picker",
+		surface: "documented"
+	},
 	{
 		slug: "alert",
 		registryName: "alert",

package/dist/showcase/component-api-schema.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={button:{slug:`button`,source:`metadata`,summary:`Action component for submit, secondary, destructive, warning, loading, icon and navigation-like flows. Verify every state in light and dark mode before shipping.`,props:[{name:`variant`,type:`'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'warning' | 'link'`,defaultValue:`'default'`,description:`Controls visual hierarchy and action tone.`,example:`variant="destructive"`},{name:`size`,type:`'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'`,defaultValue:`'default'`,description:`Controls height, spacing and icon-only sizing.`,example:`size="icon-sm"`},{name:`loading`,type:`boolean`,defaultValue:`false`,description:`Shows the spinner, disables interaction and communicates pending state.`,example:`loading={isSaving}`},{name:`loadingLabel`,type:`string`,defaultValue:`'Loading'`,description:`Accessible label displayed while the button is loading.`,example:`loadingLabel="Saving"`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the action and removes it from normal interaction.`,example:`disabled={!canSubmit}`},{name:`leftIcon`,type:`ReactNode`,defaultValue:`-`,description:`Icon rendered before the label. Use for primary verbs and scan-friendly actions.`},{name:`rightIcon`,type:`ReactNode`,defaultValue:`-`,description:`Icon rendered after the label. Use for forward navigation or external transitions.`},{name:`asChild`,type:`boolean`,defaultValue:`false`,description:`Renders the visual button style on a child element for link or router composition.`,example:`asChild`},{name:`className`,type:`string`,defaultValue:`-`,description:`Optional class override for spacing or layout composition.`},{name:`children`,type:`ReactNode`,defaultValue:`-`,required:!0,description:`Button label or icon content. Icon-only buttons must still provide an accessible name.`},{name:`aria-label`,type:`string`,defaultValue:`-`,description:`Required for icon-only buttons so the action is announced correctly.`,notes:`Use when children are only icons.`}],examples:[{title:`Primary action`,code:`<Button>Save changes</Button>`},{title:`Loading action`,code:`<Button loading loadingLabel="Saving">Save changes</Button>`},{title:`Destructive action`,code:`<Button variant="destructive">Delete</Button>`},{title:`Icon-only action`,code:`<Button size="icon-sm" aria-label="Open actions">...</Button>`}],accessibility:[`Keep visible focus states.`,`Use aria-label for icon-only buttons.`,`Loading buttons should keep a readable label.`,`Do not use disabled buttons for navigation links.`]},input:{slug:`input`,source:`metadata`,summary:`Primary typed-value surface. Start with Input and move into presets only when behavior requires it.`,props:[{name:`value`,type:`string | number`,defaultValue:`-`,description:`Controlled input value.`,example:`value={name}`},{name:`defaultValue`,type:`string | number`,defaultValue:`-`,description:`Uncontrolled initial value.`},{name:`onChange`,type:`ChangeEventHandler<HTMLInputElement>`,defaultValue:`-`,description:`Native change handler for value updates.`,example:`onChange={(event) => setValue(event.target.value)}`},{name:`onValueChange`,type:`(value: string) => void`,defaultValue:`-`,description:`Direct text callback for controlled string flows.`,example:`onValueChange={setQuery}`},{name:`type`,type:`HTMLInputTypeAttribute`,defaultValue:`'text'`,description:`Native input type. Prefer presets only when formatting or masking is required.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Short hint for empty input state.`},{name:`clearable`,type:`boolean`,defaultValue:`false`,description:`Shows the built-in clear action when a value exists.`,example:`clearable`},{name:`onClear`,type:`() => void`,defaultValue:`-`,description:`Called after the built-in clear action resets the field.`},{name:`trailingAction`,type:`ReactNode`,defaultValue:`-`,description:`Interactive trailing slot for counters, shortcuts, or toggle actions.`,example:`trailingAction={<span>12 results</span>}`},{name:`replaceTrailingWhenClear`,type:`boolean`,defaultValue:`true`,description:`Controls whether clear replaces trailing content or sits beside it.`},{name:`clearOnEscape`,type:`boolean`,defaultValue:`false`,description:`Clears the value on Escape when clearable mode is active.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables editing and interaction.`},{name:`required`,type:`boolean`,defaultValue:`false`,description:`Marks the input as required for native validation.`},{name:`name`,type:`string`,defaultValue:`-`,description:`Form field name used during submission.`},{name:`id`,type:`string`,defaultValue:`-`,description:`Connects input to label and help text.`},{name:`aria-invalid`,type:`boolean`,defaultValue:`false`,description:`Communicates validation state to assistive technology.`}],examples:[{title:`Controlled text`,code:`<Input value={value} onValueChange={setValue} />`},{title:`Clearable primary field`,code:`<Input value={query} onValueChange={setQuery} clearable trailingAction={<span>12 results</span>} />`},{title:`Search preset direction`,code:`// Prefer Input first; use SearchInput only when shortcut/result behavior is required.`}],accessibility:[`Always pair form inputs with labels.`,`Use aria-describedby for helper/error text.`,`Keep disabled and read-only states visually distinct.`]},select:{slug:`select`,source:`metadata`,summary:`Primary selection surface. Start with Select and move into members only when async loading, multi-selection, or command-style filtering is required.`,props:[{name:`value`,type:`string | string[]`,defaultValue:`-`,description:`Controlled selected value. Multi-select uses an array.`},{name:`defaultValue`,type:`string | string[]`,defaultValue:`-`,description:`Uncontrolled initial selected value.`},{name:`onValueChange`,type:`(value: string | string[]) => void`,defaultValue:`-`,description:`Called when the selected value changes.`,example:`onValueChange={setStatus}`},{name:`options`,type:`Array<{ label: string; value: string; disabled?: boolean }>`,defaultValue:`[]`,required:!0,description:`Selectable option list.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Text shown when no value is selected.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the control and option selection.`},{name:`searchable`,type:`boolean`,defaultValue:`false`,description:`Enables local filtering on the main Select surface.`},{name:`multiple`,type:`boolean`,defaultValue:`false`,description:`Allows multiple values when the active member supports it.`}],examples:[{title:`Primary select`,code:`<Select value={status} onValueChange={setStatus} options={statusOptions} />`},{title:`Searchable primary select`,code:`<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />`},{title:`Async member direction`,code:`// Prefer Select first; use AsyncSelect only when remote loading is required.`}],accessibility:[`Use clear option labels.`,`Keep disabled options visible but not selectable.`,`Do not replace long forms with hidden select menus.`]},"data-table":{slug:`data-table`,source:`metadata`,summary:"Operational grid for dense product data. Keep `columns`, `data`, `getRowId`, toolbar wiring, and pagination explicit so search, selection, row actions, loading, and server-mode behavior stay predictable.",props:[{name:`columns`,type:`ColumnDef<RowData>[]`,defaultValue:`-`,required:!0,description:`Column definitions for visible table structure.`,example:`columns={invoiceColumns}`},{name:`data`,type:`RowData[]`,defaultValue:`[]`,required:!0,description:`Rows for the current client or server page.`,example:`data={rows}`},{name:`getRowId`,type:`(row: RowData, index: number) => string`,defaultValue:`-`,description:`Stable row id for selection, row actions, and refresh updates.`,example:`getRowId={(row) => row.id}`},{name:`title`,type:`ReactNode`,defaultValue:`-`,description:`Toolbar title when you want the table to explain itself without extra wrapper markup.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Short supporting line for operators using the table.`},{name:`search`,type:`DataTableSearchConfig`,defaultValue:`-`,description:`Controlled search input config for the built-in toolbar.`,example:`search={{ value, onValueChange: setValue, placeholder: "Search invoices..." }}`},{name:`toolbarProps`,type:`DataTableToolbarProps | (table) => DataTableToolbarProps`,defaultValue:`-`,description:`Inject search, filters, actions, and selection affordances into the default toolbar.`,notes:`Use this when you want one canonical toolbar instead of composing a separate header card.`},{name:`toolbar`,type:`ReactNode | (table) => ReactNode`,defaultValue:`-`,description:`Replace the default toolbar entirely when the route needs a custom control layout.`},{name:`features`,type:`DataTableFeatureConfig`,defaultValue:`-`,description:`Turn default search, column visibility, row actions, bulk actions, refresh, or export behavior on and off.`},{name:`toolbarActions`,type:`ReactNode | (context) => ReactNode`,defaultValue:`-`,description:`Extra action cluster rendered beside visibility / refresh / export controls.`},{name:`bulkActions`,type:`DataTableBulkAction<RowData>[]`,defaultValue:`-`,description:`Bulk actions shown when selected rows exist.`},{name:`rowActions`,type:`(row, original) => DataTableRowAction<RowData>[]`,defaultValue:`-`,description:`Declarative row menu items appended as an actions column.`},{name:`sorting`,type:`SortingState`,defaultValue:`[]`,description:`Controlled sorting state.`,example:`sorting={sorting}`},{name:`onSortingChange`,type:`OnChangeFn<SortingState>`,defaultValue:`-`,description:`Called when sorting changes.`,example:`onSortingChange={setSorting}`},{name:`columnVisibility`,type:`VisibilityState`,defaultValue:`{}`,description:`Controlled column visibility map.`},{name:`onColumnVisibilityChange`,type:`OnChangeFn<VisibilityState>`,defaultValue:`-`,description:`Called when visible columns change.`},{name:`rowSelection`,type:`RowSelectionState`,defaultValue:`{}`,description:`Controlled row selection state.`},{name:`onRowSelectionChange`,type:`OnChangeFn<RowSelectionState>`,defaultValue:`-`,description:`Called when row selection changes.`},{name:`enableRowSelection`,type:`boolean | ((row) => boolean)`,defaultValue:`false`,description:`Enables checkbox or row selection behavior per row or for the whole grid.`},{name:`pagination`,type:`DataTablePaginationConfig | false`,defaultValue:`-`,description:`Page index, page size, totals, labels, and pagination handlers.`,notes:"Pass `manual: true` when server data already arrives sliced by page."},{name:`renderMobileCard`,type:`(row) => ReactNode`,defaultValue:`-`,description:`Optional mobile card renderer when the table must collapse into stacked records.`},{name:`onRowClick`,type:`(row) => void`,defaultValue:`-`,description:`Optional single-click row activation handler.`},{name:`onRowDoubleClick`,type:`(row) => void`,defaultValue:`-`,description:`Optional double-click activation handler for denser operator workflows.`},{name:`getRowDisabled`,type:`(row) => boolean`,defaultValue:`-`,description:`Disable specific rows without removing them from the result set.`},{name:`density`,type:`'compact' | 'default' | 'comfortable'`,defaultValue:`'default'`,description:`Controls header and cell spacing.`,example:`density="comfortable"`},{name:`striped`,type:`boolean`,defaultValue:`false`,description:`Adds zebra striping for long operational lists.`},{name:`bordered`,type:`boolean`,defaultValue:`false`,description:`Adds stronger cell and table borders.`},{name:`stickyHeader`,type:`boolean`,defaultValue:`false`,description:`Keeps headers pinned while the table scrolls.`},{name:`isLoading`,type:`boolean`,defaultValue:`false`,description:`Shows loading state.`},{name:`loadingVariant`,type:`'skeleton' | 'state'`,defaultValue:`'skeleton'`,description:`Choose between skeleton rows or a dedicated loading state block.`},{name:`loadingState`,type:`LoadingStateProps`,defaultValue:`-`,description:'Customizes the loading state when `loadingVariant="state"`.'},{name:`isError`,type:`boolean`,defaultValue:`false`,description:`Switches the grid into an error fallback state.`},{name:`emptyState`,type:`Omit<DataStateProps, "status">`,defaultValue:`-`,description:`Fallback when there are no rows.`},{name:`errorState`,type:`Omit<DataStateProps, "status">`,defaultValue:`-`,description:`Fallback when the data request fails.`},{name:`skeletonRows`,type:`number`,defaultValue:`6`,description:`How many skeleton rows to render during loading.`},{name:`cellFallback`,type:`ReactNode`,defaultValue:`"-"`,description:`Value rendered when a cell returns empty content.`}],accessibility:[`Keep column headers readable and sortable targets large enough for pointer and keyboard use.`,`Provide clear labels for row action menus, visibility controls, and bulk actions.`,`When mobile cards replace the table, preserve the same row meaning and action availability.`]},dialog:{slug:`dialog`,source:`metadata`,summary:`Focused overlay for short decisions, confirmations and contained edit flows.`,props:[{name:`open`,type:`boolean`,defaultValue:`-`,description:`Controlled open state.`},{name:`defaultOpen`,type:`boolean`,defaultValue:`false`,description:`Initial uncontrolled open state.`},{name:`onOpenChange`,type:`(open: boolean) => void`,defaultValue:`-`,description:`Called when the dialog opens or closes.`},{name:`title`,type:`ReactNode`,defaultValue:`-`,required:!0,description:`Accessible dialog title.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Supporting description for context.`},{name:`children`,type:`ReactNode`,defaultValue:`-`,description:`Dialog body content.`},{name:`footer`,type:`ReactNode`,defaultValue:`-`,description:`Action row for confirm/cancel buttons.`}],accessibility:[`Every dialog needs a title.`,`Return focus to the trigger after close.`,`Do not put long multi-step workflows in a small dialog.`]},"date-picker":{slug:`date-picker`,source:`metadata`,summary:`Date and range selection surface for reporting, scheduling and form flows.`,props:[{name:`value`,type:`Date | string | null`,defaultValue:`null`,description:`Controlled selected date.`},{name:`onValueChange`,type:`(value: Date | string | null) => void`,defaultValue:`-`,description:`Called when the selected date changes.`},{name:`mode`,type:`'single' | 'range'`,defaultValue:`'single'`,description:`Selection mode.`},{name:`minDate`,type:`Date | string`,defaultValue:`-`,description:`Earliest selectable date.`},{name:`maxDate`,type:`Date | string`,defaultValue:`-`,description:`Latest selectable date.`},{name:`disabledDates`,type:`Date[] | ((date: Date) => boolean)`,defaultValue:`-`,description:`Dates that cannot be selected.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Text shown before selection.`}],accessibility:[`Clarify date format near text inputs.`,`Disable unavailable dates rather than hiding them.`,`Define timezone assumptions before submitting values.`]},"form-input":{slug:`form-input`,source:`metadata`,summary:`React Hook Form wrapper for Input with label, helper text, validation and error display.`,props:[{name:`control`,type:`Control<TFieldValues>`,defaultValue:`-`,required:!0,description:`RHF control instance from useForm().`},{name:`name`,type:`FieldPath<TFieldValues>`,defaultValue:`-`,required:!0,description:`Field path used for registration and value lookup.`},{name:`label`,type:`ReactNode`,defaultValue:`-`,description:`Visible field label.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Helper text shown under the field.`},{name:`rules`,type:`UseControllerProps['rules']`,defaultValue:`-`,description:`Validation rules passed to RHF controller.`},{name:`required`,type:`boolean | '*'`,defaultValue:`false`,description:`Marks the field as required in the UI.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the field and prevents editing.`},{name:`error`,type:`string | FieldError | null`,defaultValue:`-`,description:`Optional error override.`}],accessibility:[`Label must remain visible.`,`Error text should be connected to the field.`,`Required state should be visual and semantic.`]}};function t(t){return e[t]}exports.componentApiSchemas=e,exports.getComponentApiSchema=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={button:{slug:`button`,source:`metadata`,summary:`Action component for submit, secondary, destructive, warning, loading, icon and navigation-like flows. Verify every state in light and dark mode before shipping.`,props:[{name:`variant`,type:`'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'warning' | 'link'`,defaultValue:`'default'`,description:`Controls visual hierarchy and action tone.`,example:`variant="destructive"`},{name:`size`,type:`'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'`,defaultValue:`'default'`,description:`Controls height, spacing and icon-only sizing.`,example:`size="icon-sm"`},{name:`loading`,type:`boolean`,defaultValue:`false`,description:`Shows the spinner, disables interaction and communicates pending state.`,example:`loading={isSaving}`},{name:`loadingLabel`,type:`string`,defaultValue:`'Loading'`,description:`Accessible label displayed while the button is loading.`,example:`loadingLabel="Saving"`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the action and removes it from normal interaction.`,example:`disabled={!canSubmit}`},{name:`leftIcon`,type:`ReactNode`,defaultValue:`-`,description:`Icon rendered before the label. Use for primary verbs and scan-friendly actions.`},{name:`rightIcon`,type:`ReactNode`,defaultValue:`-`,description:`Icon rendered after the label. Use for forward navigation or external transitions.`},{name:`iconOnly`,type:`boolean`,defaultValue:`false`,description:`Switches default sizing to the icon button size while keeping Button semantics.`,example:`iconOnly aria-label="Download"`},{name:`fullWidth`,type:`boolean`,defaultValue:`false`,description:`Expands the button to fill its parent width.`,example:`fullWidth`},{name:`pressed`,type:`boolean`,defaultValue:`false`,description:`Marks toggle-like button state with aria-pressed and selected styling.`,example:`pressed={active}`},{name:`className`,type:`string`,defaultValue:`-`,description:`Optional class override for spacing or layout composition.`},{name:`children`,type:`ReactNode`,defaultValue:`-`,required:!0,description:`Button label or icon content. Icon-only buttons must still provide an accessible name.`},{name:`aria-label`,type:`string`,defaultValue:`-`,description:`Required for icon-only buttons so the action is announced correctly.`,notes:`Use when children are only icons.`}],examples:[{title:`Primary action`,code:`<Button>Save changes</Button>`},{title:`Loading action`,code:`<Button loading loadingLabel="Saving">Save changes</Button>`},{title:`Destructive action`,code:`<Button variant="destructive">Delete</Button>`},{title:`Icon-only action`,code:`<Button size="icon-sm" aria-label="Open actions">...</Button>`}],accessibility:[`Keep visible focus states.`,`Use aria-label for icon-only buttons.`,`Loading buttons should keep a readable label.`,`Do not use disabled buttons for navigation links.`]},input:{slug:`input`,source:`metadata`,summary:`Primary typed-value surface. Start with Input and move into presets only when behavior requires it.`,props:[{name:`value`,type:`string | number`,defaultValue:`-`,description:`Controlled input value.`,example:`value={name}`},{name:`defaultValue`,type:`string | number`,defaultValue:`-`,description:`Uncontrolled initial value.`},{name:`kind`,type:`'text' | 'search' | 'password' | 'number' | 'phone' | 'money' | 'quantity' | 'masked' | 'date' | 'date-range'`,defaultValue:`'text'`,description:`Routes Input into a supported preset without teaching a new public component name first.`,example:`kind="search"`},{name:`onChange`,type:`ChangeEventHandler<HTMLInputElement>`,defaultValue:`-`,description:`Native change handler for value updates.`,example:`onChange={(event) => setValue(event.target.value)}`},{name:`onValueChange`,type:`(value: string) => void`,defaultValue:`-`,description:`Direct text callback for controlled string flows.`,example:`onValueChange={setQuery}`},{name:`type`,type:`HTMLInputTypeAttribute`,defaultValue:`'text'`,description:`Native input type. Prefer presets only when formatting or masking is required.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Short hint for empty input state.`},{name:`leading`,type:`ReactNode`,defaultValue:`-`,description:`Non-interactive leading slot for icons, prefixes, or labels.`},{name:`trailing`,type:`ReactNode`,defaultValue:`-`,description:`Passive trailing slot for units, counts, or status copy.`},{name:`clearable`,type:`boolean`,defaultValue:`false`,description:`Shows the built-in clear action when a value exists.`,example:`clearable`},{name:`onClear`,type:`() => void`,defaultValue:`-`,description:`Called after the built-in clear action resets the field.`},{name:`trailingAction`,type:`ReactNode`,defaultValue:`-`,description:`Interactive trailing slot for counters, shortcuts, or toggle actions.`,example:`trailingAction={<span>12 results</span>}`},{name:`replaceTrailingWhenClear`,type:`boolean`,defaultValue:`true`,description:`Controls whether clear replaces trailing content or sits beside it.`},{name:`clearOnEscape`,type:`boolean`,defaultValue:`false`,description:`Clears the value on Escape when clearable mode is active.`},{name:`helperText`,type:`ReactNode`,defaultValue:`-`,description:`Support copy rendered below the field.`},{name:`errorText`,type:`ReactNode`,defaultValue:`-`,description:`Validation copy rendered below the field and connected to danger styling.`},{name:`showCharacterCount`,type:`boolean`,defaultValue:`false`,description:`Shows current length and maxLength when available.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables editing and interaction.`},{name:`required`,type:`boolean`,defaultValue:`false`,description:`Marks the input as required for native validation.`},{name:`name`,type:`string`,defaultValue:`-`,description:`Form field name used during submission.`},{name:`id`,type:`string`,defaultValue:`-`,description:`Connects input to label and help text.`},{name:`aria-invalid`,type:`boolean`,defaultValue:`false`,description:`Communicates validation state to assistive technology.`}],examples:[{title:`Controlled text`,code:`<Input value={value} onValueChange={setValue} />`},{title:`Clearable primary field`,code:`<Input value={query} onValueChange={setQuery} clearable trailingAction={<span>12 results</span>} />`},{title:`Search preset direction`,code:`// Prefer Input first; use SearchInput only when shortcut/result behavior is required.`}],accessibility:[`Always pair form inputs with labels.`,`Use aria-describedby for helper/error text.`,`Keep disabled and read-only states visually distinct.`]},select:{slug:`select`,source:`metadata`,summary:`Primary single-selection surface. Start with Select for finite option sets, then use AsyncSelect with isMulti only when remote loading or multi-value behavior is required.`,props:[{name:`value`,type:`string | null`,defaultValue:`-`,description:`Controlled selected value.`},{name:`defaultValue`,type:`string | null`,defaultValue:`-`,description:`Uncontrolled initial selected value.`},{name:`onValueChange`,type:`(value: string | undefined) => void`,defaultValue:`-`,description:`Called when the selected value changes.`,example:`onValueChange={setStatus}`},{name:`options`,type:`Array<{ label: string; value: string; disabled?: boolean }>`,defaultValue:`[]`,required:!0,description:`Selectable option list.`},{name:`groups`,type:`Array<{ label?: ReactNode; options: SelectOption[] }>`,defaultValue:`-`,description:`Grouped selectable options for longer finite lists.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Text shown when no value is selected.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the control and option selection.`},{name:`searchable`,type:`boolean`,defaultValue:`false`,description:`Enables local filtering on the main Select surface.`},{name:`clearable`,type:`boolean`,defaultValue:`false`,description:`Shows a clear action when a value is selected.`},{name:`loading`,type:`boolean`,defaultValue:`false`,description:`Disables selection and renders a loading state.`},{name:`emptyLabel`,type:`ReactNode`,defaultValue:`'No options found'`,description:`Empty state content for local filtering.`},{name:`emptyMessage`,type:`ReactNode`,defaultValue:`-`,description:`Alias for empty state content used by newer docs.`},{name:`renderOption`,type:`(option, state) => ReactNode`,defaultValue:`-`,description:`Custom option renderer for richer rows.`}],examples:[{title:`Primary select`,code:`<Select value={status} onValueChange={setStatus} options={statusOptions} />`},{title:`Searchable primary select`,code:`<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />`},{title:`Grouped select`,code:`<Select value={region} onValueChange={setRegion} groups={regionGroups} searchable />`},{title:`Async member direction`,code:`// Prefer Select first; use AsyncSelect only when remote loading is required.`}],accessibility:[`Use clear option labels.`,`Keep disabled options visible but not selectable.`,`Do not replace long forms with hidden select menus.`]},textarea:{slug:`textarea`,source:`metadata`,summary:`Multi-line text entry surface with helper, error, read-only, disabled and character-count support.`,props:[{name:`value`,type:`string`,defaultValue:`-`,description:`Controlled textarea value.`},{name:`defaultValue`,type:`string`,defaultValue:`-`,description:`Uncontrolled initial value.`},{name:`onChange`,type:`ChangeEventHandler<HTMLTextAreaElement>`,defaultValue:`-`,description:`Native change handler.`},{name:`onValueChange`,type:`(value: string) => void`,defaultValue:`-`,description:`Direct text callback for controlled flows.`},{name:`rows`,type:`number`,defaultValue:`-`,description:`Initial visible row count.`},{name:`maxLength`,type:`number`,defaultValue:`-`,description:`Native maximum character length.`},{name:`helperText`,type:`ReactNode`,defaultValue:`-`,description:`Support copy rendered below the field.`},{name:`errorText`,type:`ReactNode`,defaultValue:`-`,description:`Validation copy rendered below the field and danger styling.`},{name:`showCharacterCount`,type:`boolean`,defaultValue:`false`,description:`Shows current length and maxLength when available.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables editing.`},{name:`readOnly`,type:`boolean`,defaultValue:`false`,description:`Keeps content copyable while preventing edits.`}],examples:[{title:`Controlled note`,code:`<Textarea value={note} onValueChange={setNote} helperText="Internal note" />`},{title:`Limited feedback`,code:`<Textarea maxLength={240} showCharacterCount />`},{title:`Error state`,code:`<Textarea errorText="Please add at least 10 characters." />`}],accessibility:[`Pair textareas with visible labels.`,`Use helper and error copy instead of placeholder-only instructions.`,`Keep read-only distinct from disabled.`]},"data-table":{slug:`data-table`,source:`metadata`,summary:"Operational grid for dense product data. Keep `columns`, `data`, `getRowId`, toolbar wiring, and pagination explicit so search, selection, row actions, loading, and server-mode behavior stay predictable.",props:[{name:`columns`,type:`ColumnDef<RowData>[]`,defaultValue:`-`,required:!0,description:`Column definitions for visible table structure.`,example:`columns={invoiceColumns}`},{name:`data`,type:`RowData[]`,defaultValue:`[]`,required:!0,description:`Rows for the current client or server page.`,example:`data={rows}`},{name:`getRowId`,type:`(row: RowData, index: number) => string`,defaultValue:`-`,description:`Stable row id for selection, row actions, and refresh updates.`,example:`getRowId={(row) => row.id}`},{name:`title`,type:`ReactNode`,defaultValue:`-`,description:`Toolbar title when you want the table to explain itself without extra wrapper markup.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Short supporting line for operators using the table.`},{name:`search`,type:`DataTableSearchConfig`,defaultValue:`-`,description:`Controlled search input config for the built-in toolbar.`,example:`search={{ value, onValueChange: setValue, placeholder: "Search invoices..." }}`},{name:`toolbarProps`,type:`DataTableToolbarProps | (table) => DataTableToolbarProps`,defaultValue:`-`,description:`Inject search, filters, actions, and selection affordances into the default toolbar.`,notes:`Use this when you want one canonical toolbar instead of composing a separate header card.`},{name:`toolbar`,type:`ReactNode | (table) => ReactNode`,defaultValue:`-`,description:`Replace the default toolbar entirely when the route needs a custom control layout.`},{name:`features`,type:`DataTableFeatureConfig`,defaultValue:`-`,description:`Turn default search, column visibility, row actions, bulk actions, refresh, or export behavior on and off.`},{name:`toolbarActions`,type:`ReactNode | (context) => ReactNode`,defaultValue:`-`,description:`Extra action cluster rendered beside visibility / refresh / export controls.`},{name:`bulkActions`,type:`DataTableBulkAction<RowData>[]`,defaultValue:`-`,description:`Bulk actions shown when selected rows exist.`},{name:`rowActions`,type:`(row, original) => DataTableRowAction<RowData>[]`,defaultValue:`-`,description:`Declarative row menu items appended as an actions column.`},{name:`sorting`,type:`SortingState`,defaultValue:`[]`,description:`Controlled sorting state.`,example:`sorting={sorting}`},{name:`onSortingChange`,type:`OnChangeFn<SortingState>`,defaultValue:`-`,description:`Called when sorting changes.`,example:`onSortingChange={setSorting}`},{name:`columnVisibility`,type:`VisibilityState`,defaultValue:`{}`,description:`Controlled column visibility map.`},{name:`onColumnVisibilityChange`,type:`OnChangeFn<VisibilityState>`,defaultValue:`-`,description:`Called when visible columns change.`},{name:`rowSelection`,type:`RowSelectionState`,defaultValue:`{}`,description:`Controlled row selection state.`},{name:`onRowSelectionChange`,type:`OnChangeFn<RowSelectionState>`,defaultValue:`-`,description:`Called when row selection changes.`},{name:`enableRowSelection`,type:`boolean | ((row) => boolean)`,defaultValue:`false`,description:`Enables checkbox or row selection behavior per row or for the whole grid.`},{name:`pagination`,type:`DataTablePaginationConfig | false`,defaultValue:`-`,description:`Page index, page size, totals, labels, and pagination handlers.`,notes:"Pass `manual: true` when server data already arrives sliced by page."},{name:`renderMobileCard`,type:`(row) => ReactNode`,defaultValue:`-`,description:`Optional mobile card renderer when the table must collapse into stacked records.`},{name:`onRowClick`,type:`(row) => void`,defaultValue:`-`,description:`Optional single-click row activation handler.`},{name:`onRowDoubleClick`,type:`(row) => void`,defaultValue:`-`,description:`Optional double-click activation handler for denser operator workflows.`},{name:`getRowDisabled`,type:`(row) => boolean`,defaultValue:`-`,description:`Disable specific rows without removing them from the result set.`},{name:`density`,type:`'compact' | 'default' | 'comfortable'`,defaultValue:`'default'`,description:`Controls header and cell spacing.`,example:`density="comfortable"`},{name:`striped`,type:`boolean`,defaultValue:`false`,description:`Adds zebra striping for long operational lists.`},{name:`bordered`,type:`boolean`,defaultValue:`false`,description:`Adds stronger cell and table borders.`},{name:`stickyHeader`,type:`boolean`,defaultValue:`false`,description:`Keeps headers pinned while the table scrolls.`},{name:`isLoading`,type:`boolean`,defaultValue:`false`,description:`Shows loading state.`},{name:`loadingVariant`,type:`'skeleton' | 'state'`,defaultValue:`'skeleton'`,description:`Choose between skeleton rows or a dedicated loading state block.`},{name:`loadingState`,type:`LoadingStateProps`,defaultValue:`-`,description:'Customizes the loading state when `loadingVariant="state"`.'},{name:`isError`,type:`boolean`,defaultValue:`false`,description:`Switches the grid into an error fallback state.`},{name:`emptyState`,type:`Omit<DataStateProps, "status">`,defaultValue:`-`,description:`Fallback when there are no rows.`},{name:`errorState`,type:`Omit<DataStateProps, "status">`,defaultValue:`-`,description:`Fallback when the data request fails.`},{name:`skeletonRows`,type:`number`,defaultValue:`6`,description:`How many skeleton rows to render during loading.`},{name:`cellFallback`,type:`ReactNode`,defaultValue:`"-"`,description:`Value rendered when a cell returns empty content.`}],accessibility:[`Keep column headers readable and sortable targets large enough for pointer and keyboard use.`,`Provide clear labels for row action menus, visibility controls, and bulk actions.`,`When mobile cards replace the table, preserve the same row meaning and action availability.`]},dialog:{slug:`dialog`,source:`metadata`,summary:`Focused overlay for short decisions, confirmations and contained edit flows.`,props:[{name:`open`,type:`boolean`,defaultValue:`-`,description:`Controlled open state.`},{name:`defaultOpen`,type:`boolean`,defaultValue:`false`,description:`Initial uncontrolled open state.`},{name:`onOpenChange`,type:`(open: boolean) => void`,defaultValue:`-`,description:`Called when the dialog opens or closes.`},{name:`title`,type:`ReactNode`,defaultValue:`-`,required:!0,description:`Accessible dialog title.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Supporting description for context.`},{name:`children`,type:`ReactNode`,defaultValue:`-`,description:`Dialog body content.`},{name:`footer`,type:`ReactNode`,defaultValue:`-`,description:`Action row for confirm/cancel buttons.`}],accessibility:[`Every dialog needs a title.`,`Return focus to the trigger after close.`,`Do not put long multi-step workflows in a small dialog.`]},"date-picker":{slug:`date-picker`,source:`metadata`,summary:`Date and range selection surface for reporting, scheduling and form flows.`,props:[{name:`value`,type:`Date | string | null`,defaultValue:`null`,description:`Controlled selected date.`},{name:`onValueChange`,type:`(value: Date | string | null) => void`,defaultValue:`-`,description:`Called when the selected date changes.`},{name:`mode`,type:`'single' | 'range'`,defaultValue:`'single'`,description:`Selection mode.`},{name:`minDate`,type:`Date | string`,defaultValue:`-`,description:`Earliest selectable date.`},{name:`maxDate`,type:`Date | string`,defaultValue:`-`,description:`Latest selectable date.`},{name:`disabledDates`,type:`Date[] | ((date: Date) => boolean)`,defaultValue:`-`,description:`Dates that cannot be selected.`},{name:`placeholder`,type:`string`,defaultValue:`-`,description:`Text shown before selection.`}],accessibility:[`Clarify date format near text inputs.`,`Disable unavailable dates rather than hiding them.`,`Define timezone assumptions before submitting values.`]},"form-input":{slug:`form-input`,source:`metadata`,summary:`React Hook Form wrapper for Input with label, helper text, validation and error display.`,props:[{name:`control`,type:`Control<TFieldValues>`,defaultValue:`-`,required:!0,description:`RHF control instance from useForm().`},{name:`name`,type:`FieldPath<TFieldValues>`,defaultValue:`-`,required:!0,description:`Field path used for registration and value lookup.`},{name:`label`,type:`ReactNode`,defaultValue:`-`,description:`Visible field label.`},{name:`description`,type:`ReactNode`,defaultValue:`-`,description:`Helper text shown under the field.`},{name:`rules`,type:`UseControllerProps['rules']`,defaultValue:`-`,description:`Validation rules passed to RHF controller.`},{name:`required`,type:`boolean | '*'`,defaultValue:`false`,description:`Marks the field as required in the UI.`},{name:`disabled`,type:`boolean`,defaultValue:`false`,description:`Disables the field and prevents editing.`},{name:`error`,type:`string | FieldError | null`,defaultValue:`-`,description:`Optional error override.`}],accessibility:[`Label must remain visible.`,`Error text should be connected to the field.`,`Required state should be visual and semantic.`]}};function t(t){return e[t]}exports.componentApiSchemas=e,exports.getComponentApiSchema=t;

package/dist/showcase/component-api-schema.js

@@ -53,11 +53,25 @@ var e = {
 				description: "Icon rendered after the label. Use for forward navigation or external transitions."
 			},
 			{
-				name: "asChild",
+				name: "iconOnly",
 				type: "boolean",
 				defaultValue: "false",
-				description: "Renders the visual button style on a child element for link or router composition.",
-				example: "asChild"
+				description: "Switches default sizing to the icon button size while keeping Button semantics.",
+				example: "iconOnly aria-label=\"Download\""
+			},
+			{
+				name: "fullWidth",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Expands the button to fill its parent width.",
+				example: "fullWidth"
+			},
+			{
+				name: "pressed",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Marks toggle-like button state with aria-pressed and selected styling.",
+				example: "pressed={active}"
 			},
 			{
 				name: "className",
@@ -123,6 +137,13 @@ var e = {
 				defaultValue: "-",
 				description: "Uncontrolled initial value."
 			},
+			{
+				name: "kind",
+				type: "'text' | 'search' | 'password' | 'number' | 'phone' | 'money' | 'quantity' | 'masked' | 'date' | 'date-range'",
+				defaultValue: "'text'",
+				description: "Routes Input into a supported preset without teaching a new public component name first.",
+				example: "kind=\"search\""
+			},
 			{
 				name: "onChange",
 				type: "ChangeEventHandler<HTMLInputElement>",
@@ -149,6 +170,18 @@ var e = {
 				defaultValue: "-",
 				description: "Short hint for empty input state."
 			},
+			{
+				name: "leading",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Non-interactive leading slot for icons, prefixes, or labels."
+			},
+			{
+				name: "trailing",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Passive trailing slot for units, counts, or status copy."
+			},
 			{
 				name: "clearable",
 				type: "boolean",
@@ -181,6 +214,24 @@ var e = {
 				defaultValue: "false",
 				description: "Clears the value on Escape when clearable mode is active."
 			},
+			{
+				name: "helperText",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Support copy rendered below the field."
+			},
+			{
+				name: "errorText",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Validation copy rendered below the field and connected to danger styling."
+			},
+			{
+				name: "showCharacterCount",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Shows current length and maxLength when available."
+			},
 			{
 				name: "disabled",
 				type: "boolean",
@@ -235,23 +286,23 @@ var e = {
 	select: {
 		slug: "select",
 		source: "metadata",
-		summary: "Primary selection surface. Start with Select and move into members only when async loading, multi-selection, or command-style filtering is required.",
+		summary: "Primary single-selection surface. Start with Select for finite option sets, then use AsyncSelect with isMulti only when remote loading or multi-value behavior is required.",
 		props: [
 			{
 				name: "value",
-				type: "string | string[]",
+				type: "string | null",
 				defaultValue: "-",
-				description: "Controlled selected value. Multi-select uses an array."
+				description: "Controlled selected value."
 			},
 			{
 				name: "defaultValue",
-				type: "string | string[]",
+				type: "string | null",
 				defaultValue: "-",
 				description: "Uncontrolled initial selected value."
 			},
 			{
 				name: "onValueChange",
-				type: "(value: string | string[]) => void",
+				type: "(value: string | undefined) => void",
 				defaultValue: "-",
 				description: "Called when the selected value changes.",
 				example: "onValueChange={setStatus}"
@@ -263,6 +314,12 @@ var e = {
 				required: !0,
 				description: "Selectable option list."
 			},
+			{
+				name: "groups",
+				type: "Array<{ label?: ReactNode; options: SelectOption[] }>",
+				defaultValue: "-",
+				description: "Grouped selectable options for longer finite lists."
+			},
 			{
 				name: "placeholder",
 				type: "string",
@@ -282,10 +339,34 @@ var e = {
 				description: "Enables local filtering on the main Select surface."
 			},
 			{
-				name: "multiple",
+				name: "clearable",
 				type: "boolean",
 				defaultValue: "false",
-				description: "Allows multiple values when the active member supports it."
+				description: "Shows a clear action when a value is selected."
+			},
+			{
+				name: "loading",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Disables selection and renders a loading state."
+			},
+			{
+				name: "emptyLabel",
+				type: "ReactNode",
+				defaultValue: "'No options found'",
+				description: "Empty state content for local filtering."
+			},
+			{
+				name: "emptyMessage",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Alias for empty state content used by newer docs."
+			},
+			{
+				name: "renderOption",
+				type: "(option, state) => ReactNode",
+				defaultValue: "-",
+				description: "Custom option renderer for richer rows."
 			}
 		],
 		examples: [
@@ -297,6 +378,10 @@ var e = {
 				title: "Searchable primary select",
 				code: "<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />"
 			},
+			{
+				title: "Grouped select",
+				code: "<Select value={region} onValueChange={setRegion} groups={regionGroups} searchable />"
+			},
 			{
 				title: "Async member direction",
 				code: "// Prefer Select first; use AsyncSelect only when remote loading is required."
@@ -308,6 +393,98 @@ var e = {
 			"Do not replace long forms with hidden select menus."
 		]
 	},
+	textarea: {
+		slug: "textarea",
+		source: "metadata",
+		summary: "Multi-line text entry surface with helper, error, read-only, disabled and character-count support.",
+		props: [
+			{
+				name: "value",
+				type: "string",
+				defaultValue: "-",
+				description: "Controlled textarea value."
+			},
+			{
+				name: "defaultValue",
+				type: "string",
+				defaultValue: "-",
+				description: "Uncontrolled initial value."
+			},
+			{
+				name: "onChange",
+				type: "ChangeEventHandler<HTMLTextAreaElement>",
+				defaultValue: "-",
+				description: "Native change handler."
+			},
+			{
+				name: "onValueChange",
+				type: "(value: string) => void",
+				defaultValue: "-",
+				description: "Direct text callback for controlled flows."
+			},
+			{
+				name: "rows",
+				type: "number",
+				defaultValue: "-",
+				description: "Initial visible row count."
+			},
+			{
+				name: "maxLength",
+				type: "number",
+				defaultValue: "-",
+				description: "Native maximum character length."
+			},
+			{
+				name: "helperText",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Support copy rendered below the field."
+			},
+			{
+				name: "errorText",
+				type: "ReactNode",
+				defaultValue: "-",
+				description: "Validation copy rendered below the field and danger styling."
+			},
+			{
+				name: "showCharacterCount",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Shows current length and maxLength when available."
+			},
+			{
+				name: "disabled",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Disables editing."
+			},
+			{
+				name: "readOnly",
+				type: "boolean",
+				defaultValue: "false",
+				description: "Keeps content copyable while preventing edits."
+			}
+		],
+		examples: [
+			{
+				title: "Controlled note",
+				code: "<Textarea value={note} onValueChange={setNote} helperText=\"Internal note\" />"
+			},
+			{
+				title: "Limited feedback",
+				code: "<Textarea maxLength={240} showCharacterCount />"
+			},
+			{
+				title: "Error state",
+				code: "<Textarea errorText=\"Please add at least 10 characters.\" />"
+			}
+		],
+		accessibility: [
+			"Pair textareas with visible labels.",
+			"Use helper and error copy instead of placeholder-only instructions.",
+			"Keep read-only distinct from disabled."
+		]
+	},
 	"data-table": {
 		slug: "data-table",
 		source: "metadata",