tembro 4.2.1 → 5.0.0

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

@@ -1,9 +1 @@
-export * from './form-builder'
-export * from './resource-page'
-export * from './resource-detail-page'
 export * from "./empty-state"
-export * from "./page-toolbar"
-export * from "./bulk-action-bar"
-export * from "./detail-layout"
-export * from "./settings-page"
-export * from "./data-view"

package/packages/cli/vendor/src/components/patterns/public.ts

@@ -1,9 +1 @@
-export * from "./form-builder"
-export * from "./resource-page"
-export * from "./resource-detail-page"
 export * from "./empty-state"
-export * from "./page-toolbar"
-export * from "./bulk-action-bar"
-export * from "./detail-layout"
-export * from "./settings-page"
-export * from "./data-view"

package/packages/cli/vendor/src/components/ui/hover-card/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+
+import { cn } from "@/lib/utils"
+
+export type HoverCardProps = PreviewCardPrimitive.Root.Props
+export type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props
+export type HoverCardContentProps = PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "side" | "sideOffset"
+  >
+export type HoverCardArrowProps = PreviewCardPrimitive.Arrow.Props
+
+function HoverCard({ ...props }: HoverCardProps) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: HoverCardTriggerProps) {
+  if (!("render" in props) && React.isValidElement(props.children)) {
+    const { children, ...rest } = props
+    return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" render={children} {...rest} />
+  }
+
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  collisionPadding = 12,
+  side = "bottom",
+  sideOffset = 8,
+  ...props
+}: HoverCardContentProps) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50 outline-none"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 grid max-h-[min(var(--available-height),calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] origin-(--transform-origin) gap-3 overflow-y-auto rounded-[var(--radius-lg)] border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  )
+}
+
+function HoverCardArrow({ className, ...props }: HoverCardArrowProps) {
+  return (
+    <PreviewCardPrimitive.Arrow
+      data-slot="hover-card-arrow"
+      className={cn("z-50 flex size-3 rotate-45 border border-border bg-popover", className)}
+      {...props}
+    />
+  )
+}
+
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger }

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

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type MenubarProps = MenubarPrimitive.Props
+export type MenubarMenuProps = MenuPrimitive.Root.Props
+export type MenubarTriggerProps = MenuPrimitive.Trigger.Props
+export type MenubarContentProps = MenuPrimitive.Popup.Props &
+  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">
+export type MenubarItemProps = MenuPrimitive.Item.Props & { inset?: boolean; variant?: "default" | "destructive" }
+export type MenubarCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & { inset?: boolean }
+export type MenubarRadioGroupProps = MenuPrimitive.RadioGroup.Props
+export type MenubarRadioItemProps = MenuPrimitive.RadioItem.Props & { inset?: boolean }
+export type MenubarSubProps = MenuPrimitive.SubmenuRoot.Props
+export type MenubarSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }
+export type MenubarSeparatorProps = MenuPrimitive.Separator.Props
+export type MenubarLabelProps = React.ComponentProps<"div"> & { inset?: boolean }
+export type MenubarShortcutProps = React.ComponentProps<"span">
+
+const itemClassName =
+  "relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus-visible:bg-destructive/10 data-[variant=destructive]:hover:bg-destructive/10"
+
+function Menubar({ className, ...props }: MenubarProps) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn("flex h-10 items-center gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1 text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: MenubarMenuProps) {
+  return <MenuPrimitive.Root data-slot="menubar-menu" {...props} />
+}
+
+function MenubarTrigger({ className, ...props }: MenubarTriggerProps) {
+  return (
+    <MenuPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn("inline-flex h-8 items-center justify-center rounded-[var(--radius-md)] px-3 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({ className, align = "start", alignOffset = 0, side = "bottom", sideOffset = 6, ...props }: MenubarContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="isolate z-50 outline-none">
+        <MenuPrimitive.Popup
+          data-slot="menubar-content"
+          className={cn("z-50 min-w-48 origin-(--transform-origin) overflow-hidden rounded-[var(--radius-lg)] border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function MenubarItem({ className, inset, variant = "default", ...props }: MenubarItemProps) {
+  return <MenuPrimitive.Item data-slot="menubar-item" data-inset={inset || undefined} data-variant={variant} className={cn(itemClassName, className)} {...props} />
+}
+
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }: MenubarCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem data-slot="menubar-checkbox-item" data-inset={inset || undefined} className={cn(itemClassName, "pl-8", className)} checked={checked} {...props}>
+      <span className="absolute left-2 inline-flex size-4 items-center justify-center">
+        <MenuPrimitive.CheckboxItemIndicator><CheckIcon className="size-4" /></MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps) {
+  return <MenuPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({ className, children, inset, ...props }: MenubarRadioItemProps) {
+  return (
+    <MenuPrimitive.RadioItem data-slot="menubar-radio-item" data-inset={inset || undefined} className={cn(itemClassName, "pl-8", className)} {...props}>
+      <span className="absolute left-2 inline-flex size-4 items-center justify-center">
+        <MenuPrimitive.RadioItemIndicator><CheckIcon className="size-4" /></MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarSub({ ...props }: MenubarSubProps) {
+  return <MenuPrimitive.SubmenuRoot data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({ className, children, inset, ...props }: MenubarSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubmenuTrigger data-slot="menubar-sub-trigger" data-inset={inset || undefined} className={cn(itemClassName, className)} {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function MenubarSubContent(props: MenubarContentProps) {
+  return <MenubarContent data-slot="menubar-sub-content" side="right" align="start" alignOffset={-4} sideOffset={0} {...props} />
+}
+
+function MenubarSeparator({ className, ...props }: MenubarSeparatorProps) {
+  return <MenuPrimitive.Separator data-slot="menubar-separator" className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+}
+
+function MenubarLabel({ className, inset, ...props }: MenubarLabelProps) {
+  return <div data-slot="menubar-label" data-inset={inset || undefined} className={cn("px-2.5 py-1.5 text-xs font-semibold text-muted-foreground data-[inset=true]:pl-8", className)} {...props} />
+}
+
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps) {
+  return <span data-slot="menubar-shortcut" className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+}

package/packages/cli/vendor/src/components/ui/navigation-menu/index.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type NavigationMenuProps = NavigationMenuPrimitive.Root.Props
+export type NavigationMenuListProps = NavigationMenuPrimitive.List.Props
+export type NavigationMenuItemProps = NavigationMenuPrimitive.Item.Props
+export type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props
+export type NavigationMenuContentProps = NavigationMenuPrimitive.Content.Props
+export type NavigationMenuLinkProps = NavigationMenuPrimitive.Link.Props
+export type NavigationMenuViewportProps = NavigationMenuPrimitive.Viewport.Props
+export type NavigationMenuPositionerProps = NavigationMenuPrimitive.Positioner.Props
+export type NavigationMenuArrowProps = NavigationMenuPrimitive.Arrow.Props
+
+function NavigationMenu({ className, ...props }: NavigationMenuProps) {
+  return <NavigationMenuPrimitive.Root data-slot="navigation-menu" className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...props} />
+}
+
+function NavigationMenuList({ className, ...props }: NavigationMenuListProps) {
+  return <NavigationMenuPrimitive.List data-slot="navigation-menu-list" className={cn("flex flex-1 list-none items-center justify-center gap-1", className)} {...props} />
+}
+
+function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {
+  return <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
+}
+
+function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn("group inline-flex h-10 items-center justify-center gap-1 rounded-[var(--radius-md)] px-4 py-2 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="size-4 shrink-0 transition-transform duration-200 group-data-[popup-open]:rotate-180" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn("left-0 top-0 w-full p-4 md:absolute md:w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn("block select-none rounded-[var(--radius-md)] p-3 text-sm leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({ className, sideOffset = 8, ...props }: NavigationMenuPositionerProps) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        data-slot="navigation-menu-positioner"
+        sideOffset={sideOffset}
+        className={cn("isolate z-50 flex justify-center", className)}
+        {...props}
+      />
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {
+  return (
+    <NavigationMenuPrimitive.Viewport
+      data-slot="navigation-menu-viewport"
+      className={cn("relative h-(--height) w-full min-w-80 origin-(--transform-origin) overflow-hidden rounded-[var(--radius-lg)] border border-border bg-popover text-popover-foreground shadow-lg duration-100 md:w-(--width) data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuArrow({ className, ...props }: NavigationMenuArrowProps) {
+  return <NavigationMenuPrimitive.Arrow data-slot="navigation-menu-arrow" className={cn("z-50 flex size-3 rotate-45 border border-border bg-popover", className)} {...props} />
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuArrow,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPositioner,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}

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

@@ -9,12 +9,16 @@ 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'

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

@@ -19,6 +19,9 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { 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 +74,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"),
@@ -153,15 +155,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 +182,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 +221,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@5.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@5.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@5.0.0",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"