{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"menubar","type":"registry:ui","title":"Menubar","description":"The row of menus along the top of an app: File, Edit, View.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-portal.json","https://dashral.com/r/dropdown-menu.json"],"files":[{"path":"registry/dashral/menubar.tsx","type":"registry:file","target":"components/dashral/menubar.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { usePortalContainer } from \"./lib/portal\"\nimport { MenuItems, type MenuItem } from \"./dropdown-menu\"\n\ntype MenubarMenu = {\n  /** The menu's name on the bar: \"File\", \"Edit\", \"View\". */\n  label: React.ReactNode\n  /** The same items DropdownMenu takes: icons, shortcuts, checkboxes, radio groups, labels, separators, submenus. */\n  items: MenuItem[]\n  disabled?: boolean\n  /** The panel's classes, e.g. a width. */\n  className?: string\n}\n\ntype MenubarProps = Omit<React.ComponentProps<typeof MenubarPrimitive.Root>, \"children\"> & {\n  menus: MenubarMenu[]\n  /** Your router's link, for items with href. */\n  linkAs?: React.ElementType\n}\n\n// The same panel as DropdownMenu's, positioned by the menubar's own variables.\nconst contentClass =\n  \"z-50 max-h-(--radix-menubar-content-available-height) min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\"\n\n/**\n * The row of menus along the top of an app, in one tag: `<Menubar menus={[{ label: \"File\", items: […] }]} />`. Once\n * one is open, hovering or the arrow keys move to the next, as in a desktop app. Items work as in DropdownMenu.\n */\nfunction Menubar({ menus, linkAs, className, value: valueProp, defaultValue, onValueChange, ...props }: MenubarProps) {\n  const portalContainer = usePortalContainer()\n  const [ownValue, setOwnValue] = React.useState(defaultValue ?? \"\")\n  const value = valueProp ?? ownValue\n  // Moving from one open menu to the next swaps the panels at once, as in a desktop app: two panels growing and\n  // shrinking side by side read as a sideways jolt. Only opening the bar and closing it animate.\n  const [switching, setSwitching] = React.useState(false)\n  const change = (next: string) => {\n    setSwitching(value !== \"\" && next !== \"\")\n    setOwnValue(next)\n    onValueChange?.(next)\n  }\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"flex h-10 w-fit items-center gap-0.5 rounded-lg border bg-card p-1 shadow-xs\", className)}\n      value={value}\n      onValueChange={change}\n      {...props}\n    >\n      {menus.map((menu, i) => (\n        <MenubarPrimitive.Menu key={i}>\n          <MenubarPrimitive.Trigger\n            disabled={menu.disabled}\n            className=\"flex h-8 items-center rounded-md px-2.5 text-sm font-medium outline-none select-none hover:bg-accent focus-visible:bg-accent data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n          >\n            {menu.label}\n          </MenubarPrimitive.Trigger>\n          <MenubarPrimitive.Portal container={portalContainer}>\n            <MenubarPrimitive.Content align=\"start\" sideOffset={6} alignOffset={-4} className={cn(contentClass, switching && \"animate-none!\", menu.className)}>\n              <MenuItems items={menu.items} primitives={MenubarPrimitive} linkAs={linkAs} panelClass={contentClass} />\n            </MenubarPrimitive.Content>\n          </MenubarPrimitive.Portal>\n        </MenubarPrimitive.Menu>\n      ))}\n    </MenubarPrimitive.Root>\n  )\n}\n\nexport { Menubar, type MenubarProps, type MenubarMenu }\n"}]}