{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Single or multiple selection toggle group on radix-ui. Inherits variant/size/tone from the group via context; outline variant renders as a segmented control.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/toggle",
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/toggle-group.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@/registry/ai2/ui/primitives\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { toggleVariants } from \"@/registry/ai2/ui/toggle\"\r\n\r\nconst ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({\r\n  variant: \"default\",\r\n  size: \"md\",\r\n  tone: \"neutral\",\r\n})\r\n\r\nfunction ToggleGroup({\r\n  className,\r\n  variant,\r\n  size,\r\n  tone,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\r\n  VariantProps<typeof toggleVariants>) {\r\n  /* WCAG 1.4.4: the group is `w-fit`, so at 200% text it widened the page.\r\n     Scrolling was moved INSIDE the group. The wrapper's rationale and the\r\n     `-m-1 p-1` pair are documented in detail in tabs.tsx: `overflow-x-auto`\r\n     clips vertically too, which is why the focus ring (3px) and the outline\r\n     variant's shadow need room. */\r\n  return (\r\n    <div\r\n      data-slot=\"toggle-group-viewport\"\r\n      className=\"-m-1 max-w-full overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\r\n    >\r\n      <ToggleGroupPrimitive.Root\r\n        data-slot=\"toggle-group\"\r\n        data-variant={variant ?? \"default\"}\r\n        className={cn(\r\n          \"group/toggle-group flex w-fit items-center gap-0.5 rounded-lg data-[variant=outline]:gap-0 data-[variant=outline]:shadow-xs\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <ToggleGroupContext.Provider value={{ variant, size, tone }}>\r\n          {children}\r\n        </ToggleGroupContext.Provider>\r\n      </ToggleGroupPrimitive.Root>\r\n    </div>\r\n  )\r\n}\r\n\r\nfunction ToggleGroupItem({\r\n  className,\r\n  children,\r\n  variant,\r\n  size,\r\n  tone,\r\n  ...props\r\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\r\n  VariantProps<typeof toggleVariants>) {\r\n  const ctx = React.useContext(ToggleGroupContext)\r\n  const v = variant ?? ctx.variant\r\n  return (\r\n    <ToggleGroupPrimitive.Item\r\n      data-slot=\"toggle-group-item\"\r\n      data-tone={tone ?? ctx.tone ?? \"neutral\"}\r\n      className={cn(\r\n        toggleVariants({ variant: v, size: size ?? ctx.size, tone: tone ?? ctx.tone }),\r\n        v === \"outline\" &&\r\n          \"rounded-none border-l-0 first:rounded-l-lg first:border-l last:rounded-r-lg\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ToggleGroupPrimitive.Item>\r\n  )\r\n}\r\n\r\nexport { ToggleGroup, ToggleGroupItem }\r\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Set type=single or type=multiple on ToggleGroup. variant=outline joins items into a segmented control.",
  "categories": [
    "form",
    "actions"
  ],
  "type": "registry:ui"
}