tembro 3.0.0 → 3.1.5

package/packages/cli/vendor/src/showcase/premium/index.ts

@@ -1,237 +1,178 @@
-import type { ComponentDemoBundle } from "./types"
-
-import { alertMock, AlertShowcase } from "./alert"
-import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
-import { accordionMock, AccordionShowcase } from "./accordion"
-import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
-import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
-import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
-import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
-import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
-import { avatarMock, AvatarShowcase } from "./avatar"
-import { carouselMock, CarouselShowcase } from "./carousel"
-import { clearableInputMock, ClearableInputShowcase } from "./clearable-input"
-import { jsonInputMock, JsonInputShowcase } from "./json-input"
-import { qrCodeMock, QRCodeShowcase } from "./qr-code"
-import { menubarMock, MenubarShowcase } from "./menubar"
-import { navigationMenuMock, NavigationMenuShowcase } from "./navigation-menu"
-import { badgeMock, BadgeShowcase } from "./badge"
-import { dividerMock, DividerShowcase } from "./divider"
-import { breadcrumbsMock, BreadcrumbsShowcase } from "./breadcrumbs"
-import { buttonMock, ButtonShowcase } from "./button"
-import { ButtonGroupShowcase, buttonGroupMock } from "./button-group"
-import { calendarMock, CalendarShowcase } from "./calendar"
-import { calendarSchedulerMock, CalendarSchedulerShowcase } from "./calendar-scheduler"
-import { cardMock, CardShowcase } from "./card"
-import { checkboxMock, CheckboxShowcase } from "./checkbox"
-import { codeBlockMock, CodeBlockShowcase } from "./code-block"
-import { dualListPickerMock, DualListPickerShowcase } from "./dual-list-picker"
-import { collapseMock, CollapseShowcase } from "./collapse"
-import { comboboxMock, ComboboxShowcase } from "./combobox"
-import { commandBarMock, CommandBarShowcase } from "./command-bar"
+import type { ComponentDemoBundle } from "./types"
+
+import { alertMock, AlertShowcase } from "./alert"
+import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
+import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
+import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
+import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
+import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
+import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
+import { avatarMock, AvatarShowcase } from "./avatar"
+import { carouselMock, CarouselShowcase } from "./carousel"
+import { colorPickerMock, ColorPickerShowcase } from "./color-picker"
+import { jsonInputMock, JsonInputShowcase } from "./json-input"
+import { badgeMock, BadgeShowcase } from "./badge"
+import { dividerMock, DividerShowcase } from "./divider"
+import { breadcrumbsMock, BreadcrumbsShowcase } from "./breadcrumbs"
+import { buttonMock, ButtonShowcase } from "./button"
+import { ButtonGroupShowcase, buttonGroupMock } from "./button-group"
+import { calendarMock, CalendarShowcase } from "./calendar"
+import { calendarSchedulerMock, CalendarSchedulerShowcase } from "./calendar-scheduler"
+import { cardMock, CardShowcase } from "./card"
+import { checkboxMock, CheckboxShowcase } from "./checkbox"
+import { codeBlockMock, CodeBlockShowcase } from "./code-block"
+import { dualListPickerMock, DualListPickerShowcase } from "./dual-list-picker"
+import { collapseMock, CollapseShowcase } from "./collapse"
 import { commandPaletteMock, CommandPaletteShowcase } from "./command-palette"
 import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
 import { copyButtonMock, CopyButtonShowcase } from "./copy-button"
-import { copyFieldMock, CopyFieldShowcase } from "./copy-field"
 import { dataStateMock, DataStateShowcase } from "./data-state"
-import { dataTableMock, DataTableShowcase } from "./data-table"
-import { dateInputMock, DateInputShowcase } from "./date-input"
-import { DatePickerShowcase, datePickerMock } from "./date-picker"
-import { DateRangeInputShowcase, dateRangeInputMock } from "./date-range-input"
-import { DateRangePickerShowcase, dateRangePickerMock } from "./date-range-picker"
-import { DescriptionListShowcase, descriptionListMock } from "./description-list"
-import { descriptionsMock, DescriptionsShowcase } from "./descriptions"
+import { dataTableMock, DataTableShowcase } from "./data-table"
+import { DatePickerShowcase, datePickerMock } from "./date-picker"
+import { DateRangePickerShowcase, dateRangePickerMock } from "./date-range-picker"
+import { DescriptionListShowcase, descriptionListMock } from "./description-list"
 import { dialogMock, DialogShowcase } from "./dialog"
 import { dropdownMenuMock, DropdownMenuShowcase } from "./dropdown-menu"
 import { DrawerShowcase, drawerMock } from "./drawer"
