{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown Menu",
  "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/dropdown-menu.tsx",
      "content": "\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction DropdownMenu<Payload>(props: BaseMenu.Root.Props<Payload>) {\n  return <BaseMenu.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuTrigger<Payload>({\n  className,\n  ...props\n}: BaseMenu.Trigger.Props<Payload>) {\n  return (\n    <BaseMenu.Trigger\n      className={cn(\"select-none\", className)}\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPortal({ className, ...props }: BaseMenu.Portal.Props) {\n  return (\n    <BaseMenu.Portal\n      className={cn(className)}\n      data-slot=\"dropdown-menu-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuBackdrop({\n  className,\n  ...props\n}: BaseMenu.Backdrop.Props) {\n  return (\n    <BaseMenu.Backdrop\n      className={cn(\"fixed inset-0\", className)}\n      data-slot=\"dropdown-menu-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPositioner({\n  className,\n  ...props\n}: BaseMenu.Positioner.Props) {\n  return (\n    <BaseMenu.Positioner\n      className={cn(\"max-w-(--available-width)\", className)}\n      data-slot=\"dropdown-menu-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPopup({ className, ...props }: BaseMenu.Popup.Props) {\n  return (\n    <BaseMenu.Popup\n      className={cn(\"relative\", className)}\n      data-slot=\"dropdown-menu-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuArrow({ className, ...props }: BaseMenu.Arrow.Props) {\n  return (\n    <BaseMenu.Arrow\n      className={cn(\n        \"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BaseMenu.Arrow>\n  );\n}\n\nconst dropdownMenuItemVariants = cva(\n  [\n    \"flex items-center gap-2 py-1.5 px-3.5 text-sm\",\n    \"outline-none select-none cursor-default\",\n    \"highlight-on-active\",\n    \"data-disabled:opacity-50 data-disabled:pointer-events-none\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg:not([class*='text-'])]:text-foreground\",\n  ],\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"\",\n        destructive: [\n          \"text-destructive *:[svg]:!text-destructive\",\n          \"data-[highlighted]:text-destructive data-[highlighted]:before:bg-destructive/10 dark:data-[highlighted]:before:bg-destructive/20\",\n        ],\n      },\n    },\n  },\n);\n\ntype DropdownMenuItemProps = BaseMenu.Item.Props &\n  VariantProps<typeof dropdownMenuItemVariants> & {\n    unstyled?: boolean;\n  };\n\nfunction DropdownMenuItem({\n  className,\n  variant = \"default\",\n  unstyled = false,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <BaseMenu.Item\n      className={cn(\n        unstyled ? \"\" : dropdownMenuItemVariants({ variant }),\n        className,\n      )}\n      data-slot=\"dropdown-menu-item\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuLinkItem({\n  className,\n  unstyled = false,\n  ...props\n}: BaseMenu.LinkItem.Props & {\n  unstyled?: boolean;\n}) {\n  return (\n    <BaseMenu.LinkItem\n      className={cn(\n        unstyled ? \"\" : dropdownMenuItemVariants({ variant: \"default\" }),\n        className,\n      )}\n      data-slot=\"dropdown-menu-link-item\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: BaseMenu.Separator.Props) {\n  return (\n    <BaseMenu.Separator\n      className={cn(\"bg-border pointer-events-none my-1 h-px\", className)}\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuGroup({ className, ...props }: BaseMenu.Group.Props) {\n  return (\n    <BaseMenu.Group\n      className={cn(className)}\n      data-slot=\"dropdown-menu-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuGroupLabel({\n  className,\n  ...props\n}: BaseMenu.GroupLabel.Props) {\n  return (\n    <BaseMenu.GroupLabel\n      className={cn(\n        \"px-3.5 py-1.5 text-xs text-muted-foreground font-medium select-none\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  className,\n  ...props\n}: BaseMenu.RadioGroup.Props) {\n  return (\n    <BaseMenu.RadioGroup\n      className={cn(className)}\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  children,\n  className,\n  ...props\n}: BaseMenu.RadioItem.Props) {\n  return (\n    <BaseMenu.RadioItem\n      className={cn(className)}\n      {...props}\n      data-slot=\"dropdown-menu-radio-item\"\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  ...props\n}: BaseMenu.CheckboxItem.Props) {\n  return (\n    <BaseMenu.CheckboxItem\n      className={cn(className)}\n      data-slot=\"dropdown-menu-checkbox-item\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItemIndicator({\n  className,\n  ...props\n}: BaseMenu.CheckboxItemIndicator.Props) {\n  return (\n    <BaseMenu.CheckboxItemIndicator\n      className={cn(className)}\n      data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSubMenu(props: BaseMenu.SubmenuRoot.Props) {\n  return <BaseMenu.SubmenuRoot data-slot=\"dropdown-menu-sub-menu\" {...props} />;\n}\n\nfunction DropdownMenuSubMenuTrigger({\n  className,\n  ...props\n}: BaseMenu.SubmenuTrigger.Props) {\n  return (\n    <BaseMenu.SubmenuTrigger\n      className={cn(className)}\n      data-slot=\"dropdown-menu-sub-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSubMenuContent({\n  align = \"start\",\n  side = \"right\",\n  sideOffset = -4,\n  alignOffset = 0,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      align={align}\n      alignOffset={alignOffset}\n      data-slot=\"dropdown-menu-sub-menu-content\"\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSubMenuTriggerGroup({\n  children,\n  className,\n  ...props\n}: BaseMenu.SubmenuTrigger.Props) {\n  return (\n    <BaseMenu.SubmenuTrigger\n      className={cn(\n        \"flex items-center gap-2 py-1.5 px-3.5 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg:not([class*='text-'])]:text-foreground\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-sub-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </BaseMenu.SubmenuTrigger>\n  );\n}\n\ntype DropdownMenuContentProps = BaseMenu.Popup.Props & {\n  side?: BaseMenu.Positioner.Props[\"side\"];\n  sideOffset?: BaseMenu.Positioner.Props[\"sideOffset\"];\n  align?: BaseMenu.Positioner.Props[\"align\"];\n  alignOffset?: BaseMenu.Positioner.Props[\"alignOffset\"];\n  showArrow?: boolean;\n  matchAnchorWidth?: boolean;\n};\n\nfunction DropdownMenuContent({\n  children,\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 8,\n  showArrow = false,\n  matchAnchorWidth = true,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          matchAnchorWidth && \"w-(--anchor-width)\",\n          \"max-h-(--available-height)\",\n        )}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseMenu.Popup\n          className={cn(\n            \"relative bg-popover text-popover-foreground rounded-md shadow-md py-1\",\n            \"overlay-outline animate-popup\",\n            className,\n          )}\n          data-slot=\"dropdown-menu-content\"\n          {...props}\n        >\n          {showArrow && <DropdownMenuArrow />}\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n}\n\ninterface DropdownMenuCheckboxItemContentProps\n  extends BaseMenu.CheckboxItem.Props {\n  indicatorPlacement?: \"start\" | \"end\";\n  indicatorIcon?: React.ReactNode;\n}\n\nfunction DropdownMenuCheckboxItemContent({\n  className,\n  children,\n  checked,\n  indicatorPlacement = \"start\",\n  indicatorIcon = <CheckIcon className=\"size-4\" />,\n  ...props\n}: DropdownMenuCheckboxItemContentProps) {\n  return (\n    <BaseMenu.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid items-center gap-2 py-1.5 pr-3 pl-3.5 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        indicatorPlacement === \"start\" && \"grid-cols-[1rem_1fr]\",\n        indicatorPlacement === \"end\" && \"grid-cols-[1fr_1rem]\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-checkbox-item-content\"\n      {...props}\n    >\n      <BaseMenu.CheckboxItemIndicator\n        className={cn(\n          \"flex items-center justify-center row-start-1\",\n          \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          indicatorPlacement === \"start\" ? \"col-start-1\" : \"col-start-2\",\n        )}\n      >\n        {indicatorIcon}\n      </BaseMenu.CheckboxItemIndicator>\n      <div\n        className={cn(\n          \"flex items-center gap-2 row-start-1\",\n          indicatorPlacement === \"start\" ? \"col-start-2\" : \"col-start-1\",\n        )}\n      >\n        {children}\n      </div>\n    </BaseMenu.CheckboxItem>\n  );\n}\n\ninterface DropdownMenuRadioItemContentProps extends BaseMenu.RadioItem.Props {\n  indicatorPlacement?: \"start\" | \"end\";\n  indicatorIcon?: React.ReactNode;\n}\n\nfunction DropdownMenuRadioItemContent({\n  children,\n  className,\n  indicatorPlacement = \"start\",\n  indicatorIcon = <CircleIcon className=\"size-2.5 fill-current\" />,\n  ...props\n}: DropdownMenuRadioItemContentProps) {\n  return (\n    <BaseMenu.RadioItem\n      className={cn(\n        \"grid items-center gap-2 py-1.5 pr-3 pl-3.5 text-sm\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        indicatorPlacement === \"start\" && \"grid-cols-[1rem_1fr]\",\n        indicatorPlacement === \"end\" && \"grid-cols-[1fr_1rem]\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-radio-item-content\"\n      {...props}\n    >\n      <BaseMenu.RadioItemIndicator\n        className={cn(\n          \"flex items-center justify-center row-start-1\",\n          \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          indicatorPlacement === \"start\" ? \"col-start-1\" : \"col-start-2\",\n        )}\n      >\n        {indicatorIcon}\n      </BaseMenu.RadioItemIndicator>\n      <div\n        className={cn(\n          \"flex items-center gap-2 row-start-1\",\n          indicatorPlacement === \"start\" ? \"col-start-2\" : \"col-start-1\",\n        )}\n      >\n        {children}\n      </div>\n    </BaseMenu.RadioItem>\n  );\n}\n\nconst createDropdownMenuHandle = BaseMenu.createHandle;\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuBackdrop,\n  DropdownMenuPositioner,\n  DropdownMenuPopup,\n  DropdownMenuArrow,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuLinkItem,\n  DropdownMenuSeparator,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuSubMenu,\n  DropdownMenuSubMenuTrigger,\n  DropdownMenuShortcut,\n  createDropdownMenuHandle,\n  // Composite components\n  DropdownMenuContent,\n  DropdownMenuCheckboxItemContent,\n  DropdownMenuRadioItemContent,\n  DropdownMenuSubMenuTriggerGroup,\n  DropdownMenuSubMenuContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}