{
  "schemaVersion": 1,
  "name": "menubar",
  "useFor": "Use for an app-style menu of commands in a dense tool, such as an editor for an agent's notes. In the console's pages prefer buttons and row menus.",
  "constraints": [
    "A menubar for site navigation (use Navigation Menu)",
    "More than six triggers",
    "Triggers without menus"
  ],
  "documentation": "",
  "source": "Extrapolated from the Inkbox console (Figma 427:2715): the tab track (Mailboxes, Contact rules, Custom domains) and the raised panel",
  "exports": [
    "Menubar",
    "MenubarCheckboxItem",
    "MenubarContent",
    "MenubarGroup",
    "MenubarItem",
    "MenubarLabel",
    "MenubarMenu",
    "MenubarPortal",
    "MenubarRadioGroup",
    "MenubarRadioItem",
    "MenubarSeparator",
    "MenubarShortcut",
    "MenubarSub",
    "MenubarSubContent",
    "MenubarSubTrigger",
    "MenubarTrigger"
  ],
  "client": true,
  "docsUrl": "https://inkbox-ds.vercel.app/components/menubar",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/menubar.md",
  "examples": [
    {
      "path": "examples/menubar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CopyIcon, FileTextIcon, PlusIcon, TrashIcon } from \"@phosphor-icons/react/ssr\";\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/components/ui/menubar\";\n\nfunction Bar({ open }: { open?: boolean }) {\n  const [wrap, setWrap] = React.useState(true);\n  const [format, setFormat] = React.useState(\"markdown\");\n  return (\n    <Menubar defaultValue={open ? \"note\" : undefined}>\n      <MenubarMenu value=\"note\">\n        <MenubarTrigger>Note</MenubarTrigger>\n        <MenubarContent className=\"w-56\">\n          <MenubarGroup>\n            <MenubarItem>\n              <PlusIcon />\n              New note\n              <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <CopyIcon weight=\"duotone\" />\n              Duplicate\n              <MenubarShortcut>⌘D</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <FileTextIcon weight=\"fill\" />\n                Export as\n              </MenubarSubTrigger>\n              <MenubarSubContent className=\"w-40\">\n                <MenubarItem>Markdown</MenubarItem>\n                <MenubarItem>Plain text</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n          </MenubarGroup>\n          <MenubarSeparator />\n          <MenubarItem variant=\"destructive\">\n            <TrashIcon weight=\"fill\" />\n            Delete note\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu value=\"edit\">\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent className=\"w-52\">\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu value=\"view\">\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent className=\"w-52\">\n          <MenubarCheckboxItem checked={wrap} onCheckedChange={(v) => setWrap(v === true)}>\n            Wrap lines\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarLabel>Show as</MenubarLabel>\n          <MenubarRadioGroup value={format} onValueChange={setFormat}>\n            <MenubarRadioItem value=\"markdown\">Markdown</MenubarRadioItem>\n            <MenubarRadioItem value=\"formatted\">Formatted</MenubarRadioItem>\n          </MenubarRadioGroup>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  );\n}\n\nexport function Preview() {\n  return <Bar />;\n}\n\nexport function Open() {\n  return (\n    <div className=\"min-h-80\">\n      <Bar open />\n    </div>\n  );\n}\n",
      "exports": [
        "Preview",
        "Open"
      ],
      "requires": [
        "menubar"
      ],
      "packages": [
        "@phosphor-icons/react"
      ],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/menubar/Preview"
        },
        {
          "name": "Open",
          "url": "https://inkbox-ds.vercel.app/preview/menubar/Open"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Menubar",
  "description": "A lilac tab track of medium triggers whose menus are the dropdown menu's raised panels.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "surface",
    "utils"
  ],
  "packages": [
    "radix-ui",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "components/ui/menubar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport { CaretRightIcon, CheckIcon } from \"@phosphor-icons/react/ssr\";\n\nimport { usePortalContainer } from \"@/lib/surface\";\nimport { cn } from \"@/lib/utils\";\n\n// A menu bar, extrapolated from the console (Figma 427:2715). The bar is the tab track: lilac with 10px corners and a\n// 2px inset, its triggers 36px with 8px corners and 14px medium ink, the open one a white key with Shadow/S. Its menus\n// are drawn as the dropdown menu (moving between them along the bar is instant: a closing panel that lingered would\n// dismiss the next one, and the move is made by keyboard and pointer many times): the panel is a raised white panel (8px corners, the floating\n// shadow) with 4px of padding; items are 36px rows with 8px corners like the rail's nav rows, a 20px glyph in the\n// action-glyph purple 10px from a 14px ink label, and the lilac under the highlighted row. Section labels are 13px in\n// the label purple (\"Channels\"), separators the rail's hairline, shortcuts 12px muted, destructive items red. The\n// panel grows out of its trigger from 96 percent with a fade; highlighting a row is instant (menus are used by keyboard\n// and many times a day).\nconst CONTENT =\n  \"z-50 max-h-(--radix-menubar-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-control bg-surface p-1 text-fg shadow-floating outline-none data-[state=open]:animate-pop-in\";\nconst ITEM =\n  \"relative flex h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 font-sans text-body leading-tight text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-subtle data-[inset]:pl-10.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5 [&_svg:not([class*='text-'])]:text-icon-secondary\";\n\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return <MenubarPrimitive.Root data-slot=\"menubar\" className={cn(\"flex h-10 w-fit items-center gap-1 rounded-panel bg-subtle p-0.5\", className)} {...props} />;\n}\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarPortal(props: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  const container = usePortalContainer();\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" container={container} {...props} />;\n}\n\nfunction MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex h-9 items-center gap-2 rounded-control px-2.5 font-sans text-body leading-tight font-medium text-fg outline-none select-none transition-[background-color,box-shadow] duration-150 ease-out hover:bg-subtle-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring data-[state=open]:bg-surface data-[state=open]:shadow-s motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarContent({ className, align = \"start\", alignOffset = -2, sideOffset = 8, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content data-slot=\"menubar-content\" align={align} alignOffset={alignOffset} sideOffset={sideOffset} className={cn(CONTENT, \"origin-(--radix-menubar-content-transform-origin)\", className)} {...props} />\n    </MenubarPortal>\n  );\n}\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarItem({ className, inset, variant = \"default\", ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & { inset?: boolean; variant?: \"default\" | \"destructive\" }) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(ITEM, \"data-[variant=destructive]:text-danger data-[variant=destructive]:[&_svg]:text-danger\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem data-slot=\"menubar-checkbox-item\" checked={checked} className={cn(ITEM, \"pl-10.5\", className)} {...props}>\n      <span className=\"pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon weight=\"bold\" className=\"size-4.5 text-fg-brand\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n// The selected choice wears the console's radio mark: a pink ring around white.\nfunction MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem data-slot=\"menubar-radio-item\" className={cn(ITEM, \"pl-10.5\", className)} {...props}>\n      <span className=\"pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"block size-3.5 rounded-pill border-[3.5px] border-pink bg-surface\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\nfunction MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {\n  return <MenubarPrimitive.Label data-slot=\"menubar-label\" data-inset={inset || undefined} className={cn(\"px-2.5 pt-2 pb-1 font-sans text-body-sm leading-tight text-fg-label data-[inset]:pl-10.5\", className)} {...props} />;\n}\n\nfunction MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return <MenubarPrimitive.Separator data-slot=\"menubar-separator\" className={cn(\"-mx-1 my-1 h-px bg-line-subtle\", className)} {...props} />;\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"menubar-shortcut\" className={cn(\"ml-auto pl-4 font-sans text-caption text-fg-muted\", className)} {...props} />;\n}\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.SubTrigger data-slot=\"menubar-sub-trigger\" data-inset={inset || undefined} className={cn(ITEM, \"data-[state=open]:bg-subtle\", className)} {...props}>\n      {children}\n      <CaretRightIcon className=\"ml-auto size-4.5 text-fg-muted\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\nfunction MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.SubContent data-slot=\"menubar-sub-content\" className={cn(CONTENT, \"max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin)\", className)} {...props} />\n    </MenubarPortal>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"
    }
  ]
}