tembro 2.0.3 → 2.0.5

package/packages/cli/vendor/src/showcase/premium/form-wrapper/showcase.tsx

@@ -1,7 +1,16 @@
 import * as React from "react"
 import { useForm, useWatch } from "react-hook-form"
 
-import { Badge, Button, FormAsyncSelect, FormFieldShell, FormInput, FormSelect, FormSwitch, FormTextarea } from "@/index"
+import {
+  Badge,
+  Button,
+  FormInput,
+  FormSelect,
+  FormSwitch,
+  FormTextarea,
+} from "@/index"
+import { FormDatePicker } from "@/components/form/form-date-picker"
+import { FormDateRangePicker } from "@/components/form/form-date-range-picker"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -11,6 +20,15 @@ type DemoValues = {
   budget: number | null
   notes: string
   active: boolean
+  query: string
+  password: string
+  dueDate: string
+  period: {
+    from: string
+    to: string
+  }
+  periodFrom: string
+  periodTo: string
   status: string
   ownerId: string
 }
@@ -55,6 +73,15 @@ export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
       budget: 120,
       notes: "RHF wrapper coverage for control, name, and validation.",
       active: true,
+      query: "billing",
+      password: "",
+      dueDate: "2026-07-18",
+      period: {
+        from: "2026-07-01",
+        to: "2026-07-14",
+      },
+      periodFrom: "2026-07-01",
+      periodTo: "2026-07-14",
       status: "review",
       ownerId: "workspace-alpha",
     },
@@ -63,7 +90,7 @@ export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
   const activeValue = useWatch({ control: form.control, name: "active" })
   const slug = pathname.split("/").filter(Boolean).at(-1)
 
