tembro 2.0.3 → 2.0.5

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -7,7 +7,6 @@ import {
   FilterIcon,
   LayoutDashboardIcon,
   MoreHorizontalIcon,
-  SearchIcon,
   UploadCloudIcon,
 } from "lucide-react"
 
@@ -15,25 +14,17 @@ import {
   ActionMenu,
   AlertDialog,
   Alert,
-  AnchorNav,
   AsyncSelect,
   Badge,
   Button,
   ButtonGroup,
   Calendar,
-  ClearableInput,
-  ColorInput,
-  CommandPalette,
-  DialogActionButton,
-  DialogActions,
   DescriptionList,
   Drawer,
-  EntityCard,
   FileDropzone,
   FileUpload,
   ImageUpload,
   FilterBar,
-  FilterChips,
   InfoCard,
   Input,
   List,
@@ -96,65 +87,43 @@ type RegistryDemoDefinition = {
 }
 
 const registryDemoDefinitions = [
-  component("dialog-actions", "DialogActions", "overlay", "Modal footer action row with cancel, secondary and primary actions."),
   component("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
   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("clearable-input", "ClearableInput", "inputs", "Input with clear action, Escape handling and focus restore."),
   component("search-input", "SearchInput", "inputs", "Search field with icon, count, shortcut and debounce-friendly value handling."),
   component("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
   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."),
   component("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
-  component("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
-  component("description-list", "DescriptionList", "display", "Structured key-value details for entity, invoice and profile pages."),
   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("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-  component("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-  component("file-card", "FileCard", "display", "Compact file summary with state and actions."),
   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("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card."),
   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-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
-  component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
   component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
   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("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
   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("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("data-table-pagination", "DataTablePagination", "data-table", "Pagination control used by DataTable pages."),
-  component("data-table-toolbar", "DataTableToolbar", "data-table", "Toolbar surface for DataTable search, filters and actions."),
-  component("data-table-column-visibility-menu", "DataTableColumnVisibilityMenu", "data-table", "Column visibility menu pattern for table views."),
-  component("data-table-select-column", "DataTableSelectColumn", "data-table", "Selection column pattern for bulk table workflows."),
-  component("data-table-sortable-header", "DataTableSortableHeader", "data-table", "Sortable header trigger with clear visual state."),
-  component("data-table-row-actions", "DataTableRowActions", "data-table", "Row action menu for inspect, duplicate and archive operations."),
-  component("data-table-actions-column", "DataTableActionsColumn", "data-table", "Reusable actions column for DataTable definitions."),
-  component("data-table-bulk-actions", "DataTableBulkActions", "data-table", "Bulk action bar for selected rows."),
-  component("data-table-view-presets", "DataTableViewPresets", "data-table", "Saved table view presets for operational dashboards."),
   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.", "ImageUpload"),
   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("command-palette", "CommandPalette", "actions", "Keyboard command surface for global navigation and actions."),
   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."),
 ] satisfies RegistryDemoDefinition[]
@@ -211,7 +180,7 @@ function createMock(definition: RegistryDemoDefinition): ComponentDemoMock {
     scenarios: definition.scenarios,
     capabilityNotes: [
       `Add ${definition.slug} into your local source with the CLI.`,
-      `Import from your configured components alias after the file is copied.`,
+      "Import the public component surface from `tembro` in app code.",
     ],
   }
 }
@@ -219,7 +188,7 @@ function createMock(definition: RegistryDemoDefinition): ComponentDemoMock {
 function createCodeSnippet(definition: RegistryDemoDefinition) {
   const importName = definition.importName ?? definition.component
 
-  return `import { ${importName} } from "@/components/${definition.slug}"\n\nexport function Demo() {\n  return <${importName} />\n}`
+  return `import { ${importName} } from "tembro"\n\nexport function Demo() {\n  return <${importName} />\n}`
 }
 
 function RegistrySpecificShowcase({
@@ -288,10 +257,6 @@ function InputPreview({
     return <PasswordInput value="secret-token" onValueChange={onValueChange} placeholder="Password" />
   }
 
-  if (slug === "clearable-input") {
-    return <ClearableInput value={value} onValueChange={onValueChange} placeholder="Clearable input" />
-  }
-
   if (slug === "slider") {
     return <Slider label="Density" description="Tune content density." defaultValue={64} showValue />
   }
@@ -308,10 +273,6 @@ function InputPreview({
     return <OtpInput value={value.replace(/\D/g, "").slice(0, 6)} onValueChange={onValueChange} />
   }
 
-  if (slug === "color-input") {
-    return <ColorInput defaultValue="#22c55e" label="Accent color" description="Theme token preview." />
-  }
-
   if (slug === "tag-input") {
     return <TagInput defaultValue={["dashboard", "beta", "ops"]} placeholder="Add label" />
   }
@@ -397,18 +358,6 @@ function FormPreview({
 }
 
 function OverlayPreview({ slug }: { slug: string }) {
-  if (slug === "dialog-actions") {
-    return (
-      <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4">
-        <DialogActions align="end">
-          <DialogActionButton variant="ghost">Cancel</DialogActionButton>
-          <DialogActionButton variant="outline">Save draft</DialogActionButton>
-          <DialogActionButton>Publish</DialogActionButton>
-        </DialogActions>
-      </div>
-    )
-  }
-
   if (slug === "alert-dialog") {
     return (
       <AlertDialog
@@ -453,20 +402,6 @@ function NavigationPreview({ slug }: { slug: string }) {
     return <Pagination page={3} pageCount={9} onPageChange={() => undefined} />
   }
 
-  if (slug === "anchor-nav") {
-    return (
-      <AnchorNav
-        orientation="horizontal"
-        title="Sections"
-        items={[
-          { key: "overview", label: "Overview", href: "#overview", active: true },
-          { key: "usage", label: "Usage", href: "#usage" },
-          { key: "api", label: "API", href: "#api" },
-        ]}
-      />
-    )
-  }
-
   if (slug === "page-tabs") {
     return (
       <PageTabs
@@ -533,21 +468,6 @@ function FeedbackPreview({ slug }: { slug?: string }) {
 }
 
 function DisplayPreview({ slug }: { slug: string }) {
-  if (slug === "description-list") {
-    return (
-      <DescriptionList
-        title="Invoice details"
-        description="Structured facts with responsive columns."
-        items={[
-          { key: "id", label: "Invoice", value: "#4821" },
-          { key: "amount", label: "Amount", value: "$12,420" },
-          { key: "status", label: "Status", value: <DemoStatusBadge tone="success">Paid</DemoStatusBadge> },
-          { key: "owner", label: "Owner", value: "Finance team" },
-        ]}
-      />
-    )
-  }
-
   if (slug === "progress") {
     return <Progress label="Migration progress" description="Production rollout" value={68} tone="success" showValue />
   }
@@ -584,35 +504,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "delta-badge") {
-    return (
-      <div className="flex flex-wrap gap-2">
-        <Badge variant="secondary">+12.4%</Badge>
-        <Badge variant="outline">-3.1%</Badge>
-        <Badge variant="destructive">Risk</Badge>
-      </div>
-    )
-  }
-
-  if (slug === "entity-header") {
-    return (
-      <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-2">
-            <Badge variant="outline">Customer</Badge>
-            <div>
-              <h3 className="text-xl font-semibold">Acme Holdings</h3>
-              <p className="text-sm text-muted-foreground">Enterprise account with billing and admin ownership.</p>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm">Archive</Button>
-            <Button size="sm">Edit</Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
 
   if (slug === "notification-center") {
     return (
@@ -626,17 +517,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "entity-card" || slug === "file-card") {
-    return (
-      <EntityCard
-        title={slug === "file-card" ? "Design-spec.pdf" : "Azamat Workspace"}
-        description={slug === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route."}
-        status={<Badge variant="secondary">Live</Badge>}
-        meta={slug === "file-card" ? "2.4 MB" : "Updated 8 min ago"}
-        actions={<Button size="sm" variant="outline">Open</Button>}
-      />
-    )
-  }
 
   if (slug === "data-list") {
     return (
@@ -665,7 +545,7 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "trend-card" || slug === "comparison-card") {
+  if (slug === "trend-card") {
     return <StatCard title={slug === "trend-card" ? "Weekly revenue" : "Current vs previous"} value="$84.2k" description="Compared with last month" trend={{ value: "+12.4%", tone: "success" }} icon={<LayoutDashboardIcon />} />
   }
 
@@ -714,31 +594,6 @@ function ActionsPreview({
     )
   }
 
-  if (slug === "command-palette") {
-    return (
-      <div className="grid gap-3">
-        <div className="flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2">
-          <SearchIcon className="size-4 aui-text-muted" />
-          <span className="text-sm aui-text-muted">Command palette preview: search routes, components and actions.</span>
-        </div>
-        <CommandPalette
-          open={false}
-          onOpenChange={() => undefined}
-          groups={[
-            {
-              id: "navigation",
-              label: "Navigation",
-              items: [
-                { id: "docs", label: "Open docs", icon: <SearchIcon className="size-4" /> },
-                { id: "components", label: "Browse components", icon: <LayoutDashboardIcon className="size-4" /> },
-              ],
-            },
-          ]}
-        />
-      </div>
-    )
-  }
-
   if (slug === "button-group") {
     return (
       <ButtonGroup
@@ -764,31 +619,6 @@ function ActionsPreview({
     )
   }
 
-  if (slug === "filter-chips" || slug === "data-table-saved-filters") {
-    return (
-      <div className="grid gap-3">
-        <FilterChips
-          chips={[
-            { key: "status", label: "Status", value: "Active", tone: "success" },
-            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
-            { key: "region", label: "Region", value: "APAC", tone: "info" },
-          ]}
-          onRemove={() => undefined}
-          onClear={() => undefined}
-        />
-        {slug === "data-table-saved-filters" ? (
-          <ButtonGroup
-            attached={false}
-            items={[
-              { key: "default", label: "Default", variant: "secondary" },
-              { key: "billing", label: "Billing" },
-              { key: "ops", label: "Operations" },
-            ]}
-          />
-        ) : null}
-      </div>
-    )
-  }
 
   if (slug === "saved-filter-select") {
     return (
@@ -862,13 +692,8 @@ function LayoutPreview({ slug }: { slug: string }) {
 
 function DataTablePartsPreview({ slug }: { slug: string }) {
   const labels: Record<string, string> = {
-    "data-table-pagination": "Pagination footer",
-    "data-table-toolbar": "Search and filter toolbar",
     "data-table-column-visibility-menu": "Column visibility",
-    "data-table-select-column": "Row selection",
     "data-table-sortable-header": "Sortable header",
-    "data-table-row-actions": "Row actions",
-    "data-table-actions-column": "Actions column",
     "data-table-bulk-actions": "Bulk action bar",
     "data-table-view-presets": "Saved view presets",
   }

package/packages/cli/vendor/src/showcase/render-registry-preview.tsx

@@ -20,18 +20,15 @@ import {
   Button,
   ButtonGroup,
   Calendar,
-  ClearableInput,
   ColorInput,
   CommandPalette,
   DescriptionList,
   DialogActionButton,
   DialogActions,
   Drawer,
-  EntityCard,
   FileDropzone,
   FileUpload,
   FilterBar,
-  FilterChips,
   Input,
   List,
   NavTabs,
@@ -118,7 +115,7 @@ function InputPreview({
   }
 
   if (slug === "clearable-input") {
-    return <ClearableInput value={value} onValueChange={onValueChange} placeholder="Clearable input" />
+    return <Input value={value} onValueChange={onValueChange} placeholder="Clearable input" clearable />
   }
 
   if (slug === "slider") {
@@ -386,26 +383,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "entity-header") {
-    return (
-      <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-2">
-            <Badge variant="outline">Customer</Badge>
-            <div>
-              <h3 className="text-xl font-semibold">Acme Holdings</h3>
-              <p className="text-sm text-[color:var(--aui-page-muted)]">Enterprise account with billing and admin ownership.</p>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm">Archive</Button>
-            <Button size="sm">Edit</Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   if (slug === "notification-center") {
     return (
       <List
@@ -418,18 +395,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "entity-card" || slug === "file-card") {
-    return (
-      <EntityCard
-        title={slug === "file-card" ? "Design-spec.pdf" : "Azamat Workspace"}
-        description={slug === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route."}
-        status={<Badge variant="secondary">Live</Badge>}
-        meta={slug === "file-card" ? "2.4 MB" : "Updated 8 min ago"}
-        actions={<Button size="sm" variant="outline">Open</Button>}
-      />
-    )
-  }
-
   if (slug === "data-list") {
     return (
       <List
@@ -485,8 +450,12 @@ function ActionsPreview({
     return (
       <FilterBar
         search={<SearchInput value={state.textValue} onValueChange={(value) => setState({ textValue: value })} placeholder="Search invoices..." />}
-        activeCount={2}
         onReset={() => setState({ textValue: "" })}
+        chips={[
+          { key: "status", label: "Status", value: "Active", tone: "success" },
+          { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
+        ]}
+        onRemoveChip={() => undefined}
         filters={<Button variant="outline" size="sm"><FilterIcon data-icon="inline-start" />Status</Button>}
         actions={<Button size="sm">Export</Button>}
       />
@@ -543,28 +512,26 @@ function ActionsPreview({
     )
   }
 
-  if (slug === "filter-chips" || slug === "data-table-saved-filters") {
+  if (slug === "data-table-saved-filters") {
     return (
       <div className="grid gap-3">
-        <FilterChips
+        <FilterBar
           chips={[
             { key: "status", label: "Status", value: "Active", tone: "success" },
             { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
             { key: "region", label: "Region", value: "APAC", tone: "info" },
           ]}
-          onRemove={() => undefined}
-          onClear={() => undefined}
+          onRemoveChip={() => undefined}
+          onReset={() => undefined}
+        />
+        <ButtonGroup
+          attached={false}
+          items={[
+            { key: "default", label: "Default", variant: "secondary" },
+            { key: "billing", label: "Billing" },
+            { key: "ops", label: "Operations" },
+          ]}
         />
-        {slug === "data-table-saved-filters" ? (
-          <ButtonGroup
-            attached={false}
-            items={[
-              { key: "default", label: "Default", variant: "secondary" },
-              { key: "billing", label: "Billing" },
-              { key: "ops", label: "Operations" },
-            ]}
-          />
-        ) : null}
       </div>
     )
   }