banhaten 0.1.2 → 0.2.0

package/registry/components/label.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  [
+    "inline-flex max-w-full items-center gap-[var(--bh-space-xs-4)] text-start",
+    "text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)]",
+    "leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]",
+    "text-[var(--bh-content-default)]",
+    "has-[[aria-disabled=true]]:text-[var(--bh-content-disabled)]",
+    "peer-disabled:cursor-not-allowed peer-disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      tone: {
+        default: "",
+        subtle: "text-[var(--bh-content-subtle)]",
+        danger: "text-[var(--bh-content-danger-default)]",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  }
+)
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> & {
+    optionalText?: React.ReactNode
+    required?: boolean
+  }
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(function Label(
+  { children, className, optionalText, required = false, tone, ...props },
+  ref
+) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      ref={ref}
+      className={cn(labelVariants({ tone, className }))}
+      {...props}
+    >
+      <span data-slot="label-text" dir="auto" className="min-w-0">
+        {children}
+      </span>
+      {required ? (
+        <span
+          aria-hidden="true"
+          data-slot="label-required"
+          className="shrink-0 text-[var(--bh-content-danger-default)]"
+        >
+          *
+        </span>
+      ) : null}
+      {optionalText ? (
+        <span
+          data-slot="label-optional"
+          dir="auto"
+          className="min-w-0 text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+        >
+          {optionalText}
+        </span>
+      ) : null}
+    </LabelPrimitive.Root>
+  )
+})
+
+export { Label, labelVariants }
+export type { LabelProps }

package/registry/components/menu.tsx

@@ -4,37 +4,21 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type MenuWidth = "menu" | "default" | "multiline" | "action" | "auto"
 type MenuItemKind = "default" | "multiline" | "action" | "progress" | "button"
 type MenuItemState = "default" | "disabled"
 type MenuItemIconPosition = "leading" | "trailing"
 type MenuItemAvatarSize = "sm" | "lg"
-type MenuCollisionShift = {
-  x: number
-  y: number
-}
 type MenuCollisionPadding = NonNullable<
   React.ComponentProps<typeof DropdownMenuPrimitive.Content>["collisionPadding"]
 >
-type MenuCollisionPaddingSides = {
-  bottom: number
-  left: number
-  right: number
-  top: number
-}
-type MenuResizeObserverConstructor = new (
-  callback: () => void
-) => {
-  disconnect: () => void
-  observe: (target: Element) => void
-}
 
 // Default Radix collisionPadding mirrors --bh-space-md-8.
 const MENU_COLLISION_PADDING_PX = 8
-const zeroMenuCollisionShift: MenuCollisionShift = { x: 0, y: 0 }
-const useSafeLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
+// Radix sideOffset is numeric; this mirrors --bh-space-xs-4.
+const MENU_SUBCONTENT_SIDE_OFFSET_PX = 4
 
 const menuVariants = cva(
   "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--shadow-menu)]",
@@ -117,14 +101,7 @@ const menuItemIconVariants = cva(
   }
 )
 
