tembro 3.1.1 → 3.1.5

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

@@ -1,90 +0,0 @@
-export type DataTableDemoRow = {
-  invoice: string
-  order: string
-  customer: string
-  owner: string
-  channel: string
-  status: "Paid" | "Review" | "Draft" | "Overdue"
-  stock: number
-  items: number
-  amount: string
-  amountValue: number
-  trend: "up" | "down" | "steady"
-  updatedAt: string
-}
-
-export type DataTableDemoToolbarAction = {
-  label: string
-  variant: "default" | "outline"
-}
-
-export type DataTableDemoPreset = {
-  value: "all" | "finance" | "at-risk"
-  label: string
-  description: string
-}
-
-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/premium/data-table-parts/index.ts

@@ -1,9 +0,0 @@
-export { DataTablePartShowcase } from "./showcase"
-export {
-  dataTableActionsColumnMock,
-  dataTablePaginationMock,
-  dataTableRowActionsMock,
-  dataTableSavedFiltersMock,
-  dataTableSelectColumnMock,
-  dataTableToolbarMock,
-} from "./mock"

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

@@ -1,63 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-function createDataTablePartMock(
-  slug: string,
-  component: string,
-  summary: string
-): ComponentDemoMock {
-  return {
-    code: `import { ${component} } from "tembro"\n\nexport function Example() {\n  return <${component} />\n}`,
-    cliCommand: `npx tembro add ${slug}`,
-    highlights: [
-      `${component} preview inside a real DataTable shell`,
-      "Interaction-focused route",
-      "Selection and row behavior proof",
-    ],
-    scenarios: [
-      { title: "Route-level preview", description: summary },
-      { title: "Production context", description: "See the helper in the same shell where it is typically used." },
-      { title: "Behavior proof", description: "Verify how selection, toolbar and actions interact together." },
-    ],
-    capabilityNotes: [
-      "These routes are intentionally shown inside a real DataTable context instead of isolated fake markup.",
-      "Use them to understand interaction boundaries before wiring the helper into a product surface.",
-    ],
-  }
-}
-
-export const dataTablePaginationMock = createDataTablePartMock(
-  "data-table-pagination",
-  "DataTablePagination",
-  "Preview pagination behavior with the real DataTable shell."
-)
-
-export const dataTableToolbarMock = createDataTablePartMock(
-  "data-table-toolbar",
-  "DataTableToolbar",
-  "Preview search, visibility and table actions inside a live toolbar context."
-)
-
-export const dataTableRowActionsMock = createDataTablePartMock(
-  "data-table-row-actions",
-  "DataTableRowActions",
-  "Preview row-specific actions without breaking row click and selection."
-)
-
-export const dataTableActionsColumnMock = createDataTablePartMock(
-  "data-table-actions-column",
-  "createDataTableActionsColumn",
-  "Preview how the reusable actions column helper behaves in a real grid."
-)
-
-export const dataTableSelectColumnMock = createDataTablePartMock(
-  "data-table-select-column",
-  "createDataTableSelectColumn",
-  "Preview row selection behavior and bulk state separation."
-)
-
-export const dataTableSavedFiltersMock = createDataTablePartMock(
-  "data-table-saved-filters",
-  "DataTableSavedFilters",
-  "Preview saved table views and named filter state restoration."
-)
-

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