-import { FormWrapperShowcase, formAsyncSelectMock, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
-import { hoverCardMock, HoverCardShowcase } from "./hover-card"
+import { FormWrapperShowcase, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
 import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
 import { infoCardMock, InfoCardShowcase } from "./info-card"
-import { inputMock, InputShowcase } from "./input"
-import { kbdMock, KbdShowcase } from "./kbd"
-import { listMock, ListShowcase } from "./list"
-import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
-import { richTextEditorMock, RichTextEditorShowcase } from "./rich-text-editor"
-import { timePickerMock, TimePickerShowcase } from "./time-picker"
-import { tourMock, TourShowcase } from "./tour"
-import { stickyFooterBarMock, StickyFooterBarShowcase } from "./sticky-footer-bar"
-import { maskedInputMock, MaskedInputShowcase } from "./masked-input"
-import { metricGridMock, MetricGridShowcase } from "./metric-grid"
-import { modalShellMock, ModalShellShowcase } from "./modal-shell"
-import { resizablePanelMock, ResizablePanelShowcase } from "./resizable-panel"
-import { moneyInputMock, MoneyInputShowcase } from "./money-input"
-import { NotificationCenterShowcase, notificationCenterMock } from "./notification-center"
-import { numberInputMock, NumberInputShowcase } from "./number-input"
-import { OtpInputShowcase, otpInputMock } from "./otp-input"
-import { pageContainerMock, PageContainerShowcase } from "./page-container"
-import { pageHeaderMock, PageHeaderShowcase } from "./page-header"
-import { PageTabsShowcase, pageTabsMock } from "./page-tabs"
-import { sectionMock, SectionShowcase } from "./section"
-import { phoneInputMock, PhoneInputShowcase } from "./phone-input"
-import { pageStateMock, PageStateShowcase } from "./page-state"
-import { paginationMock, PaginationShowcase } from "./pagination"
-import { popoverMock, PopoverShowcase } from "./popover"
-import { propertyGridMock, PropertyGridShowcase } from "./property-grid"
-import { ProgressShowcase, progressMock } from "./progress"
-import { quantityInputMock, QuantityInputShowcase } from "./quantity-input"
-import { radioGroupMock, RadioGroupShowcase } from "./radio-group"
-import { resultMock, ResultShowcase } from "./result"
+import { imageCropperMock, ImageCropperShowcase } from "./image-cropper"
+import { inputMock, InputShowcase } from "./input"
+import { kbdMock, KbdShowcase } from "./kbd"
+import { listMock, ListShowcase } from "./list"
+import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
+import { timePickerMock, TimePickerShowcase } from "./time-picker"
+import { resizablePanelMock, ResizablePanelShowcase } from "./resizable-panel"
+import { NotificationCenterShowcase, notificationCenterMock } from "./notification-center"
+import { OtpInputShowcase, otpInputMock } from "./otp-input"
+import { sectionMock, SectionShowcase } from "./section"
+import { pageStateMock, PageStateShowcase } from "./page-state"
+import { paginationMock, PaginationShowcase } from "./pagination"
+import { popoverMock, PopoverShowcase } from "./popover"
+import { ProgressShowcase, progressMock } from "./progress"
+import { qrCodeMock, QRCodeShowcase } from "./qr-code"
+import { radioGroupMock, RadioGroupShowcase } from "./radio-group"
 import { rightClickMenuMock, RightClickMenuShowcase } from "./right-click-menu"
-import { scrollBoxMock, ScrollBoxShowcase } from "./scroll-box"
-import { savedFilterSelectMock, SavedFilterSelectShowcase } from "./saved-filter-select"
-import { searchInputMock, SearchInputShowcase } from "./search-input"
+import { richTextEditorMock, RichTextEditorShowcase } from "./rich-text-editor"
+import { scrollBoxMock, ScrollBoxShowcase } from "./scroll-box"
+import { savedFilterSelectMock, SavedFilterSelectShowcase } from "./saved-filter-select"
+import { sortableListMock, SortableListShowcase } from "./sortable-list"
+import { signaturePadMock, SignaturePadShowcase } from "./signature-pad"
 import { segmentedControlMock, SegmentedControlShowcase } from "./segmented-control"
 import { selectMock, SelectShowcase } from "./select"
-import { sheetShellMock, SheetShellShowcase } from "./sheet-shell"
-import { sidebarNavMock, SidebarNavShowcase } from "./sidebar-nav"
-import { simpleSelectMock, SimpleSelectShowcase } from "./simple-select"
-import { sliderMock, SliderShowcase } from "./slider"
-import { skeletonMock, SkeletonShowcase } from "./skeleton"
-import { spinnerMock, SpinnerShowcase } from "./spinner"
-import { statisticMock, StatisticShowcase } from "./statistic"
-import { switchMock, SwitchShowcase } from "./switch"
-import { TagInputShowcase, tagInputMock } from "./tag-input"
-import { tableMock, TableShowcase } from "./table"
-import { tabsMock, TabsShowcase } from "./tabs"
-import { textareaMock, TextareaShowcase } from "./textarea"
-import { TimelineShowcase, timelineMock } from "./timeline"
-import { tagMock, TagShowcase } from "./tag"
-import { typographyMock, TypographyShowcase } from "./typography"
-import { treeViewMock, TreeViewShowcase } from "./tree-view"
-import { toastMock, ToastShowcase } from "./toast"
-import { tooltipMock, TooltipShowcase } from "./tooltip"
-import { fileUploadMock, FileUploadShowcase } from "./file-upload"
-import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
-import { passwordInputMock, PasswordInputShowcase } from "./password-input"
-import { ratingMock, RatingShowcase } from "./rating"
-
-export { defaultComponentDemoState } from "./types"
-export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, ComponentDemoState } from "./types"
-
-export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
-  alert: { mock: alertMock, Showcase: AlertShowcase },
-  "alert-dialog": { mock: alertDialogMock, Showcase: AlertDialogShowcase },
-  accordion: { mock: accordionMock, Showcase: AccordionShowcase },
-  "action-menu": { mock: actionMenuMock, Showcase: ActionMenuShowcase },
-  button: { mock: buttonMock, Showcase: ButtonShowcase },
-  "button-group": { mock: buttonGroupMock, Showcase: ButtonGroupShowcase },
-  calendar: { mock: calendarMock, Showcase: CalendarShowcase },
-  "calendar-scheduler": { mock: calendarSchedulerMock, Showcase: CalendarSchedulerShowcase },
-  "command-bar": { mock: commandBarMock, Showcase: CommandBarShowcase },
-  "command-palette": { mock: commandPaletteMock, Showcase: CommandPaletteShowcase },
-  "carousel": { mock: carouselMock, Showcase: CarouselShowcase },
-  "clearable-input": { mock: clearableInputMock, Showcase: ClearableInputShowcase },
-  "code-block": { mock: codeBlockMock, Showcase: CodeBlockShowcase },
-  "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
-  divider: { mock: dividerMock, Showcase: DividerShowcase },
+import { sliderMock, SliderShowcase } from "./slider"
+import { skeletonMock, SkeletonShowcase } from "./skeleton"
+import { spinnerMock, SpinnerShowcase } from "./spinner"
+import { statisticMock, StatisticShowcase } from "./statistic"
+import { switchMock, SwitchShowcase } from "./switch"
+import { TagInputShowcase, tagInputMock } from "./tag-input"
+import { tableMock, TableShowcase } from "./table"
+import { tabsMock, TabsShowcase } from "./tabs"
+import { textareaMock, TextareaShowcase } from "./textarea"
+import { TimelineShowcase, timelineMock } from "./timeline"
+import { tagMock, TagShowcase } from "./tag"
+import { typographyMock, TypographyShowcase } from "./typography"
+import { treeViewMock, TreeViewShowcase } from "./tree-view"
+import { toastMock, ToastShowcase } from "./toast"
+import { tooltipMock, TooltipShowcase } from "./tooltip"
+import { fileUploadMock, FileUploadShowcase } from "./file-upload"
+import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
+import { ratingMock, RatingShowcase } from "./rating"
+import { virtualListMock, VirtualListShowcase } from "./virtual-list"
+
+export { defaultComponentDemoState } from "./types"
+export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, ComponentDemoState } from "./types"
+
+export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
+  alert: { mock: alertMock, Showcase: AlertShowcase },
+  "alert-dialog": { mock: alertDialogMock, Showcase: AlertDialogShowcase },
+  "action-menu": { mock: actionMenuMock, Showcase: ActionMenuShowcase },
+  button: { mock: buttonMock, Showcase: ButtonShowcase },
+  "button-group": { mock: buttonGroupMock, Showcase: ButtonGroupShowcase },
+  calendar: { mock: calendarMock, Showcase: CalendarShowcase },
+  "calendar-scheduler": { mock: calendarSchedulerMock, Showcase: CalendarSchedulerShowcase },
+  "command-palette": { mock: commandPaletteMock, Showcase: CommandPaletteShowcase },
+  "carousel": { mock: carouselMock, Showcase: CarouselShowcase },
+  "color-picker": { mock: colorPickerMock, Showcase: ColorPickerShowcase },
+  "code-block": { mock: codeBlockMock, Showcase: CodeBlockShowcase },
+  "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
+  divider: { mock: dividerMock, Showcase: DividerShowcase },
   input: { mock: inputMock, Showcase: InputShowcase },
