banhaten 0.1.0

package/registry/components/menu.tsx

@@ -0,0 +1,758 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+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"
+
+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)]",
+  {
+    variants: {
+      width: {
+        menu: "w-[var(--bh-menu-width)]",
+        default: "w-[var(--bh-menu-item-default-width)]",
+        multiline: "w-[var(--bh-menu-item-multiline-width)]",
+        action: "w-[var(--bh-menu-item-action-width)]",
+        auto: "w-max",
+      },
+    },
+    defaultVariants: {
+      width: "menu",
+    },
+  }
+)
+
+const menuItemVariants = cva(
+  "group/menu-item relative flex w-full items-center bg-[var(--bh-menu-item-bg)] outline-none transition-colors data-[disabled=true]:pointer-events-none",
+  {
+    variants: {
+      kind: {
+        default:
+          "h-[var(--bh-menu-item-default-height)] px-[var(--bh-menu-item-padding-x)]",
+        multiline:
+          "min-h-[var(--bh-menu-item-multiline-height)] px-[var(--bh-menu-item-padding-x)]",
+        action:
+          "min-h-[var(--bh-menu-item-action-height)] px-[var(--bh-menu-item-padding-x)]",
+        progress:
+          "h-[var(--bh-menu-item-progress-height)] px-[var(--bh-menu-item-padding-x)]",
+        button:
+          "h-[var(--bh-menu-item-button-height)] px-[var(--bh-menu-item-padding-x)]",
+      },
+    },
+    defaultVariants: {
+      kind: "default",
+    },
+  }
+)
+
+const menuItemContentVariants = cva(
+  "flex min-w-0 flex-1 transition-colors group-data-[disabled=true]/menu-item:bg-transparent [&_svg]:shrink-0 rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  {
+    variants: {
+      kind: {
+        default:
+          "h-[var(--bh-menu-item-default-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] p-[var(--bh-menu-item-content-padding)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
+        multiline:
+          "min-h-[var(--bh-menu-item-multiline-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
+        action:
+          "min-h-[var(--bh-menu-item-action-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
+        progress:
+          "h-[var(--bh-menu-item-progress-height)] flex-col items-start gap-0 px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)]",
+        button:
+          "h-[var(--bh-menu-item-button-height)] flex-col items-start gap-[var(--bh-menu-item-slot-gap)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)]",
+      },
+    },
+    defaultVariants: {
+      kind: "default",
+    },
+  }
+)
+
+const menuItemIconVariants = cva(
+  "flex shrink-0 items-center justify-center text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
+  {
+    variants: {
+      position: {
+        leading:
+          "h-[var(--bh-menu-leading-icon-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
+        trailing:
+          "size-[var(--bh-menu-trailing-icon-size)] text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-menu-trailing-icon-size)]",
+      },
+    },
+    defaultVariants: {
+      position: "leading",
+    },
+  }
+)
+
+type MenuProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+    defaultOpen?: boolean
+    modal?: boolean
+    onOpenChange?: (open: boolean) => void
+    open?: boolean
+  }
+
+type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+  }
+
+const MenuRoot = DropdownMenuPrimitive.Root
+const MenuTrigger = DropdownMenuPrimitive.Trigger
+
+const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent({
+  className,
+  width,
+  asChild = false,
+  role = "menu",
+  ...props
+}, ref) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <DropdownMenuPrimitive.Content asChild {...props}>
+      <Comp
+        data-slot="menu"
+        data-width={width ?? "menu"}
+        ref={ref}
+        role={role}
+        className={cn(menuVariants({ width, className }))}
+      />
+    </DropdownMenuPrimitive.Content>
+  )
+})
+
+function Menu({
+  children,
+  defaultOpen = true,
+  modal = false,
+  onOpenChange,
+  open,
+  ...props
+}: MenuProps) {
+  const rootProps =
+    open === undefined
+      ? { defaultOpen, onOpenChange }
+      : { open, onOpenChange }
+
+  return (
+    <MenuRoot modal={modal} {...rootProps}>
+      <MenuContent forceMount {...props}>
+        {children}
+      </MenuContent>
+    </MenuRoot>
+  )
+}
+
+const MenuPortal = DropdownMenuPrimitive.Portal
+
+function getMenuItemTextValue(children: React.ReactNode) {
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children)
+  }
+
+  return undefined
+}
+
+type MenuItemPrimitiveProps = Pick<
+  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,
+  "onSelect" | "textValue"
+>
+
+type MenuItemProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuItemVariants> &
+  MenuItemPrimitiveProps & {
+    asChild?: boolean
+    disabled?: boolean
+  }
+
+const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem({
+  className,
+  kind = "default",
+  disabled = false,
+  asChild = false,
+  role = "menuitem",
+  tabIndex,
+  children,
+  onSelect,
+  textValue,
+  ...props
+}, ref) {
+  const Comp = asChild ? Slot : "div"
+  const selectedKind: MenuItemKind = kind ?? "default"
+  const isDisabled = disabled
+
+  return (
+    <DropdownMenuPrimitive.Item
+      asChild
+      disabled={isDisabled}
+      onSelect={onSelect}
+      textValue={textValue ?? getMenuItemTextValue(children)}
+    >
+      <Comp
+        aria-disabled={isDisabled ? true : undefined}
+        data-disabled={isDisabled ? "true" : "false"}
+        data-kind={selectedKind}
+        data-slot="menu-item"
+        ref={ref}
+        role={role}
+        tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
+        className={cn(menuItemVariants({ kind: selectedKind, className }))}
+        {...props}
+      >
+        <MenuItemContent kind={selectedKind}>
+          <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
+        </MenuItemContent>
+      </Comp>
+    </DropdownMenuPrimitive.Item>
+  )
+})
+
+MenuItem.displayName = "MenuItem"
+
+type MenuItemContentProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuItemContentVariants>
+
+function MenuItemContent({
+  className,
+  kind,
+  ...props
+}: MenuItemContentProps) {
+  return (
+    <div
+      data-slot="menu-item-content"
+      className={cn(menuItemContentVariants({ kind, className }))}
+      {...props}
+    />
+  )
+}
+
+function MenuItemChildren({
+  children,
+  kind,
+}: {
+  children: React.ReactNode
+  kind: MenuItemKind
+}) {
+  return React.Children.map(children, (child) => {
+    if (kind === "button" && (typeof child === "string" || typeof child === "number")) {
+      return <MenuItemAction fullWidth>{child}</MenuItemAction>
+    }
+
+    if (typeof child === "string" || typeof child === "number") {
+      return (
+        <MenuItemText>
+          <MenuItemTitle>{child}</MenuItemTitle>
+        </MenuItemText>
+      )
+    }
+
+    return child
+  })
+}
+
+function MenuItemText({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-item-text"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col ps-[var(--bh-space-xs-4)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenuItemTitle({
+  className,
+  dir = "auto",
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-item-title"
+      dir={dir}
+      className={cn(
+        "min-w-0 truncate text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenuItemDescription({
+  className,
+  dir = "auto",
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-item-description"
+      dir={dir}
+      className={cn(
+        "min-w-0 truncate text-start text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenuItemMeta({
+  className,
+  dir = "auto",
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-item-meta"
+      dir={dir}
+      className={cn(
+        "shrink-0 whitespace-nowrap text-end text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type MenuItemIconProps = React.ComponentProps<"span"> &
+  VariantProps<typeof menuItemIconVariants>
+
+function MenuItemIcon({
+  className,
+  position,
+  ...props
+}: MenuItemIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-position={position ?? "leading"}
+      data-slot="menu-item-icon"
+      className={cn(menuItemIconVariants({ position, className }))}
+      {...props}
+    />
+  )
+}
+
+type MenuItemAvatarProps = React.ComponentProps<"span"> & {
+  alt?: string
+  size?: MenuItemAvatarSize
+  src?: string
+}
+
+function MenuItemAvatar({
+  alt = "",
+  children,
+  className,
+  size = "sm",
+  src,
+  ...props
+}: MenuItemAvatarProps) {
+  return (
+    <span
+      data-size={size}
+      data-slot="menu-item-avatar-wrap"
+      className={cn(
+        "flex shrink-0 items-center ps-[var(--bh-menu-icon-padding)] group-data-[disabled=true]/menu-item:opacity-[var(--bh-opacity-60)]",
+        size === "lg"
+          ? "h-[var(--bh-space-7xl-40)]"
+          : "h-[var(--bh-space-5xl-24)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="menu-item-avatar"
+        className={cn(
+          "flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-text-body-3xs-medium-font-size)] font-[var(--bh-text-body-3xs-medium-font-weight)] leading-[var(--bh-text-body-3xs-medium-line-height)] text-[var(--bh-content-subtle)]",
+          size === "lg"
+            ? "size-[var(--bh-space-7xl-40)]"
+            : "size-[var(--bh-space-5xl-24)]"
+        )}
+      >
+        {src ? (
+          <img alt={alt} className="size-full object-cover" src={src} />
+        ) : (
+          children
+        )}
+      </span>
+    </span>
+  )
+}
+
+function MenuItemBadge({
+  className,
+  dir = "auto",
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-item-badge"
+      dir={dir}
+      className={cn(
+        "inline-flex h-[var(--bh-menu-badge-height)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-menu-badge-padding-x)] text-center text-[length:var(--bh-text-body-3xs-medium-font-size)] font-[var(--bh-text-body-3xs-medium-font-weight)] leading-[var(--bh-text-body-3xs-medium-line-height)] tracking-[var(--bh-text-body-3xs-medium-letter-spacing)] text-[var(--bh-content-default)] group-data-[disabled=true]/menu-item:opacity-[var(--bh-opacity-60)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type MenuItemSwitchProps = Omit<React.ComponentProps<"span">, "role"> & {
+  active?: boolean
+  disabled?: boolean
+}
+
+function MenuItemSwitch({
+  active = false,
+  className,
+  disabled = false,
+  ...props
+}: MenuItemSwitchProps) {
+  return (
+    <span
+      aria-checked={active}
+      aria-disabled={disabled || undefined}
+      data-active={active ? "true" : "false"}
+      data-disabled={disabled ? "true" : "false"}
+      data-slot="menu-item-switch"
+      role="switch"
+      className={cn(
+        "flex h-[var(--bh-menu-switch-height)] w-[var(--bh-menu-switch-width)] shrink-0 items-center rounded-[var(--bh-radius-full)] p-[var(--bh-menu-switch-padding)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-disabled)]",
+        active
+          ? "justify-end bg-[var(--bh-interactive-switch-active)]"
+          : "bg-[var(--bh-interactive-switch-default)]",
+        disabled && "bg-[var(--bh-interactive-switch-disabled)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        data-slot="menu-item-switch-handle"
+        className="size-[var(--bh-menu-switch-handle-size)] rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-handle-disabled)]"
+      />
+    </span>
+  )
+}
+
+type MenuItemActionProps = React.ComponentProps<"button"> & {
+  asChild?: boolean
+  fullWidth?: boolean
+}
+
+function MenuItemAction({
+  className,
+  asChild = false,
+  fullWidth = false,
+  type,
+  children,
+  ...props
+}: MenuItemActionProps) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="menu-item-action"
+      className={cn(
+        "inline-flex h-[var(--bh-menu-action-height)] shrink-0 items-center justify-center gap-[var(--bh-menu-action-gap)] rounded-[var(--bh-control-default)] border border-[var(--bh-border-default)] bg-[var(--bh-interactive-outlined-default)] px-[var(--bh-menu-action-padding-x)] py-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow] hover:bg-[var(--bh-interactive-outlined-hover)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+        fullWidth && "w-full",
+        className
+      )}
+      {...(!asChild ? { type: type || "button" } : {})}
+      {...props}
+    >
+      {asChild ? children : <MenuItemActionChildren>{children}</MenuItemActionChildren>}
+    </Comp>
+  )
+}
+
+function MenuItemActionChildren({ children }: { children: React.ReactNode }) {
+  return React.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return (
+        <span data-slot="menu-item-action-label" dir="auto" className="min-w-0 px-[var(--bh-space-xs-4)]">
+          {child}
+        </span>
+      )
+    }
+
+    return child
+  })
+}
+
+type MenuProgressProps = React.ComponentProps<"div"> & {
+  indicator?: React.ReactNode
+  label?: React.ReactNode
+  optional?: React.ReactNode
+  showSpinner?: boolean
+  value?: number
+}
+
+function MenuProgress({
+  className,
+  indicator,
+  label,
+  optional,
+  showSpinner = true,
+  value = 50,
+  ...props
+}: MenuProgressProps) {
+  const clampedValue = Math.min(100, Math.max(0, value))
+
+  return (
+    <div
+      data-slot="menu-progress"
+      className={cn(
+        "flex w-full flex-col gap-[var(--bh-menu-progress-gap)]",
+        className
+      )}
+      {...props}
+    >
+      <div
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={clampedValue}
+        data-slot="menu-progress-track"
+        role="progressbar"
+        className="h-[var(--bh-menu-progress-height)] w-full overflow-hidden rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-soft)]"
+      >
+        <span
+          data-slot="menu-progress-fill"
+          className="block h-full rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-indicator-default)]"
+          style={{ inlineSize: `${clampedValue}%` }}
+        />
+      </div>
+
+      {hasRenderableContent(label) ||
+      hasRenderableContent(optional) ||
+      hasRenderableContent(indicator) ||
+      showSpinner ? (
+        <div
+          data-slot="menu-progress-row"
+          className="flex min-w-0 items-center gap-[var(--bh-menu-item-slot-gap)]"
+        >
+          {hasRenderableContent(label) || hasRenderableContent(optional) ? (
+            <span
+              data-slot="menu-progress-label"
+              className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xs-4)]"
+            >
+              {hasRenderableContent(label) ? (
+                <span
+                  data-slot="menu-progress-label-text"
+                  dir="auto"
+                  className="truncate 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-default)]"
+                >
+                  {label}
+                </span>
+              ) : null}
+              {hasRenderableContent(optional) ? (
+                <span
+                  data-slot="menu-progress-optional"
+                  dir="auto"
+                  className="truncate 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)]"
+                >
+                  {optional}
+                </span>
+              ) : null}
+            </span>
+          ) : null}
+
+          <span
+            data-slot="menu-progress-indicator"
+            className="flex shrink-0 items-center gap-[var(--bh-space-xxs-2)] text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+          >
+            {hasRenderableContent(indicator) ? (
+              <span dir="auto">{indicator}</span>
+            ) : null}
+            {showSpinner ? <MenuProgressSpinner /> : null}
+          </span>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function MenuProgressSpinner({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      data-slot="menu-progress-spinner"
+      viewBox="0 0 24 24"
+      className={cn("size-[var(--bh-menu-trailing-icon-size)] animate-spin", className)}
+    >
+      <path
+        d="M12 3a9 9 0 1 1-6.36 2.64"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="3"
+      />
+    </svg>
+  )
+}
+
+type MenuLabelProps = React.ComponentProps<"div"> & {
+  caption?: React.ReactNode
+  label?: React.ReactNode
+}
+
+function MenuLabel({
+  caption,
+  children,
+  className,
+  label,
+  role = "presentation",
+  ...props
+}: MenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label asChild>
+      <div
+        data-slot="menu-label"
+        role={role}
+        className={cn(
+          "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            {hasRenderableContent(label) ? (
+              <span
+                data-slot="menu-label-primary"
+                dir="auto"
+                className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
+              >
+                {label}
+              </span>
+            ) : null}
+            {hasRenderableContent(caption) ? (
+              <span
+                data-slot="menu-label-caption"
+                dir="auto"
+                className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
+              >
+                {caption}
+              </span>
+            ) : null}
+          </>
+        )}
+      </div>
+    </DropdownMenuPrimitive.Label>
+  )
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function MenuCaption({
+  className,
+  dir = "auto",
+  role = "presentation",
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="menu-caption"
+      role={role}
+      className="flex h-[var(--bh-menu-item-caption-height)] w-full items-center px-[var(--bh-menu-item-padding-x)]"
+    >
+      <span
+        dir={dir}
+        className={cn(
+          "flex h-full min-w-0 flex-1 items-center justify-center px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] text-center 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)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function MenuSeparator({
+  className,
+  role = "separator",
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <DropdownMenuPrimitive.Separator asChild>
+      <div
+        data-slot="menu-separator"
+        role={role}
+        className={cn(
+          "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
+          className
+        )}
+        {...props}
+      >
+        <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
+      </div>
+    </DropdownMenuPrimitive.Separator>
+  )
+}
+
+export {
+  Menu,
+  MenuCaption,
+  MenuContent,
+  MenuItem,
+  MenuItemAction,
+  MenuItemAvatar,
+  MenuItemBadge,
+  MenuItemContent,
+  MenuItemDescription,
+  MenuItemIcon,
+  MenuItemMeta,
+  MenuItemSwitch,
+  MenuItemText,
+  MenuItemTitle,
+  MenuLabel,
+  MenuProgress,
+  MenuPortal,
+  MenuRoot,
+  MenuSeparator,
+  MenuTrigger,
+  menuItemContentVariants,
+  menuItemIconVariants,
+  menuItemVariants,
+  menuVariants,
+}
+export type {
+  MenuItemAvatarSize,
+  MenuItemAvatarProps,
+  MenuItemActionProps,
+  MenuContentProps,
+  MenuItemContentProps,
+  MenuItemIconPosition,
+  MenuItemIconProps,
+  MenuItemKind,
+  MenuItemProps,
+  MenuItemSwitchProps,
+  MenuItemState,
+  MenuLabelProps,
+  MenuProgressProps,
+  MenuProps,
+  MenuWidth,
+}