{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-button",
  "type": "registry:ui",
  "title": "DropdownButton",
  "description": "Menu, fixed split, and selectable-primary action composition with native controls, controlled or uncontrolled state, full-composite anchoring, existing DropdownMenu behavior, and reduced-motion-safe Motion feedback.",
  "dependencies": [
    "lucide-react@^1.47.0",
    "motion@^12.43.0"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json",
    "https://components.dethink.co.uk/r/button.json",
    "https://components.dethink.co.uk/r/button-group.json",
    "https://components.dethink.co.uk/r/dropdown-menu.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/dropdown-button/dropdown-button.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/dropdown-button/dropdown-button.tsx",
      "content": "import {\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  AnimatePresence,\n  motion,\n  useIsPresent,\n  useReducedMotion,\n} from \"motion/react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport type { Selection } from \"react-aria-components\";\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button\";\nimport { ButtonGroup } from \"../button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n  DropdownMenuItem,\n  DropdownMenuItemDescription,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  type DropdownMenuMotionPreset,\n} from \"../dropdown-menu\";\nimport type { PositionedOverlayPositionProps } from \"../../utils/positioned-overlay\";\nimport { cn } from \"../../utils/cn\";\n\nexport type DropdownButtonMode = \"menu\" | \"split\" | \"selectable\";\nexport type DropdownButtonMotionPreset = DropdownMenuMotionPreset;\nexport type DropdownButtonLoadingBehavior = \"all\" | \"primary\";\n\ninterface DropdownButtonSharedProps extends PositionedOverlayPositionProps {\n  \"aria-describedby\"?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  className?: string;\n  contentClassName?: string;\n  defaultOpen?: boolean;\n  disabled?: boolean;\n  groupClassName?: string;\n  menuClassName?: string;\n  motionPreset?: DropdownButtonMotionPreset;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n  reducedMotion?: boolean;\n  showArrow?: boolean;\n  size?: ButtonSize;\n  triggerClassName?: string;\n  variant?: ButtonVariant;\n}\n\nexport interface DropdownButtonMenuProps extends DropdownButtonSharedProps {\n  actions?: never;\n  children?: ReactNode;\n  defaultSelectedActionId?: never;\n  label: ReactNode;\n  mode?: \"menu\";\n  onSelectedActionChange?: never;\n  selectedActionId?: never;\n\n  /** Reserved for split mode. Direct primary actions are invalid in menu mode. */\n  onPrimaryAction?: never;\n  /** Reserved for split mode's separately named icon trigger. */\n  menuLabel?: never;\n  /** Reserved for split mode's primary icon. */\n  primaryIcon?: never;\n  /** Reserved for split mode's async primary action. */\n  loading?: never;\n  /** Reserved for split mode's async policy. */\n  loadingBehavior?: never;\n  /** Reserved for split mode's independent primary state. */\n  primaryDisabled?: never;\n  /** Reserved for split mode's independent menu state. */\n  menuDisabled?: never;\n}\n\nexport interface DropdownButtonSplitProps extends DropdownButtonSharedProps {\n  actions?: never;\n  children?: ReactNode;\n  defaultSelectedActionId?: never;\n  label: ReactNode;\n  loading?: boolean;\n  loadingBehavior?: DropdownButtonLoadingBehavior;\n  menuLabel: string;\n  menuDisabled?: boolean;\n  mode: \"split\";\n  onPrimaryAction: NonNullable<ButtonProps[\"onClick\"]>;\n  onSelectedActionChange?: never;\n  primaryDisabled?: boolean;\n  primaryIcon?: ReactNode;\n  selectedActionId?: never;\n}\n\nexport interface DropdownButtonSelectableAction {\n  description?: ReactNode;\n  destructive?: boolean;\n  disabled?: boolean;\n  icon?: ReactNode;\n  id: string;\n  label: string;\n  onAction: NonNullable<ButtonProps[\"onClick\"]>;\n}\n\ninterface DropdownButtonSelectableSharedProps extends DropdownButtonSharedProps {\n  actions: readonly DropdownButtonSelectableAction[];\n  children?: never;\n  label?: never;\n  loading?: boolean;\n  loadingBehavior?: DropdownButtonLoadingBehavior;\n  menuDisabled?: boolean;\n  menuLabel: string;\n  mode: \"selectable\";\n  onPrimaryAction?: never;\n  primaryDisabled?: boolean;\n  primaryIcon?: never;\n}\n\nexport type DropdownButtonSelectableControlledProps =\n  DropdownButtonSelectableSharedProps & {\n    defaultSelectedActionId?: never;\n    onSelectedActionChange: (actionId: string) => void;\n    selectedActionId: string;\n  };\n\nexport type DropdownButtonSelectableUncontrolledProps =\n  DropdownButtonSelectableSharedProps & {\n    defaultSelectedActionId: string;\n    onSelectedActionChange?: (actionId: string) => void;\n    selectedActionId?: never;\n  };\n\nexport type DropdownButtonSelectableProps =\n  | DropdownButtonSelectableControlledProps\n  | DropdownButtonSelectableUncontrolledProps;\n\nexport type DropdownButtonProps =\n  | DropdownButtonMenuProps\n  | DropdownButtonSplitProps\n  | DropdownButtonSelectableProps;\n\nconst dropdownButtonRootClasses = \"inline-flex w-fit max-w-full\";\nconst dropdownButtonTriggerIconClasses =\n  \"pointer-events-none inline-flex size-4 shrink-0 items-center justify-center\";\n\nconst dropdownButtonSplitTriggerSizeClasses: Record<ButtonSize, string> = {\n  xs: \"w-7 !p-0\",\n  sm: \"w-8 !p-0\",\n  md: \"w-density-control !p-0\",\n  lg: \"w-11 !p-0\",\n  xl: \"w-12 !p-0\",\n  icon: \"w-density-control !p-0\",\n};\n\nconst dropdownButtonChevronDuration: Record<\n  DropdownButtonMotionPreset,\n  number\n> = {\n  none: 0,\n  subtle: 0.12,\n  standard: 0.16,\n};\n\nconst dropdownButtonBusyIndicatorClasses =\n  \"size-4 rounded-full border-2 border-current border-r-transparent\";\n\nconst dropdownButtonSelectionIndicatorClasses =\n  \"inline-flex size-4 items-center justify-center text-foreground\";\n\nconst dropdownButtonPrimaryLabelMeasureClasses =\n  \"pointer-events-none invisible absolute inset-y-0 start-0 inline-flex w-max items-center whitespace-nowrap\";\n\nfunction getDropdownButtonNodeKey(node: ReactNode, fallback: string) {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    return `${fallback}-${String(node)}`;\n  }\n\n  if (isValidElement(node) && node.key != null) {\n    return `${fallback}-${String(node.key)}`;\n  }\n\n  return fallback;\n}\n\nfunction measureDropdownButtonLabelInlineSize(node: HTMLElement) {\n  return Math.ceil(node.scrollWidth || node.getBoundingClientRect().width);\n}\n\nfunction useDropdownButtonLabelInlineSize(\n  contentKey: string | undefined,\n  label: ReactNode,\n) {\n  const measureRef = useRef<HTMLSpanElement>(null);\n  const [inlineSize, setInlineSize] = useState<number>();\n\n  useEffect(() => {\n    const node = measureRef.current;\n\n    if (!node) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const nextInlineSize = measureDropdownButtonLabelInlineSize(node);\n\n      if (nextInlineSize > 0) {\n        setInlineSize((current) =>\n          current === nextInlineSize ? current : nextInlineSize,\n        );\n      }\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, [contentKey, label]);\n\n  return [measureRef, inlineSize] as const;\n}\n\nfunction resolveDropdownButtonSelectableAction(\n  actions: readonly DropdownButtonSelectableAction[],\n  selectedActionId: string | undefined,\n) {\n  if (actions.length === 0) {\n    throw new Error(\n      \"DropdownButton selectable mode requires at least one action.\",\n    );\n  }\n\n  const actionIds = new Set<string>();\n\n  for (const action of actions) {\n    if (actionIds.has(action.id)) {\n      throw new Error(\n        `DropdownButton selectable action IDs must be unique. Duplicate ID: ${action.id}`,\n      );\n    }\n\n    actionIds.add(action.id);\n  }\n\n  const selectedAction = actions.find(\n    (action) => action.id === selectedActionId,\n  );\n\n  if (!selectedAction) {\n    throw new Error(\n      `DropdownButton selectable mode could not find selected action ID: ${String(selectedActionId)}`,\n    );\n  }\n\n  return selectedAction;\n}\n\nexport function dropdownButtonClassNames({\n  className,\n}: Pick<DropdownButtonProps, \"className\"> = {}) {\n  return cn(dropdownButtonRootClasses, className);\n}\n\nfunction ChevronDownIcon({\n  motionPreset,\n  open,\n  reducedMotion,\n}: {\n  motionPreset: DropdownButtonMotionPreset;\n  open: boolean;\n  reducedMotion: boolean;\n}) {\n  return (\n    <motion.span\n      aria-hidden=\"true\"\n      animate={{ rotate: open ? 180 : 0 }}\n      data-open={open ? \"\" : undefined}\n      data-slot=\"dropdown-button-trigger-icon\"\n      className={dropdownButtonTriggerIconClasses}\n      initial={false}\n      transition={{\n        duration:\n          reducedMotion || motionPreset === \"none\"\n            ? 0\n            : dropdownButtonChevronDuration[motionPreset],\n        ease: [0.16, 1, 0.3, 1],\n      }}\n    >\n      <ChevronDown className=\"size-full\" strokeWidth={1.75} />\n    </motion.span>\n  );\n}\n\nfunction DropdownButtonPrimaryLabel({\n  contentKey,\n  label,\n  motionPreset,\n  reducedMotion,\n}: {\n  contentKey?: string;\n  label: ReactNode;\n  motionPreset: DropdownButtonMotionPreset;\n  reducedMotion: boolean;\n}) {\n  const motionDisabled = reducedMotion || motionPreset === \"none\";\n  const [measureRef, measuredInlineSize] = useDropdownButtonLabelInlineSize(\n    contentKey,\n    label,\n  );\n\n  return (\n    <motion.span\n      animate={\n        measuredInlineSize === undefined\n          ? undefined\n          : { width: measuredInlineSize }\n      }\n      initial={false}\n      data-inline-size={measuredInlineSize}\n      data-slot=\"dropdown-button-primary-label-viewport\"\n      className=\"relative inline-grid min-w-0 overflow-hidden\"\n      transition={{\n        width: {\n          duration: motionDisabled\n            ? 0\n            : dropdownButtonChevronDuration[motionPreset],\n          ease: [0.16, 1, 0.3, 1],\n        },\n      }}\n    >\n      <AnimatePresence initial={false} mode=\"sync\">\n        <DropdownButtonPrimaryLabelItem\n          key={contentKey ?? getDropdownButtonNodeKey(label, \"primary-label\")}\n          label={label}\n          motionDisabled={motionDisabled}\n          motionPreset={motionPreset}\n        />\n      </AnimatePresence>\n      <span\n        ref={measureRef}\n        aria-hidden=\"true\"\n        data-slot=\"dropdown-button-primary-label-measure\"\n        className={dropdownButtonPrimaryLabelMeasureClasses}\n      >\n        {label}\n      </span>\n    </motion.span>\n  );\n}\n\nfunction DropdownButtonPrimaryLabelItem({\n  label,\n  motionDisabled,\n  motionPreset,\n}: {\n  label: ReactNode;\n  motionDisabled: boolean;\n  motionPreset: DropdownButtonMotionPreset;\n}) {\n  const isPresent = useIsPresent();\n\n  return (\n    <motion.span\n      animate={motionDisabled ? { opacity: 1 } : { opacity: 1, y: 0 }}\n      initial={motionDisabled ? false : { opacity: 0, y: -2 }}\n      exit={motionDisabled ? { opacity: 1 } : { opacity: 0, y: 2 }}\n      aria-hidden={isPresent ? undefined : true}\n      data-slot=\"dropdown-button-label\"\n      className=\"col-start-1 row-start-1 min-w-0 truncate\"\n      transition={{\n        duration: motionDisabled\n          ? 0\n          : dropdownButtonChevronDuration[motionPreset],\n        ease: [0.16, 1, 0.3, 1],\n      }}\n    >\n      {label}\n    </motion.span>\n  );\n}\n\nfunction DropdownButtonPrimaryIcon({\n  contentKey,\n  icon,\n  motionPreset,\n  reducedMotion,\n}: {\n  contentKey?: string;\n  icon: ReactNode;\n  motionPreset: DropdownButtonMotionPreset;\n  reducedMotion: boolean;\n}) {\n  const motionDisabled = reducedMotion || motionPreset === \"none\";\n\n  return (\n    <AnimatePresence initial={false} mode=\"sync\">\n      {icon ? (\n        <motion.span\n          key={contentKey ?? getDropdownButtonNodeKey(icon, \"primary-icon\")}\n          animate={motionDisabled ? { opacity: 1 } : { opacity: 1, scale: 1 }}\n          initial={motionDisabled ? false : { opacity: 0, scale: 0.9 }}\n          exit={motionDisabled ? { opacity: 0 } : { opacity: 0, scale: 0.9 }}\n          data-slot=\"dropdown-button-primary-icon\"\n          className=\"inline-flex size-4 items-center justify-center\"\n          transition={{\n            duration: motionDisabled\n              ? 0\n              : dropdownButtonChevronDuration[motionPreset],\n            ease: [0.16, 1, 0.3, 1],\n          }}\n        >\n          {icon}\n        </motion.span>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\nfunction DropdownButtonBusyIndicator({\n  motionDisabled,\n}: {\n  motionDisabled: boolean;\n}) {\n  return (\n    <motion.span\n      key=\"dropdown-button-busy\"\n      animate={motionDisabled ? { opacity: 0.7 } : { opacity: 1, rotate: 360 }}\n      initial={motionDisabled ? false : { opacity: 0, rotate: 0 }}\n      data-slot=\"dropdown-button-busy-indicator\"\n      className={dropdownButtonBusyIndicatorClasses}\n      transition={\n        motionDisabled\n          ? { duration: 0 }\n          : {\n              duration: 0.8,\n              ease: \"linear\",\n              repeat: Number.POSITIVE_INFINITY,\n            }\n      }\n    />\n  );\n}\n\nfunction DropdownButtonSelectionIndicator({\n  motionPreset,\n  reducedMotion,\n  selected,\n}: {\n  motionPreset: DropdownButtonMotionPreset;\n  reducedMotion: boolean;\n  selected: boolean;\n}) {\n  const motionDisabled = reducedMotion || motionPreset === \"none\";\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"dropdown-button-selection-indicator-slot\"\n      className={dropdownButtonSelectionIndicatorClasses}\n    >\n      <AnimatePresence initial={false}>\n        {selected ? (\n          <motion.span\n            key=\"selected\"\n            animate={\n              motionDisabled ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }\n            }\n            initial={motionDisabled ? false : { opacity: 0, scale: 0.8, y: -2 }}\n            exit={\n              motionDisabled ? { opacity: 0 } : { opacity: 0, scale: 0.8, y: 2 }\n            }\n            data-slot=\"dropdown-button-selection-indicator\"\n            className=\"inline-flex\"\n            transition={{\n              duration: motionDisabled\n                ? 0\n                : dropdownButtonChevronDuration[motionPreset],\n              ease: [0.16, 1, 0.3, 1],\n            }}\n          >\n            <Check aria-hidden=\"true\" className=\"size-4\" strokeWidth={2.5} />\n          </motion.span>\n        ) : null}\n      </AnimatePresence>\n    </span>\n  );\n}\n\nexport const DropdownButton = forwardRef<HTMLDivElement, DropdownButtonProps>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      actions,\n      arrowBoundaryOffset,\n      children,\n      className,\n      containerPadding,\n      contentClassName,\n      crossOffset,\n      defaultOpen = false,\n      defaultSelectedActionId,\n      disabled = false,\n      groupClassName,\n      label,\n      loading = false,\n      loadingBehavior = \"all\",\n      menuClassName,\n      menuDisabled = false,\n      menuLabel,\n      mode = \"menu\",\n      motionPreset = \"standard\",\n      offset,\n      onOpenChange,\n      onPrimaryAction,\n      onSelectedActionChange,\n      open,\n      placement,\n      primaryDisabled = false,\n      primaryIcon,\n      reducedMotion,\n      selectedActionId,\n      shouldFlip,\n      showArrow = false,\n      size = \"md\",\n      triggerClassName,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const [uncontrolledSelectedActionId, setUncontrolledSelectedActionId] =\n      useState(defaultSelectedActionId);\n    const compositeRef = useRef<HTMLDivElement>(null);\n    const primaryRef = useRef<HTMLElement>(null);\n    const prefersReducedMotion = useReducedMotion();\n    const isControlled = open !== undefined;\n    const resolvedOpen = open ?? uncontrolledOpen;\n    const resolvedReducedMotion =\n      reducedMotion ?? prefersReducedMotion === true;\n    const isSelectable = mode === \"selectable\";\n    const hasPrimary = mode !== \"menu\";\n    const isSelectionControlled = selectedActionId !== undefined;\n    const resolvedSelectedActionId =\n      selectedActionId ?? uncontrolledSelectedActionId;\n    const selectedAction = isSelectable\n      ? resolveDropdownButtonSelectableAction(\n          actions ?? [],\n          resolvedSelectedActionId,\n        )\n      : undefined;\n    const selectedKeys = useMemo(\n      () =>\n        isSelectable && resolvedSelectedActionId\n          ? new Set([resolvedSelectedActionId])\n          : undefined,\n      [isSelectable, resolvedSelectedActionId],\n    );\n    const resolvedLabel = selectedAction?.label ?? label;\n    const resolvedPrimaryIcon = selectedAction?.icon ?? primaryIcon;\n    const resolvedPrimaryAction = selectedAction?.onAction ?? onPrimaryAction;\n    const resolvedVariant = selectedAction?.destructive\n      ? \"destructive\"\n      : variant;\n    const primaryUnavailable =\n      disabled ||\n      primaryDisabled ||\n      loading ||\n      (isSelectable && selectedAction?.disabled === true);\n    const menuUnavailable =\n      disabled || menuDisabled || (loading && loadingBehavior === \"all\");\n    const effectiveOpen = resolvedOpen && !menuUnavailable;\n    const groupLabel = ariaLabelledBy\n      ? undefined\n      : (ariaLabel ??\n        (typeof resolvedLabel === \"string\" ? resolvedLabel : undefined));\n    const handleOpenChange = (nextOpen: boolean) => {\n      if (nextOpen && menuUnavailable) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    };\n    const handleSelectionChange = (selection: Selection) => {\n      if (!isSelectable || selection === \"all\") {\n        return;\n      }\n\n      const nextActionId = [...selection][0];\n\n      if (\n        typeof nextActionId !== \"string\" ||\n        nextActionId === resolvedSelectedActionId\n      ) {\n        return;\n      }\n\n      const nextAction = actions?.find((action) => action.id === nextActionId);\n\n      if (!nextAction || nextAction.disabled) {\n        return;\n      }\n\n      if (!isSelectionControlled) {\n        setUncontrolledSelectedActionId(nextActionId);\n      }\n\n      onSelectedActionChange?.(nextActionId);\n    };\n    useEffect(() => {\n      if (!resolvedOpen || !menuUnavailable) {\n        return undefined;\n      }\n\n      if (!isControlled) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- An unavailable open menu must publish onOpenChange and restore focus after commit; this closes its local state too.\n        setUncontrolledOpen(false);\n      }\n      onOpenChange?.(false);\n\n      if (hasPrimary && !primaryUnavailable) {\n        const frame = requestAnimationFrame(() => primaryRef.current?.focus());\n        return () => cancelAnimationFrame(frame);\n      }\n\n      return undefined;\n    }, [\n      isControlled,\n      hasPrimary,\n      menuUnavailable,\n      onOpenChange,\n      primaryUnavailable,\n      resolvedOpen,\n    ]);\n    const chevron = (\n      <ChevronDownIcon\n        motionPreset={motionPreset}\n        open={effectiveOpen}\n        reducedMotion={resolvedReducedMotion}\n      />\n    );\n    const menuChildren = isSelectable\n      ? actions?.map((action) => (\n          <DropdownMenuItem\n            key={action.id}\n            destructive={action.destructive}\n            disabled={action.disabled}\n            id={action.id}\n            textValue={action.label}\n          >\n            {(itemState) => (\n              <>\n                <DropdownMenuItemIcon aria-hidden=\"true\">\n                  {itemState.isSelected ? (\n                    <DropdownButtonSelectionIndicator\n                      motionPreset={motionPreset}\n                      reducedMotion={resolvedReducedMotion}\n                      selected\n                    />\n                  ) : (\n                    action.icon\n                  )}\n                </DropdownMenuItemIcon>\n                <DropdownMenuItemLabel className=\"font-semibold\">\n                  {action.label}\n                </DropdownMenuItemLabel>\n                {action.description ? (\n                  <DropdownMenuItemDescription className=\"text-sm leading-5\">\n                    {action.description}\n                  </DropdownMenuItemDescription>\n                ) : null}\n              </>\n            )}\n          </DropdownMenuItem>\n        ))\n      : children;\n\n    return (\n      <div\n        ref={ref}\n        data-disabled={disabled ? \"\" : undefined}\n        data-loading={loading ? \"\" : undefined}\n        data-loading-behavior={hasPrimary ? loadingBehavior : undefined}\n        data-menu-disabled={menuUnavailable ? \"\" : undefined}\n        data-mode={mode}\n        data-motion={motionPreset}\n        data-open={effectiveOpen ? \"\" : undefined}\n        data-primary-disabled={primaryUnavailable ? \"\" : undefined}\n        data-reduced-motion={resolvedReducedMotion ? \"\" : undefined}\n        data-selected-action-id={\n          isSelectable ? resolvedSelectedActionId : undefined\n        }\n        data-slot=\"dropdown-button\"\n        data-state={effectiveOpen ? \"open\" : \"closed\"}\n        className={dropdownButtonClassNames({ className })}\n      >\n        <DropdownMenu\n          className=\"contents\"\n          data-slot=\"dropdown-button-menu-anchor\"\n          motionPreset={motionPreset}\n          onOpenChange={handleOpenChange}\n          open={effectiveOpen}\n          reducedMotion={resolvedReducedMotion}\n        >\n          <ButtonGroup\n            ref={compositeRef}\n            aria-label={groupLabel}\n            aria-labelledby={ariaLabelledBy}\n            className={groupClassName}\n            data-slot=\"dropdown-button-composite\"\n          >\n            {hasPrimary ? (\n              <Button\n                ref={primaryRef}\n                data-slot=\"dropdown-button-primary\"\n                disabled={\n                  disabled ||\n                  primaryDisabled ||\n                  (isSelectable && selectedAction?.disabled === true)\n                }\n                leftIcon={\n                  isSelectable || resolvedPrimaryIcon ? (\n                    <DropdownButtonPrimaryIcon\n                      contentKey={\n                        isSelectable ? resolvedSelectedActionId : undefined\n                      }\n                      icon={resolvedPrimaryIcon}\n                      motionPreset={motionPreset}\n                      reducedMotion={resolvedReducedMotion}\n                    />\n                  ) : undefined\n                }\n                loading={loading}\n                loadingIndicator={\n                  <DropdownButtonBusyIndicator\n                    motionDisabled={\n                      resolvedReducedMotion || motionPreset === \"none\"\n                    }\n                  />\n                }\n                onClick={resolvedPrimaryAction}\n                size={size}\n                variant={resolvedVariant}\n              >\n                <DropdownButtonPrimaryLabel\n                  contentKey={\n                    isSelectable ? resolvedSelectedActionId : undefined\n                  }\n                  label={resolvedLabel}\n                  motionPreset={motionPreset}\n                  reducedMotion={resolvedReducedMotion}\n                />\n              </Button>\n            ) : null}\n            <DropdownMenuTrigger\n              aria-describedby={ariaDescribedBy}\n              aria-label={hasPrimary ? menuLabel : ariaLabel}\n              aria-labelledby={hasPrimary ? undefined : ariaLabelledBy}\n              className={cn(\n                hasPrimary && dropdownButtonSplitTriggerSizeClasses[size],\n                triggerClassName,\n              )}\n              data-slot={\n                hasPrimary\n                  ? \"dropdown-button-menu-trigger\"\n                  : \"dropdown-button-trigger\"\n              }\n              disabled={menuUnavailable}\n              size={size}\n              variant={resolvedVariant}\n            >\n              {hasPrimary ? (\n                chevron\n              ) : (\n                <>\n                  <span data-slot=\"dropdown-button-label\">{resolvedLabel}</span>\n                  {chevron}\n                </>\n              )}\n            </DropdownMenuTrigger>\n          </ButtonGroup>\n          <DropdownMenuContent\n            anchorRef={hasPrimary ? compositeRef : undefined}\n            arrowBoundaryOffset={arrowBoundaryOffset}\n            className={cn(\"min-w-[var(--trigger-width)]\", contentClassName)}\n            containerPadding={containerPadding}\n            crossOffset={crossOffset}\n            data-slot=\"dropdown-button-content\"\n            disallowEmptySelection={isSelectable || undefined}\n            menuClassName={menuClassName}\n            offset={offset}\n            onSelectionChange={isSelectable ? handleSelectionChange : undefined}\n            placement={placement}\n            selectedKeys={selectedKeys}\n            selectionMode={isSelectable ? \"single\" : undefined}\n            shouldFlip={shouldFlip}\n            showArrow={showArrow}\n          >\n            {menuChildren}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    );\n  },\n);\n\nDropdownButton.displayName = \"DropdownButton\";\n"
    },
    {
      "path": "packages/components/src/components/dropdown-button/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/dropdown-button/index.ts",
      "content": "export {\n  DropdownButton,\n  dropdownButtonClassNames,\n  type DropdownButtonLoadingBehavior,\n  type DropdownButtonMenuProps,\n  type DropdownButtonMode,\n  type DropdownButtonMotionPreset,\n  type DropdownButtonProps,\n  type DropdownButtonSelectableAction,\n  type DropdownButtonSelectableControlledProps,\n  type DropdownButtonSelectableProps,\n  type DropdownButtonSelectableUncontrolledProps,\n  type DropdownButtonSplitProps,\n} from \"./dropdown-button\";\n"
    }
  ]
}