{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"corded-menu","title":"Corded Menu","description":"Dropdown and context menu primitives with shared Discord-inspired styling.","dependencies":["@base-ui/react"],"registryDependencies":["utils","corded-theme"],"files":[{"path":"registry/default/ui/corded-menu.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu } from \"@base-ui/react/context-menu\"\nimport { Menu } from \"@base-ui/react/menu\"\nimport { ChevronRight } from \"lucide-react\"\n\nexport interface CordedMenuItem {\n  label: string\n  icon?: React.ReactNode\n  shortcut?: string\n  onClick?: () => void\n  danger?: boolean\n  disabled?: boolean\n  separatorBefore?: boolean\n  items?: CordedMenuItem[]\n}\n\nconst popupClass = \"mana-menu w-64\"\nconst itemClass = \"mana-menu-item group mana-text-sm-medium\"\nconst dangerClass = \"\"\nconst separatorClass = \"mana-menu-separator\"\n\nfunction ItemContent({ item, submenu = false }: { item: CordedMenuItem; submenu?: boolean }) {\n  return <>{item.icon ? <span className=\"mana-menu-item-icon [&_svg]:size-5\">{item.icon}</span> : null}<span className=\"mana-menu-item-label\"><span className=\"mana-menu-item-label-text\">{item.label}</span></span>{item.shortcut ? <span className=\"mana-menu-item-trailing mana-text-xs-medium\">{item.shortcut}</span> : null}{submenu ? <span className=\"mana-menu-item-trailing\"><ChevronRight className=\"size-4\" /></span> : null}</>\n}\n\nfunction MenuItems({ items }: { items: CordedMenuItem[] }) {\n  return items.map((item, index) => <React.Fragment key={`${item.label}-${index}`}>{item.separatorBefore ? <Menu.Separator className={separatorClass} /> : null}{item.items?.length ? <Menu.SubmenuRoot><Menu.SubmenuTrigger data-variant={item.danger ? \"danger\" : undefined} className={`${itemClass} ${item.danger ? dangerClass : \"\"}`}><ItemContent item={item} submenu /></Menu.SubmenuTrigger><Menu.Portal><Menu.Positioner sideOffset={6} alignOffset={-8} className=\"z-[var(--mana-z-popout)]\"><Menu.Popup className={popupClass}><MenuItems items={item.items} /></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.SubmenuRoot> : <Menu.Item disabled={item.disabled} onClick={item.onClick} data-variant={item.danger ? \"danger\" : undefined} className={`${itemClass} ${item.danger ? dangerClass : \"\"}`}><ItemContent item={item} /></Menu.Item>}</React.Fragment>)\n}\n\nfunction ContextItems({ items }: { items: CordedMenuItem[] }) {\n  return items.map((item, index) => <React.Fragment key={`${item.label}-${index}`}>{item.separatorBefore ? <ContextMenu.Separator className={separatorClass} /> : null}{item.items?.length ? <ContextMenu.SubmenuRoot><ContextMenu.SubmenuTrigger data-variant={item.danger ? \"danger\" : undefined} className={`${itemClass} ${item.danger ? dangerClass : \"\"}`}><ItemContent item={item} submenu /></ContextMenu.SubmenuTrigger><ContextMenu.Portal><ContextMenu.Positioner sideOffset={6} alignOffset={-8} className=\"z-[var(--mana-z-popout)]\"><ContextMenu.Popup className={popupClass}><ContextItems items={item.items} /></ContextMenu.Popup></ContextMenu.Positioner></ContextMenu.Portal></ContextMenu.SubmenuRoot> : <ContextMenu.Item disabled={item.disabled} onClick={item.onClick} data-variant={item.danger ? \"danger\" : undefined} className={`${itemClass} ${item.danger ? dangerClass : \"\"}`}><ItemContent item={item} /></ContextMenu.Item>}</React.Fragment>)\n}\n\nexport function CordedMenu({ trigger, items, header }: { trigger: React.ReactElement; items: CordedMenuItem[]; header?: React.ReactNode }) {\n  return <Menu.Root><Menu.Trigger render={trigger} /><Menu.Portal><Menu.Positioner sideOffset={8} className=\"z-[var(--mana-z-popout)]\"><Menu.Popup className={popupClass}>{header ? <div className=\"mana-menu-group-label mana-text-xs-semibold\">{header}</div> : null}<MenuItems items={items} /></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.Root>\n}\n\nexport function CordedContextMenu({ children, items, header }: { children: React.ReactElement; items: CordedMenuItem[]; header?: React.ReactNode }) {\n  return <ContextMenu.Root><ContextMenu.Trigger render={children} /><ContextMenu.Portal><ContextMenu.Positioner className=\"z-[var(--mana-z-popout)]\"><ContextMenu.Popup className={popupClass}>{header ? <div className=\"mana-menu-group-label mana-text-xs-semibold\">{header}</div> : null}<ContextItems items={items} /></ContextMenu.Popup></ContextMenu.Positioner></ContextMenu.Portal></ContextMenu.Root>\n}\n","type":"registry:ui","target":"components/ui/corded-menu.tsx"}],"type":"registry:ui"}