{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown menu",
  "description": "Shadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/dropdown-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/dropdown-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { ChevronDownIcon, ChevronRightIcon, CheckIcon } from \"lucide-react\"\n\n/** A menu that opens from a trigger: items with shortcuts, labels, separators, checkbox and radio items, and nested submenus. */\nfunction DropdownMenu({ children, ...props }: MenuPrimitive.Root.Props) {\n  return (\n    <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n      {children ?? <SampleMenu />}\n    </MenuPrimitive.Root>\n  )\n}\n\n/* Rendered when <DropdownMenu /> has no children: an account menu for Lumen. */\nfunction SampleMenu() {\n  const [notify, setNotify] = React.useState(true)\n  const [workspace, setWorkspace] = React.useState(\"northwind\")\n  return (\n    <>\n      <DropdownMenuTrigger className={cn(buttonVariants({ variant: \"outline\" }), \"gap-2\")}>\n        Maya Chen\n        <ChevronDownIcon className=\"size-3.5 text-fg-muted\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"min-w-56\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>maya@northwind.io</DropdownMenuLabel>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem checked={notify} onCheckedChange={setNotify}>\n          Email notifications\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>Switch workspace</DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={workspace} onValueChange={(v) => setWorkspace(String(v))}>\n              <DropdownMenuRadioItem value=\"northwind\">Northwind</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"lumen\">Lumen Labs</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"personal\">Personal</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">Log out</DropdownMenuItem>\n      </DropdownMenuContent>\n    </>\n  )\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nconst menuSurface =\n  \"rounded-xl border border-border bg-raised text-fg \" +\n  \"shadow-overlay\"\n\nconst itemBase =\n  \"relative flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-[0.8125rem] outline-none select-none \" +\n  \"transition-[background-color,color] duration-[70ms] \" +\n  \"data-disabled:pointer-events-none data-disabled:opacity-50 \" +\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 6,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"z-50 max-h-(--available-height) min-w-44 w-max origin-(--transform-origin)\",\n            \"overflow-x-hidden overflow-y-auto p-1 outline-none\",\n            menuSurface,\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n            \"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            \"duration-[200ms] data-closed:duration-[160ms]\",\n            className\n          )}\n          {...props}\n        />\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 & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2.5 py-1.5 text-xs font-medium tracking-[0.01em] text-fg-muted data-inset:pl-8\",\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        itemBase,\n        \"data-inset:pl-8\",\n        \"focus:bg-sunken focus:text-fg\",\n        \"data-[variant=destructive]:text-danger data-[variant=destructive]:focus:bg-danger/10 data-[variant=destructive]:focus:text-danger\",\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 & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        itemBase,\n        \"data-inset:pl-8 focus:bg-sunken data-popup-open:bg-sunken data-open:bg-sunken\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4 text-fg-muted\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      side=\"right\"\n      align=\"start\"\n      sideOffset={4}\n      alignOffset={-4}\n      className={cn(\"min-w-36\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        itemBase,\n        \"pr-8 data-inset:pl-8 focus:bg-sunken focus:text-fg\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2.5 flex size-4 items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon className=\"size-4\" />\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 & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        itemBase,\n        \"pr-8 data-inset:pl-8 focus:bg-sunken focus:text-fg\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2.5 flex size-4 items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon className=\"size-4\" />\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-[0.01em] text-fg-muted\",\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"
    }
  ]
}