{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown Menu",
  "description": "Arrow keys move, Enter/Space select, typing jumps to an item, Esc closes and returns focus.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu@^2.2.1",
    "@radix-ui/react-slot@^1.1.0",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/icons.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/dropdown-menu.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon, DotIcon } from \"@/lib/junco/icons\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Slottable } from \"@radix-ui/react-slot\";\n\n/**\n *   <DropdownMenu>\n *     <DropdownMenuTrigger asChild><Button variant=\"outline\">Options</Button></DropdownMenuTrigger>\n *     <DropdownMenuContent align=\"end\">\n *       <DropdownMenuLabel>Account</DropdownMenuLabel>\n *       <DropdownMenuItem shortcut=\"⌘P\">Profile</DropdownMenuItem>\n *       <DropdownMenuSeparator />\n *       <DropdownMenuItem variant=\"danger\">Log out</DropdownMenuItem>\n *     </DropdownMenuContent>\n *   </DropdownMenu>\n *\n * Arrow keys move, Enter/Space select, typing jumps to an item, Esc closes and returns focus.\n */\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst surface = [\n  \"z-dropdown min-w-44 max-w-[calc(100vw-1rem)] overflow-hidden rounded-card border border-border bg-popover p-1 text-popover-foreground shadow-float\",\n  \"data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out\",\n];\n\nexport const DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 6, collisionPadding = 8, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        surface,\n        \"max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto origin-(--radix-dropdown-menu-content-transform-origin)\",\n        className,\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\nexport const menuItemVariants = tv({\n  base: [\n    \"relative flex h-8 cursor-default items-center gap-2 rounded-control px-2 text-sm outline-none select-none\",\n    \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n    \"[&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  variants: {\n    variant: {\n      default: \"\",\n      danger: \"text-destructive-text data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground\",\n    },\n    /** Indent to line up with items that have a check or icon. */\n    inset: { true: \"pl-8\" },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\n/** Keyboard hint at the end of an item. Visual only: wire the shortcut up yourself. */\nexport function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn(\"ml-auto pl-4 font-mono text-xs tracking-wide text-muted-foreground group-data-[highlighted]:text-current\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,\n    VariantProps<typeof menuItemVariants> {\n  /** Shorthand for a trailing <DropdownMenuShortcut>. */\n  shortcut?: string;\n}\n\nexport const DropdownMenuItem = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Item>, DropdownMenuItemProps>(\n  ({ className, variant, inset, shortcut, children, ...props }, ref) => (\n    <DropdownMenuPrimitive.Item ref={ref} className={cn(\"group\", menuItemVariants({ variant, inset }), className)} {...props}>\n      {/* With asChild the Slot needs one marked element; Slottable marks it and keeps the shortcut inside it. */}\n      {props.asChild ? <Slottable>{children}</Slottable> : children}\n      {shortcut && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}\n    </DropdownMenuPrimitive.Item>\n  ),\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\nexport const DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn(menuItemVariants({ inset: true }), className)} {...props}>\n    <span className=\"absolute left-2 grid size-4 place-items-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\nexport const DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(menuItemVariants({ inset: true }), className)} {...props}>\n    <span className=\"absolute left-2 grid size-4 place-items-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <DotIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nexport const DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", inset && \"pl-8\", className)}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator ref={ref} className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\nexport const DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(menuItemVariants({ inset }), \"data-[state=open]:bg-accent\", className)}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto text-muted-foreground\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\nexport const DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(surface, \"origin-(--radix-dropdown-menu-content-transform-origin)\", className)}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuSubContent.displayName = \"DropdownMenuSubContent\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/dropdown-menu",
  "meta": {
    "hash": "8f3c7ae4b9bd2ab0",
    "source": "packages/react/src/components/dropdown-menu.tsx",
    "exports": [
      "DropdownMenu",
      "DropdownMenuTrigger",
      "DropdownMenuGroup",
      "DropdownMenuSub",
      "DropdownMenuRadioGroup",
      "DropdownMenuContent",
      "menuItemVariants",
      "DropdownMenuShortcut",
      "DropdownMenuItemProps",
      "DropdownMenuItem",
      "DropdownMenuCheckboxItem",
      "DropdownMenuRadioItem",
      "DropdownMenuLabel",
      "DropdownMenuSeparator",
      "DropdownMenuSubTrigger",
      "DropdownMenuSubContent"
    ],
    "props": {
      "DropdownMenuItem": {
        "extends": "React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, VariantProps<typeof menuItemVariants>",
        "props": [
          {
            "name": "shortcut",
            "optional": true,
            "type": "string",
            "description": "Shorthand for a trailing <DropdownMenuShortcut>."
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "variant": [
          "default",
          "danger"
        ],
        "inset": [
          "true"
        ]
      },
      "defaultVariants": {
        "variant": "default"
      }
    },
    "usage": "<DropdownMenu>\n  <DropdownMenuTrigger asChild><Button variant=\"outline\">Options</Button></DropdownMenuTrigger>\n  <DropdownMenuContent align=\"end\">\n    <DropdownMenuLabel>Account</DropdownMenuLabel>\n    <DropdownMenuItem shortcut=\"⌘P\">Profile</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem variant=\"danger\">Log out</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/dropdown-menu"
  }
}