{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dropdown-menu","type":"registry:ui","title":"Dropdown menu","description":"A menu of actions anchored to a trigger, with groups, shortcuts and separators.","dependencies":["@radix-ui/react-dropdown-menu","clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/dropdown-menu.tsx","type":"registry:ui","target":"components/ui/dropdown-menu.tsx","content":"\"use client\";\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, Circle } from \"lucide-react\";\nimport { useEffect, useRef, useState, type ComponentProps, type ReactNode } from \"react\";\nimport { GlideHighlight, useHighlightedGlide } from \"./glide-highlight\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/dropdown-content.css\";\nimport \"./dropdown-menu.css\";\n\nexport const DropdownMenu = Primitive.Root;\nexport const DropdownMenuTrigger = Primitive.Trigger;\nexport const DropdownMenuGroup = Primitive.Group;\nexport const DropdownMenuRadioGroup = Primitive.RadioGroup;\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 8,\n  collisionPadding = 16,\n  children,\n  ...props\n}: ComponentProps<typeof Primitive.Content>) {\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const box = useHighlightedGlide(content);\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        ref={setContent}\n        data-slot=\"dropdown-content\"\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(\n          \"relative z-50 min-w-56 max-w-[calc(100vw-2rem)] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto rounded-surface border border-border bg-elevated p-1 text-[13px] text-foreground shadow-overlay outline-none\",\n          className,\n        )}\n        {...props}\n      >\n        <GlideHighlight box={box} />\n        {children}\n      </Primitive.Content>\n    </Primitive.Portal>\n  );\n}\n\n/** Row anatomy shared by every menu: dropdown, menubar and context menus. */\nexport const menuItemClass =\n  \"relative z-10 flex min-h-[34px] max-md:min-h-[var(--control-height)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-[13px] font-normal outline-none data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[variant=destructive]:text-destructive [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-[variant=destructive]:[&_svg]:text-destructive\";\n\nexport function DropdownMenuItem({\n  className,\n  ...props\n}: ComponentProps<typeof Primitive.Item>) {\n  return (\n    <Primitive.Item\n      data-slot=\"dropdown-item\"\n      className={cn(menuItemClass, className)}\n      {...props}\n    />\n  );\n}\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Primitive.CheckboxItem>) {\n  return (\n    <Primitive.CheckboxItem\n      data-slot=\"dropdown-item\"\n      className={cn(menuItemClass, \"pl-8\", className)}\n      {...props}\n    >\n      <span className=\"absolute left-2.5 flex size-4 items-center justify-center\">\n        <Primitive.ItemIndicator>\n          <Check aria-hidden=\"true\" />\n        </Primitive.ItemIndicator>\n      </span>\n      {children}\n    </Primitive.CheckboxItem>\n  );\n}\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Primitive.RadioItem>) {\n  return (\n    <Primitive.RadioItem\n      data-slot=\"dropdown-item\"\n      className={cn(menuItemClass, \"pl-8\", className)}\n      {...props}\n    >\n      <span className=\"absolute left-2.5 flex size-4 items-center justify-center\">\n        <Primitive.ItemIndicator>\n          <Circle className=\"!size-2 fill-current\" aria-hidden=\"true\" />\n        </Primitive.ItemIndicator>\n      </span>\n      {children}\n    </Primitive.RadioItem>\n  );\n}\nexport function DropdownMenuLabel({\n  className,\n  ...props\n}: ComponentProps<typeof Primitive.Label>) {\n  return (\n    <Primitive.Label\n      className={cn(\n        \"px-2.5 pb-1 pt-2 text-xs font-medium text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport function DropdownMenuSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof Primitive.Separator>) {\n  return (\n    <Primitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuShortcut({\n  className,\n  ...props\n}: ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"ml-auto pl-4 font-mono text-xs tracking-wide text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * A destructive item that asks in place: choosing it turns the row into the\n * question with Cancel and the confirming action, instead of stacking a\n * dialog on the menu. Both answers are menu items, so arrows and Enter work.\n */\nexport function DropdownMenuConfirmItem({\n  label,\n  icon,\n  question,\n  detail,\n  confirmLabel = \"Delete\",\n  onConfirm,\n}: {\n  label: string;\n  icon?: ReactNode;\n  /** e.g. \"Delete 3 files?\" */\n  question: string;\n  /** e.g. \"They move to Trash for 30 days.\" */\n  detail?: string;\n  confirmLabel?: string;\n  onConfirm: () => void;\n}) {\n  const [asking, setAsking] = useState(false);\n  const cancel = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (asking) cancel.current?.focus();\n  }, [asking]);\n  if (!asking) {\n    return (\n      <DropdownMenuItem\n        data-variant=\"destructive\"\n        onSelect={(event) => {\n          event.preventDefault();\n          setAsking(true);\n        }}\n      >\n        {icon}\n        {label}\n      </DropdownMenuItem>\n    );\n  }\n  return (\n    <div data-slot=\"menu-confirm\" role=\"group\" aria-label={question}>\n      <p className=\"px-2.5 pt-2 text-[13px] font-medium text-destructive\">{question}</p>\n      {detail && <p className=\"px-2.5 pb-1 text-xs text-muted-foreground\">{detail}</p>}\n      <DropdownMenuItem\n        ref={cancel}\n        onSelect={(event) => {\n          event.preventDefault();\n          setAsking(false);\n        }}\n      >\n        Cancel\n      </DropdownMenuItem>\n      <DropdownMenuItem data-variant=\"destructive\" onSelect={onConfirm}>\n        {icon}\n        {confirmLabel}\n      </DropdownMenuItem>\n    </div>\n  );\n}\n"},{"path":"ui/glide-highlight.tsx","type":"registry:ui","target":"components/ui/glide-highlight.tsx","content":"\"use client\";\n\nimport { useLayoutEffect, useState } from \"react\";\nimport \"./glide-highlight.css\";\n\nexport type GlideBox = {\n  active: boolean;\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n};\n\nexport function glideBox(target: HTMLElement): GlideBox {\n  return {\n    active: true,\n    left: target.offsetLeft,\n    top: target.offsetTop,\n    width: target.offsetWidth,\n    height: target.offsetHeight,\n  };\n}\n\nexport function useHighlightedGlide(\n  root: HTMLElement | null,\n  selector = \"[data-highlighted]\",\n  /** Attributes whose change can move the target, e.g. data-state for an open trigger. */\n  attributes: readonly string[] = [\"data-highlighted\"],\n) {\n  const [box, setBox] = useState<GlideBox | null>(null);\n\n  useLayoutEffect(() => {\n    const element = root;\n    if (!element) return;\n    const update = () => {\n      const target = element.querySelector<HTMLElement>(selector);\n      setBox((current) =>\n        target ? glideBox(target) : current ? { ...current, active: false } : null,\n      );\n    };\n    update();\n    const observer = new MutationObserver(update);\n    observer.observe(element, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: [...attributes],\n    });\n    return () => observer.disconnect();\n    // The attribute list is fixed per call site.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [root, selector]);\n\n  return box;\n}\n\nexport function GlideHighlight({ box }: { box: GlideBox | null }) {\n  if (!box) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"glide-highlight\"\n      data-active={box.active}\n      style={{\n        width: box.width,\n        height: box.height,\n        transform: `translate(${box.left}px, ${box.top}px)`,\n      }}\n    />\n  );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/shared/dropdown-content.css","type":"registry:file","target":"components/ui/shared/dropdown-content.css","content":"/* Shared by context-menu.tsx, dropdown-menu.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"dropdown-item\"] {\n    transition:\n      color var(--duration-fast) var(--ease-out),\n      background-color var(--duration-fast) var(--ease-out),\n      scale var(--duration-fast) var(--ease-out);\n  }\n  [data-slot=\"dropdown-item\"]:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: -2px;\n  }\n  [data-slot=\"dropdown-content\"] {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  [data-slot=\"dropdown-content\"] [data-slot=\"glide-highlight\"] {\n    border-radius: var(--radius-control);\n    transition:\n      transform var(--duration-fast) var(--ease-out),\n      width var(--duration-fast) var(--ease-out),\n      height var(--duration-fast) var(--ease-out),\n      opacity var(--duration-fast) var(--ease-out);\n  }\n  [data-slot=\"dropdown-content\"][data-state=\"open\"] {\n    animation: caliper-dialog-enter var(--duration-normal) var(--ease-settle);\n  }\n  [data-slot=\"dropdown-content\"][data-state=\"closed\"] {\n    animation: caliper-fade-out var(--duration-fast) var(--ease-in) forwards;\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"dropdown-item\"] {\n      transition: none;\n    }\n    [data-slot=\"dropdown-content\"] {\n      animation: none;\n    }\n    /* Preserve the exit name for Radix Presence's completion matcher, including\n       a preference changed during exit. No visual motion or unmount timer. */\n    [data-slot=\"dropdown-content\"][data-state=\"closed\"] {\n      animation: caliper-fade-out var(--duration-instant) var(--ease-in) forwards !important;\n    }\n  }\n}\n\n[data-slot=\"dropdown-content\"] {\n  background-color: var(--elevated-glass);\n  border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border));\n  backdrop-filter: blur(var(--blur-overlay));\n  box-shadow:\n    var(--shadow-overlay),\n    0 0 40px var(--edge-glow),\n    inset 0 1px 0 var(--edge-light);\n}\n@layer components {\n  [data-slot=\"dropdown-content\"][data-variant=\"glass\"] {\n    background: var(--elevated-glass);\n    -webkit-backdrop-filter: blur(24px) saturate(1.5);\n    backdrop-filter: blur(24px) saturate(1.5);\n    border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border));\n    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--edge-light);\n    border-radius: 20px;\n  }\n  /* Moving along the bar swaps menus at once: a closing menu that lingered to fade would see focus leave and dismiss the bar. */\n  [data-slot=\"dropdown-content\"][data-menubar][data-state=\"closed\"] { animation: none; }\n}\n"},{"path":"ui/dropdown-menu.css","type":"registry:file","target":"components/ui/dropdown-menu.css","content":"/* dropdown-menu.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"menu-confirm\"] {\n    margin: 2px 0;\n    padding-bottom: 2px;\n    border-radius: var(--radius-control);\n    background: var(--destructive-subtle);\n    animation: caliper-fade-in var(--duration-fast) var(--ease-out);\n  }\n}\n"},{"path":"ui/glide-highlight.css","type":"registry:file","target":"components/ui/glide-highlight.css","content":"/* glide-highlight.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"glide-highlight\"] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 0;\n    pointer-events: none;\n    border-radius: var(--radius-surface);\n    background: var(--muted);\n    opacity: 0;\n    transition:\n      transform var(--duration-travel) var(--ease-showcase),\n      width var(--duration-travel) var(--ease-showcase),\n      height var(--duration-travel) var(--ease-showcase),\n      opacity var(--duration-deliberate) var(--ease-out);\n  }\n  [data-slot=\"glide-highlight\"][data-active=\"true\"] {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"glide-highlight\"] {\n      transition: none;\n    }\n    [data-slot=\"glide-highlight\"] {\n      transition:\n        transform 400ms var(--ease-showcase),\n        width 400ms var(--ease-showcase),\n        height 400ms var(--ease-showcase),\n        opacity 280ms var(--ease-out);\n    }\n  }\n}\n"}],"categories":["actions"],"meta":{"tier":"free","license":"MIT","family":"actions","docs":"/docs/components/dropdown-menu"}}