{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown Menu",
  "description": "Terminal-style dropdown menu: selection inversion, ✓/● indicators, ▸ submenu glyph, no hover/radius/shadow. Includes checkbox, radio, sub-menu, shortcut, separator.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu"
  ],
  "registryDependencies": [
    "utils",
    "theme-catppuccin-mocha",
    "font-jetbrains-mono"
  ],
  "files": [
    {
      "path": "registry/ui/dropdown-menu.tsx",
      "content": "import * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nfunction DropdownMenu({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n\treturn <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Trigger\n\t\t\tdata-slot=\"dropdown-menu-trigger\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuPortal({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Portal\n\t\t\tdata-slot=\"dropdown-menu-portal\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n\treturn (\n\t\t<DropdownMenuPortal>\n\t\t\t<DropdownMenuPrimitive.Content\n\t\t\t\tdata-slot=\"dropdown-menu-content\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-50 min-w-[8rem] overflow-hidden border border-border bg-card font-mono text-foreground\",\n\t\t\t\t\t\"data-[state=open]:animate-[termcn-fade_150ms_ease-out] data-[state=closed]:animate-[termcn-fade-out_150ms_ease-out]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</DropdownMenuPortal>\n\t);\n}\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n\tinset?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Item\n\t\t\tdata-slot=\"dropdown-menu-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 px-3 py-1 text-sm text-foreground outline-none\",\n\t\t\t\t\"data-[highlighted]:bg-foreground data-[highlighted]:text-background\",\n\t\t\t\t\"data-[disabled]:text-foreground2 data-[disabled]:cursor-not-allowed\",\n\t\t\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"dropdown-menu-checkbox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 py-1 pr-3 pl-8 text-sm text-foreground outline-none\",\n\t\t\t\t\"data-[highlighted]:bg-foreground data-[highlighted]:text-background\",\n\t\t\t\t\"data-[disabled]:text-foreground2 data-[disabled]:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-3 flex size-3.5 items-center justify-center font-mono text-xs text-primary\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t✓\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.CheckboxItem>\n\t);\n}\n\nfunction DropdownMenuRadioGroup({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.RadioGroup\n\t\t\tdata-slot=\"dropdown-menu-radio-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tdata-slot=\"dropdown-menu-radio-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 py-1 pr-3 pl-8 text-sm text-foreground outline-none\",\n\t\t\t\t\"data-[highlighted]:bg-foreground data-[highlighted]:text-background\",\n\t\t\t\t\"data-[disabled]:text-foreground2 data-[disabled]:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-3 flex size-3.5 items-center justify-center font-mono text-xs text-primary\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t●\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t);\n}\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n\tinset?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Label\n\t\t\tdata-slot=\"dropdown-menu-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-3 py-1 text-xs font-medium text-foreground2 uppercase tracking-wider\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Separator\n\t\t\tdata-slot=\"dropdown-menu-separator\"\n\t\t\tclassName={cn(\"-mx-0 my-1 border-t border-border\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"dropdown-menu-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto pl-4 text-xs tracking-widest text-foreground2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuGroup({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Group\n\t\t\tdata-slot=\"dropdown-menu-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuSub({\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n\t);\n}\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n\tinset?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubTrigger\n\t\t\tdata-slot=\"dropdown-menu-sub-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center gap-2 px-3 py-1 text-sm text-foreground outline-none\",\n\t\t\t\t\"data-[state=open]:bg-foreground data-[state=open]:text-background\",\n\t\t\t\t\"data-[highlighted]:bg-foreground data-[highlighted]:text-background\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<span className=\"ml-auto font-mono text-xs text-foreground2\">▸</span>\n\t\t</DropdownMenuPrimitive.SubTrigger>\n\t);\n}\n\nfunction DropdownMenuSubContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tdata-slot=\"dropdown-menu-sub-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-[8rem] overflow-hidden border border-border bg-card font-mono text-foreground\",\n\t\t\t\t\"data-[state=open]:animate-[termcn-fade_150ms_ease-out] data-[state=closed]:animate-[termcn-fade-out_150ms_ease-out]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuPortal,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuSub,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuSubContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@keyframes termcn-fade": {
      "from": {
        "opacity": "0"
      },
      "to": {
        "opacity": "1"
      }
    },
    "@keyframes termcn-fade-out": {
      "from": {
        "opacity": "1"
      },
      "to": {
        "opacity": "0"
      }
    }
  },
  "type": "registry:ui"
}