tembro 3.0.0 → 3.1.5

package/packages/cli/vendor/src/showcase/premium/virtual-list/mock.ts

@@ -0,0 +1,32 @@
+import type { ComponentDemoMock } from "../types"
+
+export const virtualListMock: ComponentDemoMock = {
+  code: `import { VirtualList } from "tembro"
+
+const events = Array.from({ length: 10000 }, (_, index) => ({
+  id: index + 1,
+  title: \`Audit event \${index + 1}\`,
+}))
+
+export function Example() {
+  return (
+    <VirtualList
+      items={events}
+      height={420}
+      estimateSize={56}
+      getItemKey={(event) => event.id}
+      renderItem={(event) => <div>{event.title}</div>}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add virtual-list",
+  highlights: [
+    "Renders only visible DOM nodes",
+    "Dynamic row measurement and overscan",
+    "Stable item keys and accessible set metadata",
+  ],
+  scenarios: [
+    { title: "Audit log", description: "Keep tens of thousands of events responsive in a fixed viewport." },
+    { title: "Search results", description: "Render large result sets without mounting every result card." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/virtual-list/showcase.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { Badge, VirtualList } from "@/index"
+
+const events = Array.from({ length: 10_000 }, (_, index) => ({
+  id: index + 1,
+  title: `Audit event ${index + 1}`,
+  actor: ["Azamat", "Madina", "Jasur", "Nodira"][index % 4],
+  tone: index % 7 === 0 ? "Review" : "Completed",
+}))
+
+export function VirtualListShowcase() {
+  const [range, setRange] = React.useState("Calculating visible range…")
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+        <span>10,000 records</span>
+        <span>{range}</span>
+      </div>
+      <VirtualList
+        items={events}
+        height={420}
+        estimateSize={58}
+        getItemKey={(event) => event.id}
+        onRangeChange={({ startIndex, endIndex }) => {
+          setRange(`Mounted window: ${startIndex + 1}–${endIndex + 1}`)
+        }}
+        renderItem={(event) => (
+          <div className="flex min-h-14 items-center justify-between gap-3 rounded-lg border bg-card px-4 py-2.5 shadow-sm">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">{event.title}</div>
+              <div className="text-xs text-muted-foreground">Actor: {event.actor}</div>
+            </div>
+            <Badge variant={event.tone === "Review" ? "outline" : "secondary"}>{event.tone}</Badge>
+          </div>
+        )}
+      />
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/preview-catalog.tsx

@@ -1,65 +1,65 @@
-export type PreviewSurfaceTone = "dashboard" | "table" | "auth" | "product" | "command" | "calendar" | "upload"
-
-export type PreviewSurfaceRecord = {
-  slug: string
-  title: string
-  command: string
-  code: string
-  tone: PreviewSurfaceTone
-}
-
-export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
-  {
-    slug: "dashboard-01",
-    title: "Dashboard with sidebar",
-    command: "npx tembro init --template next --defaults\nnpx tembro add app-sidebar metric-grid data-table",
-    code: `import { AppSidebar, MetricGrid } from "tembro"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
-    tone: "dashboard",
-  },
-  {
-    slug: "table-01",
-    title: "Advanced invoice table",
-    command: "npx tembro add data-table",
-    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
-    tone: "table",
-  },
-  {
-    slug: "auth-01",
-    title: "Authentication screen",
-    command: "npx tembro add input button",
-    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
-    tone: "auth",
-  },
-  {
-    slug: "product-01",
-    title: "Commerce product detail",
-    command: "npx tembro add badge button",
-    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
-    tone: "product",
-  },
-  {
-    slug: "command-01",
-    title: "Command palette",
-    command: "npx tembro add command-palette",
-    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
-    tone: "command",
-  },
-  {
-    slug: "calendar-01",
-    title: "Calendar and date picker",
-    command: "npx tembro add calendar date-picker",
-    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
-    tone: "calendar",
-  },
-  {
-    slug: "upload-01",
-    title: "Upload workspace",
-    command: "npx tembro add file-upload image-upload",
-    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
-    tone: "upload",
-  },
-]
-
-export function getPreviewSurface(slug: string) {
-  return previewSurfaceCatalog.find((item) => item.slug === slug) ?? null
-}
+export type PreviewSurfaceTone = "dashboard" | "table" | "auth" | "product" | "command" | "calendar" | "upload"
+
+export type PreviewSurfaceRecord = {
+  slug: string
+  title: string
+  command: string
+  code: string
+  tone: PreviewSurfaceTone
+}
+
+export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
+  {
+    slug: "dashboard-01",
+    title: "Dashboard with sidebar",
+    command: "npx tembro init --template next --defaults\nnpx tembro add sidebar statistic data-table",
+    code: `import { Sidebar } from "tembro"\n\nexport function Dashboard01() {\n  return <Sidebar />\n}`,
+    tone: "dashboard",
+  },
+  {
+    slug: "table-01",
+    title: "Advanced invoice table",
+    command: "npx tembro add data-table",
+    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
+    tone: "table",
+  },
+  {
+    slug: "auth-01",
+    title: "Authentication screen",
+    command: "npx tembro add input button",
+    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
+    tone: "auth",
+  },
+  {
+    slug: "product-01",
+    title: "Commerce product detail",
+    command: "npx tembro add badge button",
+    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
+    tone: "product",
+  },
+  {
+    slug: "command-01",
+    title: "Command palette",
+    command: "npx tembro add command-palette",
+    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
+    tone: "command",
+  },
+  {
+    slug: "calendar-01",
+    title: "Calendar and date picker",
+    command: "npx tembro add calendar date-picker",
+    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
+    tone: "calendar",
+  },
+  {
+    slug: "upload-01",
+    title: "Upload workspace",
+    command: "npx tembro add file-upload image-upload",
+    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
+    tone: "upload",
+  },
+]
+
+export function getPreviewSurface(slug: string) {
+  return previewSurfaceCatalog.find((item) => item.slug === slug) ?? null
+}

