tembro 4.2.1 → 6.0.0

package/packages/cli/vendor/src/components/ui/toolbar/index.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
+
+import { cn } from "@/lib/utils"
+
+export type ToolbarProps = ToolbarPrimitive.Root.Props
+export type ToolbarGroupProps = ToolbarPrimitive.Group.Props
+export type ToolbarButtonProps = ToolbarPrimitive.Button.Props
+export type ToolbarLinkProps = ToolbarPrimitive.Link.Props
+export type ToolbarInputProps = ToolbarPrimitive.Input.Props
+export type ToolbarSeparatorProps = ToolbarPrimitive.Separator.Props
+
+function Toolbar({ className, orientation = "horizontal", ...props }: ToolbarProps) {
+  return (
+    <ToolbarPrimitive.Root
+      data-slot="toolbar"
+      orientation={orientation}
+      className={cn(
+        "flex min-w-0 items-center gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1 text-card-foreground shadow-xs",
+        orientation === "vertical" && "w-max flex-col items-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToolbarGroup({ className, ...props }: ToolbarGroupProps) {
+  return <ToolbarPrimitive.Group data-slot="toolbar-group" className={cn("flex min-w-0 items-center gap-1", className)} {...props} />
+}
+
+function ToolbarButton({ className, ...props }: ToolbarButtonProps) {
+  return (
+    <ToolbarPrimitive.Button
+      data-slot="toolbar-button"
+      className={cn("inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-muted data-[pressed]:text-foreground [&_svg]:size-4 [&_svg]:shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarLink({ className, ...props }: ToolbarLinkProps) {
+  return (
+    <ToolbarPrimitive.Link
+      data-slot="toolbar-link"
+      className={cn("inline-flex h-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarInput({ className, ...props }: ToolbarInputProps) {
+  return (
+    <ToolbarPrimitive.Input
+      data-slot="toolbar-input"
+      className={cn("h-8 min-w-32 rounded-[var(--radius-md)] border border-input bg-background px-2.5 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {
+  return <ToolbarPrimitive.Separator data-slot="toolbar-separator" className={cn("mx-1 h-5 w-px bg-border data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", className)} {...props} />
+}
+
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator }

package/packages/cli/vendor/src/index.ts

@@ -9,20 +9,27 @@ export * from './components/ui/badge'
 export * from './components/ui/tabs'
 export * from './components/ui/dialog'
 export * from './components/ui/dropdown-menu'
-export * from './components/ui/popover'
+export * from './components/ui/popover'
+export * from './components/ui/hover-card'
+export * from './components/ui/menubar'
+export * from './components/ui/navigation-menu'
 export * from './components/ui/select'
 export * from './components/ui/table'
 export * from './components/ui/accordion'
 export * from './components/ui/collapse'
-export * from './components/ui/skeleton'
+export * from './components/ui/command'
+export * from './components/ui/skeleton'
 export * from './components/ui/divider'
 export * from './components/ui/segmented-control'
 export * from './components/ui/spinner'
 export * from './components/ui/tooltip'
 export * from './components/ui/kbd'
-export * from './components/ui/radio-group'
-export * from './components/ui/scroll-box'
-export * from './components/ui/right-click-menu'
+export * from './components/ui/radio-group'
+export * from './components/ui/scroll-box'
+export * from './components/ui/right-click-menu'
+export * from './components/ui/number-field'
+export * from './components/ui/toggle-group'
+export * from './components/ui/toolbar'
 
 // Reusable groups
 export * from './components/actions/public'

package/packages/cli/vendor/src/public-component-surface.ts

@@ -16,9 +16,15 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "checkbox", registryName: "checkbox", surface: "documented" },
   { slug: "switch", registryName: "switch", surface: "documented" },
   { slug: "radio-group", registryName: "radio-group", surface: "documented" },
+  { slug: "number-field", registryName: "number-field", surface: "documented" },
+  { slug: "toggle-group", registryName: "toggle-group", surface: "documented" },
+  { slug: "toolbar", registryName: "toolbar", surface: "documented" },
   { slug: "overlay", registryName: "dialog", surface: "documented" },
   { slug: "dropdown-menu", registryName: "dropdown-menu", surface: "documented" },
   { slug: "popover", registryName: "popover", surface: "documented" },
+  { slug: "hover-card", registryName: "hover-card", surface: "documented" },
+  { slug: "menubar", registryName: "menubar", surface: "documented" },
+  { slug: "navigation-menu", registryName: "navigation-menu", surface: "documented" },
   { slug: "tooltip", registryName: "tooltip", surface: "documented" },
   { slug: "data-table", registryName: "data-table", surface: "documented" },
   { slug: "pagination", registryName: "pagination", surface: "documented" },
@@ -71,16 +77,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "image-cropper", registryName: "image-cropper", surface: "documented" },
 ] as const
 
-export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
-  { slug: "form-builder", registryName: "form-builder", surface: "standalone" },
-  { slug: "page-toolbar", registryName: "page-toolbar", surface: "standalone" },
-  { slug: "bulk-action-bar", registryName: "bulk-action-bar", surface: "standalone" },
-  { slug: "detail-layout", registryName: "detail-layout", surface: "standalone" },
-  { slug: "settings-page", registryName: "settings-page", surface: "standalone" },
-  { slug: "data-view", registryName: "data-view", surface: "standalone" },
-  { slug: "resource-page", registryName: "resource-page", surface: "standalone" },
-  { slug: "resource-detail-page", registryName: "resource-detail-page", surface: "standalone" },
-] as const
+export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [] as const
 
 export const publicComponentSurfaceEntries = [
   ...documentedPublicComponentSurfaces,

package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts

@@ -42,6 +42,8 @@ export const registryGroups: RegistryGroup[] = [
       component("dropdown-menu", "stable", "src/components/ui/dropdown-menu"),
       component("popover", "stable", "src/components/ui/popover"),
       component("tooltip", "preview", "src/components/ui/tooltip"),
+      component("hover-card", "stable", "src/components/ui/hover-card"),
+      component("menubar", "preview", "src/components/ui/menubar"),
       component("select", "stable", "src/components/ui/select"),
       component("table", "stable", "src/components/ui/table"),
       component("segmented-control", "preview", "src/components/ui/segmented-control"),
@@ -50,6 +52,8 @@ export const registryGroups: RegistryGroup[] = [
       component("kbd", "stable", "src/components/ui/kbd"),
       component("scroll-box", "stable", "src/components/ui/scroll-box"),
       component("right-click-menu", "stable", "src/components/ui/right-click-menu"),
+      component("toggle-group", "preview", "src/components/ui/toggle-group"),
+      component("toolbar", "preview", "src/components/ui/toolbar"),
       component("collapse", "preview", "src/components/ui/collapse"),
       component("command", "preview", "src/components/ui/command"),
       component("divider", "preview", "src/components/ui/divider"),
@@ -78,6 +82,7 @@ export const registryGroups: RegistryGroup[] = [
       component("inline-editable", "preview", "src/components/inputs/inline-editable.tsx"),
       component("json-input", "preview", "src/components/inputs/json-input.tsx"),
       component("time-picker", "preview", "src/components/inputs/time-picker.tsx"),
+      component("number-field", "preview", "src/components/ui/number-field"),
     ],
   },
   {
@@ -137,8 +142,7 @@ export const registryGroups: RegistryGroup[] = [
   {
     name: "feedback",
     components: [
-      component("loading-state", "stable", "src/components/feedback/loading-state.tsx"),
-      component("page-state", "preview", "src/components/feedback/page-state.tsx"),
+      component("state-view", "stable", "src/components/feedback/state-view.tsx"),
       component("alert", "preview", "src/components/feedback/alert.tsx"),
     ],
   },
@@ -153,15 +157,7 @@ export const registryGroups: RegistryGroup[] = [
   {
     name: "patterns",
     components: [
-      component("bulk-action-bar", "preview", "src/components/patterns/bulk-action-bar.tsx"),
-      component("data-view", "preview", "src/components/patterns/data-view.tsx"),
-      component("detail-layout", "preview", "src/components/patterns/detail-layout.tsx"),
       component("empty-state", "preview", "src/components/patterns/empty-state.tsx"),
-      component("form-builder", "preview", "src/components/patterns/form-builder.tsx"),
-      component("resource-detail-page", "preview", "src/components/patterns/resource-detail-page.tsx"),
-      component("resource-page", "preview", "src/components/patterns/resource-page.tsx"),
-      component("page-toolbar", "preview", "src/components/patterns/page-toolbar.tsx"),
-      component("settings-page", "preview", "src/components/patterns/settings-page.tsx"),
     ],
   },
   {
@@ -188,7 +184,13 @@ export const registryGroups: RegistryGroup[] = [
       component("saved-filter-select", "preview", "src/components/filters/saved-filter-select.tsx"),
     ],
   },
-  { name: "navigation", components: [component("pagination", "stable", "src/components/navigation/pagination.tsx")] },
+  {
+    name: "navigation",
+    components: [
+      component("navigation-menu", "preview", "src/components/ui/navigation-menu"),
+      component("pagination", "stable", "src/components/navigation/pagination.tsx"),
+    ],
+  },
   { name: "charts", components: [component("progress-circle", "stable", "src/components/charts/progress-circle.tsx")] },
   {
     name: "wizard",
@@ -221,7 +223,7 @@ export const componentRows: ComponentRow[] = [
 
 export const wizardSteps = [
   { id: "setup", title: "Setup", description: "init + theme", completed: true },
-  { id: "add", title: "Add", description: "105 registry components", completed: true },
+  { id: "add", title: "Add", description: "registry components", completed: true },
   { id: "test", title: "Test", description: "visible workbench" },
 ]
 

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@4.2.1 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@6.0.0 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@4.2.1" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@6.0.0" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@4.2.1",
+          label: "tembro@6.0.0",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/packages/cli/vendor/templates/showcase/src/showcase/sections/ComponentLivePreview.tsx

@@ -19,7 +19,7 @@ import { StatusLegend } from "@/components/display/status-legend"
 import { Tag, TagGroup } from "@/components/display/tag"
 import { Timeline } from "@/components/display/timeline"
 import { Alert } from "@/components/feedback/alert"
-import { LoadingState } from "@/components/feedback/loading-state"
+import { StateView } from "@/components/feedback/state-view"
 import { Pagination } from "@/components/navigation/pagination"
 import { EmptyState } from "@/components/patterns/empty-state"
 import { Badge } from "@/components/ui/badge"
@@ -283,7 +283,7 @@ function DirectComponentSurface({ group, component }: ComponentLivePreviewProps)
   if (group.name === "form") return <FormsSection />
   if (group.name === "display") return <DisplayPreview />
   if (group.name === "calendar" || group.name === "navigation") return group.name === "navigation" ? <Pagination page={2} pageCount={8} onPageChange={() => undefined} /> : <CalendarSection />
-  if (group.name === "feedback") return component.name === "alert" ? <Alert tone="success" title="Alert component" description="Rendered from feedback/alert." /> : <LoadingState label="LoadingState" description="Rendered from feedback/loading-state." />
+  if (group.name === "feedback") return component.name === "alert" ? <Alert tone="success" title="Alert component" description="Rendered from feedback/alert." /> : <StateView status="loading" title="StateView" description="Rendered from feedback/state-view." />
   if (group.name === "patterns") return <EmptyState title="EmptyState component" description="Rendered from patterns/empty-state." primaryAction={{ label: "Create item" }} secondaryAction={{ label: "Reset" }} />
   if (group.name === "wizard") return <WizardSection />
   if (group.name === "overlay") return <OverlaySection />

package/packages/cli/vendor/templates/showcase/src/showcase/sections/FormsSection.tsx

@@ -1,5 +1,5 @@
 import { ProgressCard } from "@/components/display/progress"
-import { LoadingState } from "@/components/feedback/loading-state"
+import { StateView } from "@/components/feedback/state-view"
 import { Rating } from "@/components/inputs/rating"
 import { RangeSlider, Slider } from "@/components/inputs/slider"
 import { Badge } from "@/components/ui/badge"
@@ -20,7 +20,7 @@ export function FormsSection() {
         </CardContent>
       </Card>
       <ProgressCard title="Form completeness" description="input, select, switch, textarea" value={86} tone="success" footer={<Badge label="forms" status="success" />} />
-      <LoadingState label="Loading state" description="Spinner/skeleton/progress state component." />
+      <StateView status="loading" title="Loading state" description="Spinner/skeleton/progress state component." />
     </div>
   )
 }

package/packages/cli/vendor/templates/styles/globals.css

@@ -1876,17 +1876,17 @@
   [data-slot="statistic-change"][data-trend="up"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
   [data-slot="statistic-change"][data-trend="down"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
 
-  [data-slot="page-state"] {
+  [data-slot="state-view"] {
     border-color: var(--aui-card-border, var(--border));
     border-radius: var(--aui-radius-panel);
     background: var(--card);
     box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
-  [data-slot="page-state-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
-  [data-slot="page-state"][data-tone="error"] [data-slot="page-state-icon"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
-  [data-slot="page-state"][data-tone="success"] [data-slot="page-state-icon"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
-  [data-slot="page-state"][data-tone="info"] [data-slot="page-state-icon"] { color: var(--aui-info-fg); background: var(--aui-info-bg); }
+  [data-slot="state-view-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
+  [data-slot="state-view"][data-tone="danger"] [data-slot="state-view-icon"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
+  [data-slot="state-view"][data-tone="success"] [data-slot="state-view-icon"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
+  [data-slot="state-view"][data-tone="info"] [data-slot="state-view-icon"] { color: var(--aui-info-fg); background: var(--aui-info-bg); }
 
   [data-slot="file-upload-dropzone"],
   [data-slot="file-upload-item"] {