banhaten 0.5.0 → 0.6.0

package/registry/components/menubar.tsx

@@ -1,226 +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(--elevation-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(--elevation-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,
-}
+"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(--elevation-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(--elevation-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,
+}