{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "A set of two-state buttons that can be toggled on or off.",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/toggle.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/toggle-group.jsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"@/registry/optics/toggle\";\n\nconst ToggleGroupContext = React.createContext({\n\tsize: \"default\",\n\tvariant: \"default\",\n\tspacing: 0,\n\torientation: \"horizontal\",\n});\n\nfunction ToggleGroup({\n\tclassName = \"\",\n\tvariant = \"default\",\n\tsize = \"default\",\n\tspacing = 0,\n\torientation = \"horizontal\",\n\tchildren = null,\n\t...props\n}) {\n\treturn (\n\t\t<ToggleGroupPrimitive\n\t\t\tdata-slot=\"toggle-group\"\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tdata-spacing={spacing}\n\t\t\tdata-orientation={orientation}\n\t\t\tstyle={{\n\t\t\t\t\"--gap\": spacing,\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ToggleGroupContext.Provider\n\t\t\t\tvalue={{ variant, size, spacing, orientation }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ToggleGroupContext.Provider>\n\t\t</ToggleGroupPrimitive>\n\t);\n}\n\nfunction ToggleGroupItem({\n\tclassName = \"\",\n\tchildren = null,\n\tvariant = \"default\",\n\tsize = \"default\",\n\t...props\n}) {\n\tconst context = React.useContext(ToggleGroupContext);\n\n\treturn (\n\t\t<TogglePrimitive\n\t\t\tdata-slot=\"toggle-group-item\"\n\t\t\tdata-variant={context.variant || variant}\n\t\t\tdata-size={context.size || size}\n\t\t\tdata-spacing={context.spacing}\n\t\t\tclassName={cn(\n\t\t\t\t\"group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: context.variant || variant,\n\t\t\t\t\tsize: context.size || size,\n\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TogglePrimitive>\n\t);\n}\n\nToggleGroup.displayName = \"ToggleGroup\";\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:component",
      "target": "components/optics/toggle-group.jsx"
    }
  ],
  "type": "registry:component"
}