-  textarea: { mock: textareaMock, Showcase: TextareaShowcase },
-  select: { mock: selectMock, Showcase: SelectShowcase },
-  combobox: { mock: comboboxMock, Showcase: ComboboxShowcase },
-  "radio-group": { mock: radioGroupMock, Showcase: RadioGroupShowcase },
-  "simple-select": { mock: simpleSelectMock, Showcase: SimpleSelectShowcase },
-  "async-select": { mock: asyncSelectMock, Showcase: AsyncSelectShowcase },
-  "async-multi-select": { mock: asyncMultiSelectMock, Showcase: AsyncMultiSelectShowcase },
-  avatar: { mock: avatarMock, Showcase: AvatarShowcase },
-  "number-input": { mock: numberInputMock, Showcase: NumberInputShowcase },
-  "money-input": { mock: moneyInputMock, Showcase: MoneyInputShowcase },
-  "password-input": { mock: passwordInputMock, Showcase: PasswordInputShowcase },
-  "date-input": { mock: dateInputMock, Showcase: DateInputShowcase },
-  "date-range-input": { mock: dateRangeInputMock, Showcase: DateRangeInputShowcase },
-  "date-picker": { mock: datePickerMock, Showcase: DatePickerShowcase },
-  "date-range-picker": { mock: dateRangePickerMock, Showcase: DateRangePickerShowcase },
-  "description-list": { mock: descriptionListMock, Showcase: DescriptionListShowcase },
-  descriptions: { mock: descriptionsMock, Showcase: DescriptionsShowcase },
-  drawer: { mock: drawerMock, Showcase: DrawerShowcase },
-  "json-input": { mock: jsonInputMock, Showcase: JsonInputShowcase },
-  kanban: { mock: kanbanBoardMock, Showcase: KanbanBoardShowcase },
-  "menubar": { mock: menubarMock, Showcase: MenubarShowcase },
-  "navigation-menu": { mock: navigationMenuMock, Showcase: NavigationMenuShowcase },
-  "otp-input": { mock: otpInputMock, Showcase: OtpInputShowcase },
-  "quantity-input": { mock: quantityInputMock, Showcase: QuantityInputShowcase },
-  rating: { mock: ratingMock, Showcase: RatingShowcase },
-  "masked-input": { mock: maskedInputMock, Showcase: MaskedInputShowcase },
-  "phone-input": { mock: phoneInputMock, Showcase: PhoneInputShowcase },
-  "search-input": { mock: searchInputMock, Showcase: SearchInputShowcase },
-  slider: { mock: sliderMock, Showcase: SliderShowcase },
-  "time-picker": { mock: timePickerMock, Showcase: TimePickerShowcase },
-  "tag-input": { mock: tagInputMock, Showcase: TagInputShowcase },
-  "dropdown-menu": { mock: dropdownMenuMock, Showcase: DropdownMenuShowcase },
-  "confirm-dialog": { mock: confirmDialogMock, Showcase: ConfirmDialogShowcase },
+  "number-input": { mock: inputMock, Showcase: InputShowcase },
+  textarea: { mock: textareaMock, Showcase: TextareaShowcase },
+  select: { mock: selectMock, Showcase: SelectShowcase },
+  "radio-group": { mock: radioGroupMock, Showcase: RadioGroupShowcase },
+  "async-select": { mock: asyncSelectMock, Showcase: AsyncSelectShowcase },
+  "async-multi-select": { mock: asyncMultiSelectMock, Showcase: AsyncMultiSelectShowcase },
+  avatar: { mock: avatarMock, Showcase: AvatarShowcase },
+  "date-picker": { mock: datePickerMock, Showcase: DatePickerShowcase },
+  "date-range-picker": { mock: dateRangePickerMock, Showcase: DateRangePickerShowcase },
+  "description-list": { mock: descriptionListMock, Showcase: DescriptionListShowcase },
+  drawer: { mock: drawerMock, Showcase: DrawerShowcase },
+  "json-input": { mock: jsonInputMock, Showcase: JsonInputShowcase },
+  kanban: { mock: kanbanBoardMock, Showcase: KanbanBoardShowcase },
+  "otp-input": { mock: otpInputMock, Showcase: OtpInputShowcase },
+  "qr-code": { mock: qrCodeMock, Showcase: QRCodeShowcase },
+  rating: { mock: ratingMock, Showcase: RatingShowcase },
+  "signature-pad": { mock: signaturePadMock, Showcase: SignaturePadShowcase },
+  slider: { mock: sliderMock, Showcase: SliderShowcase },
+  "time-picker": { mock: timePickerMock, Showcase: TimePickerShowcase },
+  "tag-input": { mock: tagInputMock, Showcase: TagInputShowcase },
+  "dropdown-menu": { mock: dropdownMenuMock, Showcase: DropdownMenuShowcase },
+  "confirm-dialog": { mock: confirmDialogMock, Showcase: ConfirmDialogShowcase },
   checkbox: { mock: checkboxMock, Showcase: CheckboxShowcase },
   "copy-button": { mock: copyButtonMock, Showcase: CopyButtonShowcase },
