{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "dependencies": ["@base-ui/react", "@phosphor-icons/react"],
  "registryDependencies": ["utils"],
  "files": [
    {
      "path": "registry/ui/dropdown-menu.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\n\nimport { cn } from '@/registry/lib/utils';\nimport { CheckIcon, CaretRightIcon as ChevronRightIcon } from '@phosphor-icons/react';\n\ntype DropdownVariant = 'soft' | 'solid';\ntype DropdownTheme = 'gray' | 'accent';\n\ninterface DropdownMenuContextValue {\n  variant: DropdownVariant;\n  theme: DropdownTheme;\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue>({\n  variant: 'soft',\n  theme: 'gray',\n});\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\nfunction DropdownMenuContent({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  variant = 'soft',\n  theme = 'gray',\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    variant?: DropdownVariant;\n    theme?: DropdownTheme;\n  }) {\n  return (\n    <DropdownMenuContext.Provider value={{ variant, theme }}>\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            data-variant={variant}\n            data-theme={theme !== 'gray' ? theme : undefined}\n            className={cn(menuContentBaseStyles, className)}\n            {...props}\n          />\n        </MenuPrimitive.Positioner>\n      </MenuPrimitive.Portal>\n    </DropdownMenuContext.Provider>\n  );\n}\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\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-(--menu-item-text-muted) data-inset:pl-7',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nconst menuContentBaseStyles = [\n  'z-50 max-h-(--available-height) min-w-40 max-w-96 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-overlay p-1 text-primary shadow-md ring-1 ring-line duration-100 outline-none',\n  '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',\n  'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n  'data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n] as const;\n\nconst menuItemBaseStyles = [\n  'relative flex cursor-default items-center gap-1.5 rounded-(--menu-item-radius) px-3 py-0.75 text-sm text-[var(--menu-item-text)] outline-hidden select-none',\n  'data-inset:pl-7',\n  'data-disabled:pointer-events-none data-disabled:opacity-50',\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n] as const;\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  const { variant: menuVariant } = React.useContext(DropdownMenuContext);\n\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      data-theme={variant === 'destructive' ? 'destructive' : undefined}\n      className={cn(\n        'group/dropdown-menu-item',\n        menuItemBaseStyles,\n        menuVariant === 'solid'\n          ? 'focus:bg-fill focus:text-on-fill focus:**:text-on-fill'\n          : 'focus:bg-hover  focus:text-(--menu-item-text) focus:**:text-(--menu-item-text)',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  const { variant: menuVariant } = React.useContext(DropdownMenuContext);\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        menuItemBaseStyles,\n        menuVariant === 'solid'\n          ? 'focus:bg-fill focus:text-on-fill data-popup-open:bg-fill data-popup-open:text-on-fill data-open:bg-fill data-open:text-on-fill'\n          : 'focus:bg-active focus:text-(--menu-item-text) data-popup-open:bg-active data-popup-open:text-(--menu-item-text) data-open:bg-active data-open:text-(--menu-item-text)',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\nfunction DropdownMenuSubContent({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof DropdownMenuContent>, 'variant' | 'theme'>) {\n  const { variant, theme } = React.useContext(DropdownMenuContext);\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      variant={variant}\n      theme={theme}\n      className={cn('w-auto min-w-24', className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  const { variant: menuVariant } = React.useContext(DropdownMenuContext);\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-(--menu-item-radius) py-1 pr-8 pl-1.5 text-sm text-(--menu-item-text) outline-hidden select-none 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        menuVariant === 'solid'\n          ? 'focus:bg-fill focus:text-on-fill focus:**:text-on-fill'\n          : 'focus:bg-active focus:text-(--menu-item-text) focus:**:text-(--menu-item-text)',\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}\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  const { variant: menuVariant } = React.useContext(DropdownMenuContext);\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-(--menu-item-radius) py-1 pr-8 pl-1.5 text-sm text-(--menu-item-text) outline-hidden select-none 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        menuVariant === 'solid'\n          ? 'focus:bg-fill focus:text-on-fill focus:**:text-on-fill'\n          : 'focus:bg-active focus:text-(--menu-item-text) focus:**:text-(--menu-item-text)',\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}\nfunction DropdownMenuSeparator({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.Separator.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      data-inset={inset}\n      className={cn('-mx-1 my-1 h-px bg-line data-inset:mx-0', className)}\n      {...props}\n    />\n  );\n}\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto pl-4 text-xs tracking-widest text-(--menu-item-text-secondary) group-focus/dropdown-menu-item:text-inherit',\n        className\n      )}\n      {...props}\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",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}