package/packages/cli/vendor/src/showcase/preview-compositions.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { InfoCard } from "@/components/display/info-card"
+import { FileUpload } from "@/components/upload/file-upload"
+
+type PreviewStatCardProps = {
+  title?: React.ReactNode
+  value?: React.ReactNode
+  description?: React.ReactNode
+  trend?: { value: React.ReactNode; tone?: string }
+  helperText?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export function PreviewStatCard({ title, value, description, trend, helperText, icon }: PreviewStatCardProps) {
+  return <InfoCard eyebrow={title} title={value} description={description} icon={icon} status={trend?.value} content={helperText} density="compact" />
+}
+
+type PreviewPropertyItem = { key: string; label: React.ReactNode; value: React.ReactNode; description?: React.ReactNode }
+
+export function PreviewPropertyGrid({ items }: { items: PreviewPropertyItem[]; columns?: 1 | 2 | 3 | 4; bordered?: boolean }) {
+  return (
+    <dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {items.map((item) => (
+        <div key={item.key} className="min-w-0 border p-3">
+          <dt className="text-xs text-muted-foreground">{item.label}</dt>
+          <dd className="mt-1 break-words text-sm font-medium">{item.value}</dd>
+          {item.description ? <p className="mt-1 text-xs text-muted-foreground">{item.description}</p> : null}
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+export function PreviewFileDropzone({ label, description, accept }: { label?: React.ReactNode; description?: React.ReactNode; accept?: string }) {
+  return <FileUpload files={[]} onFilesChange={() => undefined} accept={accept} dropzoneLabel={label} dropzoneDescription={description} showFileList={false} />
+}

package/packages/cli/vendor/src/showcase/registry-quality.ts

@@ -17,17 +17,7 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
 
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
-  component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
-  component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
-
-  component("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
-  component("number-input", "NumberInput", "inputs", "Numeric entry for counts, thresholds, and reporting controls."),
-  component("phone-input", "PhoneInput", "inputs", "Phone input with stable raw and masked value handling."),
-  component("money-input", "MoneyInput", "inputs", "Currency entry for billing, finance and KPI editing flows."),
-  component("simple-select", "SimpleSelect", "inputs", "Static local-option select for dashboards and settings forms."),
   component("async-select", "AsyncSelect", "inputs", "Remote-loaded select for large server-backed option sets."),
-  component("combobox", "Combobox", "inputs", "Searchable local choice input for reassignment and command-like selection."),
   component("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
@@ -36,37 +26,30 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
 
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
-  component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
-  component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
 
   component("action-menu", "ActionMenu", "actions", "Compact dropdown action menu for rows and cards."),
   component("button-group", "ButtonGroup", "actions", "Grouped action buttons for view switching and compact controls."),
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 
-  component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("app-shell", "AppShell", "layout", "Responsive application shell with sidebar, header and content regions."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
-  component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
-
-  component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
-  component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
+  component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
+  component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
+  component("empty-state", "EmptyState", "patterns", "Focused empty and error state with clear next actions."),
 
   component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
 
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy."),
-  component("file-dropzone", "FileDropzone", "upload", "Lightweight file dropzone primitive for custom upload flows."),
 
   component("stepper", "Stepper", "wizard", "Clickable step navigation for multi-step forms."),
   component("wizard", "Wizard", "wizard", "Stepper, content and footer controls combined into one workflow."),
 
-  component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
-  component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
-])
+  component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
+  component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
+  component("page-toolbar", "PageToolbar", "patterns", "Reusable page toolbar for search, filters, view controls and actions."),
+  component("data-view", "DataView", "patterns", "Data view shell that combines toolbar, table, loading, error and empty states."),
+])