{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown Menu",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass dropdown-menu component with standardized floating and overlay behavior.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu@^2.1.16",
    "lucide-react@^0.574.0"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme",
    "@poyraz/poyraz-recipes"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase6/molecules/dropdown-menu.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  floatingItemVariants,\n  floatingMotion,\n  floatingSurfaceVariants,\n  type FloatingItemProps,\n  type FloatingSurfaceProps,\n} from \"@/components/ui/recipes\";\n\ntype DropdownInteraction = \"click\" | \"hover\";\n\ninterface DropdownMenuContextValue {\n  interaction: DropdownInteraction;\n  openFromPointer: (event: React.PointerEvent) => void;\n  scheduleClose: (event: React.PointerEvent) => void;\n  cancelClose: () => void;\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue>({\n  interaction: \"click\",\n  openFromPointer: () => {},\n  scheduleClose: () => {},\n  cancelClose: () => {},\n});\n\nexport interface DropdownMenuProps extends React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Root\n> {\n  /** `hover` remains click-accessible on touch and keyboard. */\n  interaction?: DropdownInteraction;\n  /** Grace period while the pointer travels from trigger to content. */\n  closeDelay?: number;\n}\n\nfunction DropdownMenu({\n  interaction = \"click\",\n  closeDelay = 120,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  children,\n  ...props\n}: DropdownMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (controlledOpen === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [controlledOpen, onOpenChange],\n  );\n\n  const cancelClose = React.useCallback(() => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = null;\n  }, []);\n\n  React.useEffect(() => cancelClose, [cancelClose]);\n\n  const context = React.useMemo<DropdownMenuContextValue>(\n    () => ({\n      interaction,\n      cancelClose,\n      openFromPointer: (event) => {\n        if (interaction === \"hover\" && event.pointerType === \"mouse\") {\n          cancelClose();\n          setOpen(true);\n        }\n      },\n      scheduleClose: (event) => {\n        if (interaction === \"hover\" && event.pointerType === \"mouse\") {\n          cancelClose();\n          timer.current = setTimeout(() => setOpen(false), closeDelay);\n        }\n      },\n    }),\n    [cancelClose, closeDelay, interaction, setOpen],\n  );\n\n  return (\n    <DropdownMenuContext.Provider value={context}>\n      <DropdownMenuPrimitive.Root\n        open={open}\n        onOpenChange={setOpen}\n        modal={interaction === \"hover\" ? false : modal}\n        {...props}\n      >\n        {children}\n      </DropdownMenuPrimitive.Root>\n    </DropdownMenuContext.Provider>\n  );\n}\n\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ onPointerDown, onPointerEnter, onPointerLeave, ...props }, ref) => {\n  const hover = React.useContext(DropdownMenuContext);\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      onPointerEnter={(event) => {\n        hover.openFromPointer(event);\n        onPointerEnter?.(event);\n      }}\n      onPointerLeave={(event) => {\n        hover.scheduleClose(event);\n        onPointerLeave?.(event);\n      }}\n      onPointerDown={(event) => {\n        if (hover.interaction === \"hover\" && event.pointerType === \"mouse\") {\n          event.preventDefault();\n        }\n        onPointerDown?.(event);\n      }}\n      {...props}\n    />\n  );\n});\nDropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\ninterface DropdownMenuContentProps\n  extends\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>,\n    FloatingSurfaceProps {\n  itemSize?: NonNullable<FloatingItemProps[\"size\"]>;\n  itemRadius?: NonNullable<FloatingItemProps[\"radius\"]>;\n}\n\nconst DropdownItemContext = React.createContext<{\n  size: NonNullable<FloatingItemProps[\"size\"]>;\n  radius: NonNullable<FloatingItemProps[\"radius\"]>;\n}>({ size: \"md\", radius: \"md\" });\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      collisionPadding = 8,\n      surface,\n      radius,\n      itemSize = \"md\",\n      itemRadius = \"md\",\n      onPointerEnter,\n      onPointerLeave,\n      ...props\n    },\n    ref,\n  ) => {\n    const hover = React.useContext(DropdownMenuContext);\n    return (\n      <DropdownMenuPortal>\n        <DropdownItemContext.Provider value={{ size: itemSize, radius: itemRadius }}>\n          <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            onPointerEnter={(event) => {\n              hover.cancelClose();\n              onPointerEnter?.(event);\n            }}\n            onPointerLeave={(event) => {\n              hover.scheduleClose(event);\n              onPointerLeave?.(event);\n            }}\n            style={\n              {\n                \"--poyraz-floating-transform-origin\":\n                  \"var(--radix-dropdown-menu-content-transform-origin)\",\n                \"--poyraz-floating-slide\": \"var(--poyraz-floating-slide-distance, 0.5rem)\",\n                ...props.style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              floatingSurfaceVariants({ surface, radius }),\n              floatingMotion,\n              \"z-50 w-max min-w-40 max-w-[var(--radix-dropdown-menu-content-available-width)] p-1.5\",\n              className,\n            )}\n            {...props}\n          />\n        </DropdownItemContext.Provider>\n      </DropdownMenuPortal>\n    );\n  },\n);\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\ninterface DropdownMenuSubContentProps\n  extends\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>,\n    FloatingSurfaceProps {}\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  DropdownMenuSubContentProps\n>(({ className, surface, radius, sideOffset = 6, collisionPadding = 8, style, ...props }, ref) => (\n  <DropdownMenuPortal>\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      style={\n        {\n          \"--poyraz-floating-transform-origin\":\n            \"var(--radix-dropdown-menu-content-transform-origin)\",\n          \"--poyraz-floating-slide\": \"var(--poyraz-floating-slide-distance, 0.5rem)\",\n          ...style,\n        } as React.CSSProperties\n      }\n      className={cn(\n        floatingSurfaceVariants({ surface, radius }),\n        floatingMotion,\n        \"z-[60] w-max min-w-40 max-w-[var(--radix-dropdown-menu-content-available-width)] p-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  </DropdownMenuPortal>\n));\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;\n\ninterface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, FloatingItemProps {\n  media?: React.ReactNode;\n  description?: React.ReactNode;\n  trailing?: React.ReactNode;\n}\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(({ className, inset, size, radius, media, description, trailing, children, ...props }, ref) => {\n  const defaults = React.useContext(DropdownItemContext);\n  const rich = media !== undefined || description !== undefined || trailing !== undefined;\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        floatingItemVariants({\n          inset,\n          size: size ?? defaults.size,\n          radius: radius ?? defaults.radius,\n        }),\n        \"cursor-default whitespace-nowrap\",\n        className,\n      )}\n      {...props}\n    >\n      {rich ? (\n        <>\n          {media && (\n            <span className=\"flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md bg-surface-subtle [&_img]:size-full [&_img]:object-cover\">\n              {media}\n            </span>\n          )}\n          <span className=\"min-w-0 flex-1\">\n            <span className=\"block truncate font-medium\">{children}</span>\n            {description && (\n              <span className=\"mt-0.5 block line-clamp-2 text-xs leading-snug text-muted-foreground\">\n                {description}\n              </span>\n            )}\n          </span>\n          {trailing && <span className=\"ml-auto shrink-0 text-muted-foreground\">{trailing}</span>}\n        </>\n      ) : (\n        children\n      )}\n    </DropdownMenuPrimitive.Item>\n  );\n});\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & FloatingItemProps\n>(({ className, inset, size, radius, children, ...props }, ref) => {\n  const defaults = React.useContext(DropdownItemContext);\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        floatingItemVariants({\n          inset,\n          size: size ?? defaults.size,\n          radius: radius ?? defaults.radius,\n        }),\n        \"group cursor-default whitespace-nowrap data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n});\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & FloatingItemProps\n>(({ className, children, checked, size, radius, ...props }, ref) => {\n  const defaults = React.useContext(DropdownItemContext);\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      className={cn(\n        floatingItemVariants({ size: size ?? defaults.size, radius: radius ?? defaults.radius }),\n        \"cursor-default pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 animate-poyraz-scale-in\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n});\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & FloatingItemProps\n>(({ className, children, size, radius, ...props }, ref) => {\n  const defaults = React.useContext(DropdownItemContext);\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n        floatingItemVariants({ size: size ?? defaults.size, radius: radius ?? defaults.radius }),\n        \"cursor-default pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Circle className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst 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(\n      \"px-2.5 py-1.5 text-xs font-semibold text-muted-foreground\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn(\n      \"ml-auto shrink-0 whitespace-nowrap pl-6 text-xs tracking-wider text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n);\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n};\n",
      "type": "registry:ui",
      "target": "@ui/molecules/dropdown-menu.tsx"
    }
  ],
  "meta": {
    "category": "phase-6-interactive",
    "phase": "beta"
  },
  "type": "registry:ui"
}