tembro 2.0.3 → 2.0.5

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

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 import { Badge, Button, Combobox } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
@@ -15,6 +17,7 @@ const teammateOptions = [
 export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
   const currentValue = teammateOptions.some((option) => option.value === state.selectValue) ? state.selectValue : "azamat"
   const currentOption = teammateOptions.find((option) => option.value === currentValue) ?? teammateOptions[0]
+  const [searchValue, setSearchValue] = React.useState("")
 
   return (
     <div className="space-y-5">
@@ -45,6 +48,10 @@ export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
                 onValueChange={(value) => setState({ selectValue: value ?? "azamat" })}
                 placeholder="Choose teammate"
                 searchPlaceholder="Search teammate..."
+                clearable
+                allowDeselect
+                showSelectedDescription
+                onSearchChange={setSearchValue}
               />
             </div>
           </div>
@@ -68,6 +75,7 @@ export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
             <p className="mt-2 text-sm leading-6 aui-text-muted">
               Use quick actions below to verify that the value stays controlled outside the dropdown itself.
             </p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">Search query: {searchValue || "empty"}</p>
           </div>
           <div className="flex flex-wrap gap-2">
             <Button type="button" size="sm" onClick={() => setState({ selectValue: "nodira" })}>

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

@@ -5,13 +5,12 @@ import {
   Badge,
   Button,
   DataTable,
-  DataTableBulkActions,
   DataTableColumnVisibilityMenu,
   DataTableSortableHeader,
-  SearchInput,
-  createDataTableActionsColumn,
-  createDataTableSelectColumn,
+  SimpleSelect,
 } from "@/index"
+import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
+import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
 
 type DataTableDemoRow = {
   invoice: string
@@ -26,17 +25,25 @@ const rows: DataTableDemoRow[] = [
   { invoice: "INV-4821", customer: "Acme Studio", owner: "Azamat", amount: "$12,420", status: "Paid", updatedAt: "2m ago" },
   { invoice: "INV-4822", customer: "Northwind", owner: "Madina", amount: "$8,120", status: "Review", updatedAt: "10m ago" },
   { invoice: "INV-4823", customer: "Globex", owner: "Jasur", amount: "$4,880", status: "Draft", updatedAt: "22m ago" },
+  { invoice: "INV-4824", customer: "Pixel Union", owner: "Azamat", amount: "$17,300", status: "Paid", updatedAt: "44m ago" },
+  { invoice: "INV-4825", customer: "Meridian Labs", owner: "Madina", amount: "$2,180", status: "Review", updatedAt: "1h ago" },
+  { invoice: "INV-4826", customer: "Orbit Cloud", owner: "Jasur", amount: "$9,040", status: "Draft", updatedAt: "3h ago" },
 ]
 
 export function DataTableShowcase() {
   const [search, setSearch] = React.useState("")
-  const [selectedCount, setSelectedCount] = React.useState(0)
+  const [statusFilter, setStatusFilter] = React.useState("all")
+  const [ownerFilter, setOwnerFilter] = React.useState("all")
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({})
 
   const filteredRows = rows.filter((row) => {
     const normalized = search.trim().toLowerCase()
-    if (!normalized) return true
-    return `${row.invoice} ${row.customer} ${row.owner} ${row.amount}`.toLowerCase().includes(normalized)
+    const matchesSearch = !normalized || `${row.invoice} ${row.customer} ${row.owner} ${row.amount}`.toLowerCase().includes(normalized)
+    const matchesStatus = statusFilter === "all" || row.status === statusFilter
+    const matchesOwner = ownerFilter === "all" || row.owner === ownerFilter
+    return matchesSearch && matchesStatus && matchesOwner
   })
+  const selectedCount = Object.values(rowSelection).filter(Boolean).length
 
   const columns = React.useMemo<ColumnDef<DataTableDemoRow>[]>(
     () => [
@@ -94,7 +101,7 @@ export function DataTableShowcase() {
           </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">State</p>
-            <p className="mt-2 text-lg font-semibold aui-text-strong">Live</p>
+            <p className="mt-2 text-lg font-semibold aui-text-strong">{search || statusFilter !== "all" || ownerFilter !== "all" ? "Filtered" : "Live"}</p>
           </div>
         </div>
       </div>
@@ -104,24 +111,67 @@ export function DataTableShowcase() {
         data={filteredRows}
         getRowId={(row) => row.invoice}
         enableRowSelection
-        toolbarProps={(table) => ({
-          title: "Invoices",
-          description: "Compact premium preview of the real DataTable surface.",
-          search: <SearchInput value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />,
-          actions: (
-            <div className="flex items-center gap-2">
-              <DataTableColumnVisibilityMenu table={table} />
-              <DataTableBulkActions
-                rows={filteredRows.slice(0, selectedCount)}
-                actions={[{ key: "export", label: "Export selected", onSelect: () => undefined }]}
-                onClearSelection={() => setSelectedCount(0)}
-              />
-            </div>
-          ),
-        })}
+        rowSelection={rowSelection}
+        title="Invoices"
+        description="Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface."
+        features={{
+          search: true,
+          columnVisibility: true,
+          bulkActions: true,
+        }}
+        search={{
+          value: search,
+          onValueChange: setSearch,
+          placeholder: "Search invoice, customer...",
+          clearable: true,
+        }}
+        filters={
+          <>
+            <SimpleSelect
+              value={statusFilter}
+              onValueChange={(value) => setStatusFilter(value ?? "all")}
+              options={[
+                { value: "all", label: "All statuses" },
+                { value: "Paid", label: "Paid" },
+                { value: "Review", label: "Review" },
+                { value: "Draft", label: "Draft" },
+              ]}
+              triggerClassName="min-w-40"
+            />
+            <SimpleSelect
+              value={ownerFilter}
+              onValueChange={(value) => setOwnerFilter(value ?? "all")}
+              options={[
+                { value: "all", label: "All owners" },
+                { value: "Azamat", label: "Azamat" },
+                { value: "Madina", label: "Madina" },
+                { value: "Jasur", label: "Jasur" },
+              ]}
+              triggerClassName="min-w-36"
+            />
+          </>
+        }
+        summary={
+          <>
+            <Badge variant="outline">{filteredRows.length} rows</Badge>
+            <Badge variant="outline">{selectedCount} selected</Badge>
+            <Badge variant="outline">
+              {search || statusFilter !== "all" || ownerFilter !== "all" ? "Filtered view" : "Live view"}
+            </Badge>
+          </>
+        }
+        toolbarActions={({ table }) => (
+          <div className="flex items-center gap-2">
+            <DataTableColumnVisibilityMenu table={table} />
+            <Button size="sm" variant="outline">Export</Button>
+          </div>
+        )}
+        bulkActions={[
+          { key: "export", label: "Export selected", onSelect: () => undefined },
+          { key: "archive", label: "Archive selected", destructive: true, onSelect: () => undefined },
+        ]}
         onRowSelectionChange={(selection) => {
-          const value = typeof selection === "function" ? selection({}) : selection
-          setSelectedCount(Object.values(value).filter(Boolean).length)
+          setRowSelection((current) => (typeof selection === "function" ? selection(current) : selection))
         }}
         onRowClick={() => undefined}
         renderMobileCard={(row) => (
@@ -139,8 +189,8 @@ export function DataTableShowcase() {
           pageIndex: 0,
           pageSize: 5,
           rowCount: filteredRows.length,
-          pageCount: 1,
-          pageSizeOptions: [5],
+          pageCount: Math.max(Math.ceil(filteredRows.length / 5), 1),
+          pageSizeOptions: [5, 10],
           onPageChange: () => undefined,
           onPageSizeChange: () => undefined,
         }}

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,
 } 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>

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",