{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown Menu",
  "description": "Contextual menu triggered by a button, with support for items, separators, and sub-menus.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "checkbox"
  ],
  "files": [
    {
      "path": "packages/ui/src/dropdown-menu.tsx",
      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport {\n  Check as CheckIcon,\n  ChevronRight as ChevronRightIcon,\n  Circle as CircleIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { Checkbox } from \"./checkbox\";\nimport { cn, POPUP_ITEM_HEIGHT } from \"./utils\";\n\n// =============================================================================\n// DropdownMenu (Root)\n// =============================================================================\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n// =============================================================================\n// DropdownMenuPortal\n// =============================================================================\nexport interface DropdownMenuPortalProps extends MenuPrimitive.Portal.Props {}\n\nfunction DropdownMenuPortal({ ...props }: DropdownMenuPortalProps) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n// =============================================================================\n// DropdownMenuTrigger\n// =============================================================================\nexport interface DropdownMenuTriggerProps extends MenuPrimitive.Trigger.Props {}\n\nfunction DropdownMenuTrigger({\n  className,\n  ...props\n}: DropdownMenuTriggerProps) {\n  return (\n    <MenuPrimitive.Trigger\n      className={cn(className)}\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// DropdownMenuContent\n// =============================================================================\nexport interface DropdownMenuContentProps extends MenuPrimitive.Popup.Props {\n  /**\n   * Alignment of the content relative to the trigger\n   * @default \"start\"\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Offset along the alignment axis\n   * @default 0\n   */\n  alignOffset?: number;\n  /**\n   * Side of the trigger to position the popup\n   * @default \"bottom\"\n   */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"inline-start\" | \"inline-end\";\n  /**\n   * Offset from the trigger\n   * @default 4\n   */\n  sideOffset?: number;\n  /**\n   * Size of the menu items\n   * @default \"default\"\n   */\n  size?: \"default\" | \"compact\";\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  size = \"default\",\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground ring-popup-ring\",\n            \"z-[var(--z-dropdown)] max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg p-1 shadow-lg outline-none ring-1 data-closed:overflow-hidden\",\n            className\n          )}\n          data-size={size}\n          data-slot=\"dropdown-menu-content\"\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\n// =============================================================================\n// DropdownMenuGroup\n// =============================================================================\nexport interface DropdownMenuGroupProps extends MenuPrimitive.Group.Props {}\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n// =============================================================================\n// DropdownMenuLabel\n// =============================================================================\nexport interface DropdownMenuLabelProps extends MenuPrimitive.GroupLabel.Props {\n  /**\n   * Whether to add left padding for inset alignment\n   * @default false\n   */\n  inset?: boolean;\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: DropdownMenuLabelProps) {\n  return (\n    <MenuPrimitive.GroupLabel\n      className={cn(\n        \"px-1.5 py-1 text-muted-foreground text-xs data-[inset]:pl-8\",\n        className\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-label\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// DropdownMenuItem\n// =============================================================================\nexport interface DropdownMenuItemProps extends MenuPrimitive.Item.Props {\n  /**\n   * Whether to add left padding for inset alignment\n   * @default false\n   */\n  inset?: boolean;\n  /**\n   * Visual variant of the item\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"destructive\";\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground\",\n        \"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-[variant=destructive]:*:[svg]:text-destructive\",\n        \"not-data-[variant=destructive]:focus:*:text-accent-foreground\",\n        `group/dropdown-menu-item relative flex ${POPUP_ITEM_HEIGHT} cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 text-sm outline-hidden`,\n        \"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-[inset]:pl-8 data-disabled:opacity-50\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// DropdownMenuSub\n// =============================================================================\nexport interface DropdownMenuSubProps extends MenuPrimitive.SubmenuRoot.Props {}\n\nfunction DropdownMenuSub({ ...props }: DropdownMenuSubProps) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n// =============================================================================\n// DropdownMenuSubTrigger\n// =============================================================================\nexport interface DropdownMenuSubTriggerProps\n  extends MenuPrimitive.SubmenuTrigger.Props {\n  /**\n   * Whether to add left padding for inset alignment\n   * @default false\n   */\n  inset?: boolean;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground\",\n        \"not-data-[variant=destructive]:focus:*:text-accent-foreground\",\n        \"data-popup-open:bg-accent data-popup-open:text-accent-foreground\",\n        `flex ${POPUP_ITEM_HEIGHT} cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 text-sm outline-hidden data-[inset]:pl-8`,\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\n// =============================================================================\n// DropdownMenuSubContent\n// =============================================================================\nexport interface DropdownMenuSubContentProps\n  extends Omit<\n    DropdownMenuContentProps,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > {\n  /**\n   * Alignment of the subcontent\n   * @default \"start\"\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Offset along the alignment axis\n   * @default -3\n   */\n  alignOffset?: number;\n  /**\n   * Side of the trigger to position the popup\n   * @default \"right\"\n   */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"inline-start\" | \"inline-end\";\n  /**\n   * Offset from the trigger\n   * @default 0\n   */\n  sideOffset?: number;\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: DropdownMenuSubContentProps) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground ring-popup-ring\",\n            \"z-[var(--z-dropdown)] w-auto min-w-24 origin-(--transform-origin) overflow-hidden rounded-md p-1 shadow-lg ring-1\",\n            className\n          )}\n          data-slot=\"dropdown-menu-sub-content\"\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\n// =============================================================================\n// DropdownMenuCheckboxItem\n// =============================================================================\nexport interface DropdownMenuCheckboxItemProps\n  extends MenuPrimitive.CheckboxItem.Props {\n  /**\n   * Visual style of the checkbox indicator\n   * - \"indicator\": check icon on the right (default)\n   * - \"control\": renders a real Checkbox component on the left\n   * @default \"indicator\"\n   */\n  variant?: \"indicator\" | \"control\";\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  variant = \"indicator\",\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground\",\n        variant === \"indicator\" && \"focus:*:text-accent-foreground\",\n        `relative flex ${POPUP_ITEM_HEIGHT} cursor-pointer select-none items-center gap-1.5 rounded-md text-sm outline-hidden`,\n        variant === \"indicator\" ? \"pr-8 pl-1.5\" : \"px-1.5\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"dropdown-menu-checkbox-item\"\n      {...props}\n    >\n      {variant === \"control\" ? (\n        <Checkbox\n          checked={checked ?? false}\n          className=\"pointer-events-none after:hidden focus-visible:outline-none\"\n          tabIndex={-1}\n        />\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 className=\"size-4\" />\n          </MenuPrimitive.CheckboxItemIndicator>\n        </span>\n      )}\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\n// =============================================================================\n// DropdownMenuRadioGroup\n// =============================================================================\nexport interface DropdownMenuRadioGroupProps\n  extends MenuPrimitive.RadioGroup.Props {}\n\nfunction DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// DropdownMenuRadioItem\n// =============================================================================\nexport interface DropdownMenuRadioItemProps\n  extends MenuPrimitive.RadioItem.Props {\n  /**\n   * Visual style of the radio indicator\n   * - \"indicator\": check icon on the right (default)\n   * - \"control\": renders a real Radio component on the left\n   * @default \"indicator\"\n   */\n  variant?: \"indicator\" | \"control\";\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  variant = \"indicator\",\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <MenuPrimitive.RadioItem\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground\",\n        variant === \"indicator\" && \"focus:*:text-accent-foreground\",\n        `relative flex ${POPUP_ITEM_HEIGHT} cursor-pointer select-none items-center gap-1.5 rounded-md text-sm outline-hidden`,\n        variant === \"indicator\" ? \"pr-8 pl-1.5\" : \"px-1.5\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"dropdown-menu-radio-item\"\n      {...props}\n    >\n      {variant === \"control\" ? (\n        <span\n          className={cn(\n            \"relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border\",\n            \"border-input bg-input-bg text-primary\",\n            \"[[data-checked]_&]:border-primary [[data-checked]_&]:bg-primary [[data-checked]_&]:text-primary-foreground\",\n            \"pointer-events-none\"\n          )}\n          data-slot=\"dropdown-menu-radio-control\"\n        >\n          <MenuPrimitive.RadioItemIndicator>\n            <CircleIcon className=\"size-2 fill-current\" />\n          </MenuPrimitive.RadioItemIndicator>\n        </span>\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 className=\"size-4\" />\n          </MenuPrimitive.RadioItemIndicator>\n        </span>\n      )}\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\n// =============================================================================\n// DropdownMenuSeparator\n// =============================================================================\nexport interface DropdownMenuSeparatorProps\n  extends MenuPrimitive.Separator.Props {}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: DropdownMenuSeparatorProps) {\n  return (\n    <MenuPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border-muted\", className)}\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// DropdownMenuShortcut\n// =============================================================================\nexport interface DropdownMenuShortcutProps\n  extends React.ComponentProps<\"span\"> {}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: DropdownMenuShortcutProps) {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-muted-foreground text-xs tracking-widest group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      data-slot=\"dropdown-menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport type { MenuRootProps as DropdownMenuProps } from \"@base-ui/react/menu\";\n// =============================================================================\n// Exports\n// =============================================================================\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}