-  "copy-field": { mock: copyFieldMock, Showcase: CopyFieldShowcase },
   switch: { mock: switchMock, Showcase: SwitchShowcase },
-  badge: { mock: badgeMock, Showcase: BadgeShowcase },
-  card: { mock: cardMock, Showcase: CardShowcase },
-  tabs: { mock: tabsMock, Showcase: TabsShowcase },
-  collapse: { mock: collapseMock, Showcase: CollapseShowcase },
-  kbd: { mock: kbdMock, Showcase: KbdShowcase },
-  "modal-shell": { mock: modalShellMock, Showcase: ModalShellShowcase },
-  "sheet-shell": { mock: sheetShellMock, Showcase: SheetShellShowcase },
-  dialog: { mock: dialogMock, Showcase: DialogShowcase },
+  badge: { mock: badgeMock, Showcase: BadgeShowcase },
+  card: { mock: cardMock, Showcase: CardShowcase },
+  tabs: { mock: tabsMock, Showcase: TabsShowcase },
+  collapse: { mock: collapseMock, Showcase: CollapseShowcase },
+  kbd: { mock: kbdMock, Showcase: KbdShowcase },
+  dialog: { mock: dialogMock, Showcase: DialogShowcase },
   popover: { mock: popoverMock, Showcase: PopoverShowcase },
   tooltip: { mock: tooltipMock, Showcase: TooltipShowcase },
