{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "title": "Toggle Group",
  "description": "A set of related toggles with shared styling and keyboard behavior.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Forms"
  ],
  "docs": "https://abackui.com/docs/components/toggle-group",
  "meta": {
    "status": "beta"
  },
  "files": [
    {
      "path": "components/ui/toggle-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleGroupItemVariants = cva(\n  [\n    \"inline-flex shrink-0 items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap\",\n    \"outline-none transition-colors duration-150\",\n    \"focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent text-foreground hover:bg-muted\",\n        outline:\n          \"border border-input bg-background text-foreground hover:bg-muted data-[state=on]:border-primary\",\n      },\n      size: {\n        sm: \"h-8 min-w-8 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3.5\",\n        default: \"h-9 min-w-9 px-3 [&_svg:not([class*='size-'])]:size-4\",\n        lg: \"h-10 min-w-10 px-4 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleGroupItemVariants>;\n\n// Root is a single/multiple discriminated union; the wrapper keeps the same\n// contract and forwards `type` untouched.\nconst ToggleGroupRoot = ToggleGroupPrimitive.Root as React.ComponentType<ToggleGroupProps>;\n\nfunction ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupRoot\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"inline-flex w-fit divide-x divide-border border border-border bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToggleGroupItem({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleGroupItemVariants>) {\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      className={cn(toggleGroupItemVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };\n",
      "type": "registry:ui",
      "target": "components/ui/toggle-group.tsx"
    }
  ]
}