{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Ninaero menubar",
  "dependencies": [
    "@base-ui/react@^1.9.0",
    "cn@^0.4.0"
  ],
  "registryDependencies": [
    "https://ninaero.pages.dev/r/theme.json",
    "https://ninaero.pages.dev/r/dropdown-menu.json",
    "https://ninaero.pages.dev/r/icons.json",
    "https://ninaero.pages.dev/r/sound-provider.json"
  ],
  "files": [
    {
      "path": "registry/ninaero/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 { cn } from \"cn\";\nimport type * as React from \"react\";\n\nimport { CheckIcon } from \"@/lib/icons\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/ninaero/ui/dropdown-menu\";\n\nimport { HoverSound } from \"./sound-feedback\";\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />;\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({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\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      className={cn(\n        \"min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  sound = true,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n} & { sound?: boolean }) {\n  return (\n    <HoverSound sound={sound}>\n      <MenuPrimitive.CheckboxItem\n        data-slot=\"menubar-checkbox-item\"\n        data-inset={inset}\n        className={cn(\n          \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n          className,\n        )}\n        checked={checked}\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    </HoverSound>\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  sound = true,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n} & { sound?: boolean }) {\n  return (\n    <HoverSound sound={sound}>\n      <MenuPrimitive.RadioItem\n        data-slot=\"menubar-radio-item\"\n        data-inset={inset}\n        className={cn(\n          \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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        <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    </HoverSound>\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-1.5 py-1 text-sm font-medium data-inset:pl-7\", 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-px 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(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className,\n      )}\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-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 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"
    }
  ],
  "type": "registry:ui"
}