{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:component",
  "title": "Buttons group",
  "description": "A group of buttons that act as a single component, allowing users to select one or more options.",
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "src/components/ui/button-group.tsx",
      "content": "import type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport type { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ButtonGroupProps {\n\tclassName?: string;\n\torientation?: \"horizontal\" | \"vertical\";\n\tchildren: ReactElement<\n\t\tReact.ComponentProps<\"button\"> &\n\t\t\tVariantProps<typeof buttonVariants> & {\n\t\t\t\tasChild?: boolean;\n\t\t\t}\n\t>[];\n}\n\nexport const ButtonGroup = ({\n\tclassName,\n\torientation = \"horizontal\",\n\tchildren,\n}: ButtonGroupProps) => {\n\tconst totalButtons = Children.count(children);\n\tconst isHorizontal = orientation === \"horizontal\";\n\tconst isVertical = orientation === \"vertical\";\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\t{\n\t\t\t\t\t\"flex-col\": isVertical,\n\t\t\t\t\t\"w-fit\": isVertical,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{Children.map(children, (child, index) => {\n\t\t\t\tconst isFirst = index === 0;\n\t\t\t\tconst isLast = index === totalButtons - 1;\n\n\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\tclassName: cn(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"rounded-s-none\": isHorizontal && !isFirst,\n\t\t\t\t\t\t\t\"rounded-e-none\": isHorizontal && !isLast,\n\t\t\t\t\t\t\t\"border-s-0\": isHorizontal && !isFirst,\n\n\t\t\t\t\t\t\t\"rounded-t-none\": isVertical && !isFirst,\n\t\t\t\t\t\t\t\"rounded-b-none\": isVertical && !isLast,\n\t\t\t\t\t\t\t\"border-t-0\": isVertical && !isFirst,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tchild.props.className,\n\t\t\t\t\t),\n\t\t\t\t});\n\t\t\t})}\n\t\t</div>\n\t);\n};\n",
      "type": "registry:component"
    }
  ]
}