-  if (slug === "form-select") {
+  if (slug === "form-select" || slug === "form-async-select") {
     return (
       <div className="grid gap-4 xl:grid-cols-2">
         <FormSelect control={form.control} name="status" label="Release status" options={[...statusOptions]} />
@@ -80,15 +107,101 @@ export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
     )
   }
 
-  if (slug === "form-async-select") {
+  if (slug === "form-search-input") {
+    return (
+      <FormInput
+        control={form.control}
+        name="query"
+        kind="search"
+        label="Search query"
+        description="Search wrapper should keep label, hint and result-ready spacing together."
+        placeholder="Search workspaces"
+      />
+    )
+  }
+
+  if (slug === "form-password-input") {
     return (
-      <FormAsyncSelect
+      <FormInput
         control={form.control}
-        name="ownerId"
-        label="Linked workspace"
-        defaultOptions={workspaceOptions.map((option) => ({ ...option }))}
-        loadOptions={loadWorkspaceOptions}
-        loadSelectedOption={loadSelectedWorkspace}
+        name="password"
+        kind="password"
+        label="Workspace password"
+        description="Password wrapper keeps toggle behavior inside the same form shell."
+        placeholder="Enter secure password"
+      />
+    )
+  }
+
+  if (slug === "form-number-input") {
+    return (
+      <FormInput
+        control={form.control}
+        name="budget"
+        kind="number"
+        label="Budget"
+        description="Numeric wrapper keeps parsed value handling inside the field contract."
+        min={0}
+        max={999999}
+      />
+    )
+  }
+
+  if (slug === "form-phone-input") {
+    return (
+      <FormInput
+        control={form.control}
+        name="ownerPhone"
+        kind="phone"
+        label="Owner phone"
+        description="Phone wrapper preserves stable raw value while showing a formatted UI."
+      />
+    )
+  }
+
+  if (slug === "form-date-input") {
+    return (
+      <FormInput
+        control={form.control}
+        name="dueDate"
+        kind="date"
+        label="Due date"
+        description="Use the lightweight date input wrapper when string date entry is enough."
+      />
+    )
+  }
+
+  if (slug === "form-date-range-input") {
+    return (
+      <FormInput
+        control={form.control}
+        name="period"
+        kind="date-range"
+        label="Reporting period"
+        description="Range input wrapper keeps from/to fields under one shell."
+      />
+    )
+  }
+
+  if (slug === "form-date-picker") {
+    return (
+      <FormDatePicker
+        control={form.control}
+        name="dueDate"
+        label="Launch date"
+        description="Use the picker wrapper when calendar selection matters more than raw typing."
+      />
+    )
+  }
+
+  if (slug === "form-date-range-picker") {
+    return (
+      <FormDateRangePicker
+        control={form.control}
+        fromName="periodFrom"
+        toName="periodTo"
+        label="Launch window"
+        description="Popover range picker keeps both fields synchronized inside one wrapper."
       />
     )
   }
@@ -96,9 +209,13 @@ export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
   return (
     <form className="space-y-5">
       <div className="grid gap-4 xl:grid-cols-2">
-        <FormFieldShell label="Workspace setup" description="Shared shell for required marker, error flow and spacing." required>
-          <FormInput control={form.control} name="name" label="Workspace name" required />
-        </FormFieldShell>
+        <FormInput
+          control={form.control}
+          name="name"
+          label="Workspace name"
+          description="Shared shell keeps required marker, helper text and error spacing aligned."
+          required
+        />
 
         <FormInput control={form.control} name="ownerPhone" kind="phone" label="Owner phone" />
         <FormInput control={form.control} name="budget" kind="number" label="Budget" min={0} max={999999} />

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

@@ -1,24 +1,18 @@
-import * as React from "react"
-
 import type { ComponentDemoBundle } from "./types"
 
 import { alertMock, AlertShowcase } from "./alert"
 import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
 import { accordionMock, AccordionShowcase } from "./accordion"
-import { affixMock, AffixShowcase } from "./affix"
 import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
 import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
 import { appShellMock, AppShellShowcase } from "./app-shell"
 import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
-import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
 import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
-import { aspectRatioMock, AspectRatioShowcase } from "./aspect-ratio"
-import { cascaderMock, CascaderShowcase } from "./cascader"
+import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
 import { avatarMock, AvatarShowcase } from "./avatar"
 import { carouselMock, CarouselShowcase } from "./carousel"
-import { floatButtonMock, FloatButtonShowcase } from "./float-button"
+import { clearableInputMock, ClearableInputShowcase } from "./clearable-input"
 import { jsonInputMock, JsonInputShowcase } from "./json-input"
-import { mentionInputMock, MentionInputShowcase } from "./mention-input"
 import { qrCodeMock, QRCodeShowcase } from "./qr-code"
 import { menubarMock, MenubarShowcase } from "./menubar"
 import { navigationMenuMock, NavigationMenuShowcase } from "./navigation-menu"
@@ -33,25 +27,15 @@ import { cardMock, CardShowcase } from "./card"
 import { checkboxMock, CheckboxShowcase } from "./checkbox"
 import { codeBlockMock, CodeBlockShowcase } from "./code-block"
 import { dualListPickerMock, DualListPickerShowcase } from "./dual-list-picker"
-import { ClearableInputShowcase, clearableInputMock } from "./clearable-input"
 import { collapseMock, CollapseShowcase } from "./collapse"
 import { comboboxMock, ComboboxShowcase } from "./combobox"
 import { commandBarMock, CommandBarShowcase } from "./command-bar"
-import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
 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 {
-  DataTablePartShowcase,
-  dataTableActionsColumnMock,
-  dataTablePaginationMock,
-  dataTableRowActionsMock,
-  dataTableSavedFiltersMock,
-  dataTableSelectColumnMock,
-  dataTableToolbarMock,
-} from "./data-table-parts"
 import { dateInputMock, DateInputShowcase } from "./date-input"
 import { DatePickerShowcase, datePickerMock } from "./date-picker"
 import { DateRangeInputShowcase, dateRangeInputMock } from "./date-range-input"
@@ -61,14 +45,11 @@ import { descriptionsMock, DescriptionsShowcase } from "./descriptions"
 import { dialogMock, DialogShowcase } from "./dialog"
 import { dropdownMenuMock, DropdownMenuShowcase } from "./dropdown-menu"
 import { DrawerShowcase, drawerMock } from "./drawer"
-import { emptyStateMock, EmptyStateShowcase } from "./empty-state"
-import { FormBuilderShowcase, formBuilderMock } from "./form-builder"
 import { FormWrapperShowcase, formAsyncSelectMock, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
 import { hoverCardMock, HoverCardShowcase } from "./hover-card"
 import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
 import { infoCardMock, InfoCardShowcase } from "./info-card"
 import { inputMock, InputShowcase } from "./input"
-import { keyboardShortcutMock, KeyboardShortcutShowcase } from "./keyboard-shortcut"
 import { kbdMock, KbdShowcase } from "./kbd"
 import { listMock, ListShowcase } from "./list"
 import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
@@ -88,9 +69,6 @@ import { pageContainerMock, PageContainerShowcase } from "./page-container"
 import { pageHeaderMock, PageHeaderShowcase } from "./page-header"
 import { PageTabsShowcase, pageTabsMock } from "./page-tabs"
 import { sectionMock, SectionShowcase } from "./section"
-import { stackMock, StackShowcase } from "./stack"
-import { skeletonFormMock, SkeletonFormShowcase } from "./skeleton-form"
-import { skeletonTableMock, SkeletonTableShowcase } from "./skeleton-table"
 import { phoneInputMock, PhoneInputShowcase } from "./phone-input"
 import { pageStateMock, PageStateShowcase } from "./page-state"
 import { paginationMock, PaginationShowcase } from "./pagination"
@@ -115,7 +93,6 @@ import { spinnerMock, SpinnerShowcase } from "./spinner"
 import { statisticMock, StatisticShowcase } from "./statistic"
 import { switchMock, SwitchShowcase } from "./switch"
 import { TagInputShowcase, tagInputMock } from "./tag-input"
-import { tagListMock, TagListShowcase } from "./tag-list"
 import { tableMock, TableShowcase } from "./table"
 import { tabsMock, TabsShowcase } from "./tabs"
 import { textareaMock, TextareaShowcase } from "./textarea"
@@ -129,7 +106,6 @@ import { fileUploadMock, FileUploadShowcase } from "./file-upload"
 import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
 import { passwordInputMock, PasswordInputShowcase } from "./password-input"
 import { ratingMock, RatingShowcase } from "./rating"
-import { watermarkMock, WatermarkShowcase } from "./watermark"
 
 export { defaultComponentDemoState } from "./types"
 export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, ComponentDemoState } from "./types"
@@ -138,21 +114,17 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   alert: { mock: alertMock, Showcase: AlertShowcase },
   "alert-dialog": { mock: alertDialogMock, Showcase: AlertDialogShowcase },
   accordion: { mock: accordionMock, Showcase: AccordionShowcase },
-  affix: { mock: affixMock, Showcase: AffixShowcase },
   "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 },
-  "cascader": { mock: cascaderMock, Showcase: CascaderShowcase },
   "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 },
-  "aspect-ratio": { mock: aspectRatioMock, Showcase: AspectRatioShowcase },
   "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
-  "float-button": { mock: floatButtonMock, Showcase: FloatButtonShowcase },
   divider: { mock: dividerMock, Showcase: DividerShowcase },
   input: { mock: inputMock, Showcase: InputShowcase },
   textarea: { mock: textareaMock, Showcase: TextareaShowcase },
@@ -182,7 +154,6 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   rating: { mock: ratingMock, Showcase: RatingShowcase },
   "masked-input": { mock: maskedInputMock, Showcase: MaskedInputShowcase },
   "phone-input": { mock: phoneInputMock, Showcase: PhoneInputShowcase },
-  "mention-input": { mock: mentionInputMock, Showcase: MentionInputShowcase },
   "search-input": { mock: searchInputMock, Showcase: SearchInputShowcase },
   slider: { mock: sliderMock, Showcase: SliderShowcase },
   "time-picker": { mock: timePickerMock, Showcase: TimePickerShowcase },
@@ -206,12 +177,10 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   "hover-card": { mock: hoverCardMock, Showcase: HoverCardShowcase },
   "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
   "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-pagination": { mock: dataTablePaginationMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-pagination" }) },
-  "data-table-toolbar": { mock: dataTableToolbarMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-toolbar" }) },
-  "data-table-row-actions": { mock: dataTableRowActionsMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-row-actions" }) },
-  "data-table-actions-column": { mock: dataTableActionsColumnMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-actions-column" }) },
-  "data-table-select-column": { mock: dataTableSelectColumnMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-select-column" }) },
-  "data-table-saved-filters": { mock: dataTableSavedFiltersMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-saved-filters" }) },
+  "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 },
@@ -228,7 +197,6 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   "form-date-range-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
   "form-date-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
   "form-date-range-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-builder": { mock: formBuilderMock, Showcase: FormBuilderShowcase },
   "segmented-control": { mock: segmentedControlMock, Showcase: SegmentedControlShowcase },
   skeleton: { mock: skeletonMock, Showcase: SkeletonShowcase },
   spinner: { mock: spinnerMock, Showcase: SpinnerShowcase },
@@ -249,18 +217,13 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   list: { mock: listMock, Showcase: ListShowcase },
   "property-grid": { mock: propertyGridMock, Showcase: PropertyGridShowcase },
   "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
-  "empty-state": { mock: emptyStateMock, Showcase: EmptyStateShowcase },
   "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
   "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
-  "keyboard-shortcut": { mock: keyboardShortcutMock, Showcase: KeyboardShortcutShowcase },
   progress: { mock: progressMock, Showcase: ProgressShowcase },
   result: { mock: resultMock, Showcase: ResultShowcase },
   "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
   section: { mock: sectionMock, Showcase: SectionShowcase },
-  stack: { mock: stackMock, Showcase: StackShowcase },
   statistic: { mock: statisticMock, Showcase: StatisticShowcase },
-  "skeleton-form": { mock: skeletonFormMock, Showcase: SkeletonFormShowcase },
-  "skeleton-table": { mock: skeletonTableMock, Showcase: SkeletonTableShowcase },
   "sticky-footer-bar": { mock: stickyFooterBarMock, Showcase: StickyFooterBarShowcase },
   "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
   tour: { mock: tourMock, Showcase: TourShowcase },
@@ -270,9 +233,7 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   "tree-view": { mock: treeViewMock, Showcase: TreeViewShowcase },
   "file-upload": { mock: fileUploadMock, Showcase: FileUploadShowcase },
   "image-upload": { mock: imageUploadMock, Showcase: ImageUploadShowcase },
-  watermark: { mock: watermarkMock, Showcase: WatermarkShowcase },
   "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
-  "tag-list": { mock: tagListMock, Showcase: TagListShowcase },
   timeline: { mock: timelineMock, Showcase: TimelineShowcase },
   toast: { mock: toastMock, Showcase: ToastShowcase },
 }

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 { Label, Input } from "tembro"\n\nexport function Example() {\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`,
+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`,
   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: [

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const maskedInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { MaskedInput } from "@/index"
+import { MaskedInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("AA-123")

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const moneyInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { MoneyInput } from "@/index"
+import { MoneyInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(2990.5)

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const numberInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { NumberInput, parseNumberInput } from "@/index"
+import { NumberInput, parseNumberInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(14)

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const phoneInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { PhoneInput } from "@/index"
+import { PhoneInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("+998 90 123 45 67")

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const quantityInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { QuantityInput } from "@/index"
+import { QuantityInput } from "tembro"
 
 export function Example() {
   const [quantity, setQuantity] = useState<number | null>(3)

package/packages/cli/vendor/src/showcase/premium/simple-select/mock.ts

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const simpleSelectMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { Button, SimpleSelect } from "@/index"
+import { Button, SimpleSelect } from "tembro"
 
 const selectOptions = [
   { value: "public", label: "Public", disabled: false },

package/packages/cli/vendor/src/showcase/premium/simple-select/showcase.tsx

@@ -31,6 +31,7 @@ export function SimpleSelectShowcase({ mode }: ComponentDemoProps) {
         placeholder="Visibility"
         searchable
         clearable
+        showSelectedDescription
       />
       <div className="grid gap-3 md:grid-cols-3">
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
@@ -46,7 +47,7 @@ export function SimpleSelectShowcase({ mode }: ComponentDemoProps) {
           <p className="mt-2 aui-text-muted">Choose this for local option lists before moving to AsyncSelect.</p>
         </div>
       </div>
-      <SimpleSelect key={uncontrolledKey} defaultValue="public" options={options} />
+      <SimpleSelect key={uncontrolledKey} defaultValue="public" options={options} showSelectedDescription />
       <div className="flex flex-wrap gap-2">
         <Button variant="outline" size="sm" onClick={() => setValue(undefined)}>
           Clear controlled

package/packages/cli/vendor/src/showcase/preview-catalog.tsx

@@ -13,49 +13,49 @@ export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
     slug: "dashboard-01",
     title: "Dashboard with sidebar",
     command: "npx tembro init --template next --defaults\nnpx tembro add app-sidebar metric-grid data-table",
-    code: `import { AppSidebar } from "@/components/layout/app-sidebar"\nimport { MetricGrid } from "@/components/display/metric-grid"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
+    code: `import { AppSidebar, MetricGrid } from "tembro"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
     tone: "dashboard",
   },
   {
     slug: "table-01",
     title: "Advanced invoice table",
     command: "npx tembro add data-table",
-    code: `import { DataTable } from "@/components/data-table/data-table"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
+    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
     tone: "table",
   },
   {
     slug: "auth-01",
     title: "Authentication screen",
     command: "npx tembro add input button",
-    code: `import { Button } from "@/components/ui/button"\nimport { Input } from "@/components/ui/input"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
+    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
     tone: "auth",
   },
   {
     slug: "product-01",
     title: "Commerce product detail",
     command: "npx tembro add badge button",
-    code: `import { Badge } from "@/components/ui/badge"\nimport { Button } from "@/components/ui/button"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
+    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
     tone: "product",
   },
   {
     slug: "command-01",
     title: "Command palette",
     command: "npx tembro add command-palette",
-    code: `import { CommandPalette } from "@/components/command/command-palette"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
+    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
     tone: "command",
   },
   {
     slug: "calendar-01",
     title: "Calendar and date picker",
     command: "npx tembro add calendar date-picker",
-    code: `import { Calendar } from "@/components/calendar/calendar"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
+    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
     tone: "calendar",
   },
   {
     slug: "upload-01",
     title: "Upload workspace",
     command: "npx tembro add file-upload image-upload",
-    code: `import { FileUpload } from "@/components/upload/file-upload"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
+    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
     tone: "upload",
   },
 ]

package/packages/cli/vendor/src/showcase/registry-quality.ts

@@ -13,15 +13,11 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("form-switch", "FormSwitch", "form", "Boolean form control with shell-level label and hint handling."),
   component("form-date-picker", "FormDatePicker", "form", "Popover date picker wrapper with RHF integration."),
   component("form-date-range-picker", "FormDateRangePicker", "form", "Range date picker wrapper for planning and reporting flows."),
-  component("repeater-field", "RepeaterField", "form", "Repeating row editor for dynamic field arrays."),
-
-  component("dialog-actions", "DialogActions", "overlay", "Modal footer action row with cancel, secondary and primary actions."),
   component("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
   component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
 
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
   component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
   component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
   component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
 
@@ -29,8 +25,6 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("number-input", "NumberInput", "inputs", "Numeric entry for counts, thresholds, and reporting controls."),
   component("phone-input", "PhoneInput", "inputs", "Phone input with stable raw and masked value handling."),
   component("money-input", "MoneyInput", "inputs", "Currency entry for billing, finance and KPI editing flows."),
-  component("date-input", "DateInput", "inputs", "Single-date field for compact forms and filter bars."),
-  component("date-range-input", "DateRangeInput", "inputs", "Date range surface for reporting and booking windows."),
   component("simple-select", "SimpleSelect", "inputs", "Static local-option select for dashboards and settings forms."),
   component("async-select", "AsyncSelect", "inputs", "Remote-loaded select for large server-backed option sets."),
   component("combobox", "Combobox", "inputs", "Searchable local choice input for reassignment and command-like selection."),
@@ -38,33 +32,23 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
   component("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
-  component("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
   component("inline-editable", "InlineEditable", "inputs", "Inline editing primitive for dense tables and configuration rows."),
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
 
-  component("description-list", "DescriptionList", "display", "Structured key-value details for entity, invoice and profile pages."),
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
   component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
   component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
-  component("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-  component("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
-  component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-  component("file-card", "FileCard", "display", "Compact file summary with state and actions."),
+  component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
   component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
-  component("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card."),
+  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
 
   component("action-menu", "ActionMenu", "actions", "Compact dropdown action menu for rows and cards."),
   component("button-group", "ButtonGroup", "actions", "Grouped action buttons for view switching and compact controls."),
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
-  component("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
-  component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
-  component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("command-palette", "CommandPalette", "actions", "Keyboard command surface for global navigation and actions."),
+  component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 
   component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
   component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
@@ -73,17 +57,7 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
   component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
 
-  component("data-table-pagination", "DataTablePagination", "data-table", "Pagination control used by DataTable pages."),
-  component("data-table-toolbar", "DataTableToolbar", "data-table", "Toolbar surface for DataTable search, filters and actions."),
-  component("data-table-column-visibility-menu", "DataTableColumnVisibilityMenu", "data-table", "Column visibility menu pattern for table views."),
-  component("data-table-select-column", "DataTableSelectColumn", "data-table", "Selection column pattern for bulk table workflows."),
-  component("data-table-sortable-header", "DataTableSortableHeader", "data-table", "Sortable header trigger with clear visual state."),
-  component("data-table-row-actions", "DataTableRowActions", "data-table", "Row action menu for inspect, duplicate and archive operations."),
-  component("data-table-actions-column", "DataTableActionsColumn", "data-table", "Reusable actions column for DataTable definitions."),
-  component("data-table-bulk-actions", "DataTableBulkActions", "data-table", "Bulk action bar for selected rows."),
-  component("data-table-view-presets", "DataTableViewPresets", "data-table", "Saved table view presets for operational dashboards."),
-
-  component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
+  component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
 
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy."),