tembro 3.1.5 → 3.1.7

package/packages/cli/vendor/src/showcase/component-api-schema.ts

@@ -58,18 +58,24 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { 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: "onDebouncedValueChange", type: "(value: string) => void", defaultValue: "-", description: "Delayed callback for search-heavy inputs." },
       { 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: "clearLabel", type: "string", defaultValue: "'Clear'", description: "Accessible label for the clear action." },
       { 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: "loading", type: "boolean", defaultValue: "false", description: "Shows pending feedback in search-oriented input states." },
+      { name: "resultCount", type: "number", defaultValue: "-", description: "Optional search result count displayed in the input meta area." },
+      { name: "shortcut", type: "ReactNode", defaultValue: "-", description: "Keyboard hint or shortcut chip rendered inside search-oriented inputs." },
+      { name: "debounceMs", type: "number", defaultValue: "-", description: "Delay before `onDebouncedValueChange` fires." },
       { 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." },
@@ -94,18 +100,27 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "options", type: "Array<{ label: string; value: string; disabled?: boolean }>", defaultValue: "[]", required: true, 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: "searchPlaceholder", type: "string", defaultValue: "'Search options...'", description: "Placeholder used by the optional search input inside the popup." },
       { 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: "clearLabel", type: "string", defaultValue: "'Clear selection'", description: "Accessible label for the clear action." },
+      { name: "size", type: "'sm' | 'default' | 'lg'", defaultValue: "'default'", description: "Controls trigger height and density." },
       { name: "loading", type: "boolean", defaultValue: "false", description: "Disables selection and renders a loading state." },
+      { name: "loadingLabel", type: "ReactNode", defaultValue: "'Loading options...'", description: "Content shown while options are loading." },
       { 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: "showSelectedDescription", type: "boolean", defaultValue: "true", description: "Shows the selected option description inside the trigger when available." },
+      { name: "showSelectedIndicator", type: "boolean", defaultValue: "true", description: "Shows the built-in check indicator inside option rows. Set false when `renderOption` draws its own selected state." },
       { name: "renderOption", type: "(option, state) => ReactNode", defaultValue: "-", description: "Custom option renderer for richer rows." },
+      { name: "invalid", type: "boolean", defaultValue: "false", description: "Marks the trigger invalid and sets `aria-invalid`." },
+      { name: "onSearchChange", type: "(value: string) => void", defaultValue: "-", description: "Called as the local search value changes." },
     ],
     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: "Custom option selected state", code: "<Select options={options} renderOption={(option, state) => <CustomOption selected={state.selected} />} showSelectedIndicator={false} />" },
       { 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."],
@@ -134,8 +149,8 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     ],
     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",
