tembro 2.0.3 → 2.0.5

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:`EmptyStateProps`,defaultValue:`-`,description:`Fallback when there are no rows.`},{name:`errorState`,type:`EmptyStateProps`,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:`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;

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

@@ -518,13 +518,13 @@ var e = {
 			},
 			{
 				name: "emptyState",
-				type: "EmptyStateProps",
+				type: "Omit<DataStateProps, \"status\">",
 				defaultValue: "-",
 				description: "Fallback when there are no rows."
 			},
 			{
 				name: "errorState",
-				type: "EmptyStateProps",
+				type: "Omit<DataStateProps, \"status\">",
 				defaultValue: "-",
 				description: "Fallback when the data request fails."
 			},

package/dist/showcase/create-demo.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs");let t=require("react/jsx-runtime");function n(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function r(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:i(e),Showcase:n=>(0,t.jsx)(l,{definition:e,...n})}]))}function i(e){return{cliCommand:`npx tembro add ${e.slug}`,code:a(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function a(e){return o[e.slug]??s(e)}var o={"search-input":`import { SearchInput } from "@/components/search-input"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs");let t=require("react/jsx-runtime");function n(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function r(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:i(e),Showcase:n=>(0,t.jsx)(l,{definition:e,...n})}]))}function i(e){return{cliCommand:`npx tembro add ${e.slug}`,code:a(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function a(e){return o[e.slug]??s(e)}var o={"search-input":`import { SearchInput } from "tembro"
 
 export function Demo() {
   return (
@@ -10,20 +10,19 @@ export function Demo() {
       shortcut="Ctrl K"
     />
   )
-}`,"password-input":`import { PasswordInput } from "@/components/password-input"
+}`,"password-input":`import { PasswordInput } from "tembro"
 
 export function Demo() {
   return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
-}`,"clearable-input":`import { ClearableInput } from "@/components/clearable-input"
+}`,"clearable-input":`import { Input } from "tembro"
 
 export function Demo() {
-  return <ClearableInput defaultValue="Azamat UI" placeholder="Search customer" />
-}`,"tag-input":`import { TagInput } from "@/components/tag-input"
+  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+}`,"tag-input":`import { TagInput } from "tembro"
 
 export function Demo() {
   return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
-}`,"action-menu":`import { ActionMenu } from "@/components/action-menu"
-import { Button } from "@/components/button"
+}`,"action-menu":`import { ActionMenu, Button } from "tembro"
 
 export function Demo() {
   return (
@@ -37,7 +36,7 @@ export function Demo() {
       trigger={<Button variant="outline">Actions</Button>}
     />
   )
-}`,"button-group":`import { ButtonGroup } from "@/components/button-group"
+}`,"button-group":`import { ButtonGroup } from "tembro"
 
 export function Demo() {
   return (
@@ -49,7 +48,7 @@ export function Demo() {
       ]}
     />
   )
-}`,"quick-action-grid":`import { QuickActionGrid } from "@/components/quick-action-grid"
+}`,"quick-action-grid":`import { QuickActionGrid } from "tembro"
 
 export function Demo() {
   return (
@@ -62,21 +61,22 @@ export function Demo() {
       ]}
     />
   )
-}`,"filter-bar":`import { FilterBar } from "@/components/filter-bar"
-import { SearchInput } from "@/components/search-input"
-import { Button } from "@/components/button"
+}`,"filter-bar":`import { Button, FilterBar, SearchInput } from "tembro"
 
 export function Demo() {
   return (
     <FilterBar
       search={<SearchInput value="" placeholder="Search rows..." readOnly />}
-      activeCount={2}
+      chips={[
+        { key: "status", label: "Status", value: "Active", tone: "success" },
+        { key: "owner", label: "Owner", value: "Azamat" },
+      ]}
       filters={<Button variant="outline">Status</Button>}
       actions={<Button>Export</Button>}
       onReset={() => undefined}
     />
   )
-}`,"description-list":`import { DescriptionList } from "@/components/description-list"
+}`,"description-list":`import { DescriptionList } from "tembro"
 
 export function Demo() {
   return (
@@ -89,21 +89,7 @@ export function Demo() {
       ]}
     />
   )
