{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "core-dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown and Ellipsis Menu",
  "description": "Portable shadcn/Base UI dropdown menu primitives and a standard EllipsisMenu trigger. Shares selector popup styling, keyboard navigation, focus return, collision bounds and document/fullscreen-aware portals. Compose radio, checkbox, action and submenu items; use ActionMenu for data-driven action lists.",
  "dependencies": [
    "@base-ui/react",
    "maru-icons@^0.0.1",
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/dropdown-menu.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/dropdown-menu\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport {\n  OVERLAY_POSITIONER_DEFAULTS,\n  mergeOverlayPopupStyle,\n  OverlayOwnerProvider,\n  useOverlayTriggerRef,\n  useOverlayPortalContainer,\n} from \"maruaudio/ui/shared/overlay-container\"\nimport { cn } from \"maruaudio/ui/shared/shadcn-utils\"\nimport { UI_KIT_PORTABLE_STYLES } from \"maruaudio/ui/shared/portable-styles\"\nimport { ChevronRightIcon, CheckIcon, EllipsisIcon } from \"maru-icons/react\"\n\nfunction DropdownMenu({ onOpenChange, ...props }: MenuPrimitive.Root.Props) {\n  return (\n    <OverlayOwnerProvider\n      triggerId={props.triggerId}\n      defaultTriggerId={props.defaultTriggerId}\n    >\n      {(register) => (\n        <MenuPrimitive.Root\n          {...props}\n          onOpenChange={(open, details) => {\n            onOpenChange?.(open, details)\n            if (open && !details.isCanceled && details.trigger)\n              register(details.trigger)\n          }}\n        />\n      )}\n    </OverlayOwnerProvider>\n  )\n}\n\nfunction DropdownMenuPortal({\n  container,\n  ...props\n}: MenuPrimitive.Portal.Props) {\n  const target = useOverlayPortalContainer(container)\n  return (\n    <MenuPrimitive.Portal\n      data-slot=\"dropdown-menu-portal\"\n      {...props}\n      container={target}\n    />\n  )\n}\n\nfunction DropdownMenuTrigger({ ref, ...props }: MenuPrimitive.Trigger.Props) {\n  const triggerRef = useOverlayTriggerRef(ref)\n  return (\n    <MenuPrimitive.Trigger\n      ref={triggerRef}\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  positionerProps,\n  portalProps,\n  style,\n  children,\n  portableStyles = true,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    positionerProps?: Omit<MenuPrimitive.Positioner.Props, \"children\">\n    portalProps?: Omit<MenuPrimitive.Portal.Props, \"children\">\n    /** Isolated faces need fallback CSS; application hosts already load it. */\n    portableStyles?: boolean\n  }) {\n  const container = useOverlayPortalContainer(portalProps?.container)\n  return (\n    <MenuPrimitive.Portal {...portalProps} container={container}>\n      <MenuPrimitive.Positioner\n        {...OVERLAY_POSITIONER_DEFAULTS}\n        className=\"isolate z-50 outline-none\"\n        style={{ zIndex: \"var(--uikit-z-overlay, 2147483647)\" }}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        {...positionerProps}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none 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 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n          style={mergeOverlayPopupStyle(style)}\n        >\n          {portableStyles ? (\n            <style data-maru-ui-kit-portable>{UI_KIT_PORTABLE_STYLES}</style>\n          ) : null}\n          {children}\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none 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:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  positionerProps,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      positionerProps={{\n        collisionAvoidance: {\n          side: \"flip\",\n          align: \"shift\",\n          fallbackAxisSide: \"none\",\n        },\n        ...positionerProps,\n      }}\n      className={cn(\n        \"w-auto min-w-[96px] 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      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 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      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n\n/** Standard button-triggered options menu. Compose the shadcn/Base UI menu\n * items below; Base UI owns focus, keyboard navigation, dismissal and portals.\n * Use ActionMenu for an existing data-driven ContextMenuAction list. */\nexport type EllipsisMenuProps = {\n  children: React.ReactNode\n  \"aria-label\"?: string\n  rootProps?: Omit<React.ComponentProps<typeof DropdownMenu>, \"children\">\n  triggerProps?: Omit<\n    React.ComponentProps<typeof DropdownMenuTrigger>,\n    \"children\" | \"aria-label\"\n  >\n  contentProps?: Omit<\n    React.ComponentProps<typeof DropdownMenuContent>,\n    \"children\"\n  >\n}\n\nexport function EllipsisMenu({\n  children,\n  \"aria-label\": label = \"More options\",\n  rootProps,\n  triggerProps,\n  contentProps,\n}: EllipsisMenuProps) {\n  return (\n    <DropdownMenu {...rootProps}>\n      <DropdownMenuTrigger\n        aria-label={label}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: 32,\n          height: 32,\n          padding: 0,\n          border: \"1px solid var(--uikit-border, #434a4c)\",\n          borderRadius: 0,\n          background: \"var(--uikit-surface, #242829)\",\n          color: \"var(--uikit-text, #edece6)\",\n          cursor: \"pointer\",\n        }}\n        {...triggerProps}\n      >\n        <EllipsisIcon aria-hidden=\"true\" size={16} />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" {...contentProps}>\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/dropdown-menu.tsx"
    }
  ]
}