{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-button",
  "title": "Split Button",
  "description": "A primary action joined to a menu trigger, with the kit's asymmetric segment geometry.",
  "dependencies": [
    "lucide-react@^1.33.0"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/button.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/button-group.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/dropdown-menu.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/split-button.tsx",
      "content": "import {\n  createContext,\n  useContext,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  ButtonGroup,\n  type ButtonGroupAccessibleName,\n  type ButtonGroupButtonVariant,\n  type ButtonGroupProps,\n  type ButtonGroupSize,\n} from \"./button-group\"\nimport { DropdownMenuTrigger } from \"./dropdown-menu\"\n\ntype SplitButtonVariant = Extract<\n  ButtonGroupButtonVariant,\n  \"default\" | \"elevated\" | \"outline\" | \"tonal\"\n>\n\nconst SplitButtonDisabledContext = createContext(false)\n\ntype SplitButtonProps = Omit<\n  ButtonGroupProps,\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"buttonVariant\"\n  | \"orientation\"\n  | \"shape\"\n  | \"size\"\n  | \"variant\"\n> &\n  ButtonGroupAccessibleName & {\n    /** Disables both the immediate action and the menu trigger. */\n    disabled?: boolean\n    /** Material size shared by both segments. */\n    size?: ButtonGroupSize\n    /** Material color treatment shared by both segments. */\n    variant?: SplitButtonVariant\n  }\n\ntype SplitButtonActionProps = Omit<\n  ComponentProps<typeof Button>,\n  \"shape\" | \"size\" | \"variant\"\n>\n\ntype SplitButtonTriggerAccessibleName =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: never; \"aria-labelledby\": string }\n\ntype SplitButtonTriggerProps = Omit<\n  ComponentProps<typeof DropdownMenuTrigger>,\n  \"aria-label\" | \"aria-labelledby\" | \"children\" | \"render\"\n> &\n  SplitButtonTriggerAccessibleName & {\n    children?: ReactNode\n  }\n\n/** Groups one immediate action with a trailing menu of related actions. */\nfunction SplitButton(splitButtonProps: SplitButtonProps) {\n  const accessibleName: ButtonGroupAccessibleName =\n    splitButtonProps[\"aria-label\"] !== undefined\n      ? {\n          \"aria-label\": splitButtonProps[\"aria-label\"],\n          \"aria-labelledby\": splitButtonProps[\"aria-labelledby\"],\n        }\n      : { \"aria-labelledby\": splitButtonProps[\"aria-labelledby\"] }\n  const {\n    \"aria-label\": _ariaLabel,\n    \"aria-labelledby\": _ariaLabelledby,\n    className,\n    children,\n    disabled = false,\n    size = \"default\",\n    variant = \"default\",\n    ...props\n  } = splitButtonProps\n\n  return (\n    <ButtonGroup\n      {...props}\n      {...accessibleName}\n      buttonVariant={variant}\n      className={cn(\"m3-split-button\", className)}\n      data-disabled={disabled || undefined}\n      orientation=\"horizontal\"\n      shape=\"round\"\n      size={size}\n      variant=\"connected\"\n    >\n      <SplitButtonDisabledContext.Provider value={disabled}>\n        {children}\n      </SplitButtonDisabledContext.Provider>\n    </ButtonGroup>\n  )\n}\n\n/** The leading segment that invokes the split button's immediate action. */\nfunction SplitButtonAction({ disabled, ...props }: SplitButtonActionProps) {\n  const groupDisabled = useContext(SplitButtonDisabledContext)\n\n  return (\n    <Button\n      {...props}\n      data-split-button-segment=\"action\"\n      disabled={groupDisabled || disabled}\n    />\n  )\n}\n\n/** The trailing segment that opens a composed DropdownMenu. */\nfunction SplitButtonTrigger({\n  children = (\n    <ChevronDownIcon aria-hidden=\"true\" data-icon=\"inline-end\" />\n  ),\n  disabled,\n  onPointerCancel,\n  onPointerDown,\n  onPointerUp,\n  ...props\n}: SplitButtonTriggerProps) {\n  const groupDisabled = useContext(SplitButtonDisabledContext)\n  const resolvedDisabled = groupDisabled || disabled\n  const [isPointerDown, setIsPointerDown] = useState(false)\n\n  return (\n    <DropdownMenuTrigger\n      {...props}\n      data-split-button-pressing={isPointerDown || undefined}\n      disabled={resolvedDisabled}\n      onPointerCancel={(event) => {\n        setIsPointerDown(false)\n        onPointerCancel?.(event)\n      }}\n      onPointerDown={(event) => {\n        setIsPointerDown(true)\n        onPointerDown?.(event)\n      }}\n      onPointerUp={(event) => {\n        setIsPointerDown(false)\n        onPointerUp?.(event)\n      }}\n      render={\n        <Button\n          data-split-button-segment=\"trigger\"\n          disabled={resolvedDisabled}\n        />\n      }\n    >\n      {children}\n    </DropdownMenuTrigger>\n  )\n}\n\nexport { SplitButton, SplitButtonAction, SplitButtonTrigger }\nexport type {\n  SplitButtonActionProps,\n  SplitButtonProps,\n  SplitButtonTriggerAccessibleName,\n  SplitButtonTriggerProps,\n  SplitButtonVariant,\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "actions"
  ],
  "type": "registry:ui"
}