{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "description": "A visually persistent menu common in desktop applications.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/dropdown-menu.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/menubar.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n} from \"@/registry/optics/dropdown-menu\";\nimport { CheckIcon } from \"lucide-react\";\n\nfunction Menubar({ className = \"\", ...props }) {\n\treturn (\n\t\t<MenubarPrimitive\n\t\t\tdata-slot=\"menubar\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-background h-9 rounded-md border p-1 flex items-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarMenu({ ...props } = {}) {\n\treturn <DropdownMenu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarGroup({ ...props } = {}) {\n\treturn <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarPortal({ ...props } = {}) {\n\treturn <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />;\n}\n\nfunction MenubarTrigger({ className = \"\", ...props }) {\n\treturn (\n\t\t<DropdownMenuTrigger\n\t\t\tdata-slot=\"menubar-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\t\"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarContent({\n\tclassName = \"\",\n\talign = \"start\",\n\talignOffset = -4,\n\tsideOffset = 8,\n\t...props\n}) {\n\treturn (\n\t\t<DropdownMenuContent\n\t\t\tdata-slot=\"menubar-content\"\n\t\t\talign={align}\n\t\t\talignOffset={alignOffset}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-popover text-popover-foreground data-open:animate-in 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 ring-foreground/10 min-w-48 rounded-lg p-1 shadow-md ring-1 duration-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarItem({\n\tclassName = \"\",\n\tinset = false,\n\tvariant = \"default\",\n\t...props\n}) {\n\treturn (\n\t\t<DropdownMenuItem\n\t\t\tdata-slot=\"menubar-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarCheckboxItem({\n\tclassName = \"\",\n\tchildren = null,\n\tchecked = undefined,\n\t...props\n}) {\n\treturn (\n\t\t<MenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"menubar-checkbox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n\t\t\t\t<MenuPrimitive.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.CheckboxItem>\n\t);\n}\n\nfunction MenubarRadioGroup({ ...props } = {}) {\n\treturn <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarRadioItem({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<MenuPrimitive.RadioItem\n\t\t\tdata-slot=\"menubar-radio-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n\t\t\t\t<MenuPrimitive.RadioItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.RadioItem>\n\t);\n}\n\nfunction MenubarLabel({ className = \"\", inset = false, ...props }) {\n\treturn (\n\t\t<DropdownMenuLabel\n\t\t\tdata-slot=\"menubar-label\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarSeparator({ className = \"\", ...props }) {\n\treturn (\n\t\t<DropdownMenuSeparator\n\t\t\tdata-slot=\"menubar-separator\"\n\t\t\tclassName={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarShortcut({ className = \"\", ...props }) {\n\treturn (\n\t\t<DropdownMenuShortcut\n\t\t\tdata-slot=\"menubar-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarSub({ ...props } = {}) {\n\treturn <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({ className = \"\", inset = false, ...props }) {\n\treturn (\n\t\t<DropdownMenuSubTrigger\n\t\t\tdata-slot=\"menubar-sub-trigger\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction MenubarSubContent({ className = \"\", ...props }) {\n\treturn (\n\t\t<DropdownMenuSubContent\n\t\t\tdata-slot=\"menubar-sub-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out 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 ring-foreground/10 min-w-48 rounded-lg p-1 shadow-md ring-1 duration-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nMenubar.displayName = \"Menubar\";\nMenubarPortal.displayName = \"MenubarPortal\";\nMenubarMenu.displayName = \"MenubarMenu\";\nMenubarTrigger.displayName = \"MenubarTrigger\";\nMenubarContent.displayName = \"MenubarContent\";\nMenubarGroup.displayName = \"MenubarGroup\";\nMenubarSeparator.displayName = \"MenubarSeparator\";\nMenubarLabel.displayName = \"MenubarLabel\";\nMenubarItem.displayName = \"MenubarItem\";\nMenubarShortcut.displayName = \"MenubarShortcut\";\nMenubarCheckboxItem.displayName = \"MenubarCheckboxItem\";\nMenubarRadioGroup.displayName = \"MenubarRadioGroup\";\nMenubarRadioItem.displayName = \"MenubarRadioItem\";\nMenubarSub.displayName = \"MenubarSub\";\nMenubarSubTrigger.displayName = \"MenubarSubTrigger\";\nMenubarSubContent.displayName = \"MenubarSubContent\";\n\nexport {\n\tMenubar,\n\tMenubarPortal,\n\tMenubarMenu,\n\tMenubarTrigger,\n\tMenubarContent,\n\tMenubarGroup,\n\tMenubarSeparator,\n\tMenubarLabel,\n\tMenubarItem,\n\tMenubarShortcut,\n\tMenubarCheckboxItem,\n\tMenubarRadioGroup,\n\tMenubarRadioItem,\n\tMenubarSub,\n\tMenubarSubTrigger,\n\tMenubarSubContent,\n};\n",
      "type": "registry:component",
      "target": "components/optics/menubar.jsx"
    }
  ],
  "type": "registry:component"
}