-}`,"entity-card":`import { EntityCard } from "@/components/entity-card"
-import { Badge } from "@/components/badge"
-import { Button } from "@/components/button"
-
-export function Demo() {
-  return (
-    <EntityCard
-      title="Azamat Workspace"
-      description="Admin console and live dashboard route."
-      status={<Badge variant="secondary">Live</Badge>}
-      meta="Updated 8 min ago"
-      actions={<Button size="sm" variant="outline">Open</Button>}
-    />
-  )
-}`,"stat-card":`import { StatCard } from "@/components/stat-card"
+}`,"stat-card":`import { StatCard } from "tembro"
 
 export function Demo() {
   return (
@@ -115,11 +101,11 @@ export function Demo() {
       helperText="Updated just now"
     />
   )
-}`,pagination:`import { Pagination } from "@/components/pagination"
+}`,pagination:`import { Pagination } from "tembro"
 
 export function Demo() {
   return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
-}`,"dialog-actions":`import { DialogActionButton, DialogActions } from "@/components/dialog-actions"
+}`,"dialog-actions":`import { DialogActionButton, DialogActions } from "tembro"
 
 export function Demo() {
   return (
@@ -129,11 +115,11 @@ export function Demo() {
       <DialogActionButton>Publish</DialogActionButton>
     </DialogActions>
   )
-}`,"file-dropzone":`import { FileDropzone } from "@/components/file-dropzone"
+}`,"file-dropzone":`import { FileDropzone } from "tembro"
 
 export function Demo() {
   return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
-}`,stepper:`import { Stepper } from "@/components/stepper"
+}`,stepper:`import { Stepper } from "tembro"
 
 export function Demo() {
   return (
@@ -147,7 +133,7 @@ export function Demo() {
       onStepChange={() => undefined}
     />
   )
-}`};function s(e){let t=e.importName??e.component,n=`@/components/${e.slug}`;return e.kind===`data-table`?`import { ${t} } from "${n}"
+}`};function s(e){let t=e.importName??e.component,n=`tembro`;return e.kind===`data-table`?`import { ${t} } from "${n}"
 
 export function Demo() {
   return (

package/dist/showcase/create-demo.js

@@ -46,24 +46,23 @@ function o(e) {
 	return s[e.slug] ?? c(e);
 }
 var s = {
-	"search-input": "import { SearchInput } from \"@/components/search-input\"\n\nexport function Demo() {\n  return (\n    <SearchInput\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
-	"password-input": "import { PasswordInput } from \"@/components/password-input\"\n\nexport function Demo() {\n  return <PasswordInput placeholder=\"Enter secure token\" autoComplete=\"current-password\" />\n}",
-	"clearable-input": "import { ClearableInput } from \"@/components/clearable-input\"\n\nexport function Demo() {\n  return <ClearableInput defaultValue=\"Azamat UI\" placeholder=\"Search customer\" />\n}",
-	"tag-input": "import { TagInput } from \"@/components/tag-input\"\n\nexport function Demo() {\n  return <TagInput defaultValue={[\"dashboard\", \"billing\"]} placeholder=\"Add tag\" />\n}",
-	"action-menu": "import { ActionMenu } from \"@/components/action-menu\"\nimport { Button } from \"@/components/button\"\n\nexport function Demo() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n      trigger={<Button variant=\"outline\">Actions</Button>}\n    />\n  )\n}",
-	"button-group": "import { ButtonGroup } from \"@/components/button-group\"\n\nexport function Demo() {\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"day\", label: \"Day\" },\n        { key: \"week\", label: \"Week\" },\n        { key: \"month\", label: \"Month\" },\n      ]}\n    />\n  )\n}",
-	"quick-action-grid": "import { QuickActionGrid } from \"@/components/quick-action-grid\"\n\nexport function Demo() {\n  return (\n    <QuickActionGrid\n      columns={3}\n      items={[\n        { key: \"new\", label: \"New invoice\", description: \"Create a billing row.\" },\n        { key: \"import\", label: \"Import CSV\", description: \"Upload operational data.\" },\n        { key: \"share\", label: \"Share\", description: \"Invite a teammate.\" },\n      ]}\n    />\n  )\n}",
-	"filter-bar": "import { FilterBar } from \"@/components/filter-bar\"\nimport { SearchInput } from \"@/components/search-input\"\nimport { Button } from \"@/components/button\"\n\nexport function Demo() {\n  return (\n    <FilterBar\n      search={<SearchInput value=\"\" placeholder=\"Search rows...\" readOnly />}\n      activeCount={2}\n      filters={<Button variant=\"outline\">Status</Button>}\n      actions={<Button>Export</Button>}\n      onReset={() => undefined}\n    />\n  )\n}",
-	"description-list": "import { DescriptionList } from \"@/components/description-list\"\n\nexport function Demo() {\n  return (\n    <DescriptionList\n      title=\"Invoice details\"\n      items={[\n        { key: \"id\", label: \"Invoice\", value: \"#4821\" },\n        { key: \"amount\", label: \"Amount\", value: \"$12,420\" },\n        { key: \"status\", label: \"Status\", value: \"Paid\" },\n      ]}\n    />\n  )\n}",
-	"entity-card": "import { EntityCard } from \"@/components/entity-card\"\nimport { Badge } from \"@/components/badge\"\nimport { Button } from \"@/components/button\"\n\nexport function Demo() {\n  return (\n    <EntityCard\n      title=\"Azamat Workspace\"\n      description=\"Admin console and live dashboard route.\"\n      status={<Badge variant=\"secondary\">Live</Badge>}\n      meta=\"Updated 8 min ago\"\n      actions={<Button size=\"sm\" variant=\"outline\">Open</Button>}\n    />\n  )\n}",
-	"stat-card": "import { StatCard } from \"@/components/stat-card\"\n\nexport function Demo() {\n  return (\n    <StatCard\n      title=\"Revenue\"\n      value=\"$84.2k\"\n      description=\"Compared with last month\"\n      trend={{ value: \"+12.4%\", tone: \"success\" }}\n      helperText=\"Updated just now\"\n    />\n  )\n}",
-	pagination: "import { Pagination } from \"@/components/pagination\"\n\nexport function Demo() {\n  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />\n}",
-	"dialog-actions": "import { DialogActionButton, DialogActions } from \"@/components/dialog-actions\"\n\nexport function Demo() {\n  return (\n    <DialogActions align=\"end\">\n      <DialogActionButton variant=\"ghost\">Cancel</DialogActionButton>\n      <DialogActionButton variant=\"outline\">Save draft</DialogActionButton>\n      <DialogActionButton>Publish</DialogActionButton>\n    </DialogActions>\n  )\n}",
-	"file-dropzone": "import { FileDropzone } from \"@/components/file-dropzone\"\n\nexport function Demo() {\n  return <FileDropzone label=\"Drop contract files\" description=\"PDF, PNG or CSV up to 10MB.\" />\n}",
-	stepper: "import { Stepper } from \"@/components/stepper\"\n\nexport function Demo() {\n  return (\n    <Stepper\n      currentStep=\"billing\"\n      steps={[\n        { id: \"profile\", title: \"Profile\", completed: true },\n        { id: \"billing\", title: \"Billing\" },\n        { id: \"review\", title: \"Review\" },\n      ]}\n      onStepChange={() => undefined}\n    />\n  )\n}"
+	"search-input": "import { SearchInput } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <SearchInput\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
+	"password-input": "import { PasswordInput } from \"tembro\"\n\nexport function Demo() {\n  return <PasswordInput placeholder=\"Enter secure token\" autoComplete=\"current-password\" />\n}",
+	"clearable-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return <Input defaultValue=\"Azamat UI\" placeholder=\"Search customer\" clearable />\n}",
+	"tag-input": "import { TagInput } from \"tembro\"\n\nexport function Demo() {\n  return <TagInput defaultValue={[\"dashboard\", \"billing\"]} placeholder=\"Add tag\" />\n}",
+	"action-menu": "import { ActionMenu, Button } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n      trigger={<Button variant=\"outline\">Actions</Button>}\n    />\n  )\n}",
+	"button-group": "import { ButtonGroup } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"day\", label: \"Day\" },\n        { key: \"week\", label: \"Week\" },\n        { key: \"month\", label: \"Month\" },\n      ]}\n    />\n  )\n}",
+	"quick-action-grid": "import { QuickActionGrid } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <QuickActionGrid\n      columns={3}\n      items={[\n        { key: \"new\", label: \"New invoice\", description: \"Create a billing row.\" },\n        { key: \"import\", label: \"Import CSV\", description: \"Upload operational data.\" },\n        { key: \"share\", label: \"Share\", description: \"Invite a teammate.\" },\n      ]}\n    />\n  )\n}",
+	"filter-bar": "import { Button, FilterBar, SearchInput } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <FilterBar\n      search={<SearchInput value=\"\" placeholder=\"Search rows...\" readOnly />}\n      chips={[\n        { key: \"status\", label: \"Status\", value: \"Active\", tone: \"success\" },\n        { key: \"owner\", label: \"Owner\", value: \"Azamat\" },\n      ]}\n      filters={<Button variant=\"outline\">Status</Button>}\n      actions={<Button>Export</Button>}\n      onReset={() => undefined}\n    />\n  )\n}",
+	"description-list": "import { DescriptionList } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DescriptionList\n      title=\"Invoice details\"\n      items={[\n        { key: \"id\", label: \"Invoice\", value: \"#4821\" },\n        { key: \"amount\", label: \"Amount\", value: \"$12,420\" },\n        { key: \"status\", label: \"Status\", value: \"Paid\" },\n      ]}\n    />\n  )\n}",
+	"stat-card": "import { StatCard } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <StatCard\n      title=\"Revenue\"\n      value=\"$84.2k\"\n      description=\"Compared with last month\"\n      trend={{ value: \"+12.4%\", tone: \"success\" }}\n      helperText=\"Updated just now\"\n    />\n  )\n}",
+	pagination: "import { Pagination } from \"tembro\"\n\nexport function Demo() {\n  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />\n}",
+	"dialog-actions": "import { DialogActionButton, DialogActions } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DialogActions align=\"end\">\n      <DialogActionButton variant=\"ghost\">Cancel</DialogActionButton>\n      <DialogActionButton variant=\"outline\">Save draft</DialogActionButton>\n      <DialogActionButton>Publish</DialogActionButton>\n    </DialogActions>\n  )\n}",
+	"file-dropzone": "import { FileDropzone } from \"tembro\"\n\nexport function Demo() {\n  return <FileDropzone label=\"Drop contract files\" description=\"PDF, PNG or CSV up to 10MB.\" />\n}",
+	stepper: "import { Stepper } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Stepper\n      currentStep=\"billing\"\n      steps={[\n        { id: \"profile\", title: \"Profile\", completed: true },\n        { id: \"billing\", title: \"Billing\" },\n        { id: \"review\", title: \"Review\" },\n      ]}\n      onStepChange={() => undefined}\n    />\n  )\n}"
 };
 function c(e) {
-	let t = e.importName ?? e.component, n = `@/components/${e.slug}`;
+	let t = e.importName ?? e.component, n = "tembro";
 	return e.kind === "data-table" ? `import { ${t} } from "${n}"
 
 export function Demo() {

package/dist/showcase/fallback.cjs

@@ -1,5 +1,5 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../components/ui/button/index.cjs"),t=require("../components/actions/button-group.cjs"),n=require("../components/actions/copy-button.cjs"),r=require("../components/actions/copy-field.cjs"),i=require("../components/ui/input/index.cjs"),a=require("../components/ui/card/index.cjs"),o=require("../components/ui/badge/index.cjs"),ee=require("../components/ui/accordion/index.cjs"),s=require("../components/ui/skeleton/index.cjs"),te=require("../components/ui/divider/index.cjs"),ne=require("../components/ui/segmented-control/index.cjs"),c=require("../components/ui/spinner/index.cjs"),l=require("../components/actions/quick-action-grid.cjs"),u=require("../components/layout/section.cjs"),d=require("../components/layout/stack.cjs"),re=require("../components/layout/sticky-footer-bar.cjs"),ie=require("../components/navigation/anchor-nav.cjs"),ae=require("../components/navigation/page-tabs.cjs"),f=require("../components/navigation/stepper-tabs.cjs"),p=require("../components/filters/filter-chips.cjs"),m=require("../components/filters/saved-filter-select.cjs"),h=require("../components/inputs/color-input.cjs"),g=require("../components/inputs/otp-input.cjs"),_=require("../components/inputs/quantity-stepper.cjs"),v=require("../components/inputs/rating.cjs"),y=require("../components/inputs/slider.cjs"),oe=require("../components/inputs/tag-input.cjs"),se=require("../components/inputs/cascader.cjs"),b=require("../components/inputs/json-input.cjs"),x=require("../components/inputs/mention-input.cjs"),S=require("../components/inputs/time-picker.cjs"),C=require("../components/feedback/alert.cjs"),w=require("../components/feedback/empty-state.cjs"),T=require("../components/feedback/page-state.cjs"),E=require("../components/display/description-list.cjs"),D=require("../components/display/avatar.cjs"),O=require("../components/display/descriptions.cjs"),k=require("../components/display/keyboard-shortcut.cjs"),A=require("../components/display/kanban.cjs"),j=require("../components/display/code-block.cjs"),M=require("../components/display/data-state.cjs"),N=require("../components/display/entity-card.cjs"),P=require("../components/display/list.cjs"),F=require("../components/display/property-grid.cjs"),I=require("../components/display/statistic.cjs"),L=require("../components/display/status-legend.cjs"),R=require("../components/display/tag-list.cjs"),ce=require("../components/display/tree-view.cjs"),z=require("../components/display/skeleton-table.cjs"),B=require("../components/display/skeleton-form.cjs"),V=require("../components/display/aspect-ratio.cjs"),H=require("../components/display/carousel.cjs"),U=require("../components/display/float-button.cjs"),W=require("../components/display/qr-code.cjs"),G=require("../components/display/tag.cjs"),K=require("../components/display/typography.cjs"),le=require("../components/display/watermark.cjs"),ue=require("../components/modern/affix.cjs"),de=require("../components/modern/calendar-scheduler.cjs"),fe=require("../components/modern/dual-list-picker.cjs"),q=require("../components/modern/menubar.cjs"),J=require("../components/modern/navigation-menu.cjs"),Y=require("../components/modern/resizable-panel.cjs"),pe=require("../components/modern/rich-text-editor.cjs"),me=require("../components/modern/tour.cjs"),he=require("../components/layout/stat-card.cjs");let X=require("react/jsx-runtime");function Z({item:e,groupLabel:t,importSnippet:n}){let r=ge(e.slug);return{Showcase:n=>(0,X.jsx)(Q,{...n,item:e,groupLabel:t}),mock:{cliCommand:`npx tembro add ${e.slug}`,code:`${n}\n\nexport function Example() {\n  return <${r} />\n}`,highlights:e.features,scenarios:e.features.slice(0,3).map(t=>({title:t,description:`${e.title} can be copied into your app and adjusted locally.`})),capabilityNotes:e.features.slice(0,3)}}}function ge(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function Q({item:e,groupLabel:t,state:n,setState:r,mode:i}){let a=e.features.length?e.features:[t,`CLI add`,`Local file`];return(0,X.jsxs)(`div`,{className:`space-y-5`,children:[(0,X.jsxs)(`div`,{className:`flex flex-col gap-5 border-b border-[color:var(--aui-divider)] pb-5 lg:flex-row lg:items-start lg:justify-between`,children:[(0,X.jsxs)(`div`,{className:`max-w-xl`,children:[(0,X.jsx)(`p`,{className:`text-sm font-semibold uppercase tracking-[0.22em] text-[color:var(--aui-brand-strong)]`,children:`CLI component`}),(0,X.jsx)(`h3`,{className:`mt-2.5 text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]`,children:e.title}),(0,X.jsx)(`p`,{className:`mt-3 text-sm leading-7 text-[color:var(--aui-page-muted)]`,children:"Copy this component into your app and adjust it inside your own `components` folder."})]}),(0,X.jsx)(`div`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted-strong)]`,children:i===`docs`?`Docs`:`Preview`})]}),(0,X.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:a.slice(0,3).map(e=>(0,X.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-3.5`,children:[(0,X.jsx)(`p`,{className:`text-sm font-semibold text-[color:var(--aui-page-foreground)]`,children:e}),(0,X.jsx)(`p`,{className:`mt-1.5 text-xs leading-5 text-[color:var(--aui-page-muted)]`,children:`Lives in your local component source.`})]},e))}),(0,X.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-code-bg)] px-4 py-3`,children:(0,X.jsxs)(`code`,{className:`text-sm text-[color:var(--aui-code-fg)]`,children:[`npx tembro add `,e.slug]})}),(0,X.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:p-5`,children:$(e,t,n,r,i)})]})}function $(Z,ge,Q,$,_e){return Z.slug===`accordion`?(0,X.jsx)(ee.Accordion,{type:`single`,defaultValue:`api`,items:[{key:`api`,title:`Single open section`,description:`Open one section at a time.`,content:`Use one expanded panel when the page needs compact disclosure.`},{key:`states`,title:`State handling`,description:`Controlled or uncontrolled usage.`,content:`Use one expanded section for FAQs, settings clusters, and compact disclosure flows.`}]}):Z.slug===`affix`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(ue.Affix,{offsetTop:0,children:(0,X.jsx)(`div`,{className:`rounded-lg border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2 text-sm font-medium`,children:`Sticky helper bar`})}),(0,X.jsx)(`div`,{className:`rounded-xl border border-dashed border-[color:var(--aui-divider)] p-4 text-sm text-[color:var(--aui-page-muted)]`,children:"Use `Affix` when a small control or summary should remain visible while the surrounding content scrolls."})]}):Z.slug===`aspect-ratio`?(0,X.jsx)(V.AspectRatio,{ratio:16/9,className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:(0,X.jsx)(`div`,{className:`flex size-full items-center justify-center bg-[linear-gradient(135deg,color-mix(in_oklch,var(--aui-brand),transparent_88%),transparent)] text-sm font-medium text-[color:var(--aui-page-foreground)]`,children:`16:9 media surface`})}):Z.slug===`avatar`?(0,X.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4`,children:[(0,X.jsx)(D.Avatar,{name:`Azamat UI`}),(0,X.jsx)(D.Avatar,{fallback:`AJ`,shape:`rounded`}),(0,X.jsx)(D.AvatarGroup,{items:[{key:`1`,name:`Azamat`},{key:`2`,name:`Nodir`},{key:`3`,name:`Dilshod`},{key:`4`,name:`Madina`}]})]}):Z.slug===`calendar-scheduler`?(0,X.jsx)(de.CalendarScheduler,{events:[{id:`1`,title:`Design review`,date:`Mon`,time:`10:00`,tone:`default`},{id:`2`,title:`Release QA`,date:`Tue`,time:`14:00`,tone:`warning`},{id:`3`,title:`Go live`,date:`Fri`,time:`09:30`,tone:`success`}]}):Z.slug===`carousel`?(0,X.jsxs)(H.Carousel,{index:0,children:[(0,X.jsx)(H.CarouselItem,{children:(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-5`,children:[(0,X.jsx)(`p`,{className:`text-lg font-semibold`,children:`Release dashboard`}),(0,X.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Compact KPI slide for weekly review.`})]})})}),(0,X.jsx)(H.CarouselItem,{children:(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-5`,children:[(0,X.jsx)(`p`,{className:`text-lg font-semibold`,children:`Customer health`}),(0,X.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Second slide with account risk summary.`})]})})})]}):Z.slug===`cascader`?(0,X.jsx)(se.Cascader,{value:[`workspace`,`billing`,`invoices`],options:[{value:`workspace`,label:`Workspace`,children:[{value:`billing`,label:`Billing`,children:[{value:`invoices`,label:`Invoices`},{value:`plans`,label:`Plans`}]}]},{value:`settings`,label:`Settings`,children:[{value:`team`,label:`Team`}]}]}):Z.slug===`code-block`?(0,X.jsx)(j.CodeBlock,{title:`Install`,language:`bash`,code:`npx tembro init --template next
-npx tembro add button`}):Z.slug===`copy-button`?(0,X.jsx)(n.CopyButton,{value:`npx tembro add button`,children:`Copy command`}):Z.slug===`copy-field`?(0,X.jsx)(r.CopyField,{label:`CLI command`,description:`Quick source-copy command`,value:`npx tembro add input`}):Z.slug===`data-state`?(0,X.jsx)(M.DataState,{status:`empty`,title:`No matching rows`,description:`Try another filter or import the first record.`,actions:(0,X.jsx)(e.Button,{size:`sm`,children:`Import CSV`})}):Z.slug===`descriptions`?(0,X.jsx)(O.Descriptions,{title:`Workspace details`,columns:3,items:[{key:`owner`,label:`Owner`,value:`Azamat UI`},{key:`plan`,label:`Plan`,value:`Scale`},{key:`renewal`,label:`Renewal`,value:`Jul 14, 2026`}]}):Z.slug===`divider`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(`div`,{className:`text-sm font-medium`,children:`Section above`}),(0,X.jsx)(te.Divider,{label:`Summary`}),(0,X.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Section below`})]}):Z.slug===`dual-list-picker`?(0,X.jsx)(fe.DualListPicker,{picked:[`billing`,`support`],items:[{value:`billing`,label:`Billing`},{value:`support`,label:`Support`},{value:`analytics`,label:`Analytics`},{value:`security`,label:`Security`}]}):Z.slug===`segmented-control`?(0,X.jsx)(ne.SegmentedControl,{options:[{value:`overview`,label:`Overview`},{value:`activity`,label:`Activity`},{value:`settings`,label:`Settings`}],defaultValue:`overview`}):Z.slug===`spinner`?(0,X.jsxs)(`div`,{className:`flex items-center gap-5`,children:[(0,X.jsx)(c.Spinner,{size:`xs`}),(0,X.jsx)(c.Spinner,{size:`sm`}),(0,X.jsx)(c.Spinner,{size:`md`}),(0,X.jsx)(c.Spinner,{size:`lg`})]}):Z.slug===`skeleton`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(s.Skeleton,{className:`h-10 w-full`}),(0,X.jsx)(s.SkeletonText,{rows:3}),(0,X.jsx)(s.SkeletonCard,{avatar:!0})]}):Z.slug===`skeleton-form`?(0,X.jsx)(B.SkeletonForm,{}):Z.slug===`skeleton-table`?(0,X.jsx)(z.SkeletonTable,{rows:5,columns:4}):Z.slug===`slider`?(0,X.jsx)(y.Slider,{label:`Spacing scale`,description:`Adjust dashboard density.`,defaultValue:64,showValue:!0}):Z.slug===`stack`?(0,X.jsxs)(d.Stack,{gap:`sm`,children:[(0,X.jsx)(`div`,{className:`rounded-lg border p-3 text-sm`,children:`Header area`}),(0,X.jsx)(`div`,{className:`rounded-lg border p-3 text-sm`,children:`Content area`}),(0,X.jsx)(`div`,{className:`rounded-lg border p-3 text-sm`,children:`Footer area`})]}):Z.slug===`statistic`?(0,X.jsxs)(I.StatisticGrid,{columns:3,children:[(0,X.jsx)(I.StatisticCard,{label:`ARR`,value:`$84.2k`,change:`+12.4%`,trend:`up`,description:`vs previous month`}),(0,X.jsx)(I.Statistic,{label:`MRR`,value:`$7.0k`,change:`+3.1%`,trend:`up`,description:`Live subscriptions`}),(0,X.jsx)(I.Statistic,{label:`Churn`,value:`1.9%`,change:`-0.4%`,trend:`down`,description:`Healthy range`})]}):Z.slug===`sticky-footer-bar`?(0,X.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,X.jsx)(`div`,{className:`p-4 text-sm text-muted-foreground`,children:`Scrollable page content`}),(0,X.jsx)(re.StickyFooterBar,{start:(0,X.jsx)(`div`,{className:`text-sm font-medium`,children:`2 unsaved changes`}),end:(0,X.jsxs)(X.Fragment,{children:[(0,X.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Discard`}),(0,X.jsx)(e.Button,{size:`sm`,children:`Save`})]})})]}):Z.slug===`tag`?(0,X.jsxs)(G.TagGroup,{children:[(0,X.jsx)(G.Tag,{children:`Default`}),(0,X.jsx)(G.Tag,{tone:`success`,children:`Live`}),(0,X.jsx)(G.Tag,{tone:`warning`,children:`Review`}),(0,X.jsx)(G.Tag,{tone:`danger`,children:`Blocked`})]}):Z.slug===`tag-list`?(0,X.jsx)(R.TagList,{removable:!0,items:[{key:`1`,label:`Dashboard`},{key:`2`,label:`Billing`,variant:`secondary`},{key:`3`,label:`Priority`,variant:`outline`}]}):Z.slug===`time-picker`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(S.TimePicker,{label:`Start time`,defaultValue:`09:30`}),(0,X.jsx)(S.TimeRangePicker,{from:`09:30`,to:`17:30`})]}):Z.slug===`tour`?(0,X.jsx)(me.Tour,{index:1,steps:[{title:`Workspace setup`,description:`Initialize theme tokens first.`},{title:`Component add`,description:`Copy only the component you need.`},{title:`Detail route`,description:`Open docs, API and preview together.`}]}):Z.slug===`tree-view`?(0,X.jsx)(ce.TreeView,{defaultExpandedKeys:[`components`,`inputs`],selectedKey:`button`,items:[{key:`components`,label:`Components`,children:[{key:`inputs`,label:`Inputs`,children:[{key:`button`,label:`Button`},{key:`input`,label:`Input`}]}]}]}):Z.slug===`typography`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(K.Heading,{level:2,children:`Dashboard typography`}),(0,X.jsx)(K.Text,{children:`Readable defaults for product copy and operational labels.`}),(0,X.jsx)(`blockquote`,{className:`border-l-4 pl-4 italic text-muted-foreground`,children:`Ship simple text hierarchy before adding decorative layout layers.`}),(0,X.jsxs)(K.Text,{muted:!0,size:`sm`,children:[`Use `,(0,X.jsx)(K.Mark,{children:`Mark`}),` only for emphasis that matters.`]})]}):Z.slug===`watermark`?(0,X.jsx)(le.Watermark,{text:`AZAMAT UI`,children:(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-6`,children:[(0,X.jsx)(`p`,{className:`text-lg font-semibold`,children:`Preview export`}),(0,X.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Subtle branding surface for internal screenshots or mockups.`})]})})}):Z.slug===`range-slider`?(0,X.jsx)(y.RangeSlider,{label:`Revenue band`,description:`Filter a metric window.`,defaultValue:[20,80],showValue:!0}):Z.slug===`rating`?(0,X.jsx)(v.Rating,{defaultValue:4,labels:{clear:`Reset`}}):Z.slug===`otp-input`?(0,X.jsx)(g.OtpInput,{value:Q.textValue.replace(/\D/g,``).slice(0,6),onValueChange:e=>$({textValue:e})}):Z.slug===`color-input`?(0,X.jsx)(h.ColorInput,{defaultValue:`#22c55e`,label:`Accent color`,description:`Theme token preview.`}):Z.slug===`tag-input`?(0,X.jsx)(oe.TagInput,{defaultValue:[`dashboard`,`beta`,`ops`],placeholder:`Add label`}):Z.slug===`button-group`?(0,X.jsx)(t.ButtonGroup,{items:[{key:`day`,label:`Day`},{key:`week`,label:`Week`},{key:`month`,label:`Month`}]}):Z.slug===`quick-action-grid`||Z.slug===`command-bar`?(0,X.jsx)(l.QuickActionGrid,{columns:Z.slug===`command-bar`?4:3,compact:Z.slug===`command-bar`,items:[{key:`new`,label:`New invoice`,description:`Create a fresh billing row.`,badge:`N`},{key:`import`,label:`Import CSV`,description:`Bring finance data into the table.`,badge:`I`},{key:`share`,label:`Share workspace`,description:`Invite team members to the route.`,badge:`S`}]}):Z.slug===`filter-chips`||Z.slug===`data-table-saved-filters`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(p.FilterChips,{chips:[{key:`status`,label:`Status`,value:`Active`,tone:`success`},{key:`owner`,label:`Owner`,value:`Azamat`,tone:`default`},{key:`region`,label:`Region`,value:`APAC`,tone:`info`}],onRemove:()=>void 0,onClear:()=>void 0}),Z.slug===`data-table-saved-filters`?(0,X.jsx)(t.ButtonGroup,{attached:!1,items:[{key:`default`,label:`Default`,variant:`secondary`},{key:`billing`,label:`Billing`},{key:`ops`,label:`Operations`}]}):null]}):Z.slug===`anchor-nav`?(0,X.jsx)(ie.AnchorNav,{orientation:`horizontal`,title:`Sections`,items:[{key:`overview`,label:`Overview`,href:`#overview`,active:!0},{key:`usage`,label:`Usage`,href:`#usage`},{key:`api`,label:`API`,href:`#api`}]}):Z.slug===`page-tabs`?(0,X.jsx)(ae.PageTabs,{value:`overview`,variant:`pills`,items:[{value:`overview`,label:`Overview`},{value:`usage`,label:`Usage`},{value:`api`,label:`API`,badge:`3`}]}):Z.slug===`stepper-tabs`?(0,X.jsx)(f.StepperTabs,{value:`billing`,items:[{value:`profile`,label:`Profile`,description:`Team and owner details`,completed:!0},{value:`billing`,label:`Billing`,description:`Payment and invoices`},{value:`review`,label:`Review`,description:`Confirm release`}]}):Z.slug===`alert`?(0,X.jsx)(C.Alert,{tone:`warning`,title:`Review needed`,description:`Billing rules changed and one approval is pending.`,action:(0,X.jsx)(e.Button,{size:`sm`,children:`Open`})}):Z.slug===`page-state`?(0,X.jsx)(T.PageState,{title:`Workspace connected`,description:`The route is ready to accept live data and team actions.`,tone:`success`,action:(0,X.jsx)(e.Button,{size:`sm`,children:`Continue`})}):Z.slug===`empty-search-state`?(0,X.jsx)(w.EmptyState,{title:`No matching components`,description:`Try a shorter keyword or switch to a broader family.`,action:(0,X.jsx)(e.Button,{size:`sm`,children:`Clear search`})}):Z.slug===`float-button`?(0,X.jsxs)(`div`,{className:`relative min-h-28 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:[(0,X.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Floating action inside a content area.`}),(0,X.jsx)(U.FloatButton,{className:`absolute bottom-4 right-4`,children:`+`})]}):Z.slug===`data-list`||Z.slug===`list`?(0,X.jsx)(P.List,{items:[{key:`1`,title:`Enterprise plan`,description:`Priority support and SSO`,extra:`$499`},{key:`2`,title:`Growth plan`,description:`Most used by product teams`,extra:`$199`},{key:`3`,title:`Starter plan`,description:`Lightweight team setup`,extra:`$49`}]}):Z.slug===`key-value-card`?(0,X.jsxs)(a.Card,{children:[(0,X.jsx)(a.CardHeader,{children:(0,X.jsx)(a.CardTitle,{children:`Account summary`})}),(0,X.jsx)(a.CardContent,{children:(0,X.jsx)(E.DescriptionList,{items:[{key:`owner`,label:`Owner`,value:`Azamat UI`},{key:`plan`,label:`Plan`,value:`Scale`},{key:`renewal`,label:`Renewal`,value:`July 14, 2026`}]})})]}):Z.slug===`entity-card`||Z.slug===`file-card`?(0,X.jsx)(N.EntityCard,{title:Z.slug===`file-card`?`Design-spec.pdf`:`Azamat Workspace`,description:Z.slug===`file-card`?`Shared with 4 reviewers.`:`Admin console and live dashboard route.`,status:(0,X.jsx)(o.Badge,{variant:`secondary`,children:`Live`}),meta:Z.slug===`file-card`?`2.4 MB`:`Updated 8 min ago`,actions:(0,X.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Open`})}):Z.slug===`status-legend`?(0,X.jsx)(L.StatusLegend,{title:`Delivery states`,items:[{key:`live`,label:`Live`,description:`Healthy production routes`,tone:`success`,count:18},{key:`review`,label:`Review`,description:`Awaiting QA approval`,tone:`warning`,count:4},{key:`blocked`,label:`Blocked`,description:`Needs engineering action`,tone:`danger`,count:1}]}):Z.slug===`trend-card`||Z.slug===`comparison-card`?(0,X.jsx)(he.StatCard,{title:Z.slug===`trend-card`?`Weekly revenue`:`Current vs previous`,value:`$84.2k`,description:`Compared with last month`,trend:{value:`+12.4%`,tone:`success`}}):Z.slug===`delta-badge`?(0,X.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,X.jsx)(o.Badge,{variant:`secondary`,children:`+12.4%`}),(0,X.jsx)(o.Badge,{variant:`outline`,children:`-3.1%`}),(0,X.jsx)(o.Badge,{variant:`destructive`,children:`Risk`})]}):Z.slug===`entity-header`?(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between`,children:[(0,X.jsxs)(`div`,{className:`space-y-2`,children:[(0,X.jsx)(o.Badge,{variant:`outline`,children:`Customer`}),(0,X.jsxs)(`div`,{children:[(0,X.jsx)(`h3`,{className:`text-xl font-semibold`,children:`Acme Holdings`}),(0,X.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Enterprise account with billing and admin ownership.`})]})]}),(0,X.jsxs)(`div`,{className:`flex gap-2`,children:[(0,X.jsx)(e.Button,{variant:`outline`,size:`sm`,children:`Archive`}),(0,X.jsx)(e.Button,{size:`sm`,children:`Edit`})]})]})}):Z.slug===`notification-center`?(0,X.jsx)(P.List,{items:[{key:`1`,title:`Build completed`,description:`Dashboard docs deployment is live.`,extra:`Now`},{key:`2`,title:`New comment`,description:`Review requested on DataTable API.`,extra:`8m`},{key:`3`,title:`Publish reminder`,description:`Package version is ready for release.`,extra:`1h`}]}):Z.slug===`inline-editable`?(0,X.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row`,children:[(0,X.jsx)(i.Input,{value:Q.textValue,onChange:e=>$({textValue:e.currentTarget.value})}),(0,X.jsx)(e.Button,{size:`sm`,children:`Save label`})]}):Z.slug===`json-input`?(0,X.jsx)(b.JsonInput,{value:`{
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../components/ui/button/index.cjs"),t=require("../components/actions/button-group.cjs"),n=require("../components/actions/copy-button.cjs"),r=require("../components/actions/copy-field.cjs"),i=require("../components/ui/input/index.cjs"),a=require("../components/ui/card/index.cjs"),o=require("../components/ui/badge/index.cjs"),s=require("../components/ui/accordion/index.cjs"),c=require("../components/ui/skeleton/index.cjs"),l=require("../components/ui/divider/index.cjs"),u=require("../components/ui/segmented-control/index.cjs"),d=require("../components/ui/spinner/index.cjs"),ee=require("../components/actions/quick-action-grid.cjs"),f=require("../components/layout/section.cjs"),p=require("../components/layout/sticky-footer-bar.cjs"),m=require("../components/navigation/anchor-nav.cjs"),h=require("../components/navigation/page-tabs.cjs"),te=require("../components/navigation/stepper-tabs.cjs"),g=require("../components/filters/filter-bar.cjs"),_=require("../components/filters/saved-filter-select.cjs"),v=require("../components/inputs/color-input.cjs"),y=require("../components/inputs/otp-input.cjs"),b=require("../components/inputs/quantity-stepper.cjs"),ne=require("../components/inputs/rating.cjs"),x=require("../components/inputs/slider.cjs"),S=require("../components/inputs/tag-input.cjs"),C=require("../components/inputs/json-input.cjs"),w=require("../components/inputs/time-picker.cjs"),T=require("../components/feedback/alert.cjs"),E=require("../components/feedback/page-state.cjs"),D=require("../components/display/avatar.cjs"),O=require("../components/display/descriptions.cjs"),k=require("../components/display/kanban.cjs"),A=require("../components/display/code-block.cjs"),j=require("../components/display/data-state.cjs"),M=require("../components/display/list.cjs"),N=require("../components/display/property-grid.cjs"),P=require("../components/display/statistic.cjs"),F=require("../components/display/status-legend.cjs"),I=require("../components/display/tree-view.cjs"),L=require("../components/layout/stat-card.cjs"),R=require("../components/display/carousel.cjs"),z=require("../components/display/qr-code.cjs"),B=require("../components/display/tag.cjs"),V=require("../components/display/typography.cjs"),H=require("../components/modern/calendar-scheduler.cjs"),U=require("../components/modern/dual-list-picker.cjs"),W=require("../components/modern/menubar.cjs"),G=require("../components/modern/navigation-menu.cjs"),K=require("../components/modern/resizable-panel.cjs"),q=require("../components/modern/rich-text-editor.cjs"),J=require("../components/modern/tour.cjs");let Y=require("react/jsx-runtime");function X({item:e,groupLabel:t,importSnippet:n}){let r=Z(e.slug);return{Showcase:n=>(0,Y.jsx)(Q,{...n,item:e,groupLabel:t}),mock:{cliCommand:`npx tembro add ${e.slug}`,code:`${n}\n\nexport function Example() {\n  return <${r} />\n}`,highlights:e.features,scenarios:e.features.slice(0,3).map(t=>({title:t,description:`${e.title} can be copied into your app and adjusted locally.`})),capabilityNotes:e.features.slice(0,3)}}}function Z(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function Q({item:e,groupLabel:t,state:n,setState:r,mode:i}){let a=e.features.length?e.features:[t,`CLI add`,`Local file`];return(0,Y.jsxs)(`div`,{className:`space-y-5`,children:[(0,Y.jsxs)(`div`,{className:`flex flex-col gap-5 border-b border-[color:var(--aui-divider)] pb-5 lg:flex-row lg:items-start lg:justify-between`,children:[(0,Y.jsxs)(`div`,{className:`max-w-xl`,children:[(0,Y.jsx)(`p`,{className:`text-sm font-semibold uppercase tracking-[0.22em] text-[color:var(--aui-brand-strong)]`,children:`CLI component`}),(0,Y.jsx)(`h3`,{className:`mt-2.5 text-2xl font-semibold tracking-tight text-[color:var(--aui-page-foreground)]`,children:e.title}),(0,Y.jsx)(`p`,{className:`mt-3 text-sm leading-7 text-[color:var(--aui-page-muted)]`,children:"Copy this component into your app and adjust it inside your own `components` folder."})]}),(0,Y.jsx)(`div`,{className:`rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--aui-page-muted-strong)]`,children:i===`docs`?`Docs`:`Preview`})]}),(0,Y.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:a.slice(0,3).map(e=>(0,Y.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-3.5`,children:[(0,Y.jsx)(`p`,{className:`text-sm font-semibold text-[color:var(--aui-page-foreground)]`,children:e}),(0,Y.jsx)(`p`,{className:`mt-1.5 text-xs leading-5 text-[color:var(--aui-page-muted)]`,children:`Lives in your local component source.`})]},e))}),(0,Y.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-code-bg)] px-4 py-3`,children:(0,Y.jsxs)(`code`,{className:`text-sm text-[color:var(--aui-code-fg)]`,children:[`npx tembro add `,e.slug]})}),(0,Y.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:p-5`,children:$(e,t,n,r,i)})]})}function $(X,Z,Q,$,re){return X.slug===`accordion`?(0,Y.jsx)(s.Accordion,{type:`single`,defaultValue:`api`,items:[{key:`api`,title:`Single open section`,description:`Open one section at a time.`,content:`Use one expanded panel when the page needs compact disclosure.`},{key:`states`,title:`State handling`,description:`Controlled or uncontrolled usage.`,content:`Use one expanded section for FAQs, settings clusters, and compact disclosure flows.`}]}):X.slug===`avatar`?(0,Y.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4`,children:[(0,Y.jsx)(D.Avatar,{name:`Azamat UI`}),(0,Y.jsx)(D.Avatar,{fallback:`AJ`,shape:`rounded`}),(0,Y.jsx)(D.AvatarGroup,{items:[{key:`1`,name:`Azamat`},{key:`2`,name:`Nodir`},{key:`3`,name:`Dilshod`},{key:`4`,name:`Madina`}]})]}):X.slug===`calendar-scheduler`?(0,Y.jsx)(H.CalendarScheduler,{events:[{id:`1`,title:`Design review`,date:`Mon`,time:`10:00`,tone:`default`},{id:`2`,title:`Release QA`,date:`Tue`,time:`14:00`,tone:`warning`},{id:`3`,title:`Go live`,date:`Fri`,time:`09:30`,tone:`success`}]}):X.slug===`carousel`?(0,Y.jsxs)(R.Carousel,{index:0,children:[(0,Y.jsx)(R.CarouselItem,{children:(0,Y.jsx)(a.Card,{children:(0,Y.jsxs)(a.CardContent,{className:`p-5`,children:[(0,Y.jsx)(`p`,{className:`text-lg font-semibold`,children:`Release dashboard`}),(0,Y.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Compact KPI slide for weekly review.`})]})})}),(0,Y.jsx)(R.CarouselItem,{children:(0,Y.jsx)(a.Card,{children:(0,Y.jsxs)(a.CardContent,{className:`p-5`,children:[(0,Y.jsx)(`p`,{className:`text-lg font-semibold`,children:`Customer health`}),(0,Y.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Second slide with account risk summary.`})]})})})]}):X.slug===`code-block`?(0,Y.jsx)(A.CodeBlock,{title:`Install`,language:`bash`,code:`npx tembro init --template next
+npx tembro add button`}):X.slug===`copy-button`?(0,Y.jsx)(n.CopyButton,{value:`npx tembro add button`,children:`Copy command`}):X.slug===`copy-field`?(0,Y.jsx)(r.CopyField,{label:`CLI command`,description:`Quick source-copy command`,value:`npx tembro add input`}):X.slug===`data-state`?(0,Y.jsx)(j.DataState,{status:`empty`,title:`No matching rows`,description:`Try another filter or import the first record.`,actions:(0,Y.jsx)(e.Button,{size:`sm`,children:`Import CSV`})}):X.slug===`descriptions`?(0,Y.jsx)(O.Descriptions,{title:`Workspace details`,columns:3,items:[{key:`owner`,label:`Owner`,value:`Azamat UI`},{key:`plan`,label:`Plan`,value:`Scale`},{key:`renewal`,label:`Renewal`,value:`Jul 14, 2026`}]}):X.slug===`divider`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(`div`,{className:`text-sm font-medium`,children:`Section above`}),(0,Y.jsx)(l.Divider,{label:`Summary`}),(0,Y.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Section below`})]}):X.slug===`dual-list-picker`?(0,Y.jsx)(U.DualListPicker,{picked:[`billing`,`support`],items:[{value:`billing`,label:`Billing`},{value:`support`,label:`Support`},{value:`analytics`,label:`Analytics`},{value:`security`,label:`Security`}]}):X.slug===`segmented-control`?(0,Y.jsx)(u.SegmentedControl,{options:[{value:`overview`,label:`Overview`},{value:`activity`,label:`Activity`},{value:`settings`,label:`Settings`}],defaultValue:`overview`}):X.slug===`spinner`?(0,Y.jsxs)(`div`,{className:`flex items-center gap-5`,children:[(0,Y.jsx)(d.Spinner,{size:`xs`}),(0,Y.jsx)(d.Spinner,{size:`sm`}),(0,Y.jsx)(d.Spinner,{size:`md`}),(0,Y.jsx)(d.Spinner,{size:`lg`})]}):X.slug===`skeleton`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(c.Skeleton,{className:`h-10 w-full`}),(0,Y.jsx)(c.SkeletonText,{rows:3}),(0,Y.jsx)(c.SkeletonCard,{avatar:!0})]}):X.slug===`slider`?(0,Y.jsx)(x.Slider,{label:`Spacing scale`,description:`Adjust dashboard density.`,defaultValue:64,showValue:!0}):X.slug===`statistic`?(0,Y.jsxs)(P.StatisticGrid,{columns:3,children:[(0,Y.jsx)(P.StatisticCard,{label:`ARR`,value:`$84.2k`,change:`+12.4%`,trend:`up`,description:`vs previous month`}),(0,Y.jsx)(P.Statistic,{label:`MRR`,value:`$7.0k`,change:`+3.1%`,trend:`up`,description:`Live subscriptions`}),(0,Y.jsx)(P.Statistic,{label:`Churn`,value:`1.9%`,change:`-0.4%`,trend:`down`,description:`Healthy range`})]}):X.slug===`sticky-footer-bar`?(0,Y.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,Y.jsx)(`div`,{className:`p-4 text-sm text-muted-foreground`,children:`Scrollable page content`}),(0,Y.jsx)(p.StickyFooterBar,{start:(0,Y.jsx)(`div`,{className:`text-sm font-medium`,children:`2 unsaved changes`}),end:(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Discard`}),(0,Y.jsx)(e.Button,{size:`sm`,children:`Save`})]})})]}):X.slug===`tag`?(0,Y.jsxs)(B.TagGroup,{children:[(0,Y.jsx)(B.Tag,{children:`Default`}),(0,Y.jsx)(B.Tag,{tone:`success`,children:`Live`}),(0,Y.jsx)(B.Tag,{tone:`warning`,children:`Review`}),(0,Y.jsx)(B.Tag,{tone:`danger`,children:`Blocked`})]}):X.slug===`time-picker`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(w.TimePicker,{label:`Start time`,defaultValue:`09:30`}),(0,Y.jsx)(w.TimeRangePicker,{from:`09:30`,to:`17:30`})]}):X.slug===`tour`?(0,Y.jsx)(J.Tour,{index:1,steps:[{title:`Workspace setup`,description:`Initialize theme tokens first.`},{title:`Component add`,description:`Copy only the component you need.`},{title:`Detail route`,description:`Open docs, API and preview together.`}]}):X.slug===`tree-view`?(0,Y.jsx)(I.TreeView,{defaultExpandedKeys:[`components`,`inputs`],selectedKey:`button`,items:[{key:`components`,label:`Components`,children:[{key:`inputs`,label:`Inputs`,children:[{key:`button`,label:`Button`},{key:`input`,label:`Input`}]}]}]}):X.slug===`typography`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(V.Heading,{level:2,children:`Dashboard typography`}),(0,Y.jsx)(V.Text,{children:`Readable defaults for product copy and operational labels.`}),(0,Y.jsx)(`blockquote`,{className:`border-l-4 pl-4 italic text-muted-foreground`,children:`Ship simple text hierarchy before adding decorative layout layers.`}),(0,Y.jsxs)(V.Text,{muted:!0,size:`sm`,children:[`Use `,(0,Y.jsx)(V.Mark,{children:`Mark`}),` only for emphasis that matters.`]})]}):X.slug===`range-slider`?(0,Y.jsx)(x.RangeSlider,{label:`Revenue band`,description:`Filter a metric window.`,defaultValue:[20,80],showValue:!0}):X.slug===`rating`?(0,Y.jsx)(ne.Rating,{defaultValue:4,labels:{clear:`Reset`}}):X.slug===`otp-input`?(0,Y.jsx)(y.OtpInput,{value:Q.textValue.replace(/\D/g,``).slice(0,6),onValueChange:e=>$({textValue:e})}):X.slug===`color-input`?(0,Y.jsx)(v.ColorInput,{defaultValue:`#22c55e`,label:`Accent color`,description:`Theme token preview.`}):X.slug===`tag-input`?(0,Y.jsx)(S.TagInput,{defaultValue:[`dashboard`,`beta`,`ops`],placeholder:`Add label`}):X.slug===`button-group`?(0,Y.jsx)(t.ButtonGroup,{items:[{key:`day`,label:`Day`},{key:`week`,label:`Week`},{key:`month`,label:`Month`}]}):X.slug===`quick-action-grid`||X.slug===`command-bar`?(0,Y.jsx)(ee.QuickActionGrid,{columns:X.slug===`command-bar`?4:3,compact:X.slug===`command-bar`,items:[{key:`new`,label:`New invoice`,description:`Create a fresh billing row.`,badge:`N`},{key:`import`,label:`Import CSV`,description:`Bring finance data into the table.`,badge:`I`},{key:`share`,label:`Share workspace`,description:`Invite team members to the route.`,badge:`S`}]}):X.slug===`data-table-saved-filters`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(g.FilterBar,{chips:[{key:`status`,label:`Status`,value:`Active`,tone:`success`},{key:`owner`,label:`Owner`,value:`Azamat`,tone:`default`},{key:`region`,label:`Region`,value:`APAC`,tone:`info`}],onRemoveChip:()=>void 0,onReset:()=>void 0}),(0,Y.jsx)(t.ButtonGroup,{attached:!1,items:[{key:`default`,label:`Default`,variant:`secondary`},{key:`billing`,label:`Billing`},{key:`ops`,label:`Operations`}]})]}):X.slug===`anchor-nav`?(0,Y.jsx)(m.AnchorNav,{orientation:`horizontal`,title:`Sections`,items:[{key:`overview`,label:`Overview`,href:`#overview`,active:!0},{key:`usage`,label:`Usage`,href:`#usage`},{key:`api`,label:`API`,href:`#api`}]}):X.slug===`page-tabs`?(0,Y.jsx)(h.PageTabs,{value:`overview`,variant:`pills`,items:[{value:`overview`,label:`Overview`},{value:`usage`,label:`Usage`},{value:`api`,label:`API`,badge:`3`}]}):X.slug===`stepper-tabs`?(0,Y.jsx)(te.StepperTabs,{value:`billing`,items:[{value:`profile`,label:`Profile`,description:`Team and owner details`,completed:!0},{value:`billing`,label:`Billing`,description:`Payment and invoices`},{value:`review`,label:`Review`,description:`Confirm release`}]}):X.slug===`alert`?(0,Y.jsx)(T.Alert,{tone:`warning`,title:`Review needed`,description:`Billing rules changed and one approval is pending.`,action:(0,Y.jsx)(e.Button,{size:`sm`,children:`Open`})}):X.slug===`page-state`?(0,Y.jsx)(E.PageState,{title:`Workspace connected`,description:`The route is ready to accept live data and team actions.`,tone:`success`,action:(0,Y.jsx)(e.Button,{size:`sm`,children:`Continue`})}):X.slug===`data-list`||X.slug===`list`?(0,Y.jsx)(M.List,{items:[{key:`1`,title:`Enterprise plan`,description:`Priority support and SSO`,extra:`$499`},{key:`2`,title:`Growth plan`,description:`Most used by product teams`,extra:`$199`},{key:`3`,title:`Starter plan`,description:`Lightweight team setup`,extra:`$49`}]}):X.slug===`status-legend`?(0,Y.jsx)(F.StatusLegend,{title:`Delivery states`,items:[{key:`live`,label:`Live`,description:`Healthy production routes`,tone:`success`,count:18},{key:`review`,label:`Review`,description:`Awaiting QA approval`,tone:`warning`,count:4},{key:`blocked`,label:`Blocked`,description:`Needs engineering action`,tone:`danger`,count:1}]}):X.slug===`trend-card`||X.slug===`comparison-card`?(0,Y.jsx)(L.StatCard,{title:X.slug===`trend-card`?`Weekly revenue`:`Current vs previous`,value:`$84.2k`,description:`Compared with last month`,trend:{value:`+12.4%`,tone:`success`}}):X.slug===`delta-badge`?(0,Y.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,Y.jsx)(o.Badge,{variant:`secondary`,children:`+12.4%`}),(0,Y.jsx)(o.Badge,{variant:`outline`,children:`-3.1%`}),(0,Y.jsx)(o.Badge,{variant:`destructive`,children:`Risk`})]}):X.slug===`notification-center`?(0,Y.jsx)(M.List,{items:[{key:`1`,title:`Build completed`,description:`Dashboard docs deployment is live.`,extra:`Now`},{key:`2`,title:`New comment`,description:`Review requested on DataTable API.`,extra:`8m`},{key:`3`,title:`Publish reminder`,description:`Package version is ready for release.`,extra:`1h`}]}):X.slug===`inline-editable`?(0,Y.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row`,children:[(0,Y.jsx)(i.Input,{value:Q.textValue,onChange:e=>$({textValue:e.currentTarget.value})}),(0,Y.jsx)(e.Button,{size:`sm`,children:`Save label`})]}):X.slug===`json-input`?(0,Y.jsx)(C.JsonInput,{value:`{
   "workspace": "azamat-ui",
   "theme": "dashboard"
-}`,onValueChange:()=>void 0,rows:7}):Z.slug===`kanban`?(0,X.jsx)(A.KanbanBoard,{columns:[{key:`todo`,title:`Todo`,cards:[{key:`1`,title:`Polish Button demo`,description:`Improve interactive preview states.`}]},{key:`progress`,title:`In progress`,cards:[{key:`2`,title:`Refresh Input docs`,description:`Clean API notes and examples.`}]},{key:`done`,title:`Done`,cards:[{key:`3`,title:`Publish 1.0.0`,description:`Release package and sync docs.`}]}]}):Z.slug===`keyboard-shortcut`?(0,X.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,X.jsx)(k.KeyboardShortcut,{keys:[`Ctrl`,`K`]}),(0,X.jsx)(k.KeyboardShortcut,{keys:[`Shift`,`Enter`]}),(0,X.jsx)(k.KeyboardShortcut,{keys:[`Alt`,`S`]})]}):Z.slug===`mention-input`?(0,X.jsx)(x.MentionInput,{defaultValue:`@azamat can you review the DataTable route?`,options:[{value:`@azamat`,label:`@azamat`},{value:`@team`,label:`@team`},{value:`@design`,label:`@design`}]}):Z.slug===`menubar`?(0,X.jsxs)(q.Menubar,{children:[(0,X.jsxs)(q.MenubarMenu,{children:[(0,X.jsx)(q.MenubarTrigger,{children:`File`}),(0,X.jsxs)(q.MenubarContent,{className:`relative mt-2`,children:[(0,X.jsx)(q.MenubarItem,{children:`New page`}),(0,X.jsx)(q.MenubarItem,{children:`Duplicate`})]})]}),(0,X.jsx)(q.MenubarMenu,{children:(0,X.jsx)(q.MenubarTrigger,{children:`Edit`})}),(0,X.jsx)(q.MenubarMenu,{children:(0,X.jsx)(q.MenubarTrigger,{children:`View`})})]}):Z.slug===`navigation-menu`?(0,X.jsx)(J.NavigationMenu,{children:(0,X.jsxs)(J.NavigationMenuList,{children:[(0,X.jsx)(J.NavigationMenuItem,{children:(0,X.jsx)(J.NavigationMenuLink,{href:`#`,active:!0,children:`Overview`})}),(0,X.jsx)(J.NavigationMenuItem,{children:(0,X.jsx)(J.NavigationMenuLink,{href:`#`,children:`Components`})}),(0,X.jsx)(J.NavigationMenuItem,{children:(0,X.jsx)(J.NavigationMenuLink,{href:`#`,children:`Docs`})})]})}):Z.slug===`overlay`?(0,X.jsxs)(d.Grid,{columns:3,gap:`sm`,children:[(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-4`,children:[(0,X.jsx)(`p`,{className:`font-medium`,children:`Dialog`}),(0,X.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Focused confirmation and forms.`})]})}),(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-4`,children:[(0,X.jsx)(`p`,{className:`font-medium`,children:`Popover`}),(0,X.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Compact contextual actions.`})]})}),(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`p-4`,children:[(0,X.jsx)(`p`,{className:`font-medium`,children:`Sheet`}),(0,X.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Side panel workflows.`})]})})]}):Z.slug===`property-grid`?(0,X.jsx)(F.PropertyGrid,{columns:3,items:[{key:`framework`,label:`Framework`,value:`Next.js`,description:`App Router setup`},{key:`theme`,label:`Theme`,value:`Light / Dark`,description:`CSS tokens ready`},{key:`mode`,label:`Mode`,value:`Source-copy`,description:`Editable local files`}]}):Z.slug===`qr-code`?(0,X.jsx)(W.QRCode,{value:`https://azamat-ui.vercel.app`,alt:`Azamat UI`}):Z.slug===`quantity-stepper`?(0,X.jsx)(_.QuantityStepper,{defaultValue:3,min:1,max:10}):Z.slug===`repeater-field`?(0,X.jsx)(a.Card,{children:(0,X.jsxs)(a.CardContent,{className:`grid gap-3 p-5`,children:[(0,X.jsx)(i.Input,{placeholder:`First item`,defaultValue:`Revenue KPI`}),(0,X.jsx)(i.Input,{placeholder:`Second item`,defaultValue:`Churn guardrail`}),(0,X.jsx)(`div`,{children:(0,X.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Add row`})})]})}):Z.slug===`resizable-panel`?(0,X.jsxs)(Y.ResizablePanelGroup,{children:[(0,X.jsxs)(Y.ResizablePanel,{defaultSize:`45%`,children:[(0,X.jsx)(`p`,{className:`text-sm font-medium`,children:`Preview panel`}),(0,X.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Resize this surface in product screens with long content.`})]}),(0,X.jsx)(Y.ResizableHandle,{}),(0,X.jsxs)(Y.ResizablePanel,{defaultSize:`55%`,children:[(0,X.jsx)(`p`,{className:`text-sm font-medium`,children:`Inspector panel`}),(0,X.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Use for side-by-side data and editing tools.`})]})]}):Z.slug===`rich-text-editor`?(0,X.jsx)(pe.RichTextEditor,{value:`<p><strong>Release note</strong> with product details.</p>`,onValueChange:()=>void 0}):Z.slug===`saved-filter-select`?(0,X.jsx)(m.SavedFilterSelect,{value:`billing`,filters:[{value:`billing`,label:`Billing`,description:`Invoices and payment status`},{value:`ops`,label:`Operations`,description:`Queues and workload`},{value:`owners`,label:`Owner: Azamat`,description:`Assigned records only`}],onValueChange:()=>void 0,onSave:()=>void 0,onDelete:()=>void 0}):Z.slug===`section`?(0,X.jsx)(u.Section,{title:`Revenue summary`,description:`Section wrapper for grouped content and actions.`,actions:(0,X.jsx)(e.Button,{size:`sm`,children:`Export`}),bordered:!0,children:(0,X.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Place chart, filters, table or any route content inside.`})}):Z.category===`Forms`?(0,X.jsxs)(`div`,{className:`grid gap-3`,children:[(0,X.jsx)(i.Input,{value:Q.textValue,onChange:e=>$({textValue:e.currentTarget.value}),placeholder:`${Z.title} preview`}),(0,X.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Generic field preview for this form surface.`})]}):Z.category===`Overlay`?(0,X.jsxs)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,X.jsx)(`p`,{className:`text-sm font-semibold text-[color:var(--aui-page-foreground)]`,children:Z.title}),(0,X.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:`This overlay route needs a dedicated interactive demo. The docs fallback avoids rendering a different component as a substitute.`})]}):Z.category===`Data Display`?(0,X.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,X.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,X.jsxs)(`div`,{children:[(0,X.jsx)(`p`,{className:`text-lg font-semibold`,children:Z.title}),(0,X.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Generic display fallback kept neutral until a dedicated showcase is added.`})]}),(0,X.jsx)(o.Badge,{variant:`outline`,children:_e})]})}):(0,X.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,X.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,X.jsxs)(`div`,{children:[(0,X.jsx)(`p`,{className:`text-lg font-semibold`,children:Z.title}),(0,X.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Neutral starter preview for this surface. Copy it into your app, then shape the final state with your real data and props.`})]}),(0,X.jsx)(o.Badge,{variant:`outline`,children:Z.category})]})})}exports.createGenericShowcaseDemo=Z;
+}`,onValueChange:()=>void 0,rows:7}):X.slug===`kanban`?(0,Y.jsx)(k.KanbanBoard,{columns:[{key:`todo`,title:`Todo`,cards:[{key:`1`,title:`Polish Button demo`,description:`Improve interactive preview states.`}]},{key:`progress`,title:`In progress`,cards:[{key:`2`,title:`Refresh Input docs`,description:`Clean API notes and examples.`}]},{key:`done`,title:`Done`,cards:[{key:`3`,title:`Publish 1.0.0`,description:`Release package and sync docs.`}]}]}):X.slug===`menubar`?(0,Y.jsxs)(W.Menubar,{children:[(0,Y.jsxs)(W.MenubarMenu,{children:[(0,Y.jsx)(W.MenubarTrigger,{children:`File`}),(0,Y.jsxs)(W.MenubarContent,{className:`relative mt-2`,children:[(0,Y.jsx)(W.MenubarItem,{children:`New page`}),(0,Y.jsx)(W.MenubarItem,{children:`Duplicate`})]})]}),(0,Y.jsx)(W.MenubarMenu,{children:(0,Y.jsx)(W.MenubarTrigger,{children:`Edit`})}),(0,Y.jsx)(W.MenubarMenu,{children:(0,Y.jsx)(W.MenubarTrigger,{children:`View`})})]}):X.slug===`navigation-menu`?(0,Y.jsx)(G.NavigationMenu,{children:(0,Y.jsxs)(G.NavigationMenuList,{children:[(0,Y.jsx)(G.NavigationMenuItem,{children:(0,Y.jsx)(G.NavigationMenuLink,{href:`#`,active:!0,children:`Overview`})}),(0,Y.jsx)(G.NavigationMenuItem,{children:(0,Y.jsx)(G.NavigationMenuLink,{href:`#`,children:`Components`})}),(0,Y.jsx)(G.NavigationMenuItem,{children:(0,Y.jsx)(G.NavigationMenuLink,{href:`#`,children:`Docs`})})]})}):X.slug===`overlay`?(0,Y.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,Y.jsx)(a.Card,{children:(0,Y.jsxs)(a.CardContent,{className:`p-4`,children:[(0,Y.jsx)(`p`,{className:`font-medium`,children:`Dialog`}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Focused confirmation and forms.`})]})}),(0,Y.jsx)(a.Card,{children:(0,Y.jsxs)(a.CardContent,{className:`p-4`,children:[(0,Y.jsx)(`p`,{className:`font-medium`,children:`Popover`}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Compact contextual actions.`})]})}),(0,Y.jsx)(a.Card,{children:(0,Y.jsxs)(a.CardContent,{className:`p-4`,children:[(0,Y.jsx)(`p`,{className:`font-medium`,children:`Sheet`}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Side panel workflows.`})]})})]}):X.slug===`property-grid`?(0,Y.jsx)(N.PropertyGrid,{columns:3,items:[{key:`framework`,label:`Framework`,value:`Next.js`,description:`App Router setup`},{key:`theme`,label:`Theme`,value:`Light / Dark`,description:`CSS tokens ready`},{key:`mode`,label:`Mode`,value:`Source-copy`,description:`Editable local files`}]}):X.slug===`qr-code`?(0,Y.jsx)(z.QRCode,{value:`https://azamat-ui.vercel.app`,alt:`Azamat UI`}):X.slug===`quantity-stepper`?(0,Y.jsx)(b.QuantityStepper,{defaultValue:3,min:1,max:10}):X.slug===`resizable-panel`?(0,Y.jsxs)(K.ResizablePanelGroup,{children:[(0,Y.jsxs)(K.ResizablePanel,{defaultSize:`45%`,children:[(0,Y.jsx)(`p`,{className:`text-sm font-medium`,children:`Preview panel`}),(0,Y.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Resize this surface in product screens with long content.`})]}),(0,Y.jsx)(K.ResizableHandle,{}),(0,Y.jsxs)(K.ResizablePanel,{defaultSize:`55%`,children:[(0,Y.jsx)(`p`,{className:`text-sm font-medium`,children:`Inspector panel`}),(0,Y.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Use for side-by-side data and editing tools.`})]})]}):X.slug===`rich-text-editor`?(0,Y.jsx)(q.RichTextEditor,{value:`<p><strong>Release note</strong> with product details.</p>`,onValueChange:()=>void 0}):X.slug===`saved-filter-select`?(0,Y.jsx)(_.SavedFilterSelect,{value:`billing`,filters:[{value:`billing`,label:`Billing`,description:`Invoices and payment status`},{value:`ops`,label:`Operations`,description:`Queues and workload`},{value:`owners`,label:`Owner: Azamat`,description:`Assigned records only`}],onValueChange:()=>void 0,onSave:()=>void 0,onDelete:()=>void 0}):X.slug===`section`?(0,Y.jsx)(f.Section,{title:`Revenue summary`,description:`Section wrapper for grouped content and actions.`,actions:(0,Y.jsx)(e.Button,{size:`sm`,children:`Export`}),bordered:!0,children:(0,Y.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Place chart, filters, table or any route content inside.`})}):X.category===`Forms`?(0,Y.jsxs)(`div`,{className:`grid gap-3`,children:[(0,Y.jsx)(i.Input,{value:Q.textValue,onChange:e=>$({textValue:e.currentTarget.value}),placeholder:`${X.title} preview`}),(0,Y.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Generic field preview for this form surface.`})]}):X.category===`Overlay`?(0,Y.jsxs)(`div`,{className:`grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,Y.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,Y.jsxs)(`div`,{children:[(0,Y.jsx)(`p`,{className:`text-sm font-semibold text-[color:var(--aui-page-foreground)]`,children:X.title}),(0,Y.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]`,children:`Overlay surfaces should stay compact, focused, and secondary to the route behind them.`})]}),(0,Y.jsx)(o.Badge,{variant:`outline`,children:`Overlay`})]}),(0,Y.jsx)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,Y.jsxs)(`div`,{className:`flex flex-wrap items-center justify-end gap-2`,children:[(0,Y.jsx)(e.Button,{variant:`ghost`,children:`Cancel`}),(0,Y.jsx)(e.Button,{variant:`outline`,children:`Save draft`}),(0,Y.jsx)(e.Button,{children:`Confirm`})]})})]}):X.category===`Data Display`?(0,Y.jsxs)(`div`,{className:`grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,Y.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,Y.jsxs)(`div`,{children:[(0,Y.jsx)(`p`,{className:`text-lg font-semibold`,children:X.title}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Display surfaces should prioritize readable values, compact metadata, and clear scanning order.`})]}),(0,Y.jsx)(o.Badge,{variant:`outline`,children:re})]}),(0,Y.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[{label:`Primary value`,value:`84.2k`,note:`Strong first read`},{label:`Supporting meta`,value:`12 teams`,note:`Context stays secondary`},{label:`Status`,value:`Live`,note:`One concise badge or tone`}].map(e=>(0,Y.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,Y.jsx)(`p`,{className:`text-xs uppercase tracking-[0.18em] text-muted-foreground`,children:e.label}),(0,Y.jsx)(`p`,{className:`mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]`,children:e.value}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:e.note})]},e.label))})]}):(0,Y.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,Y.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,Y.jsxs)(`div`,{children:[(0,Y.jsx)(`p`,{className:`text-lg font-semibold`,children:X.title}),(0,Y.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Neutral starter preview for this surface. Copy it into your app, then shape the final state with your real data and props.`})]}),(0,Y.jsx)(o.Badge,{variant:`outline`,children:X.category})]})})}exports.createGenericShowcaseDemo=X;