{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "description": "A menu bar providing commands and options for your application.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lumi-ui/arrow-svg",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/menubar.tsx",
      "content": "\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { Menubar as BaseMenubar } from \"@base-ui/react/menubar\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction Menubar({ className, ...props }: BaseMenubar.Props) {\n  return (\n    <BaseMenubar\n      className={cn(\n        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\n        className,\n      )}\n      data-slot=\"menubar\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarMenu(props: BaseMenu.Root.Props) {\n  return <BaseMenu.Root data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarPortal({ className, ...props }: BaseMenu.Portal.Props) {\n  return (\n    <BaseMenu.Portal\n      className={className}\n      data-slot=\"menubar-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarBackdrop({ className, ...props }: BaseMenu.Backdrop.Props) {\n  return (\n    <BaseMenu.Backdrop\n      className={className}\n      data-slot=\"menubar-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarTrigger({ className, ...props }: BaseMenu.Trigger.Props) {\n  return (\n    <BaseMenu.Trigger\n      className={cn(\n        \"flex items-center rounded-md px-2 py-1 text-sm font-medium outline-none select-none\",\n        \"focus-visible:bg-accent focus-visible:text-accent-foreground\",\n        \"data-popup-open:bg-accent data-popup-open:text-accent-foreground\",\n        \"data-disabled:opacity-50 data-disabled:pointer-events-none\",\n        className,\n      )}\n      data-slot=\"menubar-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarPositioner({ className, ...props }: BaseMenu.Positioner.Props) {\n  return (\n    <BaseMenu.Positioner\n      className={cn(\"relative\", className)}\n      data-slot=\"menubar-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarPopup({ className, ...props }: BaseMenu.Popup.Props) {\n  return (\n    <BaseMenu.Popup\n      className={cn(\"relative\", className)}\n      data-slot=\"menubar-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarArrow({ ...props }: BaseMenu.Arrow.Props) {\n  return (\n    <BaseMenu.Arrow\n      className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\"\n      data-slot=\"menubar-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BaseMenu.Arrow>\n  );\n}\n\nconst menubarItemVariants = cva(\n  [\n    \"flex items-center gap-2 py-1.5 px-3.5 text-sm\",\n    \"outline-none select-none cursor-default\",\n    \"highlight-on-active\",\n    \"data-disabled:opacity-50 data-disabled:pointer-events-none\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    \"[&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg:not([class*='text-'])]:text-foreground\",\n  ],\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"\",\n        destructive: [\n          \"text-destructive *:[svg]:!text-destructive\",\n          \"data-[highlighted]:text-destructive data-[highlighted]:before:bg-destructive/10 dark:data-[highlighted]:before:bg-destructive/20\",\n        ],\n      },\n    },\n  },\n);\n\ntype MenubarItemProps = BaseMenu.Item.Props &\n  VariantProps<typeof menubarItemVariants> & {\n    unstyled?: boolean;\n  };\n\nfunction MenubarItem({\n  className,\n  variant = \"default\",\n  unstyled = false,\n  ...props\n}: MenubarItemProps) {\n  return (\n    <BaseMenu.Item\n      className={cn(\n        unstyled ? \"\" : menubarItemVariants({ variant }),\n        className,\n      )}\n      data-slot=\"menubar-item\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({ className, ...props }: BaseMenu.Separator.Props) {\n  return (\n    <BaseMenu.Separator\n      className={cn(\"bg-border my-1 h-px\", className)}\n      data-slot=\"menubar-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarGroup({ className, ...props }: BaseMenu.Group.Props) {\n  return (\n    <BaseMenu.Group\n      className={className}\n      data-slot=\"menubar-group\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarGroupLabel({ className, ...props }: BaseMenu.GroupLabel.Props) {\n  return (\n    <BaseMenu.GroupLabel\n      className={cn(\n        \"px-3.5 py-1.5 text-xs text-muted-foreground font-medium select-none\",\n        className,\n      )}\n      data-slot=\"menubar-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarRadioGroup({ className, ...props }: BaseMenu.RadioGroup.Props) {\n  return (\n    <BaseMenu.RadioGroup\n      className={className}\n      data-slot=\"menubar-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarRadioItem({\n  children,\n  className,\n  ...props\n}: BaseMenu.RadioItem.Props) {\n  return (\n    <BaseMenu.RadioItem\n      className={className}\n      data-slot=\"menubar-radio-item\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  ...props\n}: BaseMenu.CheckboxItem.Props) {\n  return (\n    <BaseMenu.CheckboxItem\n      className={className}\n      data-slot=\"menubar-checkbox-item\"\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSubMenu(props: BaseMenu.SubmenuRoot.Props) {\n  return <BaseMenu.SubmenuRoot data-slot=\"menubar-sub-menu\" {...props} />;\n}\n\nfunction MenubarSubMenuTrigger({\n  className,\n  children,\n  ...props\n}: BaseMenu.SubmenuTrigger.Props) {\n  return (\n    <BaseMenu.SubmenuTrigger\n      className={cn(\n        \"flex items-center gap-2 py-1.5 px-3.5 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg:not([class*='text-'])]:text-foreground\",\n        className,\n      )}\n      data-slot=\"menubar-sub-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </BaseMenu.SubmenuTrigger>\n  );\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"menubar-shortcut\"\n      {...props}\n    />\n  );\n}\n\ntype MenubarContentProps = BaseMenu.Popup.Props & {\n  side?: BaseMenu.Positioner.Props[\"side\"];\n  sideOffset?: BaseMenu.Positioner.Props[\"sideOffset\"];\n  align?: BaseMenu.Positioner.Props[\"align\"];\n  alignOffset?: BaseMenu.Positioner.Props[\"alignOffset\"];\n  showArrow?: boolean;\n  matchAnchorWidth?: boolean;\n};\n\nfunction MenubarContent({\n  children,\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  side = \"bottom\",\n  sideOffset = 8,\n  showArrow = false,\n  matchAnchorWidth = false,\n  ...props\n}: MenubarContentProps) {\n  return (\n    <MenubarPortal>\n      <BaseMenu.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          matchAnchorWidth && \"w-[var(--anchor-width)]\",\n          \"max-h-(--available-height)\",\n        )}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseMenu.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground rounded-md shadow-md py-1 min-w-48\",\n            \"overlay-outline animate-popup\",\n            className,\n          )}\n          data-slot=\"menubar-content\"\n          {...props}\n        >\n          {showArrow && <MenubarArrow />}\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </MenubarPortal>\n  );\n}\n\nfunction MenubarSubMenuContent({\n  align = \"start\",\n  side = \"right\",\n  sideOffset = -4,\n  alignOffset = 0,\n  ...props\n}: MenubarContentProps) {\n  return (\n    <MenubarContent\n      align={align}\n      alignOffset={alignOffset}\n      data-slot=\"menubar-sub-menu-content\"\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItemContent({\n  className,\n  children,\n  checked,\n  ...props\n}: BaseMenu.CheckboxItem.Props) {\n  return (\n    <BaseMenu.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"flex items-center gap-2 py-1.5 pr-2 pl-8 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"menubar-checkbox-item-content\"\n      {...props}\n    >\n      <BaseMenu.CheckboxItemIndicator className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n        <CheckIcon className=\"size-4\" />\n      </BaseMenu.CheckboxItemIndicator>\n      {children}\n    </BaseMenu.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioItemContent({\n  children,\n  className,\n  ...props\n}: BaseMenu.RadioItem.Props) {\n  return (\n    <BaseMenu.RadioItem\n      className={cn(\n        \"flex items-center gap-2 py-1.5 pr-2 pl-8 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"menubar-radio-item-content\"\n      {...props}\n    >\n      <BaseMenu.RadioItemIndicator\n        className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n        data-slot=\"menubar-radio-item-indicator\"\n      >\n        <CircleIcon className=\"size-2.5 fill-current\" />\n      </BaseMenu.RadioItemIndicator>\n      {children}\n    </BaseMenu.RadioItem>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarPortal,\n  MenubarBackdrop,\n  MenubarPositioner,\n  MenubarPopup,\n  MenubarArrow,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarGroup,\n  MenubarGroupLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarCheckboxItem,\n  MenubarSubMenu,\n  MenubarSubMenuTrigger,\n  MenubarShortcut,\n  // Composite components\n  MenubarContent,\n  MenubarSubMenuContent,\n  MenubarCheckboxItemContent,\n  MenubarRadioItemContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}