-type MenuProps = React.ComponentProps<"div"> &
-  VariantProps<typeof menuVariants> & {
-    asChild?: boolean
-    defaultOpen?: boolean
-    modal?: boolean
-    onOpenChange?: (open: boolean) => void
-    open?: boolean
-  }
+type MenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>
 
 type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> &
   VariantProps<typeof menuVariants> & {
@@ -141,147 +118,38 @@ const MenuSub = DropdownMenuPrimitive.Sub
 const MenuTrigger = DropdownMenuPrimitive.Trigger
 const MenuStaticContext = React.createContext(false)
 
+function Menu({ dir, ...props }: MenuProps) {
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+
+  return (
+    <span className="contents" data-slot="menu-root-boundary" ref={directionBoundaryRef}>
+      <MenuRoot dir={resolvedDirection} {...props} />
+    </span>
+  )
+}
+
 type MenuSurfaceProps = React.ComponentProps<"div"> &
   VariantProps<typeof menuVariants> & {
     asChild?: boolean
-    avoidViewportNudge?: boolean
-    collisionPadding?: MenuCollisionPadding
   }
 
 const MenuSurface = React.forwardRef<HTMLDivElement, MenuSurfaceProps>(function MenuSurface({
   asChild = false,
-  avoidViewportNudge = true,
   children,
   className,
-  collisionPadding = MENU_COLLISION_PADDING_PX,
   role = "menu",
-  style,
   width,
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "div"
-  const surfaceRef = React.useRef<HTMLDivElement | null>(null)
-  const collisionShiftRef = React.useRef(zeroMenuCollisionShift)
-  const [collisionShift, setCollisionShift] = React.useState(
-    zeroMenuCollisionShift
-  )
-
-  function updateCollisionShift(nextShift: MenuCollisionShift) {
-    collisionShiftRef.current = nextShift
-    setCollisionShift((currentShift) =>
-      isSameMenuCollisionShift(currentShift, nextShift)
-        ? currentShift
-        : nextShift
-    )
-  }
-
-  function setSurfaceRef(node: HTMLDivElement | null) {
-    surfaceRef.current = node
-
-    if (typeof ref === "function") {
-      ref(node)
-    } else if (ref) {
-      ref.current = node
-    }
-  }
-
-  useSafeLayoutEffect(() => {
-    if (!avoidViewportNudge) {
-      updateCollisionShift(zeroMenuCollisionShift)
-      return
-    }
-
-    const node = surfaceRef.current
-    if (!node) return
-    const surfaceNode: HTMLDivElement = node
-
-    const ownerWindow = surfaceNode.ownerDocument.defaultView
-    if (!ownerWindow) return
-    const surfaceWindow: Window = ownerWindow
-
-    let animationFrame = 0
-    const resolvedCollisionPadding = resolveMenuCollisionPadding(collisionPadding)
-    const requestFrame =
-      typeof surfaceWindow.requestAnimationFrame === "function"
-        ? surfaceWindow.requestAnimationFrame.bind(surfaceWindow)
-        : (callback: FrameRequestCallback) =>
-            surfaceWindow.setTimeout(
-              () => callback(surfaceWindow.performance.now()),
-              0
-            )
-    const cancelFrame =
-      typeof surfaceWindow.cancelAnimationFrame === "function"
-        ? surfaceWindow.cancelAnimationFrame.bind(surfaceWindow)
-        : surfaceWindow.clearTimeout.bind(surfaceWindow)
-
-    function measureCollisionShift() {
-      animationFrame = 0
-
-      const rect = surfaceNode.getBoundingClientRect()
-      const currentShift = collisionShiftRef.current
-      const unshiftedRect = {
-        bottom: rect.bottom - currentShift.y,
-        left: rect.left - currentShift.x,
-        right: rect.right - currentShift.x,
-        top: rect.top - currentShift.y,
-      }
-
-      updateCollisionShift(
-        getMenuCollisionShift({
-          collisionPadding: resolvedCollisionPadding,
-          rect: unshiftedRect,
-          viewportHeight: surfaceWindow.innerHeight,
-          viewportWidth: surfaceWindow.innerWidth,
-        })
-      )
-    }
-
-    function queueCollisionShiftMeasure() {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      animationFrame = requestFrame(measureCollisionShift)
-    }
-
-    queueCollisionShiftMeasure()
-    surfaceWindow.addEventListener("resize", queueCollisionShiftMeasure)
-    surfaceWindow.addEventListener("scroll", queueCollisionShiftMeasure, true)
-
-    const ResizeObserver = (
-      surfaceWindow as Window & {
-        ResizeObserver?: MenuResizeObserverConstructor
-      }
-    ).ResizeObserver
-    const resizeObserver = ResizeObserver
-      ? new ResizeObserver(queueCollisionShiftMeasure)
-      : undefined
-    resizeObserver?.observe(surfaceNode)
-
-    return () => {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      surfaceWindow.removeEventListener("resize", queueCollisionShiftMeasure)
-      surfaceWindow.removeEventListener("scroll", queueCollisionShiftMeasure, true)
-      resizeObserver?.disconnect()
-    }
-  }, [avoidViewportNudge, collisionPadding, width])
 
   return (
     <Comp
       data-slot="menu"
       data-width={width ?? "menu"}
-      ref={setSurfaceRef}
+      ref={ref}
       role={role}
-      style={{
-        ...style,
-        transform: mergeMenuTransforms(
-          getMenuCollisionTransform(collisionShift),
-          style?.transform
-        ),
-      }}
       className={cn(
         menuVariants({ width }),
         "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto",
@@ -312,7 +180,6 @@ const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -327,7 +194,7 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
   children,
   className,
   collisionPadding = MENU_COLLISION_PADDING_PX,
-  sideOffset = 4,
+  sideOffset = MENU_SUBCONTENT_SIDE_OFFSET_PX,
   width,
   asChild = false,
   role = "menu",
@@ -343,7 +210,6 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -354,37 +220,30 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
   )
 })
 
-function Menu({
+type MenuPreviewProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+  }
+
+function MenuPreview({
   children,
   className,
-  defaultOpen = true,
-  modal = false,
-  onOpenChange,
-  open,
   role = "menu",
   width,
   asChild = false,
   ...props
-}: MenuProps) {
-  const Comp = asChild ? Slot : "div"
-  const isOpen = open ?? defaultOpen
-
-  void modal
-  void onOpenChange
-
-  if (!isOpen) return null
-
+}: MenuPreviewProps) {
   return (
     <MenuStaticContext.Provider value>
-      <Comp
-        data-slot="menu"
-        data-width={width ?? "menu"}
+      <MenuSurface
+        asChild={asChild}
+        className={className}
         role={role}
-        className={cn(menuVariants({ width, className }))}
+        width={width}
         {...props}
       >
         {children}
-      </Comp>
+      </MenuSurface>
     </MenuStaticContext.Provider>
   )
 }
@@ -905,7 +764,7 @@ function MenuProgressSpinner({ className }: { className?: string }) {
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
-        strokeWidth="3"
+        strokeWidth="var(--bh-icon-stroke-300)"
       />
     </svg>
   )
@@ -1023,81 +882,6 @@ function MenuSeparator({
   return <DropdownMenuPrimitive.Separator asChild>{separator}</DropdownMenuPrimitive.Separator>
 }
 
-function getMenuCollisionShift({
-  collisionPadding,
-  rect,
-  viewportHeight,
-  viewportWidth,
-}: {
-  collisionPadding: MenuCollisionPaddingSides
-  rect: Pick<DOMRect, "bottom" | "left" | "right" | "top">
-  viewportHeight: number
-  viewportWidth: number
-}): MenuCollisionShift {
-  let x = 0
-  let y = 0
-  const minX = collisionPadding.left
-  const minY = collisionPadding.top
-  const maxX = viewportWidth - collisionPadding.right
-  const maxY = viewportHeight - collisionPadding.bottom
-
-  if (rect.left < minX) {
-    x = minX - rect.left
-  } else if (rect.right > maxX) {
-    x = maxX - rect.right
-  }
-
-  if (rect.top < minY) {
-    y = minY - rect.top
-  } else if (rect.bottom > maxY) {
-    y = maxY - rect.bottom
-  }
-
-  return { x: Math.round(x), y: Math.round(y) }
-}
-
-function resolveMenuCollisionPadding(
-  collisionPadding: MenuCollisionPadding
-): MenuCollisionPaddingSides {
-  if (typeof collisionPadding === "number") {
-    const padding = Math.max(0, collisionPadding)
-
-    return {
-      bottom: padding,
-      left: padding,
-      right: padding,
-      top: padding,
-    }
-  }
-
-  return {
-    bottom: Math.max(0, collisionPadding.bottom ?? 0),
-    left: Math.max(0, collisionPadding.left ?? 0),
-    right: Math.max(0, collisionPadding.right ?? 0),
-    top: Math.max(0, collisionPadding.top ?? 0),
-  }
-}
-
-function getMenuCollisionTransform(shift: MenuCollisionShift) {
-  return `translate(${Math.round(shift.x)}px, ${Math.round(shift.y)}px)`
-}
-
-function mergeMenuTransforms(
-  collisionTransform: string,
-  customTransform: string | undefined
-) {
-  return customTransform
-    ? `${collisionTransform} ${customTransform}`
-    : collisionTransform
-}
-
-function isSameMenuCollisionShift(
-  currentShift: MenuCollisionShift,
-  nextShift: MenuCollisionShift
-) {
-  return currentShift.x === nextShift.x && currentShift.y === nextShift.y
-}
-
 export {
   Menu,
   MenuCaption,
@@ -1115,12 +899,14 @@ export {
   MenuItemTitle,
   MenuLabel,
   MenuProgress,
+  MenuPreview,
   MenuPortal,
   MenuRoot,
   MenuSeparator,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
+  MenuSurface,
   MenuTrigger,
   menuItemContentVariants,
   menuItemIconVariants,
@@ -1144,5 +930,7 @@ export type {
   MenuLabelProps,
   MenuProgressProps,
   MenuProps,
+  MenuPreviewProps,
+  MenuSurfaceProps,
   MenuWidth,
 }

package/registry/components/menubar.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type MenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>
+type MenubarTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Trigger
+>
+type MenubarContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Content
+>
+type MenubarItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Item
+> & {
+  inset?: boolean
+}
+type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.CheckboxItem
+>
+type MenubarRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.RadioItem
+>
+type MenubarLabelProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Label
+> & {
+  inset?: boolean
+}
+type MenubarSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Separator
+>
+type MenubarShortcutProps = React.ComponentProps<"span">
+
+const MenubarMenu = MenubarPrimitive.Menu
+const MenubarGroup = MenubarPrimitive.Group
+const MenubarPortal = MenubarPrimitive.Portal
+const MenubarSub = MenubarPrimitive.Sub
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  MenubarProps
+>(function Menubar({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-space-7xl-40)] items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] shadow-[var(--shadow-component-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  MenubarTriggerProps
+>(function MenubarTrigger({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-space-6xl-32)] items-center rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[highlighted]:bg-[var(--bh-interactive-ghost-hover)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const menuContentClassName =
+  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
+
+const menuItemClassName =
+  "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  MenubarContentProps
+>(function MenubarContent({ align = "start", className, ...props }, ref) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        align={align}
+        data-slot="menubar-content"
+        ref={ref}
+        className={cn(menuContentClassName, className)}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+})
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  MenubarItemProps
+>(function MenubarItem({ className, inset, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-slot="menubar-item"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    />
+  )
+})
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  MenubarCheckboxItemProps
+>(function MenubarCheckboxItem({ children, className, checked, ...props }, ref) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      checked={checked}
+      data-slot="menubar-checkbox-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+})
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  MenubarRadioItemProps
+>(function MenubarRadioItem({ children, className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+})
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  MenubarLabelProps
+>(function MenubarLabel({ className, inset, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      ref={ref}
+      className={cn(
+        "px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        inset && "ps-[var(--bh-space-8xl-48)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  MenubarSeparatorProps
+>(function MenubarSeparator({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      ref={ref}
+      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn("ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarTrigger,
+}
+export type {
+  MenubarCheckboxItemProps,
+  MenubarContentProps,
+  MenubarItemProps,
+  MenubarLabelProps,
+  MenubarProps,
+  MenubarRadioItemProps,
+  MenubarSeparatorProps,
+  MenubarShortcutProps,
+  MenubarTriggerProps,
+}