{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "description": "Desktop-style menu bar with menus, submenus, checkboxes and radio items.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "lucide-react@^1.48.0"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/dropdown-menu.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/menubar/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 } from 'lucide-react'\nimport * as React from 'react'\n\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 '@/components/ui/dropdown-menu'\nimport { cn } from '@/lib/utils'\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n\treturn (\n\t\t<MenubarPrimitive\n\t\t\tdata-slot=\"menubar\"\n\t\t\tclassName={cn('flex h-10 items-center gap-0.5 rounded-lg border p-[3px]', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n\treturn <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>) {\n\treturn <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>) {\n\treturn <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>) {\n\treturn (\n\t\t<DropdownMenuTrigger\n\t\t\tdata-slot=\"menubar-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex h-8 items-center rounded-sm px-2.5 text-sm font-medium outline-hidden select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-ring aria-expanded:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',\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}: React.ComponentProps<typeof DropdownMenuContent>) {\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'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\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,\n\tvariant = 'default',\n\t...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\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\"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 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\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,\n\tchecked,\n\tinset,\n\t...props\n}: MenuPrimitive.CheckboxItem.Props & {\n\tinset?: boolean\n}) {\n\treturn (\n\t\t<MenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"menubar-checkbox-item\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\t'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\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=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\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 }: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n\treturn <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n\tclassName,\n\tchildren,\n\tinset,\n\t...props\n}: MenuPrimitive.RadioItem.Props & {\n\tinset?: boolean\n}) {\n\treturn (\n\t\t<MenuPrimitive.RadioItem\n\t\t\tdata-slot=\"menubar-radio-item\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\t\"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\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\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({\n\tclassName,\n\tinset,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n\tinset?: boolean\n}) {\n\treturn (\n\t\t<DropdownMenuLabel\n\t\t\tdata-slot=\"menubar-label\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MenubarSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuSeparator>) {\n\treturn (\n\t\t<DropdownMenuSeparator\n\t\t\tdata-slot=\"menubar-separator\"\n\t\t\tclassName={cn('-mx-1 my-1 h-px bg-border', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<typeof DropdownMenuShortcut>) {\n\treturn (\n\t\t<DropdownMenuShortcut\n\t\t\tdata-slot=\"menubar-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t'ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>) {\n\treturn <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n\tclassName,\n\tinset,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n\tinset?: boolean\n}) {\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\"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\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MenubarSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>) {\n\treturn (\n\t\t<DropdownMenuSubContent\n\t\t\tdata-slot=\"menubar-sub-content\"\n\t\t\tclassName={cn(\n\t\t\t\t'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\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\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:ui",
      "target": "components/ui/menubar.tsx"
    }
  ],
  "meta": {
    "new": true
  },
  "type": "registry:ui"
}