{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "A set of toggles with single or multiple selection, joined or spaced apart.",
  "dependencies": [
    "@radix-ui/react-toggle-group",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@corsair-ui/utils",
    "@corsair-ui/toggle"
  ],
  "files": [
    {
      "path": "registry/default/ui/toggle-group.tsx",
      "content": "\"use client\";\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { createContext, useContext, type ComponentProps } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { toggleVariants } from \"@/registry/default/ui/toggle\";\n\ntype ToggleGroupStyle = VariantProps<typeof toggleVariants> & {\n  /** 0 joins the items into one bar; 1 and 2 space them apart. */\n  spacing?: 0 | 1 | 2;\n};\n\nconst ToggleGroupContext = createContext<ToggleGroupStyle>({\n  variant: \"default\",\n  size: \"default\",\n  spacing: 0,\n});\n\n/**\n * A set of toggles: `type=\"single\"` works like a radio group that can be\n * cleared, `type=\"multiple\"` like checkboxes. Give it an `aria-label`.\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  ...props\n}: ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupStyle) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant ?? \"default\"}\n      data-size={size ?? \"default\"}\n      data-spacing={spacing}\n      className={cn(\n        \"flex w-fit items-center rounded-md data-[spacing=1]:gap-1 data-[spacing=2]:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n  const context = useContext(ToggleGroupContext);\n  const itemVariant = context.variant ?? variant;\n  const itemSize = context.size ?? size;\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant ?? \"default\"}\n      data-size={itemSize ?? \"default\"}\n      data-spacing={context.spacing}\n      className={cn(\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n        // Joined: only the outer corners are rounded and borders do not double up.\n        \"data-[spacing=0]:rounded-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md\",\n        \"data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}