-  "hover-card": { mock: hoverCardMock, Showcase: HoverCardShowcase },
   "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
-  "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-column-visibility-menu": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-sortable-header": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-bulk-actions": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-view-presets": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "saved-filter-select": { mock: savedFilterSelectMock, Showcase: SavedFilterSelectShowcase },
-  "form-field": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-field-shell": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-select": { mock: formSelectMock, Showcase: FormWrapperShowcase },
-  "form-async-select": { mock: formAsyncSelectMock, Showcase: FormWrapperShowcase },
-  "form-textarea": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-switch": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-search-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-password-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-number-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-phone-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-range-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-range-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "segmented-control": { mock: segmentedControlMock, Showcase: SegmentedControlShowcase },
-  skeleton: { mock: skeletonMock, Showcase: SkeletonShowcase },
-  spinner: { mock: spinnerMock, Showcase: SpinnerShowcase },
-  table: { mock: tableMock, Showcase: TableShowcase },
-  sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  "app-sidebar": { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  "sidebar-nav": { mock: sidebarNavMock, Showcase: SidebarNavShowcase },
-  breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
-  "page-header": { mock: pageHeaderMock, Showcase: PageHeaderShowcase },
-  "page-container": { mock: pageContainerMock, Showcase: PageContainerShowcase },
-  "page-state": { mock: pageStateMock, Showcase: PageStateShowcase },
-  "page-tabs": { mock: pageTabsMock, Showcase: PageTabsShowcase },
-  pagination: { mock: paginationMock, Showcase: PaginationShowcase },
-  "metric-grid": { mock: metricGridMock, Showcase: MetricGridShowcase },
-  "notification-center": { mock: notificationCenterMock, Showcase: NotificationCenterShowcase },
+  "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
+  "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
+  "saved-filter-select": { mock: savedFilterSelectMock, Showcase: SavedFilterSelectShowcase },
+  "sortable-list": { mock: sortableListMock, Showcase: SortableListShowcase },
+  "form-field": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-field-shell": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-select": { mock: formSelectMock, Showcase: FormWrapperShowcase },
+  "form-textarea": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-switch": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-date-range-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-date-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-date-range-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "segmented-control": { mock: segmentedControlMock, Showcase: SegmentedControlShowcase },
+  skeleton: { mock: skeletonMock, Showcase: SkeletonShowcase },
+  spinner: { mock: spinnerMock, Showcase: SpinnerShowcase },
+  table: { mock: tableMock, Showcase: TableShowcase },
+  sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
+  breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
+  "page-state": { mock: pageStateMock, Showcase: PageStateShowcase },
+  pagination: { mock: paginationMock, Showcase: PaginationShowcase },
+  "notification-center": { mock: notificationCenterMock, Showcase: NotificationCenterShowcase },
   "info-card": { mock: infoCardMock, Showcase: InfoCardShowcase },
-  list: { mock: listMock, Showcase: ListShowcase },
-  "property-grid": { mock: propertyGridMock, Showcase: PropertyGridShowcase },
-  "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
-  "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
-  "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
+  "image-cropper": { mock: imageCropperMock, Showcase: ImageCropperShowcase },
+  list: { mock: listMock, Showcase: ListShowcase },
+  "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
+  "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
+  "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
   progress: { mock: progressMock, Showcase: ProgressShowcase },
-  result: { mock: resultMock, Showcase: ResultShowcase },
-  "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
-  section: { mock: sectionMock, Showcase: SectionShowcase },
-  statistic: { mock: statisticMock, Showcase: StatisticShowcase },
-  "sticky-footer-bar": { mock: stickyFooterBarMock, Showcase: StickyFooterBarShowcase },
-  "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
-  tour: { mock: tourMock, Showcase: TourShowcase },
-  "qr-code": { mock: qrCodeMock, Showcase: QRCodeShowcase },
-  tag: { mock: tagMock, Showcase: TagShowcase },
-  typography: { mock: typographyMock, Showcase: TypographyShowcase },
-  "tree-view": { mock: treeViewMock, Showcase: TreeViewShowcase },
-  "file-upload": { mock: fileUploadMock, Showcase: FileUploadShowcase },
-  "image-upload": { mock: imageUploadMock, Showcase: ImageUploadShowcase },
-  "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
-  timeline: { mock: timelineMock, Showcase: TimelineShowcase },
-  toast: { mock: toastMock, Showcase: ToastShowcase },
-}
+  "progress-circle": { mock: progressMock, Showcase: ProgressShowcase },
+  "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
+  section: { mock: sectionMock, Showcase: SectionShowcase },
+  statistic: { mock: statisticMock, Showcase: StatisticShowcase },
+  tag: { mock: tagMock, Showcase: TagShowcase },
+  typography: { mock: typographyMock, Showcase: TypographyShowcase },
+  "tree-view": { mock: treeViewMock, Showcase: TreeViewShowcase },
+  "file-upload": { mock: fileUploadMock, Showcase: FileUploadShowcase },
+  "image-upload": { mock: imageUploadMock, Showcase: ImageUploadShowcase },
+  "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
+  timeline: { mock: timelineMock, Showcase: TimelineShowcase },
+  toast: { mock: toastMock, Showcase: ToastShowcase },
+  "virtual-list": { mock: virtualListMock, Showcase: VirtualListShowcase },
+}

