{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown Menu",
  "description": "@interlace/ui — dropdown-menu primitive (shadcn-compatible).",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "theme"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/dropdown-menu.tsx",
      "target": "components/ui/dropdown-menu.tsx",
      "type": "registry:ui",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction DropdownMenu(props: React.ComponentProps<typeof BaseMenu.Root>) {\n  return <BaseMenu.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal(\n  props: React.ComponentProps<typeof BaseMenu.Portal>,\n) {\n  return <BaseMenu.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger(\n  props: React.ComponentProps<typeof BaseMenu.Trigger>,\n) {\n  return <BaseMenu.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  align = 'start',\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseMenu.Popup> & {\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n}) {\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className=\"z-50\"\n      >\n        <BaseMenu.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'bg-popover text-popover-foreground border-border data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg ring-1 ring-black/5',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n}\n\nfunction DropdownMenuGroup(\n  props: React.ComponentProps<typeof BaseMenu.Group>,\n) {\n  return <BaseMenu.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof BaseMenu.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <BaseMenu.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof BaseMenu.CheckboxItem>) {\n  return (\n    <BaseMenu.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none 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 className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <BaseMenu.CheckboxItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </BaseMenu.CheckboxItemIndicator>\n      </span>\n      {children}\n    </BaseMenu.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup(\n  props: React.ComponentProps<typeof BaseMenu.RadioGroup>,\n) {\n  return (\n    <BaseMenu.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseMenu.RadioItem>) {\n  return (\n    <BaseMenu.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none 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 className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <BaseMenu.RadioItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </BaseMenu.RadioItemIndicator>\n      </span>\n      {children}\n    </BaseMenu.RadioItem>\n  );\n}\n\n// Standalone label (shadcn / radix semantics): a visual heading at the top\n// of the menu, NOT a group label. Base UI's `Menu.GroupLabel` throws when\n// rendered outside a `Menu.Group` ancestor — the canonical consumer pattern\n// (`<DropdownMenuContent><DropdownMenuLabel>Sort by</DropdownMenuLabel>...`)\n// doesn't wrap in a Group, so aliasing `DropdownMenuLabel` to GroupLabel\n// surfaces error #31 on render. For semantic group labelling, wrap the\n// items in `<DropdownMenuGroup>` and place a GroupLabel inside that group;\n// callers that just want a visual heading get this plain div.\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & { inset?: boolean }) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-separator\"\n      role=\"separator\"\n      className={cn('bg-border -mx-1 my-1 h-px', 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        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub(\n  props: React.ComponentProps<typeof BaseMenu.SubmenuRoot>,\n) {\n  return <BaseMenu.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseMenu.SubmenuTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <BaseMenu.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'focus:bg-accent focus:text-accent-foreground data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </BaseMenu.SubmenuTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseMenu.Popup>) {\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner>\n        <BaseMenu.Popup\n          data-slot=\"dropdown-menu-sub-content\"\n          className={cn(\n            'bg-popover text-popover-foreground data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95 z-50 min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"
    }
  ]
}