tembro 1.0.0

package/packages/cli/vendor/src/showcase/families/actions/index.ts

@@ -0,0 +1,2 @@
+export { ActionsFamilyShowcase } from "./showcase"
+export { actionsFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/actions/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const actionsFamilyMock: FamilyDemoMock = {
+  code: `import { ActionMenu, CopyButton, QuickActionGrid } from "tembro"\n\nexport function Example() {\n  return <QuickActionGrid items={[]} />\n}`,
+  highlights: ["Quick action grids", "Copy controls", "Context menus", "Dense admin actions"],
+  scenarios: [
+    { title: "Header shortcuts", description: "Place high-priority actions near page-level metrics and summaries." },
+    { title: "Row-level actions", description: "Expose copy, archive and duplicate flows without leaving the table." },
+    { title: "Launch panels", description: "Use action grids to surface related product modules quickly." },
+  ],
+  metrics: [
+    { label: "Exports", value: "3" },
+    { label: "Actions", value: "12+" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/actions/showcase.tsx

@@ -0,0 +1,36 @@
+import type { ChangeEvent } from "react"
+
+import { Badge, Button, Input } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+export function ActionsFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  const actions = ["Create invoice", "Duplicate template", "Copy code", "Assign owner", "Export CSV", "Open route"]
+  const visibleActions = actions.filter((item) => item.toLowerCase().includes(state.search.toLowerCase()))
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 md:flex-row md:items-center md:justify-between">
+        <Input value={state.search} onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ search: event.target.value })} placeholder="Search actions..." className="w-full md:max-w-xs" />
+        <div className="flex gap-3">
+          <Button variant="outline">Copy all</Button>
+          <Button>New action</Button>
+        </div>
+      </div>
+      <div className="grid gap-4 md:grid-cols-3">
+        {visibleActions.map((action, index) => (
+          <button key={action} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 text-left transition hover:bg-[color:var(--aui-surface-muted)]">
+            <div className="flex items-center justify-between">
+              <p className="aui-text-strong font-medium">{action}</p>
+              <Badge variant={index % 2 === 0 ? "secondary" : "outline"}>{index % 2 === 0 ? "Ready" : "Quick"}</Badge>
+            </div>
+            <p className="aui-text-muted mt-2 text-sm leading-6">Reference action surface with direct click behavior and clear context placement.</p>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+
+

package/packages/cli/vendor/src/showcase/families/calendar/index.ts

@@ -0,0 +1,2 @@
+export { CalendarFamilyShowcase } from "./showcase"
+export { calendarFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/calendar/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const calendarFamilyMock: FamilyDemoMock = {
+  code: `import { Calendar, DatePicker, DateRangePicker } from "tembro"\n\nexport function Example() {\n  return <DatePicker />\n}`,
+  highlights: ["Date picker", "Range picker", "Scheduling flows", "Reporting windows"],
+  scenarios: [
+    { title: "Campaign windows", description: "Select precise dates for launches and promotions." },
+    { title: "Report filters", description: "Use ranges in dashboards and exported summaries." },
+    { title: "Booking flows", description: "Pick availability with clear temporal constraints." },
+  ],
+  metrics: [
+    { label: "Exports", value: "4" },
+    { label: "Selection modes", value: "Single + range" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

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

@@ -0,0 +1,33 @@
+import { Badge, Button } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+export function CalendarFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <p className="aui-text-strong font-medium">Selected reporting window</p>
+          <p className="aui-text-muted mt-2 text-sm">June 1 - June 18, 2026</p>
+          <div className="mt-4 flex gap-2">
+            <Badge variant="secondary">Range</Badge>
+            <Badge variant="outline">Calendar</Badge>
+          </div>
+        </div>
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <p className="aui-text-strong font-medium">Booking slot</p>
+          <p className="aui-text-muted mt-2 text-sm">{`Step-linked selection state: ${state.step}`}</p>
+          <Button className="mt-4" onClick={() => setState({ step: state.step === 4 ? 1 : state.step + 1 })}>Advance date step</Button>
+        </div>
+      </div>
+      <div className="aui-text-subtle grid grid-cols-7 gap-2 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 text-center text-sm">
+        {Array.from({ length: 28 }).map((_, index) => (
+          <div key={index} className={`rounded-xl px-2 py-3 ${index === 11 || index === 12 || index === 13 ? "aui-surface-strong" : "bg-[color:var(--aui-page-bg-alt)]"}`}>
+            {index + 1}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/families/command/index.ts

@@ -0,0 +1,2 @@
+export { CommandFamilyShowcase } from "./showcase"
+export { commandFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/command/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const commandFamilyMock: FamilyDemoMock = {
+  code: `import { CommandPalette } from "tembro"\n\nexport function Example() {\n  return <CommandPalette />\n}`,
+  highlights: ["Keyboard navigation", "Quick search", "Shortcut-driven discovery", "Global command access"],
+  scenarios: [
+    { title: "Jump anywhere", description: "Navigate docs, blocks and playgrounds from one entry point." },
+    { title: "Find components", description: "Search by name, family or scenario quickly." },
+    { title: "Open actions", description: "Expose hidden product operations to power users." },
+  ],
+  metrics: [
+    { label: "Exports", value: "1" },
+    { label: "Shortcuts", value: "⌘K" },
+    { label: "Status", value: "Preview" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/command/showcase.tsx

@@ -0,0 +1,33 @@
+import type { ChangeEvent } from "react"
+
+import { Badge, Input } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+const commands = ["Open Button docs", "Open Data table route", "Create template", "Copy install command", "Search blocks"]
+
+export function CommandFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  const visible = commands.filter((item) => item.toLowerCase().includes(state.search.toLowerCase()))
+
+  return (
+    <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+      <div className="flex items-center gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3">
+        <Input value={state.search} onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ search: event.target.value })} placeholder="Type a command..." className="border-0 px-0 shadow-none ring-0 focus-visible:ring-0" />
+        <Badge variant="outline">⌘K</Badge>
+      </div>
+      <div className="mt-4 space-y-3">
+        {visible.map((item) => (
+          <div
+            key={item}
+            className="flex items-center justify-between rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-strong"
+          >
+            <span>{item}</span>
+            <Badge variant="secondary">Command</Badge>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+

package/packages/cli/vendor/src/showcase/families/data-table/data.ts

@@ -0,0 +1,66 @@
+import type { DataTableDemoPreset, DataTableDemoRow, DataTableDemoToolbarAction } from "./types"
+
+const customers = ["Acme Inc.", "Larana", "ShipFast", "Toolpad", "Pixels UI", "Northstar"] as const
+const owners = ["Azamat", "Malika", "Sardor", "Nodira", "Asadbek", "Kamola"] as const
+const channels = ["Direct", "Partner", "Direct", "Marketplace", "Marketplace", "Direct"] as const
+const statuses = ["Paid", "Review", "Draft", "Paid", "Overdue", "Paid"] as const
+const amounts = ["$2,400", "$1,280", "$980", "$4,120", "$860", "$3,620"] as const
+const amountValues = [2400, 1280, 980, 4120, 860, 3620] as const
+const updatedLabels = ["2h ago", "4h ago", "Today", "1d ago", "1d ago", "2d ago"] as const
+const stocks = [48, 16, 8, 63, 4, 28] as const
+const items = [12, 5, 3, 18, 2, 9] as const
+const trends = ["up", "steady", "down", "up", "down", "up"] as const
+
+export const dataTableDemoRows: DataTableDemoRow[] = customers.map((customer, index) => ({
+  invoice: `INV-00${index + 1}`,
+  order: `#448${index + 2}`,
+  customer,
+  owner: owners[index],
+  channel: channels[index],
+  status: statuses[index],
+  stock: stocks[index],
+  items: items[index],
+  amount: amounts[index],
+  amountValue: amountValues[index],
+  trend: trends[index],
+  updatedAt: updatedLabels[index],
+}))
+
+export function buildDataTableDemoRows(rowCount: number): DataTableDemoRow[] {
+  const safeRowCount = Math.max(1, Math.min(120, Math.floor(rowCount)))
+
+  return Array.from({ length: safeRowCount }, (_, index) => {
+    const base = dataTableDemoRows[index % dataTableDemoRows.length]
+    const cycle = Math.floor(index / dataTableDemoRows.length)
+    const invoiceNumber = String(index + 1).padStart(3, "0")
+    const orderNumber = 4482 + index
+    const amountValue = base.amountValue + cycle * 175
+    const amount = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(amountValue)
+
+    return {
+      ...base,
+      invoice: `INV-${invoiceNumber}`,
+      order: `#${orderNumber}`,
+      amount,
+      amountValue,
+      stock: base.stock + cycle * 2,
+      items: base.items + (index % 3 === 0 ? cycle : 0),
+      updatedAt: cycle === 0 ? base.updatedAt : `${cycle + 1}d ago`,
+    }
+  })
+}
+
+export const dataTableToolbarActions: DataTableDemoToolbarAction[] = ["Export CSV", "Sync"].map((label) => ({
+  label,
+  variant: label === "Export CSV" ? "default" : "outline",
+}))
+
+export const dataTableDemoPresets: DataTableDemoPreset[] = [
+  { value: "all", label: "All invoices", description: "All rows." },
+  { value: "finance", label: "Finance review", description: "Paid + review." },
+  { value: "at-risk", label: "At risk", description: "Draft + overdue." },
+]

package/packages/cli/vendor/src/showcase/families/data-table/index.ts

@@ -0,0 +1,4 @@
+export { DataTableFamilyShowcase } from "./showcase"
+export { dataTableFamilyMock } from "./mock"
+export { dataTableDemoRows, dataTableToolbarActions } from "./data"
+export type { DataTableDemoRow, DataTableDemoToolbarAction } from "./types"

package/packages/cli/vendor/src/showcase/families/data-table/mock.ts

@@ -0,0 +1,42 @@
+import type { FamilyDemoMock } from "../types"
+
+export const dataTableFamilyMock: FamilyDemoMock = {
+  code: `import {
+  DataTable,
+  DataTableBulkActions,
+  DataTableColumnVisibilityMenu,
+  DataTableSortableHeader,
+  createDataTableActionsColumn,
+  createDataTableSelectColumn,
+} from "tembro"
+
+export function Example() {
+  return (
+    <DataTable
+      columns={columns}
+      data={rows}
+      enableRowSelection
+      density="comfortable"
+      striped
+      bordered
+      stickyHeader
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+    />
+  )
+}`,
+  highlights: ["Toolbar actions", "Bulk actions", "Row click", "Visibility menu", "Density", "Preset-driven views", "Mobile strategy", "Pagination"],
+  scenarios: [
+    { title: "Finance operations", description: "Filter, sort and paginate transactional rows with export-ready actions." },
+    { title: "Mobile fallback", description: "Collapse rows into cards while preserving click and selection behaviors." },
+    { title: "Preset views", description: "Switch between all rows, finance-only and at-risk tables without rebuilding columns." },
+    { title: "Bulk handling", description: "Run row group actions with selection state and clear behavior." },
+  ],
+  metrics: [
+    { label: "Exports", value: "10+" },
+    { label: "Rows", value: "6 live" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+