{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "author": "andongmin94",
  "description": "A horizontal application menu with nested commands and shortcuts.",
  "dependencies": [
    "@base-ui/react@^1.6.0"
  ],
  "registryDependencies": [
    "https://neobrutal-ui.andongmin.com/r/dropdown-menu.json"
  ],
  "files": [
    {
      "path": "src/components/ui/menubar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\ntype MenubarValueContextValue = {\n  setValue: (value: string) => void;\n  value: string;\n  valueRef: React.MutableRefObject<string>;\n};\n\nconst MenubarValueContext = React.createContext<MenubarValueContextValue | null>(null);\n\ntype MenubarMenuContextValue = {\n  defaultTriggerId: string;\n  setTriggerId: React.Dispatch<React.SetStateAction<string>>;\n};\n\nconst MenubarMenuContext = React.createContext<MenubarMenuContextValue | null>(null);\n\ntype CSSPropertiesWithVariables = React.CSSProperties & {\n  [name: `--${string}`]: string | number | undefined;\n};\ntype MenubarContentStyle = React.ComponentProps<typeof DropdownMenuContent>[\"style\"];\n\nconst menubarCssVariables: CSSPropertiesWithVariables = {\n  \"--radix-menubar-content-available-height\": \"var(--available-height)\",\n  \"--radix-menubar-content-available-width\": \"var(--available-width)\",\n  \"--radix-menubar-content-transform-origin\": \"var(--transform-origin)\",\n  \"--radix-menubar-trigger-height\": \"var(--anchor-height)\",\n  \"--radix-menubar-trigger-width\": \"var(--anchor-width)\",\n};\n\nfunction mergeContentStyle(style: MenubarContentStyle): MenubarContentStyle {\n  if (typeof style === \"function\") {\n    return (state) => ({ ...menubarCssVariables, ...style(state) });\n  }\n\n  return { ...menubarCssVariables, ...style };\n}\n\nfunction getAsChildElement(children: React.ReactNode, componentName: string) {\n  const child = React.Children.toArray(children).find(React.isValidElement);\n\n  if (!child) {\n    throw new Error(`${componentName} with asChild requires a valid React element child.`);\n  }\n\n  return child as React.ReactElement<{\n    [key: string]: unknown;\n    children?: React.ReactNode;\n  }>;\n}\n\nfunction useMenubarValueContext() {\n  const context = React.useContext(MenubarValueContext);\n\n  if (!context) {\n    throw new Error(\"MenubarMenu must be used within Menubar\");\n  }\n  return context;\n}\n\ntype MenubarProps = Omit<MenubarPrimitive.Props, \"dir\" | \"loopFocus\" | \"orientation\"> & {\n  asChild?: boolean;\n  defaultValue?: string;\n  dir?: \"ltr\" | \"rtl\";\n  loop?: boolean;\n  onValueChange?: (value: string) => void;\n  value?: string;\n};\n\nfunction Menubar({\n  asChild = false,\n  children,\n  className,\n  defaultValue = \"\",\n  dir,\n  loop = true,\n  onValueChange,\n  render,\n  value: valueProp,\n  ...props\n}: MenubarProps) {\n  const controlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const value = valueProp ?? uncontrolledValue;\n  const valueRef = React.useRef(value);\n  valueRef.current = value;\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      if (!controlled) {\n        if (valueRef.current === nextValue) return;\n        valueRef.current = nextValue;\n        setUncontrolledValue(nextValue);\n      }\n      onValueChange?.(nextValue);\n    },\n    [controlled, onValueChange],\n  );\n\n  const context = React.useMemo<MenubarValueContextValue>(\n    () => ({ setValue, value, valueRef }),\n    [setValue, value],\n  );\n  const renderElement = asChild ? getAsChildElement(children, \"Menubar\") : render;\n\n  const menubar = (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      data-value={value || undefined}\n      dir={dir}\n      loopFocus={loop}\n      render={renderElement}\n      className={cn(\n        \"flex h-11 items-center gap-1 rounded-base border-2 border-border bg-main p-1 font-base\",\n        className,\n      )}\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </MenubarPrimitive>\n  );\n\n  return (\n    <MenubarValueContext.Provider value={context}>\n      {dir ? <DirectionProvider direction={dir}>{menubar}</DirectionProvider> : menubar}\n    </MenubarValueContext.Provider>\n  );\n}\n\ntype MenubarMenuProps = Omit<\n  React.ComponentProps<typeof DropdownMenu>,\n  \"defaultOpen\" | \"onOpenChange\" | \"open\"\n> & {\n  value?: string;\n};\n\nfunction MenubarMenu({ children, value: valueProp, ...props }: MenubarMenuProps) {\n  const context = useMenubarValueContext();\n  const generatedValue = React.useId();\n  const value = valueProp ?? generatedValue;\n  const defaultTriggerId = `${generatedValue}-trigger`;\n  const [triggerId, setTriggerId] = React.useState(defaultTriggerId);\n  const menuContext = React.useMemo<MenubarMenuContextValue>(\n    () => ({ defaultTriggerId, setTriggerId }),\n    [defaultTriggerId],\n  );\n\n  return (\n    <MenubarMenuContext.Provider value={menuContext}>\n      <DropdownMenu\n        data-slot=\"menubar-menu\"\n        {...props}\n        onOpenChange={(open) => {\n          if (open) {\n            context.setValue(value);\n          } else if (context.valueRef.current === value) {\n            context.setValue(\"\");\n          }\n        }}\n        open={context.value === value}\n        triggerId={triggerId}\n      >\n        {children}\n      </DropdownMenu>\n    </MenubarMenuContext.Provider>\n  );\n}\n\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />;\n}\n\nfunction MenubarTrigger({\n  className,\n  id,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  const menuContext = React.useContext(MenubarMenuContext);\n  const triggerId = id ?? menuContext?.defaultTriggerId;\n\n  React.useLayoutEffect(() => {\n    if (!menuContext || !triggerId) return undefined;\n\n    menuContext.setTriggerId(triggerId);\n    return () => {\n      menuContext.setTriggerId((currentId) =>\n        currentId === triggerId ? menuContext.defaultTriggerId : currentId,\n      );\n    };\n  }, [menuContext, triggerId]);\n\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      id={triggerId}\n      className={cn(\n        \"flex cursor-default items-center rounded-base border-2 border-transparent px-3 py-1.5 text-sm font-heading text-main-foreground outline-hidden select-none hover:border-border aria-expanded:border-border data-open:border-border data-popup-open:border-border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  style,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      style={mergeContentStyle(style)}\n      className={cn(\n        \"min-w-[12rem] rounded-base border-2 border-border bg-main p-1 font-base text-main-foreground duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item gap-2 rounded-base border-2 border-transparent px-2 py-1.5 text-sm font-base focus:border-border data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuCheckboxItem>) {\n  return (\n    <DropdownMenuCheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-base border-2 border-transparent py-1.5 pr-2 pl-8 text-sm font-base outline-hidden transition-colors select-none focus:border-border data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DropdownMenuCheckboxItem>\n  );\n}\n\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioItem>) {\n  return (\n    <DropdownMenuRadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-base border-2 border-transparent py-1.5 pr-2 pl-8 text-sm font-base outline-hidden transition-colors select-none focus:border-border data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DropdownMenuRadioItem>\n  );\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-heading data-inset:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-0.5 bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-xs font-base tracking-widest\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"gap-2 rounded-base border-2 border-transparent px-2 py-1.5 text-sm font-base focus:border-border data-inset:pl-8 data-open:border-border data-popup-open:border-border [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      style={mergeContentStyle(style)}\n      className={cn(\n        \"min-w-[8rem] rounded-base border-2 border-border bg-main p-1 font-base text-main-foreground 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\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation",
    "menu"
  ],
  "type": "registry:ui"
}