+  "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: [
@@ -143,14 +158,18 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "data", type: "RowData[]", defaultValue: "[]", required: true, 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: "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: "filters", type: "ReactNode | (context) => ReactNode", defaultValue: "-", description: "Filter controls rendered in the default toolbar." },
+      { name: "summary", type: "ReactNode | (context) => ReactNode", defaultValue: "-", description: "Compact summary content rendered in the default toolbar." },
+      { 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: "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: "onRefresh", type: "(context) => void", defaultValue: "-", description: "Callback used by the built-in refresh action." },
+      { name: "onExport", type: "(context) => void", defaultValue: "-", description: "Callback used by the built-in export action." },
       { 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." },
@@ -164,10 +183,13 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { 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: "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: "renderExpandedRow", type: "(row) => ReactNode", defaultValue: "-", description: "Renders an expanded row panel beneath a parent row." },
+      { name: "columnPinning", type: "ColumnPinningState", defaultValue: "-", description: "Controlled TanStack column pinning state." },
+      { name: "virtualization", type: "DataTableVirtualizationConfig | false", defaultValue: "-", description: "Enables virtualized row rendering for large datasets." },
+      { 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." },
@@ -176,23 +198,136 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { 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: true, 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."],
-  },
+    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."],
+  },
+  "async-select": {
+    slug: "async-select",
+    source: "metadata",
+    summary: "Remote option picker for large, changing or server-filtered datasets. Prefer Select for small finite lists; use AsyncSelect when loading, hydration, create-option, min-search, cache, error and multi-select behavior are required.",
+    props: [
+      { name: "value", type: "string | string[]", defaultValue: "-", description: "Controlled selected value. Use an array when `isMulti` is true." },
+      { name: "isMulti", type: "boolean", defaultValue: "false", description: "Switches the component into multi-value mode with tag rendering and optional select-all behavior.", example: "isMulti" },
+      { name: "onValueChange", type: "(value, optionOrOptions) => void", defaultValue: "-", description: "Called with the next selected value and resolved option object(s)." },
+      { name: "loadOptions", type: "(search: string, signal?: AbortSignal) => Promise<Option[] | Group[]>", defaultValue: "-", required: true, description: "Async option loader. Respect the AbortSignal when forwarding to fetch." },
+      { name: "loadSelectedOption", type: "(value: string, signal?: AbortSignal) => Promise<Option | null>", defaultValue: "-", description: "Hydrates a single selected value when only an ID is stored." },
+      { name: "loadSelectedOptions", type: "(values: string[], signal?: AbortSignal) => Promise<Option[]>", defaultValue: "-", description: "Hydrates multiple selected values when only IDs are stored." },
+      { name: "defaultOptions", type: "Option[] | Group[]", defaultValue: "-", description: "Initial options shown before a search request resolves." },
+      { name: "cacheOptions", type: "boolean", defaultValue: "true", description: "Caches query results by normalized search text." },
+      { name: "cacheTtl", type: "number", defaultValue: "Infinity", description: "Maximum age for cached option results." },
+      { name: "debounceMs", type: "number", defaultValue: "250", description: "Delay before search requests are sent." },
+      { name: "minSearchLength", type: "number", defaultValue: "0", description: "Minimum typed characters before loading remote options." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: "Shows clear actions for selected value or tags." },
+      { name: "closeOnSelect", type: "boolean", defaultValue: "false", description: "Multi-select only. Closes the popup after selecting an option." },
+      { name: "maxSelected", type: "number", defaultValue: "-", description: "Multi-select only. Limits selected option count." },
+      { name: "maxVisibleTags", type: "number", defaultValue: "-", description: "Multi-select only. Collapses extra selected tags into an overflow label." },
+      { name: "showSelectAll", type: "boolean", defaultValue: "false", description: "Multi-select only. Adds a select-all-visible action." },
+      { name: "onCreateOption", type: "(search: string) => Promise<Option> | Option", defaultValue: "-", description: "Creates a selectable option from the current search query." },
+      { name: "showCreateOption", type: "(search: string, options: Option[]) => boolean", defaultValue: "-", description: "Controls when the create-option row should appear." },
+      { name: "createOptionLabel", type: "(search: string) => ReactNode", defaultValue: "-", description: "Custom label for the create-option action." },
+      { name: "labels", type: "AsyncSelectLabels", defaultValue: "-", description: "Centralized copy for placeholder, loading, error, empty, select-all and selected-count states." },
+      { name: "renderOption", type: "(option, state) => ReactNode", defaultValue: "-", description: "Custom option row renderer." },
+      { name: "renderValue", type: "(option) => ReactNode", defaultValue: "-", description: "Custom selected value renderer." },
+      { name: "renderTag", type: "(option, state) => ReactNode", defaultValue: "-", description: "Multi-select only. Custom selected tag renderer." },
+      { name: "renderLoading", type: "(state) => ReactNode", defaultValue: "-", description: "Custom loading state renderer." },
+      { name: "renderEmpty", type: "(state) => ReactNode", defaultValue: "-", description: "Custom empty state renderer." },
+      { name: "renderError", type: "(state) => ReactNode", defaultValue: "-", description: "Custom error state renderer." },
+      { name: "renderMinSearch", type: "(state) => ReactNode", defaultValue: "-", description: "Custom minimum-search state renderer." },
+      { name: "renderMaxSelected", type: "(state) => ReactNode", defaultValue: "-", description: "Custom max-selected state renderer." },
+      { name: "showSelectedDescription", type: "boolean", defaultValue: "true", description: "Shows option descriptions in selected value and tag surfaces." },
+      { name: "invalid", type: "boolean", defaultValue: "false", description: "Marks the trigger invalid and sets `aria-invalid`." },
+    ],
+    examples: [
+      { title: "Remote single select", code: "<AsyncSelect value={value} onValueChange={setValue} loadOptions={loadOptions} minSearchLength={2} />" },
+      { title: "Hydrated edit state", code: "<AsyncSelect value={ownerId} loadOptions={searchOwners} loadSelectedOption={loadOwnerById} />" },
+      { title: "Multi select with limit", code: "<AsyncSelect isMulti value={ids} onValueChange={setIds} loadOptions={loadTeams} maxSelected={3} showSelectAll />" },
+      { title: "Create missing option", code: "<AsyncSelect loadOptions={loadOptions} onCreateOption={createOption} createOptionLabel={(search) => `Create ${search}`} />" },
+    ],
+    accessibility: ["Keep async loading and error labels readable.", "Use min-search copy so users know why no request has been sent.", "Preserve keyboard access for clear, tag remove and select-all actions.", "Hydrate selected labels so edit forms do not expose raw IDs."],
+  },
+  "async-multi-select": {
+    slug: "async-multi-select",
+    source: "metadata",
+    summary: "Deprecated public alias for multi-value async selection. Prefer `AsyncSelect` with `isMulti` so single and multi remote selection share one mental model.",
+    props: [
+      { name: "isMulti", type: "true", defaultValue: "true", required: true, description: "Prefer passing this to `AsyncSelect` instead of importing the deprecated alias." },
+      { name: "value", type: "string[]", defaultValue: "[]", description: "Controlled selected values." },
+      { name: "onValueChange", type: "(values: string[], options: Option[]) => void", defaultValue: "-", description: "Called when selected values change." },
+      { name: "loadOptions", type: "(search: string, signal?: AbortSignal) => Promise<Option[] | Group[]>", defaultValue: "-", required: true, description: "Async option loader." },
+      { name: "loadSelectedOptions", type: "(values: string[], signal?: AbortSignal) => Promise<Option[]>", defaultValue: "-", description: "Hydrates selected values from stored IDs." },
+      { name: "maxSelected", type: "number", defaultValue: "-", description: "Limits selected option count." },
+      { name: "showSelectAll", type: "boolean", defaultValue: "false", description: "Adds a select-all-visible action." },
+      { name: "maxVisibleTags", type: "number", defaultValue: "-", description: "Collapses extra selected tags." },
+    ],
+    examples: [
+      { title: "Preferred API", code: "<AsyncSelect isMulti value={teamIds} onValueChange={setTeamIds} loadOptions={loadTeams} />" },
+    ],
+    accessibility: ["Make tag remove controls keyboard reachable.", "Announce selected count when selections are constrained.", "Keep deprecated alias docs pointed to the preferred API."],
+  },
+  "app-sidebar": {
+    slug: "app-sidebar",
+    source: "metadata",
+    summary: "Reusable dashboard navigation shell for admin products. Keep route state in one items array, render framework links through `renderLink`, and use the built-in active indicators, collapsed rail, mobile drawer and footer account slots instead of rebuilding sidebar chrome per app.",
+    props: [
+      { name: "items", type: "SidebarItem[]", defaultValue: "[]", required: true, description: "Primary navigation tree with labels, hrefs, badges, active state, disabled state and nested children." },
+      { name: "header", type: "ReactNode", defaultValue: "-", description: "Workspace, product or tenant identity area." },
+      { name: "footer", type: "ReactNode", defaultValue: "-", description: "Custom footer content rendered under account and secondary actions." },
+      { name: "footerAccount", type: "{ label; description?; avatar?; href?; onSelect? }", defaultValue: "-", description: "Account/workspace switcher surface rendered in the footer." },
+      { name: "secondaryActions", type: "SidebarItem[]", defaultValue: "[]", description: "Support, billing, help or logout-like actions below primary navigation." },
+      { name: "railItems", type: "SidebarItem[]", defaultValue: "[]", description: "Compact rail actions shown when the sidebar is collapsed." },
+      { name: "collapsed", type: "boolean", defaultValue: "false", description: "Switches desktop sidebar into icon rail mode." },
+      { name: "width", type: "CSSProperties['width']", defaultValue: "'18rem'", description: "Expanded desktop sidebar width." },
+      { name: "collapsedWidth", type: "CSSProperties['width']", defaultValue: "'4.75rem'", description: "Collapsed desktop rail width." },
+      { name: "itemSize", type: "'sm' | 'md' | 'lg'", defaultValue: "'md'", description: "Controls item density for compact admin apps or comfortable product shells." },
+      { name: "activeIndicator", type: "'none' | 'bar' | 'pill'", defaultValue: "'bar'", description: "Controls how the active route is emphasized." },
+      { name: "showSectionLabels", type: "boolean", defaultValue: "true", description: "Shows top-level section labels from item.sectionLabel." },
+      { name: "tooltipOnCollapsed", type: "boolean", defaultValue: "true", description: "Shows item labels in tooltips while collapsed." },
+      { name: "navigationLabel", type: "string", defaultValue: "'Primary navigation'", description: "Accessible label for the navigation landmark." },
+      { name: "responsive", type: "boolean", defaultValue: "true", description: "Enables mobile drawer behavior at the configured breakpoint." },
+      { name: "mobileBreakpoint", type: "number", defaultValue: "1024", description: "Viewport width where the sidebar becomes a mobile drawer." },
+      { name: "mobileOpen", type: "boolean", defaultValue: "-", description: "Controlled mobile drawer open state." },
+      { name: "defaultMobileOpen", type: "boolean", defaultValue: "false", description: "Initial uncontrolled mobile drawer open state." },
+      { name: "onMobileOpenChange", type: "(open: boolean) => void", defaultValue: "-", description: "Called when the mobile drawer opens or closes." },
+      { name: "mobileTitle", type: "ReactNode", defaultValue: "-", description: "Title rendered in the mobile drawer header." },
+      { name: "mobileDescription", type: "ReactNode", defaultValue: "-", description: "Short helper copy rendered in the mobile drawer header." },
+      { name: "showMobileToggle", type: "boolean", defaultValue: "true", description: "Controls whether the built-in mobile trigger renders." },
+      { name: "closeOnSelect", type: "boolean", defaultValue: "true", description: "Closes the mobile drawer after a navigation item is selected." },
+      { name: "renderMobileToggle", type: "({ open, setOpen }) => ReactNode", defaultValue: "-", description: "Replaces the built-in mobile trigger." },
+      { name: "onItemSelect", type: "(item: SidebarItem) => void", defaultValue: "-", description: "Global callback fired after any sidebar item is selected." },
+      { name: "renderItem", type: "(item, state) => ReactNode", defaultValue: "-", description: "Fully custom item renderer for advanced product shells." },
+      { name: "renderLink", type: "(props) => ReactNode", defaultValue: "-", description: "Adapter for React Router Link, Next Link, Remix Link or any framework router.", example: "renderLink={({ href, ...props }) => <Link {...props} to={href} />}" },
+    ],
+    examples: [
+      { title: "React Router links", code: "<Sidebar items={items} renderLink={({ href = '/', ...props }) => <Link {...props} to={href} />} />" },
+      { title: "Collapsed rail", code: "<Sidebar collapsed items={items} railItems={railItems} footerAccount={account} />" },
+      { title: "Mobile drawer", code: "<Sidebar responsive mobileTitle=\"Workspace\" mobileDescription=\"Navigate admin sections\" items={items} />" },
+      { title: "Admin density", code: "<Sidebar itemSize=\"sm\" activeIndicator=\"bar\" showSectionLabels={false} items={items} />" },
+    ],
+    accessibility: ["Use `navigationLabel` that matches the product language.", "Keep active route state explicit through `item.active` or child active state.", "Use `renderLink` for client routing instead of raw anchors in React Router or Next apps.", "Collapsed sidebars need icons or tooltips that still identify each route.", "Mobile drawer should close on selection unless the route opens another nested group."],
+  },
+  dialog: {
+    slug: "dialog",
+    source: "metadata",
+    summary: "Focused overlay for short decisions, confirmations and contained edit flows. Use DialogBody for scrollable content so footer actions stay aligned and visible.",
+    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: "size", type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'", defaultValue: "'md'", description: "Controls DialogContent width and full-screen-like layout." },
+      { name: "surface", type: "'default' | 'plain'", defaultValue: "'default'", description: "Controls whether the content uses the default dialog surface or a plain custom wrapper." },
+      { name: "showCloseButton", type: "boolean", defaultValue: "true", description: "Controls the top-right close button on DialogContent or footer close action on DialogFooter." },
+      { name: "title", type: "ReactNode", defaultValue: "-", required: true, description: "Accessible dialog title." },
+      { name: "description", type: "ReactNode", defaultValue: "-", description: "Supporting description for context." },
+      { name: "DialogBody", type: "Component", defaultValue: "-", description: "Scrollable body area for long content, forms, details and preview blocks." },
+      { name: "DialogFooter", type: "Component", defaultValue: "-", description: "Sticky-safe action row. Buttons stay inline-flex and wrap instead of stacking icons above text." },
+      { name: "children", type: "ReactNode", defaultValue: "-", description: "Dialog composition: header, body and footer." },
+    ],
+    examples: [
+      { title: "Confirm dialog", code: "<Dialog><DialogTrigger render={<Button />}>Publish</DialogTrigger><DialogContent><DialogHeader><DialogTitle>Publish update</DialogTitle></DialogHeader><DialogFooter><Button>Publish</Button></DialogFooter></DialogContent></Dialog>" },
+      { title: "Form dialog", code: "<DialogContent size=\"lg\"><DialogHeader /><DialogBody>...</DialogBody><DialogFooter>...</DialogFooter></DialogContent>" },
+      { title: "Destructive dialog", code: "<DialogContent size=\"sm\"><DialogHeader /><DialogBody /><DialogFooter><Button variant=\"destructive\">Deactivate</Button></DialogFooter></DialogContent>" },
+    ],
+    accessibility: ["Every dialog needs a title.", "Return focus to the trigger after close.", "Use DialogBody for long content instead of scrolling the whole modal.", "Keep footer actions outcome-specific and keyboard reachable.", "Do not put long multi-step workflows in a small dialog."],
+  },
   "date-picker": {
     slug: "date-picker",
     source: "metadata",
@@ -208,9 +343,9 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     ],
     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",
+  "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: true, description: "RHF control instance from useForm()." },
@@ -221,11 +356,106 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { 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."],
-  },
-}
+    ],
+    accessibility: ["Label must remain visible.", "Error text should be connected to the field.", "Required state should be visual and semantic."],
+  },
+  wizard: {
+    slug: "wizard",
+    source: "metadata",
+    summary: "Controlled multi-step workflow surface for onboarding, setup and review flows. Keep the current step in state so validation, route sync and final submit behavior stay predictable.",
+    props: [
+      { name: "steps", type: "Array<{ id: string; title: ReactNode; description?: ReactNode; disabled?: boolean; completed?: boolean }>", defaultValue: "[]", required: true, description: "Ordered steps shown in the stepper and used by navigation controls." },
+      { name: "currentStep", type: "string", defaultValue: "-", required: true, description: "Controlled active step id.", example: "currentStep={step}" },
+      { name: "onStepChange", type: "(stepId: string) => void", defaultValue: "-", description: "Called when a clickable step is selected.", example: "onStepChange={setStep}" },
+      { name: "onNext", type: "() => void", defaultValue: "-", description: "Called by the primary next action before the final step." },
+      { name: "onPrevious", type: "() => void", defaultValue: "-", description: "Called by the previous action when the user can go back." },
+      { name: "onFinish", type: "() => void", defaultValue: "-", description: "Called by the final submit action on the last step." },
+      { name: "nextLabel", type: "ReactNode", defaultValue: "'Next'", description: "Label for the forward action." },
+      { name: "previousLabel", type: "ReactNode", defaultValue: "'Back'", description: "Label for the backward action." },
+      { name: "finishLabel", type: "ReactNode", defaultValue: "'Finish'", description: "Label for the final action." },
+      { name: "footer", type: "ReactNode", defaultValue: "-", description: "Optional custom footer when the default Back/Next/Finish row is not enough." },
+      { name: "children", type: "ReactNode", defaultValue: "-", description: "Current step content rendered between the stepper and footer." },
+      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for local spacing and layout composition." },
+    ],
+    examples: [
+      { title: "Controlled wizard", code: "<Wizard steps={steps} currentStep={step} onStepChange={setStep} onNext={goNext} onPrevious={goBack} onFinish={submit}>...</Wizard>" },
+      { title: "Validation-gated step", code: "<Wizard steps={steps.map((item) => ({ ...item, disabled: item.id === 'finish' && !isValid }))} currentStep={step} />" },
+      { title: "Custom action labels", code: "<Wizard nextLabel=\"Continue setup\" previousLabel=\"Edit previous\" finishLabel=\"Publish\" />" },
+    ],
+    accessibility: ["Keep step titles short and descriptive.", "Disable future steps when validation has not passed.", "Move focus to the new step content after step changes in long forms.", "Keep final submit copy specific to the workflow."],
+  },
+  stepper: {
+    slug: "stepper",
+    source: "metadata",
+    summary: "Progress navigation for multi-step forms and setup flows. Use it when the workflow needs visible step context without taking over the page content.",
+    props: [
+      { name: "steps", type: "Array<{ id: string; title: ReactNode; description?: ReactNode; disabled?: boolean; completed?: boolean }>", defaultValue: "[]", required: true, description: "Ordered step list rendered as the progress navigation." },
+      { name: "currentStep", type: "string", defaultValue: "-", required: true, description: "Controlled active step id." },
+      { name: "onStepChange", type: "(stepId: string) => void", defaultValue: "-", description: "Called when an enabled step is selected." },
+      { name: "orientation", type: "'horizontal' | 'vertical'", defaultValue: "'horizontal'", description: "Controls whether steps render in a row or stacked column." },
+      { name: "size", type: "'sm' | 'default' | 'lg'", defaultValue: "'default'", description: "Controls indicator and label density." },
+      { name: "showDescriptions", type: "boolean", defaultValue: "true", description: "Shows or hides supporting step descriptions." },
+      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for local layout composition." },
+    ],
+    examples: [
+      { title: "Horizontal setup stepper", code: "<Stepper steps={steps} currentStep={step} onStepChange={setStep} />" },
+      { title: "Vertical review stepper", code: "<Stepper orientation=\"vertical\" steps={steps} currentStep={step} />" },
+      { title: "Compact labels", code: "<Stepper size=\"sm\" showDescriptions={false} steps={steps} currentStep={step} />" },
+    ],
+    accessibility: ["Use disabled steps when users cannot jump ahead.", "Keep active and completed states visually distinct.", "Do not rely on color alone to communicate progress."],
+  },
+}
 
