{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "ButtonGroup",
  "description": "A button group component",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "files": [
    {
      "path": "registry/cs/ui/button-group/button-group.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, type CsBtnColor, type CsIcon } from \"@/registry/cs/ui/button/button\"\n\n/** Props for individual buttons in the ButtonGroup. */\nexport interface ButtonGroupButtonProps {\n  className?: string\n  color?: CsBtnColor\n  icon?: CsIcon\n  iconPosition?: \"left\" | \"right\"\n  label?: string\n  variant?: \"fill\" | \"outline\" | \"inline\" | \"hover\"\n  disabled?: boolean\n  value?: string | number\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  propagateClick?: boolean\n}\n\n/** Parameters for ButtonGroup. */\nexport interface ButtonGroupProps extends Omit<React.ComponentProps<\"div\">, \"color\" | \"onClick\"> {\n  /** Array of button definitions. */\n  buttons?: ButtonGroupButtonProps[]\n  /** Default color for all buttons. */\n  color?: CsBtnColor\n  /** Border radius for the group. */\n  radius?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Default variant for all buttons. */\n  variant?: \"fill\" | \"outline\" | \"inline\" | \"hover\"\n  /** Button size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Icon position for all buttons. */\n  iconPosition?: \"left\" | \"right\"\n  /** Full width. */\n  w100?: boolean\n  /** Disabled state for all buttons. */\n  disabled?: boolean\n  /** Propagate click. */\n  propagateClick?: boolean\n  /** Click handler (receives click from any button). */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nfunction ButtonGroup({\n  buttons,\n  className,\n  color = \"grey\",\n  radius = \"lg\",\n  size = \"md\",\n  variant = \"fill\",\n  iconPosition,\n  propagateClick,\n  children,\n  disabled = false,\n  w100 = false,\n  onClick,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      className={cn(\n        \"inline-flex\",\n        \"[&>[data-slot=button]]:rounded-none\",\n        \"[&>[data-slot=button]:first-child]:rounded-l-md\",\n        \"[&>[data-slot=button]:last-child]:rounded-r-md\",\n        w100 && \"w-full [&>[data-slot=button]]:flex-1\",\n        className\n      )}\n      {...props}\n    >\n      {buttons?.map(\n        (\n          {\n            variant: bv,\n            color: bc,\n            propagateClick: pc,\n            onClick: oc,\n            iconPosition: ic,\n            ...b\n          },\n          i\n        ) => (\n          <Button\n            key={i}\n            disabled={disabled || b.disabled}\n            color={bc ?? color}\n            radius={radius}\n            size={size}\n            variant={bv ?? variant}\n            iconPosition={ic ?? iconPosition}\n            propagateClick={pc ?? propagateClick}\n            w100={w100}\n            onClick={(e) => {\n              onClick?.(e)\n              oc?.(e)\n            }}\n            icon={b.icon}\n            label={b.label}\n            className={cn(\n              \"rounded-none first:rounded-l-md last:rounded-r-md\",\n              b.className\n            )}\n          />\n        )\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport { ButtonGroup }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}