{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "author": "Matthew Blode",
  "description": "A horizontal menu bar with dropdown menus, commonly used for application navigation.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/menubar.tsx",
      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { CheckIcon, ChevronRightIcon } from \"blode-icons-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Menubar = ({ className, ...props }: MenubarPrimitive.Props) => (\n  <MenubarPrimitive\n    className={cn(\n      \"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]\",\n      className,\n    )}\n    data-slot=\"menubar\"\n    {...props}\n  />\n);\n\nconst MenubarMenu = ({ ...props }: MenuPrimitive.Root.Props) => (\n  <MenuPrimitive.Root data-slot=\"menubar-menu\" {...props} />\n);\n\nconst MenubarGroup = ({ ...props }: MenuPrimitive.Group.Props) => (\n  <MenuPrimitive.Group data-slot=\"menubar-group\" {...props} />\n);\n\nconst MenubarPortal = ({ ...props }: MenuPrimitive.Portal.Props) => (\n  <MenuPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n);\n\nconst MenubarRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => (\n  <MenuPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n);\n\nconst MenubarTrigger = ({\n  className,\n  asChild,\n  children,\n  ...props\n}: MenuPrimitive.Trigger.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <MenuPrimitive.Trigger\n        className={cn(\n          \"flex select-none items-center rounded-sm px-1.5 py-[2px] font-medium text-sm outline-hidden hover:bg-muted aria-expanded:bg-muted data-popup-open:bg-muted\",\n          className,\n        )}\n        data-slot=\"menubar-trigger\"\n        render={children}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <MenuPrimitive.Trigger\n      className={cn(\n        \"flex select-none items-center rounded-sm px-1.5 py-[2px] font-medium text-sm outline-hidden hover:bg-muted aria-expanded:bg-muted data-popup-open:bg-muted\",\n        className,\n      )}\n      data-slot=\"menubar-trigger\"\n      {...props}\n    >\n      {children}\n    </MenuPrimitive.Trigger>\n  );\n};\n\nconst MenubarContent = ({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"sideOffset\">) => (\n  <MenubarPortal>\n    <MenuPrimitive.Positioner\n      align={align}\n      alignOffset={alignOffset}\n      className=\"isolate z-50 outline-none\"\n      sideOffset={sideOffset}\n    >\n      <MenuPrimitive.Popup\n        className={cn(\n          \"data-open:fade-in-0 data-open:zoom-in-95 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 cn-menu-target z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-open:animate-in\",\n          className,\n        )}\n        data-slot=\"menubar-content\"\n        {...props}\n      />\n    </MenuPrimitive.Positioner>\n  </MenubarPortal>\n);\n\nconst MenubarItem = ({\n  className,\n  inset,\n  variant = \"default\",\n  asChild,\n  children,\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <MenuPrimitive.Item\n        className={cn(\n          \"group/menubar-item relative flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!\",\n          className,\n        )}\n        data-inset={inset}\n        data-slot=\"menubar-item\"\n        data-variant={variant}\n        render={children}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"group/menubar-item relative flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menubar-item\"\n      data-variant={variant}\n      {...props}\n    >\n      {children}\n    </MenuPrimitive.Item>\n  );\n};\n\ntype MenubarCheckedState = boolean | \"indeterminate\";\n\ntype MenubarCheckboxItemProps = Omit<\n  MenuPrimitive.CheckboxItem.Props,\n  \"checked\" | \"defaultChecked\" | \"onCheckedChange\"\n> & {\n  checked?: MenubarCheckedState;\n  defaultChecked?: MenubarCheckedState;\n  onCheckedChange?: (\n    checked: MenubarCheckedState,\n    eventDetails: MenuPrimitive.CheckboxItem.ChangeEventDetails,\n  ) => void;\n  inset?: boolean;\n};\n\nconst MenubarCheckboxItem = ({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  inset,\n  ...props\n}: MenubarCheckboxItemProps) => (\n  <MenuPrimitive.CheckboxItem\n    checked={checked === \"indeterminate\" ? true : checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"menubar-checkbox-item\"\n    defaultChecked={defaultChecked === \"indeterminate\" ? true : defaultChecked}\n    onCheckedChange={(value, eventDetails) => onCheckedChange?.(value, eventDetails)}\n    {...props}\n  >\n    <span className=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n      <MenuPrimitive.CheckboxItemIndicator>\n        <CheckIcon />\n      </MenuPrimitive.CheckboxItemIndicator>\n    </span>\n    {children}\n  </MenuPrimitive.CheckboxItem>\n);\n\nconst MenubarRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => (\n  <MenuPrimitive.RadioItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"menubar-radio-item\"\n    {...props}\n  >\n    <span className=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n      <MenuPrimitive.RadioItemIndicator>\n        <CheckIcon />\n      </MenuPrimitive.RadioItemIndicator>\n    </span>\n    {children}\n  </MenuPrimitive.RadioItem>\n);\n\nconst MenubarLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => (\n  <MenuPrimitive.GroupLabel\n    className={cn(\"px-1.5 py-1 font-medium text-sm data-inset:pl-7\", className)}\n    data-inset={inset}\n    data-slot=\"menubar-label\"\n    {...props}\n  />\n);\n\nconst MenubarSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => (\n  <MenuPrimitive.Separator\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    data-slot=\"menubar-separator\"\n    {...props}\n  />\n);\n\nconst MenubarShortcut = ({ className, ...props }: React.ComponentProps<\"span\">) => (\n  <span\n    className={cn(\n      \"ml-auto text-muted-foreground text-xs tracking-widest group-focus/menubar-item:text-accent-foreground\",\n      className,\n    )}\n    data-slot=\"menubar-shortcut\"\n    {...props}\n  />\n);\n\nconst MenubarSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => (\n  <MenuPrimitive.SubmenuRoot data-slot=\"menubar-sub\" {...props} />\n);\n\nconst MenubarSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => (\n  <MenuPrimitive.SubmenuTrigger\n    className={cn(\n      \"flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-popup-open:bg-accent data-inset:pl-7 data-popup-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"menubar-sub-trigger\"\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"cn-rtl-flip ml-auto size-4\" />\n  </MenuPrimitive.SubmenuTrigger>\n);\n\nconst MenubarSubContent = ({\n  className,\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) => (\n  <MenuPrimitive.Portal>\n    <MenuPrimitive.Positioner\n      align={align}\n      alignOffset={alignOffset}\n      className=\"isolate z-50 outline-none\"\n      side={side}\n      sideOffset={sideOffset}\n    >\n      <MenuPrimitive.Popup\n        className={cn(\n          \"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 cn-menu-target z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in\",\n          className,\n        )}\n        data-slot=\"menubar-sub-content\"\n        {...props}\n      />\n    </MenuPrimitive.Positioner>\n  </MenuPrimitive.Portal>\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",
      "target": ""
    }
  ],
  "type": "registry:ui"
}