tembro 3.1.5 → 3.1.7

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

@@ -158,6 +158,12 @@ var e = {
 				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",
@@ -195,6 +201,12 @@ var e = {
 				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",
@@ -232,6 +244,30 @@ var e = {
 				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",
@@ -326,6 +362,12 @@ var e = {
 				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",
@@ -344,12 +386,30 @@ var e = {
 				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",
@@ -362,11 +422,35 @@ var e = {
 				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: [
@@ -382,6 +466,10 @@ var e = {
 				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."
@@ -532,6 +620,18 @@ var e = {
 				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",
@@ -569,6 +669,18 @@ var e = {
 				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",
@@ -669,6 +781,24 @@ var e = {
 				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",
@@ -724,10 +854,485 @@ var e = {
 			"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: !0,
+				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: !0,
+				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: !0,
+				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: !0,
+				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.",
+		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",
@@ -747,6 +1352,24 @@ var e = {
 				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",
@@ -761,21 +1384,43 @@ var e = {
 				description: "Supporting description for context."
 			},
 			{
-				name: "children",
-				type: "ReactNode",
+				name: "DialogBody",
+				type: "Component",
 				defaultValue: "-",
-				description: "Dialog body content."
+				description: "Scrollable body area for long content, forms, details and preview blocks."
 			},
 			{
-				name: "footer",
+				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: "Action row for confirm/cancel buttons."
+				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."
 		]
 	},
@@ -894,10 +1539,224 @@ var e = {
 			"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: !0,
+				description: "Ordered steps shown in the stepper and used by navigation controls."
+			},
+			{
+				name: "currentStep",
+				type: "string",
+				defaultValue: "-",
+				required: !0,
+				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: !0,
+				description: "Ordered step list rendered as the progress navigation."
+			},
+			{
+				name: "currentStep",
+				type: "string",
+				defaultValue: "-",
+				required: !0,
+				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."
+		]
 	}
 };
-function t(t) {
-	return e[t];
+function t(e) {
+	return e.split("-").filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
+}
+function n(e) {
+	let n = t(e);
+	return {
+		slug: e,
+		source: "manual-fallback",
+		summary: `${n} 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: `${n} default`,
+			code: `<${n.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."
+		]
+	};
+}
+function r(t) {
+	return e[t] ?? n(t);
 }
 //#endregion
-export { e as componentApiSchemas, t as getComponentApiSchema };
+export { e as componentApiSchemas, r as getComponentApiSchema };