tembro 2.0.5 → 2.1.0

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

@@ -15,7 +15,6 @@ import {
   ActionMenu,
   Alert,
   AlertDialog,
-  AnchorNav,
   Badge,
   Button,
   ButtonGroup,
@@ -42,7 +41,6 @@ import {
   QuickActionGrid,
   RangeSlider,
   Rating,
-  SearchInput,
   SectionHeader,
   Slider,
   StatusDot,
@@ -107,7 +105,7 @@ function InputPreview({
   const onValueChange = (nextValue: string) => setState({ textValue: nextValue })
 
   if (slug === "search-input") {
-    return <SearchInput value={value} onValueChange={onValueChange} resultCount={12} shortcut="Ctrl K" placeholder="Search customers..." />
+    return <Input type="search" value={value} onValueChange={onValueChange} resultCount={12} shortcut="Ctrl K" placeholder="Search customers..." />
   }
 
   if (slug === "password-input") {
@@ -163,7 +161,7 @@ function FormPreview({
       </label>
       <label className="grid gap-2">
         <span className="text-sm font-medium text-[color:var(--aui-page-foreground)]">Status</span>
-        <SearchInput value="Active customers" resultCount={7} readOnly />
+        <Input type="search" value="Active customers" resultCount={7} readOnly />
         <span className="text-xs text-emerald-500">Ready to submit</span>
       </label>
     </div>
@@ -227,20 +225,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
@@ -449,7 +433,7 @@ function ActionsPreview({
   if (slug === "filter-bar") {
     return (
       <FilterBar
-        search={<SearchInput value={state.textValue} onValueChange={(value) => setState({ textValue: value })} placeholder="Search invoices..." />}
+        search={<Input type="search" value={state.textValue} onValueChange={(value) => setState({ textValue: value })} placeholder="Search invoices..." />}
         onReset={() => setState({ textValue: "" })}
         chips={[
           { key: "status", label: "Status", value: "Active", tone: "success" },
@@ -599,7 +583,7 @@ function DataTablePartsPreview({ slug }: { slug: string }) {
   return (
     <div className="overflow-hidden rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] p-3">
-        <SearchInput value="" placeholder="Search rows..." className="max-w-xs" readOnly />
+        <Input type="search" value="" placeholder="Search rows..." className="max-w-xs" readOnly />
         <div className="flex gap-2">
           <Button variant="outline" size="sm"><FilterIcon data-icon="inline-start" />Filters</Button>
           <Button size="sm">Create</Button>
@@ -702,7 +686,7 @@ function PatternsPreview({ slug }: { slug: string }) {
           <StatCard title="Health" value="94%" trend={{ value: "Stable", tone: "default" }} />
         </div>
       }
-      filters={<FilterBar search={<SearchInput value="" placeholder="Search..." readOnly />} activeCount={1} />}
+      filters={<FilterBar search={<Input type="search" value="" placeholder="Search..." readOnly />} activeCount={1} />}
     >
       <ResourcePageSection title="Recent activity">
         <Timeline

package/packages/cli/vendor/src/showcase/site-data.tsx

@@ -170,6 +170,8 @@ const formRHFWrapperBasePropsRows: string[][] = [
   ["required", "boolean | \"*\" | FieldError", "false", "Marks field required in shell and optional validation path."],
   ["disabled", "boolean", "false", "Disables input and blocks interaction."],
   ["readOnly", "boolean", "false", "Allows viewing without edit; value remains controlled."],
+  ["success", "ReactNode", "-", "Optional success message rendered by the shared field shell."],
+  ["loading", "boolean", "false", "Shows a consistent loading message inside the shared field shell."],
   ["error", "string | FieldError | null", "-", "Optional error override instead of default form state message."],
 ]
 
@@ -369,8 +371,8 @@ const formControlComponentSlugs = new Set([
   "quantity-input",
 ])
 const overlayComponentSlugs = new Set(["dialog", "popover", "dropdown-menu", "tooltip", "right-click-menu", "confirm-dialog", "modal-shell", "sheet-shell", "alert-dialog", "drawer"])
-const layoutComponentSlugs = new Set(["sidebar", "app-sidebar", "app-shell", "sidebar-nav", "breadcrumbs", "page-header", "page-container", "app-header", "section-header", "sticky-footer-bar"])
-const feedbackComponentSlugs = new Set(["toast", "loading-state", "data-state", "result"])
+const layoutComponentSlugs = new Set(["sidebar", "app-sidebar", "sidebar-nav", "breadcrumbs", "page-header", "page-container", "section-header", "sticky-footer-bar"])
+const feedbackComponentSlugs = new Set(["toast", "loading-state", "page-state", "data-state", "result", "alert", "notification-center"])
 const patternComponentSlugs = new Set<string>([])
 
 const legacyComponentSlugAliases = new Map<string, string>([
@@ -1137,7 +1139,7 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
   {
     slug: "breadcrumbs",
     title: "Breadcrumbs",
-    description: "Navigation breadcrumbs with current context and optional custom link rendering.",
+    description: "Navigation breadcrumbs with current context, overflow collapse, and custom link rendering.",
     icon: ChevronRightIcon,
     category: "Components",
     status: "Stable",
@@ -1145,8 +1147,9 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
     propsRows: [
       ["items", "BreadcrumbItem[]", "-", "Breadcrumb sequence for navigation context."],
       ["separator", "ReactNode", "-", "Custom separator between items."],
+      ["maxItems", "number", "-", "Collapses middle items when the path gets too long."],
       ["renderLink", "(props) => ReactNode", "-", "Custom link renderer for each item."],
-      ["current", "boolean", "-", "Marks current step and disables navigation for it."],
+      ["currentItemLabel", "string", "-", "Accessible label for the current page item."],
     ],
     features: ["Navigation context", "Custom separators", "Custom links", "Current state support"],
   },
@@ -1262,7 +1265,7 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
   {
     slug: "loading-state",
     title: "Loading State",
-    description: "Simple loading placeholder block with label and description.",
+    description: "Scoped loading block with spinner, skeleton, or progress variants for real route and panel states.",
     icon: SparklesIcon,
     category: "Data Display",
     status: "Stable",
@@ -1271,9 +1274,11 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
       ["label", "ReactNode", "-", "Loading heading."],
       ["description", "ReactNode", "-", "Loading explanation text."],
       ["icon", "ReactNode", "-", "Optional loading icon."],
+      ["variant", "'spinner' | 'skeleton' | 'progress'", "'spinner'", "Visual loading style."],
+      ["progress", "number", "-", "Progress amount when `variant` is `progress`."],
       ["className", "string", "-", "Container class override."],
     ],
-    features: ["Skeleton alternative", "Section loading labels", "Minimal setup", "Custom icon"],
+    features: ["Spinner, skeleton and progress", "Section loading labels", "Scoped placeholders", "Custom icon"],
   },
   {
     slug: "result",
@@ -1313,7 +1318,7 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
   {
     slug: "toast",
     title: "Toast",
-    description: "Global transient messaging system with provider, placement and dismiss behavior.",
+    description: "Global transient messaging system with provider, stacking, promise states, placement and dismiss behavior.",
     icon: ShieldCheckIcon,
     category: "Components",
     status: "Stable",
@@ -1325,9 +1330,10 @@ const baseComponentCatalog: ComponentCatalogItem[] = [
       ["maxToasts", "number", "5", "Maximum number of visible toasts."],
       ["pauseOnHover", "boolean", "true", "Pause dismiss timer when hovered."],
       ["addToast", "(input) => string", "-", "API to push a toast from context."],
-      ["success/info/warning/error", "(input) => string", "-", "Tone helpers for common outcomes."],
+      ["success/info/warning/error/loading", "(input) => string", "-", "Tone helpers for common outcomes."],
+      ["promise", "(promise, messages) => Promise<T>", "-", "Tracks loading/success/error from async work."],
     ],
-    features: ["Provider setup", "Controlled duration", "Action buttons", "Placement options"],
+    features: ["Provider setup", "Stacking and duration", "Promise states", "Placement options"],
   },
   {
     slug: "table",
@@ -2098,7 +2104,7 @@ export const componentModuleCatalog: ComponentModuleItem[] = [
   {
     slug: "layout",
     title: "Application layout",
-    description: "Route-level shells, sidebars and headers that support real components instead of replacing them.",
+    description: "Route-level sidebars, breadcrumbs and page framing helpers that support real reusable components instead of replacing them.",
     icon: LayoutDashboardIcon,
     category: "Layout",
     exports: ["Sidebar", "SidebarNav", "Breadcrumbs", "PageContainer", "Section", "SectionHeader", "StickyFooterBar"],
@@ -2186,24 +2192,24 @@ export const componentModuleCatalog: ComponentModuleItem[] = [
   {
     slug: "notifications",
     title: "Notifications",
-    description: "Toast-based feedback surfaces for success, warnings and async completion states.",
+    description: "Toast and notification surfaces for transient feedback, async completion, and unread activity.",
     icon: BadgeIcon,
     category: "Overlay",
-    exports: ["Toast"],
+    exports: ["Toast", "NotificationCenter"],
     href: componentModulePath("notifications"),
     status: "Preview",
-    features: ["Toasts", "Transient feedback", "Status messaging"],
+    features: ["Toasts", "Promise feedback", "Unread activity", "Status messaging"],
   },
   {
     slug: "command",
     title: "Command",
-    description: "Command palette patterns for keyboard-driven discovery and navigation.",
+    description: "Command palette patterns for keyboard-driven discovery, search, grouped actions and async navigation.",
     icon: TerminalSquareIcon,
     category: "Workflow",
     exports: ["CommandPalette"],
     href: componentModulePath("command"),
     status: "Preview",
-    features: ["Command palette", "Keyboard discovery", "Quick navigation"],
+    features: ["Command palette", "Grouped actions", "Async search", "Keyboard discovery"],
   },
   {
     slug: "calendar",

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [
@@ -45,22 +45,22 @@
       "command-bar"
     ],
     "inputs": [
-      "number-input",
-      "money-input",
-      "phone-input",
       "async-select",
       "combobox",
-      "search-input",
-      "password-input",
       "masked-input",
-      "quantity-input",
-      "tag-input",
+      "money-input",
+      "number-input",
       "otp-input",
-      "slider",
-      "rating",
+      "password-input",
+      "phone-input",
+      "quantity-input",
       "quantity-stepper",
-      "inline-editable",
-      "simple-select"
+      "rating",
+      "search-input",
+      "simple-select",
+      "slider",
+      "tag-input",
+      "inline-editable"
     ],
     "form": [
       "form-field-shell",
@@ -120,11 +120,7 @@
       "saved-filter-select"
     ],
     "data-table": [
-      "data-table",
-      "data-table-bulk-actions",
-      "data-table-view-presets",
-      "data-table-column-visibility-menu",
-      "data-table-sortable-header"
+      "data-table"
     ],
     "calendar": [
       "calendar",
@@ -200,16 +196,22 @@
     "tooltip",
     "kbd",
     "sidebar",
+    "sidebar-nav",
     "breadcrumbs",
     "data-state",
     "loading-state",
     "progress",
+    "progress-circle",
     "metric-grid",
+    "stat-card",
     "activity-feed",
+    "data-list",
+    "user-card",
     "action-menu",
-    "date-picker",
-    "data-table",
-    "notification-center"
+    "filter-bar",
+    "trend-card",
+    "notification-center",
+    "command-bar"
   ],
   "recommendedByMode": {
     "foundation": [
@@ -235,8 +237,11 @@
       "breadcrumbs",
       "data-state",
       "loading-state",
+      "progress-circle",
+      "stat-card",
       "metric-grid",
       "activity-feed",
+      "user-card",
       "action-menu",
       "filter-bar",
       "date-picker",
@@ -249,6 +254,7 @@
       "form-select",
       "form-textarea",
       "form-switch",
+      "trend-card",
       "notification-center",
       "command-bar"
     ],
@@ -270,6 +276,9 @@
       "dialog",
       "form-field-shell",
       "data-table",
+      "calendar",
+      "date-picker",
+      "date-range-picker",
       "alert",
       "charts",
       "sidebar",
@@ -312,6 +321,19 @@
     ]
   },
   "migrationAliases": {
+    "clearable-input": "input",
+    "search-input": "input",
+    "password-input": "input",
+    "number-input": "input",
+    "money-input": "input",
+    "phone-input": "input",
+    "masked-input": "input",
+    "quantity-input": "input",
+    "date-input": "input",
+    "date-range-input": "input",
+    "simple-select": "select",
+    "combobox": "select",
+    "async-multi-select": "async-select",
     "form-async-select": "form-select",
     "app-sidebar": "sidebar",
     "smart-card": "info-card"

package/packages/cli/vendor/src/showcase/types.ts

@@ -6,7 +6,7 @@ export type ShowcaseDemoState = {
   checked: boolean
   switchOn: boolean
   selectValue: string
-  badgeVariant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  badgeVariant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
   cardCompact: boolean
   activeTab: "overview" | "activity" | "settings"
 }

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [
@@ -120,11 +120,7 @@
       "saved-filter-select"
     ],
     "data-table": [
-      "data-table",
-      "data-table-column-visibility-menu",
-      "data-table-sortable-header",
-      "data-table-bulk-actions",
-      "data-table-view-presets"
+      "data-table"
     ],
     "calendar": [
       "calendar",
@@ -280,6 +276,9 @@
       "dialog",
       "form-field-shell",
       "data-table",
+      "calendar",
+      "date-picker",
+      "date-range-picker",
       "alert",
       "charts",
       "sidebar",
@@ -322,6 +321,19 @@
     ]
   },
   "migrationAliases": {
+    "clearable-input": "input",
+    "search-input": "input",
+    "password-input": "input",
+    "number-input": "input",
+    "money-input": "input",
+    "phone-input": "input",
+    "masked-input": "input",
+    "quantity-input": "input",
+    "date-input": "input",
+    "date-range-input": "input",
+    "simple-select": "select",
+    "combobox": "select",
+    "async-multi-select": "async-select",
     "form-async-select": "form-select",
     "app-sidebar": "sidebar",
     "smart-card": "info-card"