{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A compact roving-focus selection group for one or several pressed options, with clear states and mobile-friendly sizing.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/direction.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/toggle-group.tsx",
      "content": "// Ballmac UI: Toggle Group. https://ui.ballmac.com/components/toggle-group\n\"use client\";\n\nimport * as React from \"react\";\nimport { ToggleGroup as Primitive } from \"radix-ui\";\nimport { useDirection } from \"@/lib/ballmac/direction\";\nimport { cn } from \"@/lib/utils\";\n\ntype ToggleGroupProps = React.ComponentProps<typeof Primitive.Root> & {\n  /** Surface treatment shared by the items. */\n  variant?: \"default\" | \"outline\";\n  /** Item height. */\n  size?: \"sm\" | \"default\" | \"lg\";\n};\nfunction ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleGroupProps) {\n  const dir = useDirection(props.dir);\n  return (\n    <Primitive.Root\n      dir={dir}\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1 rounded-lg bg-muted p-1\",\n        variant === \"outline\" && \"border bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype ToggleGroupItemProps = React.ComponentProps<typeof Primitive.Item>;\nfunction ToggleGroupItem({ className, ...props }: ToggleGroupItemProps) {\n  return (\n    <Primitive.Item\n      data-slot=\"toggle-group-item\"\n      className={cn(\n        \"inline-flex min-w-0 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium text-muted-foreground outline-none transition-[color,background-color,box-shadow] duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-xs [[data-size=sm]_&]:h-8 [[data-size=default]_&]:h-9 [[data-size=lg]_&]:h-11 [[data-variant=outline]_&]:data-[state=on]:bg-primary/10 [[data-variant=outline]_&]:data-[state=on]:text-primary motion-reduce:transition-none [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport {\n  ToggleGroup,\n  ToggleGroupItem,\n  type ToggleGroupProps,\n  type ToggleGroupItemProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/toggle-group.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "toggle",
      "selection",
      "toolbar",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Lets users choose one or multiple options from a short row while Radix handles roving focus.",
      "whenToUse": [
        "View mode or density selector",
        "Formatting options that can coexist"
      ],
      "whenNotToUse": [
        "Unrelated actions; use button-group",
        "A long list of options; use select"
      ],
      "composesWith": [
        "button-group"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Enters or exits the group"
        },
        {
          "keys": "Arrow keys",
          "action": "Moves focus between items"
        },
        {
          "keys": "Enter / Space",
          "action": "Selects the focused item"
        }
      ],
      "customization": [
        "type: single | multiple",
        "variant: default | outline",
        "size: sm | default | lg"
      ]
    },
    "examples": [
      "toggle-group-demo",
      "toggle-group-states"
    ],
    "url": "https://ui.ballmac.com/components/toggle-group"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}