-export function getComponentApiSchema(slug: string): ComponentApiSchema | undefined {
-  return componentApiSchemas[slug]
-}
+function slugToTitle(slug: string) {
+  return slug
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ")
+}
+
+function getFallbackComponentApiSchema(slug: string): ComponentApiSchema {
+  const title = slugToTitle(slug)
+
+  return {
+    slug,
+    source: "manual-fallback",
+    summary: `${title} is documented as a source-copy surface. Start with the default example, keep the public props small, then customize the local source only where the product needs it.`,
+    props: [
+      {
+        name: "className",
+        type: "string",
+        defaultValue: "-",
+        description: "Optional class override for layout, spacing or local product styling.",
+      },
+      {
+        name: "children",
+        type: "ReactNode",
+        defaultValue: "-",
+        description: "Optional composed content, label or slot content when the component supports composition.",
+      },
+      {
+        name: "aria-label",
+        type: "string",
+        defaultValue: "-",
+        description: "Accessible label for icon-only, compact or non-text usage.",
+        notes: "Use when visible text does not fully describe the action or content.",
+      },
+    ],
+    examples: [
+      {
+        title: `${title} default`,
+        code: `<${title.replaceAll(" ", "")} className="w-full" />`,
+      },
+    ],
+    accessibility: [
+      "Keep visible focus states when the surface is interactive.",
+      "Provide readable labels for icon-only or compact controls.",
+      "Preserve semantic structure when customizing copied source.",
+    ],
+  }
+}
+
+export function getComponentApiSchema(slug: string): ComponentApiSchema | undefined {
+  return componentApiSchemas[slug] ?? getFallbackComponentApiSchema(slug)
+}

package/packages/cli/vendor/src/showcase/demo-snippets/forms/index.ts

@@ -21,7 +21,7 @@ export function Demo() {
   "clearable-input": `import { Input } from "tembro"
 
 export function Demo() {
-  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+  return <Input defaultValue="Tembro" placeholder="Search customer" clearable />
 }`,
   "tag-input": `import { TagInput } from "tembro"