{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Join adjacent actions into one compact control surface while retaining each button's visible keyboard focus and accessible name.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/button-group.tsx",
      "content": "// Ballmac UI: Button Group. https://ui.ballmac.com/components/button-group\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  /** Direction of adjacent controls. */\n  orientation?: \"horizontal\" | \"vertical\";\n};\nfunction ButtonGroup({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      role=\"group\"\n      className={cn(\n        \"group/button-group inline-flex max-w-full items-stretch rounded-md shadow-xs [&>*]:relative [&>*]:min-w-0 [&>*]:shadow-none [&>*:focus-visible]:z-10\",\n        orientation === \"horizontal\"\n          ? \"flex-row [&>*:not(:first-child)]:-ms-px [&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none\"\n          : \"flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype ButtonGroupTextProps = React.ComponentProps<\"span\">;\nfunction ButtonGroupText({ className, ...props }: ButtonGroupTextProps) {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        \"inline-flex min-h-9 items-center border bg-muted/50 px-3 text-sm text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype ButtonGroupSeparatorProps = React.ComponentProps<\"span\">;\nfunction ButtonGroupSeparator({\n  className,\n  ...props\n}: ButtonGroupSeparatorProps) {\n  return (\n    <span\n      data-slot=\"button-group-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"z-10 w-px self-stretch bg-border group-data-[orientation=vertical]/button-group:h-px group-data-[orientation=vertical]/button-group:w-full\", className)}\n      {...props}\n    />\n  );\n}\nexport {\n  ButtonGroup,\n  ButtonGroupText,\n  ButtonGroupSeparator,\n  type ButtonGroupProps,\n  type ButtonGroupTextProps,\n  type ButtonGroupSeparatorProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/button-group.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "buttons",
      "actions",
      "toolbar"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Groups closely related actions without turning them into a selection widget.",
      "whenToUse": [
        "Adjacent document or editor actions",
        "Compact controls with one shared boundary"
      ],
      "whenNotToUse": [
        "Mutually exclusive options; use toggle-group",
        "Unrelated actions"
      ],
      "composesWith": [
        "button"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Moves between each button in document order"
        },
        {
          "keys": "Enter / Space",
          "action": "Activates the focused button"
        }
      ],
      "customization": [
        "orientation: horizontal | vertical",
        "button and text parts"
      ]
    },
    "examples": [
      "button-group-demo",
      "button-group-states"
    ],
    "url": "https://ui.ballmac.com/components/button-group"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}