package/packages/cli/vendor/src/showcase/premium/input/mock.ts

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const inputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"\nimport { Label, Input } from "tembro"\n\nexport function Example() {\n  const [query, setQuery] = useState("buttons")\n\n  return (\n    <form className="space-y-4">\n      <div>\n        <Label htmlFor="support-email">Support email</Label>\n        <Input id="support-email" type="email" defaultValue="team@acme.io" required />\n      </div>\n\n      <div>\n        <Label htmlFor="component-search">Search components</Label>\n        <Input\n          id="component-search"\n          value={query}\n          onValueChange={setQuery}\n          placeholder="Search by slug or title"\n          clearable\n          trailingAction={<span className="text-xs text-muted-foreground">12 results</span>}\n          replaceTrailingWhenClear={false}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor="api-prefix">Cost estimate</Label>\n        <Input\n          id="api-prefix"\n          defaultValue="120"\n          readOnly\n          trailing={<span className="text-sm aui-text-muted">USD</span>}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor="disabled-input">Locked status</Label>\n        <Input id="disabled-input" disabled value="Locked while syncing" />\n      </div>\n    </form>\n  )\n}\n`,
+  code: `import { useState } from "react"\nimport { Input } from "tembro"\n\nexport function Example() {\n  const [query, setQuery] = useState("buttons")\n  const [budget, setBudget] = useState<number | null>(1200)\n\n  return (\n    <div className="grid gap-4">\n      <Input\n        kind="search"\n        value={query}\n        onValueChange={setQuery}\n        placeholder="Search components"\n        clearOnEscape\n      />\n      <Input kind="password" autoComplete="current-password" />\n      <Input kind="money" value={budget} onValueChange={setBudget} prefix="$" suffix="USD" />\n      <Input kind="phone" defaultValue="+998 90 123 45 67" />\n      <Input kind="date" defaultValue="2026-07-13" />\n      <Input kind="quantity" defaultValue={3} min={1} max={12} />\n    </div>\n  )\n}\n`,
   htmlCode: `<label for="example">Search components</label>\n<input id="example" data-slot="input" type="text" placeholder="Search components..." />`,
   cliCommand: "npx tembro add input",
   highlights: [
@@ -9,7 +9,8 @@ export const inputMock: ComponentDemoMock = {
     "Label + control association with htmlFor",
     "Validation-ready required states",
     "Disabled and readOnly form states",
-    "Built-in clear action and trailing metadata",
+    "Built-in clear action and trailing metadata",
+    "Password, numeric, money, phone, date and quantity kinds through one import",
   ],
   relatedBlockSlugs: ["users-table", "settings-form", "crm-dashboard"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/input/showcase.tsx

@@ -18,6 +18,11 @@ export function InputShowcase({ state, setState }: ComponentDemoProps) {
   const activeLabel = activeMode === "search" ? searchField.label : "Profile contact"
   const activePlaceholder = activeMode === "search" ? searchField.placeholder : "owner@azamatui.dev"
   const activeType = activeMode === "search" ? "text" : "email"
+  const [moneyValue, setMoneyValue] = React.useState<number | null>(1250)
+  const [quantityValue, setQuantityValue] = React.useState<number | null>(3)
+  const [phoneValue, setPhoneValue] = React.useState("+998 90 123 45 67")
+  const [dateValue, setDateValue] = React.useState("2026-07-13")
+  const [clearableValue, setClearableValue] = React.useState("Azamat UI")
 
   return (
     <div className="space-y-0">
@@ -134,6 +139,68 @@ export function InputShowcase({ state, setState }: ComponentDemoProps) {
           </div>
         </div>
       </section>
+
+      <section className={panelClass} data-slot="input-kind-showcase">
+        <div className="max-w-2xl">
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Unified kind API</p>
+          <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">One import, every production input</h4>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">
+            Change only the <code>kind</code> prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.
+          </p>
+        </div>
+
+        <div className="mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3">
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Password
+            <Input kind="password" defaultValue="tembro-2026" autoComplete="current-password" />
+            <span className="text-xs font-normal aui-text-muted">Built-in visibility toggle and caps-lock feedback.</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Numeric threshold
+            <Input kind="number" defaultValue={24} min={0} max={100} step={1} />
+            <span className="text-xs font-normal aui-text-muted">Native limits with normalized numeric callbacks.</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Budget
+            <Input kind="money" value={moneyValue} onValueChange={setMoneyValue} prefix="$" suffix="USD" />
+            <span className="text-xs font-normal aui-text-muted">Current value: {moneyValue ?? "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Phone
+            <Input kind="phone" value={phoneValue} onValueChange={setPhoneValue} />
+            <span className="text-xs font-normal aui-text-muted">Normalized value: {phoneValue || "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Release date
+            <Input kind="date" value={dateValue} onValueChange={setDateValue} />
+            <span className="text-xs font-normal aui-text-muted">ISO value: {dateValue || "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Seats
+            <Input kind="quantity" value={quantityValue} onValueChange={setQuantityValue} min={1} max={12} />
+            <span className="text-xs font-normal aui-text-muted">Use the buttons or type a value directly.</span>
+          </label>
+        </div>
+
+        <div className="mt-6 border-t border-[color:var(--aui-divider)] pt-5">
+          <label className="grid max-w-xl gap-2 text-sm font-medium aui-text-strong">
+            Clearable project name
+            <Input
+              kind="clearable"
+              value={clearableValue}
+              onValueChange={setClearableValue}
+              placeholder="Enter a project name"
+              clearOnEscape
+            />
+            <span className="text-xs font-normal aui-text-muted">Use the clear control or press Escape while the field is focused.</span>
+          </label>
+        </div>
+      </section>
     </div>
   )
 }

package/packages/cli/vendor/src/showcase/premium/kanban-board/mock.ts

@@ -1,38 +1,43 @@
-import type { ComponentDemoMock } from "../types"
-
-export const kanbanBoardMock: ComponentDemoMock = {
-  code: `import { KanbanBoard } from "tembro"
-
-export function Example() {
-  return (
-    <KanbanBoard
-      columns={[
-        {
-          key: "todo",
-          title: "To Do",
-          cards: [
-            { key: "a", title: "Prototype", description: "Build initial modal flow." },
-            { key: "b", title: "Audit", description: "Review token contrast." },
-          ],
-        },
-        {
-          key: "progress",
-          title: "In progress",
-          cards: [{ key: "c", title: "Implement", description: "Add demo variants." }],
-        },
-      ]}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add kanban",
-  highlights: [
-    "Horizontal scrollable board layout",
-    "Custom column metadata and counts",
-    "Composable card rendering and click handlers",
-  ],
-  scenarios: [
-    { title: "Task board", description: "Keep tasks in grouped lanes with minimal state." },
-    { title: "Issue triage", description: "Simple draggable-ready board structure (UI only)." },
-  ],
-}
-
+import type { ComponentDemoMock } from "../types"
+
+export const kanbanBoardMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { KanbanBoard } from "tembro"
+
+const initialColumns = [
+  {
+    key: "todo",
+    title: "To Do",
+    cards: [
+      { key: "a", title: "Prototype", description: "Build initial modal flow." },
+      { key: "b", title: "Audit", description: "Review token contrast." },
+    ],
+  },
+  {
+    key: "progress",
+    title: "In progress",
+    cards: [{ key: "c", title: "Implement", description: "Add demo variants." }],
+  },
+]
+
+export function Example() {
+  const [columns, setColumns] = React.useState(initialColumns)
+
+  return (
+    <KanbanBoard
+      columns={columns}
+      onColumnsChange={setColumns}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add kanban",
+  highlights: [
+    "Cross-column pointer, touch and keyboard movement",
+    "Controlled and uncontrolled board state",
+    "Empty-lane drops, cancel handling and drag overlays",
+  ],
+  scenarios: [
+    { title: "Task board", description: "Keep tasks in grouped lanes with minimal state." },
+    { title: "Issue triage", description: "Move and reorder issues across real workflow states." },
+  ],
+}