@@ -1,218 +0,0 @@
-import * as React from "react"
-import type { ColumnDef, Row, RowSelectionState } from "@tanstack/react-table"
-
-import {
-  Badge,
-  Button,
-  DataTable,
-  DataTableBulkActions,
-  DataTableColumnVisibilityMenu,
-  DataTableSortableHeader,
-  DataTableViewPresets,
-  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"
-
-import type { ComponentDemoProps } from "../types"
-
-export type DataTablePartSlug =
-  | "data-table-pagination"
-  | "data-table-toolbar"
-  | "data-table-row-actions"
-  | "data-table-actions-column"
-  | "data-table-select-column"
-  | "data-table-saved-filters"
-
-const rows = buildDataTableDemoRows(6)
-
-function buildColumns(setNotes: (value: string) => void): ColumnDef<DataTableDemoRow>[] {
-  return [
-    createDataTableSelectColumn<DataTableDemoRow>(),
-    {
-      accessorKey: "invoice",
-      header: ({ column }) => <DataTableSortableHeader column={column}>Invoice</DataTableSortableHeader>,
-    },
-    {
-      accessorKey: "customer",
-      header: ({ column }) => <DataTableSortableHeader column={column}>Customer</DataTableSortableHeader>,
-    },
-      {
-        accessorKey: "status",
-        header: "Status",
-      cell: ({ row }) => (
-        <Badge variant={row.original.status === "Paid" ? "secondary" : row.original.status === "Review" ? "outline" : "destructive"}>
-          {row.original.status}
-        </Badge>
-      ),
-    },
-    {
-      accessorKey: "amount",
-      header: ({ column }) => <DataTableSortableHeader column={column}>Amount</DataTableSortableHeader>,
-    },
-    createDataTableActionsColumn<DataTableDemoRow>({
-      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`) },
-      ],
-    }),
-  ]
-}
-
-export function DataTablePartShowcase({
-  slug,
-}: ComponentDemoProps & {
-  slug: DataTablePartSlug
-}) {
-  const [search, setSearch] = React.useState("")
-  const [view, setView] = React.useState<"all" | "finance" | "at-risk">("all")
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
-  const [columnVisibility, setColumnVisibility] = React.useState({})
-  const [notes, setNotes] = React.useState("Ready")
-  const [pageIndex, setPageIndex] = React.useState(0)
-
-  const filteredRows = React.useMemo(() => {
-    const query = search.trim().toLowerCase()
-    let nextRows = rows
-
-    if (view === "finance") nextRows = nextRows.filter((row) => row.status === "Paid" || row.status === "Review")
-    if (view === "at-risk") nextRows = nextRows.filter((row) => row.status === "Draft" || row.status === "Overdue")
-    if (!query) return nextRows
-
-    return nextRows.filter((row) =>
-      [row.invoice, row.customer, row.owner, row.channel, row.amount].join(" ").toLowerCase().includes(query)
-    )
-  }, [search, view])
-
-  const selectedRows = React.useMemo(() => filteredRows.filter((_, index) => rowSelection[index]), [filteredRows, rowSelection])
-  const columns = React.useMemo(() => buildColumns(setNotes), [])
-
-  const titleMap: Record<DataTablePartSlug, string> = {
-    "data-table-pagination": "Pagination route",
-    "data-table-toolbar": "Toolbar route",
-    "data-table-row-actions": "Row actions route",
-    "data-table-actions-column": "Actions column route",
-    "data-table-select-column": "Select column route",
-    "data-table-saved-filters": "Saved filters route",
-  }
-
-  const descriptionMap: Record<DataTablePartSlug, string> = {
-    "data-table-pagination": "Pagination should be readable in isolation, but still feel like part of a production table shell.",
-    "data-table-toolbar": "Toolbar route should prove search, visibility and action layout without needing the whole docs page around it.",
-    "data-table-row-actions": "Row action interactions should stay isolated from row click and selection behavior.",
-    "data-table-actions-column": "Actions column should show how the helper sits inside a real DataTable definition.",
-    "data-table-select-column": "Select column route should prove bulk selection and row state separation.",
-    "data-table-saved-filters": "Saved filters should restore named views and stay aligned with other table controls.",
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-        <div className="flex flex-wrap gap-2">
-          <Badge variant="outline">{titleMap[slug]}</Badge>
-          <Badge variant="outline">{filteredRows.length} rows</Badge>
-          <Badge variant="outline">{selectedRows.length} selected</Badge>
-        </div>
-        <p className="mt-3 text-sm font-medium aui-text-strong">{titleMap[slug]}</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">{descriptionMap[slug]}</p>
-      </div>
-
-      {slug === "data-table-saved-filters" ? (
-        <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4">
-          <DataTableSavedFilters
-            savedFilters={[
-              { id: "all", name: "All invoices", filters: {} },
-              { id: "finance", name: "Finance review", filters: {} },
-              { id: "risk", name: "At risk", filters: {} },
-            ]}
-            activeFilterId={view === "all" ? "all" : view === "finance" ? "finance" : "risk"}
-            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>
-      ) : null}
-
-      {slug === "data-table-toolbar" ? (
-        <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4">
-          <div className="flex flex-wrap gap-2">
-            <DataTableViewPresets
-              value={view}
-              onValueChange={(value) => setView((value as typeof view | undefined) ?? "all")}
-              presets={dataTableDemoPresets}
-              size="sm"
-            />
-            <div className="w-full max-w-[320px]">
-              <Input type="search" value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
-            </div>
-          </div>
-        </div>
-      ) : null}
-
-      <DataTable
-        columns={columns}
-        data={filteredRows}
-        getRowId={(row) => row.invoice}
-        rowSelection={rowSelection}
-        onRowSelectionChange={setRowSelection}
-        columnVisibility={columnVisibility}
-        onColumnVisibilityChange={setColumnVisibility}
-        enableRowSelection
-        striped
-        bordered
-        stickyHeader
-        toolbarProps={(table) => ({
-          title: "Invoices",
-          description: "Premium subroute preview for reusable DataTable parts.",
-          search: <Input type="search" value={search} onValueChange={setSearch} placeholder="Search rows..." />,
-          actions: (
-            <div className="flex items-center gap-2">
-              <DataTableColumnVisibilityMenu table={table} />
-              <Button size="sm" variant="outline" onClick={() => setNotes("Toolbar export prepared")}>
-                Export
-              </Button>
-            </div>
-          ),
-          selectionActions: (
-            <DataTableBulkActions
-              rows={table.getSelectedRowModel().rows.map((row) => row.original)}
-              actions={[
-                { key: "export", label: "Export selected", onSelect: (items) => setNotes(`${items.length} rows exported`) },
-              ]}
-              onClearSelection={() => setRowSelection({})}
-            />
-          ),
-        })}
-        pagination={{
-          manual: true,
-          pageIndex,
-          pageSize: 5,
-          rowCount: filteredRows.length,
-          pageCount: Math.max(Math.ceil(filteredRows.length / 5), 1),
-          pageSizeOptions: [5, 10],
-          onPageChange: setPageIndex,
-          onPageSizeChange: () => undefined,
-        }}
-      />
-
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Focused feature</p>
-          <p className="mt-2 aui-text-muted">{titleMap[slug]}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Interaction proof</p>
-          <p className="mt-2 aui-text-muted">{notes}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Selection</p>
-          <p className="mt-2 aui-text-muted">{selectedRows.length} active rows</p>
-        </div>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,37 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dateInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState("2026-06-19")
-
-  return (
-    <Input
-      kind="date"
-      value={value}
-      onValueChange={setValue}
-      min="2026-06-01"
-      max="2026-12-31"
-      placeholder="YYYY-MM-DD"
-    />
-  )
-}`,
-  htmlCode: '<label for="date">Date</label><input id="date" type="text" value="2026-06-19" placeholder="YYYY-MM-DD" />',
-  cliCommand: "npx tembro add input",
-  highlights: ["ISO-like string format assumptions", "min/max constraints", "Controlled editing", "Clear disabled behavior"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
-  scenarios: [
-    { title: "Birth date", description: "Enforce a valid date window with min/max." },
-    { title: "Report filter", description: "Use as single date boundary for dashboards." },
-    { title: "Default timezone", description: "Keep string values and normalize at API boundary." },
-    { title: "Locked fields", description: "Disable editing during restricted status windows." },
-  ],
-  capabilityNotes: [
-    "Store normalized date string outside the component for stable API integration.",
-    "Show explicit range with helper text when min/max are enforced.",
-    "Validate parsed date and format on submit as an app-level safety layer.",
-    "Align placeholder format with your backend contract (ISO/locale).",
-  ],
-}

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

@@ -1,24 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-export function DateInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState("2026-06-19")
-
-  return (
-    <div className="space-y-4">
-      <Input
-        kind="date"
-        value={value}
-        onValueChange={(nextValue: string) => setValue(nextValue)}
-        min="2026-06-01"
-        max="2026-12-31"
-      />
-      <p className="aui-text-subtle text-sm">Value: {value || "—"}</p>
-      <p className="aui-text-muted text-sm">Mode: {mode}</p>
-    </div>
-  )
-}
-

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

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

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

@@ -1,37 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dateRangeInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-30" })
-
-  return (
-    <Input
-      kind="date-range"
-      value={value}
-      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
-      fromInputProps={{ min: "2026-06-01" }}
-      toInputProps={{ max: "2026-12-31" }}
-      required
-    />
-  )
-}`,
-  htmlCode: '<label for="date-range">Date range</label><input id="date-range" type="text" value="2026-06-01 to 2026-06-30" />',
-  cliCommand: "npx tembro add input",
-  highlights: ["from/to object contract", "range behavior", "min/max boundaries", "single source of truth formatting"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Billing period", description: "Keep report windows with explicit start/end boundaries." },
-    { title: "Dashboard filters", description: "Use range to fetch metrics for a period." },
-    { title: "Date lock", description: "Enforce required bounds while user is in restricted flow." },
-    { title: "Export window", description: "Share range object to backend for date-interval export." },
-  ],
-  capabilityNotes: [
-    "Treat partial ranges as invalid until both ends are present.",
-    "Validate from <= to at app layer to avoid inverted ranges.",
-    "Normalize all range values to canonical storage format.",
-    "Show user hint text for format and required bounds.",
-  ],
-}

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

@@ -1,24 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-export function DateRangeInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-30" })
-
-  return (
-    <div className="space-y-4">
-      <Input
-        kind="date-range"
-        value={value}
-        onValueChange={(nextValue: { from?: string | null; to?: string | null }) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
-        fromInputProps={{ min: "2026-06-01" }}
-        toInputProps={{ max: "2026-12-31" }}
-      />
-      <p className="aui-text-subtle text-sm">Range: {value.from} → {value.to}</p>
-      <p className="aui-text-muted text-sm">Mode: {mode}</p>
-    </div>
-  )
-}
-

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

@@ -1,3 +0,0 @@
-export { descriptionsMock } from "./mock"
-export { DescriptionsShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/descriptions/mock.ts

@@ -1,31 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const descriptionsMock: ComponentDemoMock = {
-  code: `import { Descriptions } from "tembro"
-
-export function Example() {
-  return (
-    <Descriptions
-      title="Project profile"
-      extra={<span className="text-sm text-muted-foreground">Draft</span>}
-      items={[
-        { key: "owner", label: "Owner", value: "Azamat UI Team" },
-        { key: "status", label: "Status", value: "In review" },
-        { key: "release", label: "Release", value: "v0.3.27", span: 2 },
-        { key: "stack", label: "Tech", value: "React + Tailwind" },
-      ]}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add descriptions",
-  highlights: [
-    "Title and metadata layout in a compact two-axis grid",
-    "Bordered style with configurable columns",
-    "Simple API for label and value metadata",
-  ],
-  scenarios: [
-    { title: "Overview", description: "Use for project metadata and entity summary blocks." },
-    { title: "Admin views", description: "Keep important fields readable in dense dashboard tables." },
-  ],
-}
-

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

@@ -1,45 +0,0 @@
-import * as React from "react"
-
-import { Button, Descriptions } from "@/index"
-
-export function DescriptionsShowcase() {
-  const [columns, setColumns] = React.useState<1 | 2 | 3 | 4>(3)
-  const [bordered, setBordered] = React.useState(true)
-
-  return (
-    <div className="space-y-5">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={columns === 1 ? "default" : "outline"} onClick={() => setColumns(1)}>
-          1 col
-        </Button>
-        <Button size="sm" variant={columns === 2 ? "default" : "outline"} onClick={() => setColumns(2)}>
-          2 col
-        </Button>
-        <Button size="sm" variant={columns === 3 ? "default" : "outline"} onClick={() => setColumns(3)}>
-          3 col
-        </Button>
-        <Button size="sm" variant={columns === 4 ? "default" : "outline"} onClick={() => setColumns(4)}>
-          4 col
-        </Button>
-        <Button size="sm" variant={bordered ? "default" : "outline"} onClick={() => setBordered((value) => !value)}>
-          {bordered ? "Bordered" : "Unbordered"}
-        </Button>
-      </div>
-
-      <Descriptions
-        title="Project profile"
-        extra={<span className="text-sm text-muted-foreground">Draft</span>}
-        bordered={bordered}
-        columns={columns}
-        items={[
-          { key: "owner", label: "Owner", value: "Azamat UI Team" },
-          { key: "status", label: "Status", value: "In review" },
-          { key: "release", label: "Release", value: "v0.3.27", span: 2 },
-          { key: "stack", label: "Tech", value: "React + Tailwind" },
-          { key: "source", label: "Source", value: "Package-first components", span: 4 },
-        ]}
-      />
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/hover-card/index.ts

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

package/packages/cli/vendor/src/showcase/premium/hover-card/mock.ts

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const hoverCardMock: ComponentDemoMock = {
-  code: `import { Avatar, HoverCard } from "tembro"
-
-export function Example() {
-  return (
-    <HoverCard
-      trigger={<Avatar fallback="AJ" />}
-      content={<div className="space-y-1"><p className="font-medium">Azamat</p><p className="text-sm text-muted-foreground">Design system owner</p></div>}
-    />
-  )
-}`,
-  htmlCode: `<div data-slot="hover-card"></div>`,
-  cliCommand: "npx tembro add hover-card",
-  highlights: ["Entity preview", "Hover + focus", "Secondary context", "Compact detail card"],
-  relatedBlockSlugs: ["crm-dashboard", "users-table", "settings-form"],
-  scenarios: [
-    { title: "User preview", description: "Reveal compact profile details without opening a full panel." },
-    { title: "Card summary", description: "Useful for metrics and owners in dense dashboard layouts." },
-    { title: "Secondary context", description: "Show supporting data only when the user intentionally pauses." },
-  ],
-  capabilityNotes: [
-    "HoverCard is for richer secondary context than Tooltip.",
-    "Keep content compact; if users need actions, switch to Popover.",
-    "Always ensure trigger remains meaningful without the reveal card.",
-    "Support focus states so keyboard users can access the same content.",
-  ],
-}
-