tembro 2.0.4 → 2.0.5

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

@@ -17,7 +17,9 @@ const loadOptions = async (query: string): Promise<typeof workspaceOptions> => {
 
 export function AsyncSelectShowcase() {
   const [value, setValue] = useState("")
+  const [teamValues, setTeamValues] = useState<string[]>(["north", "west"])
   const activeOption = routeWorkspaceOptions.find((item) => item.value === value)
+  const selectedTeams = routeWorkspaceOptions.filter((item) => teamValues.includes(String(item.value)))
 
   return (
     <div className="space-y-5">
@@ -49,9 +51,39 @@ export function AsyncSelectShowcase() {
                 defaultOptions={workspaceOptions}
                 minSearchLength={1}
                 clearable
+                showSelectedDescription
                 debounceMs={220}
+                labels={{
+                  placeholder: "Choose service region",
+                  searchPlaceholder: "Search regions...",
+                }}
               />
             </div>
+            <div className="mt-5">
+              <p className="text-sm font-medium aui-text-muted">Multi select uses the same component</p>
+              <div className="mt-3">
+                <AsyncSelect
+                  isMulti
+                  value={teamValues}
+                  onValueChange={(nextValue) => setTeamValues(nextValue)}
+                  loadOptions={loadOptions}
+                  defaultOptions={workspaceOptions}
+                  minSearchLength={1}
+                  clearable
+                  showSelectAll
+                  maxSelected={3}
+                  maxVisibleTags={2}
+                  showSelectedDescription
+                  debounceMs={220}
+                  labels={{
+                    multiPlaceholder: "Choose team coverage",
+                    searchPlaceholder: "Search team regions...",
+                    selectedCount: (count) => `${count} regions selected`,
+                    hiddenSelected: (count) => `+${count} more`,
+                  }}
+                />
+              </div>
+            </div>
             <div className="mt-4 grid gap-3 md:grid-cols-3">
               <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
                 <p className="font-medium aui-text-strong">Type to query</p>
@@ -83,6 +115,10 @@ export function AsyncSelectShowcase() {
                 <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Team</p>
                 <p className="mt-2 text-sm font-medium aui-text-strong">{activeOption ? routeWorkspaceOptions.find((item) => item.value === activeOption.value)?.team : "No team"}</p>
               </div>
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Multi mode</p>
+                <p className="mt-2 text-sm font-medium aui-text-strong">{selectedTeams.length ? selectedTeams.map((item) => item.label).join(", ") : "No teams selected"}</p>
+              </div>
             </div>
           </div>
         </div>

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

@@ -55,11 +55,12 @@ function StateButton({
   }
 
   return (
-    <Button
-      variant={variant}
-      disabled={state === "Disabled"}
-      className={state === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : undefined}
-    >
+        <Button
+          variant={variant}
+          pressed={state === "Focus"}
+          disabled={state === "Disabled"}
+          className={state === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : undefined}
+        >
       {state}
     </Button>
   )
@@ -127,6 +128,7 @@ export function ButtonShowcase() {
               <Button variant="outline">Preview</Button>
               <Button
                 variant={selectedVariant}
+                fullWidth
                 loading={approvalState === "saving"}
                 loadingLabel="Approving"
                 onClick={approveInvoice}
@@ -136,6 +138,25 @@ export function ButtonShowcase() {
             </div>
           </div>
         </div>
+
+        <div className="mt-6 grid gap-3 md:grid-cols-4">
+          <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+            <p className="font-medium aui-text-strong">Primary</p>
+            <p className="mt-2 leading-6 aui-text-muted">Main action with filled emphasis.</p>
+          </div>
+          <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+            <p className="font-medium aui-text-strong">Secondary</p>
+            <p className="mt-2 leading-6 aui-text-muted">Alternative action without stealing focus.</p>
+          </div>
+          <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+            <p className="font-medium aui-text-strong">Outline</p>
+            <p className="mt-2 leading-6 aui-text-muted">Low-emphasis action for previews and neutral workflows.</p>
+          </div>
+          <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+            <p className="font-medium aui-text-strong">Destructive</p>
+            <p className="mt-2 leading-6 aui-text-muted">Reserved for archive, delete, or dangerous transitions.</p>
+          </div>
+        </div>
       </section>
 
       <section className={panelClass}>

package/packages/cli/vendor/src/showcase/premium/button-group/showcase.tsx

@@ -9,6 +9,7 @@ const panelClass =
 
 export function ButtonGroupShowcase({ mode }: ComponentDemoProps) {
   const [view, setView] = React.useState<"list" | "board" | "timeline">("list")
+  const [density, setDensity] = React.useState<"compact" | "comfortable">("comfortable")
 
   return (
     <div className="space-y-5">
@@ -31,16 +32,32 @@ export function ButtonGroupShowcase({ mode }: ComponentDemoProps) {
       <div className="grid gap-4 xl:grid-cols-2">
         <section className={panelClass}>
           <ButtonGroup
+            value={view}
+            onValueChange={(next) => setView(next as typeof view)}
             items={[
-              { key: "list", label: "List", variant: view === "list" ? "default" : "outline", onClick: () => setView("list") },
-              { key: "board", label: "Board", variant: view === "board" ? "default" : "outline", onClick: () => setView("board") },
-              { key: "timeline", label: "Timeline", variant: view === "timeline" ? "default" : "outline", onClick: () => setView("timeline") },
+              { key: "list", label: "List", description: "Rows first" },
+              { key: "board", label: "Board", description: "Kanban view" },
+              { key: "timeline", label: "Timeline", description: "Chronology" },
             ]}
           />
+          <div className="mt-4">
+            <ButtonGroup
+              value={density}
+              onValueChange={(next) => setDensity(next as typeof density)}
+              size="xs"
+              activeVariant="secondary"
+              allowDeselect
+              items={[
+                { key: "comfortable", label: "Comfortable" },
+                { key: "compact", label: "Compact" },
+              ]}
+            />
+          </div>
         </section>
         <section className={panelClass}>
           <p className="text-sm font-medium aui-text-muted">Selected view</p>
           <p className="mt-3 text-base font-medium aui-text-strong">{view}</p>
+          <p className="mt-2 text-sm aui-text-muted">Density: {density || "none"}</p>
         </section>
       </div>
 

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

@@ -48,6 +48,9 @@ export function CalendarShowcase({ mode }: ComponentDemoProps) {
               disabledDates={blockedDates}
               numberOfMonths={monthCount}
               pagedNavigation
+              showClearShortcut
+              showTodayShortcut
+              showSelectionSummary
             />
           </div>
         </section>
@@ -63,6 +66,8 @@ export function CalendarShowcase({ mode }: ComponentDemoProps) {
                 min="2026-07-01"
                 max="2026-07-31"
                 disabledDates={blockedDates}
+                showClearShortcut
+                showSelectionSummary
               />
             </div>
           </section>

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

@@ -3,15 +3,17 @@ import * as React from "react"
 import { Button, Carousel, CarouselItem } from "@/index"
 
 const steps = [
-  { title: "Onboarding", text: "Guide quickly from first login." },
-  { title: "Components", text: "Review ready-made dashboard patterns." },
-  { title: "Release", text: "Publish, test, and iterate faster." },
+  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch" },
+  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library" },
+  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship" },
 ]
 
 export function CarouselShowcase() {
   const [showArrows, setShowArrows] = React.useState(true)
   const [showDots, setShowDots] = React.useState(true)
+  const [autoplay, setAutoplay] = React.useState(false)
   const [index, setIndex] = React.useState(0)
+  const [playing, setPlaying] = React.useState(false)
 
   return (
     <div className="space-y-5">
@@ -22,6 +24,23 @@ export function CarouselShowcase() {
         <Button size="sm" variant={showDots ? "default" : "outline"} onClick={() => setShowDots((value) => !value)}>
           {showDots ? "Hide" : "Show"} dots
         </Button>
+        <Button size="sm" variant={autoplay ? "default" : "outline"} onClick={() => setAutoplay((value) => !value)}>
+          {autoplay ? "Stop" : "Start"} autoplay
+        </Button>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        {steps.map((step, slideIndex) => (
+          <Button
+            key={step.title}
+            type="button"
+            variant={index === slideIndex ? "default" : "outline"}
+            className="justify-start"
+            onClick={() => setIndex(slideIndex)}
+          >
+            {slideIndex + 1}. {step.title}
+          </Button>
+        ))}
       </div>
 
       <Carousel
@@ -29,24 +48,33 @@ export function CarouselShowcase() {
         loop
         showArrows={showArrows}
         showDots={showDots}
+        autoplay={autoplay}
+        autoplayInterval={2200}
+        showPlaybackControl
         onIndexChange={(next) => setIndex(next)}
+        onAutoplayChange={setPlaying}
         previousLabel="Previous slide"
         nextLabel="Next slide"
       >
         {steps.map((step, slideIndex) => (
           <CarouselItem key={step.title}>
-            <div className="rounded-xl border border-border bg-card p-8">
-                <div className="flex items-start justify-between gap-3">
+            <div className="min-h-56 rounded-xl border border-border bg-card p-8">
+              <div className="flex items-start justify-between gap-3">
                 <div className="grid gap-2">
+                  <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-primary">{step.tone}</p>
                   <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">{`Slide ${slideIndex + 1}`}</p>
                   <h3 className="text-lg font-semibold text-foreground">{step.title}</h3>
                   <p className="text-sm text-muted-foreground">{step.text}</p>
                 </div>
+                <div className="rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground">
+                  {slideIndex + 1}/{steps.length}
+                </div>
               </div>
             </div>
           </CarouselItem>
         ))}
       </Carousel>
+      <div className="text-sm text-muted-foreground">Playback: {playing || autoplay ? "active" : "paused"}</div>
     </div>
   )
 }

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

@@ -8,6 +8,8 @@ const panelClass =
   "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
 
 export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
+  const triState = state.checked ? "checked" : state.textValue === "mixed" ? "mixed" : "unchecked"
+
   return (
     <div className="space-y-5">
       <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
@@ -27,13 +29,51 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
           </div>
         </div>
 
-        <div className="mt-6 grid gap-3">
+        <div className="mt-6 grid gap-3 md:grid-cols-3">
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox
+              size="lg"
+              allowIndeterminate
+              checked={triState === "mixed" ? "indeterminate" : triState === "checked"}
+              onCheckedStateChange={(checked) => {
+                if (checked === "indeterminate") {
+                  setState({ checked: false, textValue: "mixed" })
+                } else if (checked) {
+                  setState({ checked: true, textValue: "checked" })
+                } else {
+                  setState({ checked: false, textValue: "unchecked" })
+                }
+              }}
+            />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Approval state</p>
+              <p className="mt-1 text-sm aui-text-muted">Use `indeterminate` when not all child tasks are complete.</p>
+            </div>
+          </div>
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox size="lg" checked="indeterminate" />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Indeterminate</p>
+              <p className="mt-1 text-sm aui-text-muted">Useful for parent rows and bulk selection summaries.</p>
+            </div>
+          </div>
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox size="lg" checked disabled />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Disabled selected</p>
+              <p className="mt-1 text-sm aui-text-muted">Shows permission-locked completion without becoming clickable.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-3 grid gap-3">
           {checkboxDemoItems.map((item, index) => (
             <label key={item.label} htmlFor={item.id} className={`${panelClass} flex items-start gap-3`}>
               <Checkbox
                 id={item.id}
                 checked={index === 0 ? state.checked : item.checked}
                 disabled={item.disabled}
+                invalid={index === 0 && triState === "unchecked"}
                 onCheckedChange={index === 0 ? (checked) => setState({ checked: Boolean(checked) }) : undefined}
                 defaultChecked={index > 0 ? item.checked : undefined}
               />
@@ -51,10 +91,10 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
           <div>
             <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
             <h4 className="mt-2 text-lg font-semibold aui-text-strong">
-              Release checklist is {state.checked ? "enabled" : "disabled"}
+              Release checklist is {triState}
             </h4>
             <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Toggle the first row or use these actions to verify controlled checkbox behavior.
+              Toggle the first row or use these actions to verify controlled tri-state checkbox behavior.
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
@@ -64,6 +104,9 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
             <Button type="button" size="sm" variant="secondary" onClick={() => setState({ checked: false })}>
               Disable
             </Button>
+            <Button type="button" size="sm" variant="outline" onClick={() => setState({ checked: false, textValue: "mixed" })}>
+              Set mixed
+            </Button>
           </div>
         </div>
       </section>

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

@@ -2,20 +2,22 @@ import type { ComponentDemoMock } from "../types"
 
 export const clearableInputMock: ComponentDemoMock = {
   code: `import * as React from "react"
-import { ClearableInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = React.useState("workspace token")
 
   return (
-    <ClearableInput
+    <Input
       value={value}
       onValueChange={setValue}
       placeholder="Filter or paste value..."
+      clearable
       clearOnEscape
     />
   )
 }`,
+  cliCommand: "npx tembro add input",
   highlights: ["Inline clear action", "Escape-to-clear support", "Focus restore after clearing", "Small but high-frequency utility input"],
   scenarios: [
     { title: "Filter reset", description: "Let users clear a short filter without hunting for an extra reset button." },
@@ -23,7 +25,7 @@ export function Example() {
     { title: "Toolbar utility", description: "Use in dense admin bars where compact cleanup matters." },
   ],
   capabilityNotes: [
-    "Clearable input is strongest for short-lived values like filters and quick entry.",
+    "Prefer `Input clearable` for short-lived values like filters and quick entry.",
     "Escape clear is useful only when the input is frequently changed.",
     "Keep the field visually quiet so the clear action feels secondary.",
   ],

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, ClearableInput } from "@/index"
+import { Badge, Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -29,11 +29,14 @@ export function ClearableInputShowcase({ mode }: ComponentDemoProps) {
       </section>
 
       <section className={panelClass}>
-        <ClearableInput
+        <Input
           value={value}
           onValueChange={setValue}
           placeholder="Filter or paste value..."
+          clearable
           clearOnEscape
+          trailingAction={<span className="text-xs aui-text-muted">Live filter</span>}
+          replaceTrailingWhenClear={false}
         />
       </section>
 

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

@@ -9,6 +9,7 @@ const collapseItems = [
   {
     key: "permissions",
     title: "Permissions",
+    badge: <Badge variant="secondary">Core</Badge>,
     description: "Who can publish, archive, and rename library surfaces.",
     content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.",
   },
@@ -16,12 +17,15 @@ const collapseItems = [
     key: "release",
     title: "Release notes",
     description: "What changed in the current package cycle.",
+    meta: "July",
     content: "This release opened more public docs coverage for interactive form and overlay surfaces.",
   },
   {
     key: "handoff",
     title: "Handoff checklist",
     description: "What must be checked before a public release.",
+    disabled: true,
+    disabledReason: "Unlock after release branch is cut.",
     content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.",
   },
 ] as const

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