tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/showcase/premium/data-table-parts/showcase.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { ColumnDef, RowSelectionState } from "@tanstack/react-table"
+import type { ColumnDef, Row, RowSelectionState } from "@tanstack/react-table"
 
 import {
   Badge,
@@ -7,13 +7,13 @@ import {
   DataTable,
   DataTableBulkActions,
   DataTableColumnVisibilityMenu,
-  DataTableSavedFilters,
   DataTableSortableHeader,
   DataTableViewPresets,
-  SearchInput,
-  createDataTableActionsColumn,
-  createDataTableSelectColumn,
+  Input,
 } from "@/index"
+import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
+import { DataTableSavedFilters } from "@/components/data-table/data-table-saved-filters"
+import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
 
 import { buildDataTableDemoRows, dataTableDemoPresets, type DataTableDemoRow } from "./data"
 
@@ -40,9 +40,9 @@ function buildColumns(setNotes: (value: string) => void): ColumnDef<DataTableDem
       accessorKey: "customer",
       header: ({ column }) => <DataTableSortableHeader column={column}>Customer</DataTableSortableHeader>,
     },
-    {
-      accessorKey: "status",
-      header: "Status",
+      {
+        accessorKey: "status",
+        header: "Status",
       cell: ({ row }) => (
         <Badge variant={row.original.status === "Paid" ? "secondary" : row.original.status === "Review" ? "outline" : "destructive"}>
           {row.original.status}
@@ -54,7 +54,7 @@ function buildColumns(setNotes: (value: string) => void): ColumnDef<DataTableDem
       header: ({ column }) => <DataTableSortableHeader column={column}>Amount</DataTableSortableHeader>,
     },
     createDataTableActionsColumn<DataTableDemoRow>({
-      getActions: (_row, original) => [
+      getActions: (_row: Row<DataTableDemoRow>, original: DataTableDemoRow) => [
         { key: "open", label: "Open detail", onSelect: () => setNotes(`${original.invoice} opened from row action`) },
         { key: "archive", label: "Archive", destructive: true, onSelect: () => setNotes(`${original.invoice} sent to archive`) },
       ],
@@ -129,9 +129,9 @@ export function DataTablePartShowcase({
               { id: "risk", name: "At risk", filters: {} },
             ]}
             activeFilterId={view === "all" ? "all" : view === "finance" ? "finance" : "risk"}
-            onSelectFilter={(id) => setView(id === "finance" ? "finance" : id === "risk" ? "at-risk" : "all")}
-            onSaveFilter={(name) => setNotes(`Saved filter created: ${name}`)}
-            onDeleteFilter={(id) => setNotes(`Saved filter deleted: ${id}`)}
+            onSelectFilter={(id: string) => setView(id === "finance" ? "finance" : id === "risk" ? "at-risk" : "all")}
+            onSaveFilter={(name: string) => setNotes(`Saved filter created: ${name}`)}
+            onDeleteFilter={(id: string) => setNotes(`Saved filter deleted: ${id}`)}
             onClearFilters={() => setView("all")}
           />
         </div>
@@ -147,7 +147,7 @@ export function DataTablePartShowcase({
               size="sm"
             />
             <div className="w-full max-w-[320px]">
-              <SearchInput value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
+              <Input type="search" value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
             </div>
           </div>
         </div>
@@ -168,7 +168,7 @@ export function DataTablePartShowcase({
         toolbarProps={(table) => ({
           title: "Invoices",
           description: "Premium subroute preview for reusable DataTable parts.",
-          search: <SearchInput value={search} onValueChange={setSearch} placeholder="Search rows..." />,
+          search: <Input type="search" value={search} onValueChange={setSearch} placeholder="Search rows..." />,
           actions: (
             <div className="flex items-center gap-2">
               <DataTableColumnVisibilityMenu table={table} />

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const dateInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { DateInput } from "@/index"
+import { DateInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("2026-06-19")

package/packages/cli/vendor/src/showcase/premium/date-range-picker/showcase.tsx

@@ -15,6 +15,13 @@ export function DateRangePickerShowcase({ mode }: ComponentDemoProps) {
         min="2026-06-01"
         max="2026-12-31"
         disabledDates={["2026-06-21", "2026-06-22"]}
+        closeOnPresetSelect
+        presets={[
+          { label: "This week", value: { from: "2026-06-01", to: "2026-06-07" } },
+          { label: "Next 14 days", value: { from: "2026-06-08", to: "2026-06-20" } },
+          { label: "Q3", value: { from: "2026-07-01", to: "2026-09-30" } },
+        ]}
+        labels={{ placeholder: "Choose reporting range", apply: "Apply range", clear: "Clear", start: "Start", end: "End" }}
       />
       <p className="aui-text-subtle text-sm">Range: {value.from} → {value.to}</p>
       <p className="aui-text-muted text-sm">Mode: {mode}</p>

package/packages/cli/vendor/src/showcase/premium/dropdown-menu/showcase.tsx

@@ -7,11 +7,15 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuItemDescription,
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/index"
 
@@ -22,6 +26,8 @@ const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
 export function DropdownMenuShowcase({ mode }: ComponentDemoProps) {
   const [status, setStatus] = React.useState("private")
   const [notifications, setNotifications] = React.useState(true)
+  const [compact, setCompact] = React.useState(false)
+  const [keepOpen, setKeepOpen] = React.useState(false)
 
   return (
     <div className="space-y-0">
@@ -46,6 +52,10 @@ export function DropdownMenuShowcase({ mode }: ComponentDemoProps) {
               <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Route</p>
               <p className="mt-2 text-lg font-semibold aui-text-strong">{mode === "playground" ? "Interactive" : "Docs"}</p>
             </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Menu close</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{keepOpen ? "Pinned open" : "Auto close"}</p>
+            </div>
           </div>
         </div>
       </section>
@@ -63,12 +73,45 @@ export function DropdownMenuShowcase({ mode }: ComponentDemoProps) {
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuLabel>Workspace actions</DropdownMenuLabel>
-              <DropdownMenuItem>Open workspace</DropdownMenuItem>
-              <DropdownMenuItem disabled>Delete from archive</DropdownMenuItem>
+              <DropdownMenuItem>
+                <span className="grid gap-0.5">
+                  <span>Open workspace</span>
+                  <DropdownMenuItemDescription>Go to the main dashboard route</DropdownMenuItemDescription>
+                </span>
+                <DropdownMenuShortcut>↵</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem disabled>
+                <span className="grid gap-0.5">
+                  <span>Delete from archive</span>
+                  <DropdownMenuItemDescription>Locked until retention expires</DropdownMenuItemDescription>
+                </span>
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuCheckboxItem checked={notifications} onCheckedChange={(value) => setNotifications(Boolean(value))}>
+              <DropdownMenuCheckboxItem
+                checked={notifications}
+                closeOnSelect={!keepOpen}
+                onCheckedChange={(value) => setNotifications(Boolean(value))}
+              >
                 Notification access
               </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={compact}
+                closeOnSelect={!keepOpen}
+                onCheckedChange={(value) => setCompact(Boolean(value))}
+              >
+                Compact density
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked={keepOpen} closeOnSelect={false} onCheckedChange={(value) => setKeepOpen(Boolean(value))}>
+                Keep menu open
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>CSV</DropdownMenuItem>
+                  <DropdownMenuItem>PDF summary</DropdownMenuItem>
+                  <DropdownMenuItem>JSON payload</DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
               <DropdownMenuGroup>
                 <DropdownMenuRadioGroup value={status} onValueChange={(value) => setStatus(value)}>
                   <DropdownMenuRadioItem value="public">Public</DropdownMenuRadioItem>

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

@@ -1,11 +1,11 @@
 import type { ComponentDemoMock } from "../types"
 
-export const formRHFWrapperMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import { Button, FormFieldShell, FormInput, FormSwitch, FormTextarea } from "@/index"
-
-type DemoValues = {
-  name: string
+export const formRHFWrapperMock: ComponentDemoMock = {
+  code: `import { useForm } from "react-hook-form"
+import { Button, FormInput, FormSwitch, FormTextarea } from "tembro"
+
+type DemoValues = {
+  name: string
   ownerPhone: string
   price: number | null
   notes: string
@@ -27,24 +27,22 @@ export function Example() {
     console.log(values)
   })
 
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      <FormFieldShell label="Workspace name" required>
-        <FormInput
-          control={form.control}
-          name="name"
-          label="Workspace name"
-          required
-          placeholder="Write a workspace title"
-          rules={{
-            required: "Workspace name is required",
-            minLength: { value: 3, message: "At least 3 characters" },
-          }}
-        />
-      </FormFieldShell>
-
-      <FormInput
-        control={form.control}
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <FormInput
+        control={form.control}
+        name="name"
+        label="Workspace name"
+        required
+        placeholder="Write a workspace title"
+        rules={{
+          required: "Workspace name is required",
+          minLength: { value: 3, message: "At least 3 characters" },
+        }}
+      />
+
+      <FormInput
+        control={form.control}
         name="ownerPhone"
         kind="phone"
         label="Owner phone"
@@ -75,10 +73,10 @@ export function Example() {
 
       <Button type="submit">Save</Button>
     </form>
-  )`
-,
-  htmlCode: '<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>',
-  cliCommand: "npx tembro add form-wrapper",
+  )`
+,
+  htmlCode: '<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>',
+  cliCommand: "npx tembro add form-input form-textarea form-switch",
   highlights: ["control + name contract", "Universal `kind` variants", "Error display and required markers", "Consistent wrapper shell behavior"],
   relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],
   scenarios: [
@@ -96,17 +94,31 @@ export function Example() {
   ],
 }
 
-export const formSelectMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import { Button, FormSelect } from "tembro"
-
-const statusOptions = [
-  { label: "Draft", value: "draft" },
-  { label: "Review", value: "review" },
-  { label: "Live", value: "live" },
-]
-
-export function Example() {
+export const formSelectMock: ComponentDemoMock = {
+  code: `import { useForm } from "react-hook-form"
+import { Button, FormSelect } from "tembro"
+
+const statusOptions = [
+  { label: "Draft", value: "draft" },
+  { label: "Review", value: "review" },
+  { label: "Live", value: "live" },
+]
+
+const workspaceOptions = [
+  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
+  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
+]
+
+async function loadWorkspaces(search: string) {
+  const query = search.trim().toLowerCase()
+  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
+}
+
+async function loadWorkspace(value: string) {
+  return workspaceOptions.find((option) => option.value === value) ?? null
+}
+
+export function Example() {
   const form = useForm({
     defaultValues: {
       status: "review",
@@ -152,11 +164,25 @@ export function Example() {
   ],
 }
 
-export const formAsyncSelectMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import { Button, FormAsyncSelect } from "tembro"
-
-export function Example() {
+export const formAsyncSelectMock: ComponentDemoMock = {
+  code: `import { useForm } from "react-hook-form"
+import { Button, FormAsyncSelect } from "tembro"
+
+const workspaceOptions = [
+  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
+  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
+]
+
+async function loadWorkspaces(search: string) {
+  const query = search.trim().toLowerCase()
+  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
+}
+
+async function loadWorkspace(value: string) {
+  return workspaceOptions.find((option) => option.value === value) ?? null
+}
+
+export function Example() {
   const form = useForm({
     defaultValues: {
       ownerId: "workspace-alpha",

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,5 +1,3 @@
-import * as React from "react"
-
 import type { ComponentDemoBundle } from "./types"
 
 import { alertMock, AlertShowcase } from "./alert"
@@ -9,10 +7,11 @@ 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 { 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"
@@ -28,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"
@@ -56,8 +45,6 @@ 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"
@@ -190,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 },
@@ -212,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 },
@@ -233,7 +217,6 @@ 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 },
   progress: { mock: progressMock, Showcase: ProgressShowcase },

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)