{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Single- or multi-select groups of toggles.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "class-variance-authority@^0.7.1",
    "lucide-react@^1.33.0"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/toggle.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/toggle-group.tsx",
      "content": "import * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/components/ui/toggle\"\n\ntype ToggleGroupOptions = VariantProps<typeof toggleVariants> & {\n  /**\n   * Space between items in dp. The kit's connected group uses 2; `0` turns\n   * the group into a segmented button, whose segments share one outline.\n   */\n  spacing?: number\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupOptions>({\n  size: \"default\",\n  variant: \"default\",\n  shape: \"round\",\n  spacing: 2,\n  orientation: \"horizontal\",\n})\n\n/**\n * Base UI's ToggleGroup announces its axis as `data-orientation=\"horizontal\"`\n * or `\"vertical\"` — there is no bare `data-vertical` attribute — so every\n * axis-dependent style below keys off `data-[orientation=…]`.\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  shape,\n  spacing = 2,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props & ToggleGroupOptions) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-shape={shape}\n      data-spacing={spacing}\n      orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[calc(var(--gap)*1px)] rounded-m3-full\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, shape, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\n/**\n * Segmented-button styling for `spacing={0}`.\n *\n * The kit's segmented button is a different component from the toggle: it\n * keeps the secondary-container pair when selected (not the toggle's primary),\n * has no shape morph, shares a single `outline` stroke between segments, pads\n * each segment 12dp, and shows an 18dp check in front of the selected label.\n *\n * The corner classes carry both group variants so they outrank the\n * `active:not-disabled:` radius override on the first and last segment.\n */\nconst segmentClasses = [\n  \"rounded-none border-m3-outline bg-transparent px-3 text-m3-on-surface\",\n  \"data-pressed:rounded-none data-pressed:border-m3-outline\",\n  \"data-pressed:bg-m3-secondary-container data-pressed:text-m3-on-secondary-container\",\n  \"active:not-disabled:rounded-none\",\n  // Shared stroke: every segment after the first drops its leading edge.\n  \"group-data-[orientation=horizontal]/toggle-group:not-first:border-l-0\",\n  \"group-data-[orientation=vertical]/toggle-group:not-first:border-t-0\",\n  // Outer corners follow the group's pill.\n  \"group-data-[orientation=horizontal]/toggle-group:group-data-[spacing=0]/toggle-group:first:rounded-l-m3-full\",\n  \"group-data-[orientation=horizontal]/toggle-group:group-data-[spacing=0]/toggle-group:last:rounded-r-m3-full\",\n  \"group-data-[orientation=vertical]/toggle-group:group-data-[spacing=0]/toggle-group:first:rounded-t-m3-full\",\n  \"group-data-[orientation=vertical]/toggle-group:group-data-[spacing=0]/toggle-group:last:rounded-b-m3-full\",\n]\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  shape = \"round\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const segmented = context.spacing === 0\n  const resolved = {\n    variant: context.variant || variant,\n    size: context.size || size,\n    shape: context.shape || shape,\n  }\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={resolved.variant}\n      data-size={resolved.size}\n      data-shape={resolved.shape}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants(resolved),\n        segmented && segmentClasses,\n        className,\n      )}\n      {...props}\n    >\n      {segmented && (\n        <CheckIcon\n          aria-hidden\n          data-slot=\"toggle-group-item-check\"\n          className=\"hidden size-4.5 group-data-pressed/toggle:block\"\n        />\n      )}\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "actions"
  ],
  "type": "registry:ui"
}