{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "react-aria-components"
  ],
  "files": [
    {
      "content": "export * as ToggleGroup from \"./namespace\";\nexport * from \"./styles\";\nexport * from \"./toggle-group\";\n",
      "path": "src/registry/ui/toggle-group/index.ts",
      "type": "registry:ui"
    },
    {
      "content": "\"use client\";\n\nimport type { VariantProps } from \"cva\";\nimport { createContext, use } from \"react\";\nimport { ToggleButton, ToggleButtonGroup } from \"react-aria-components\";\nimport type { ToggleStyles } from \"~/registry/ui/toggle\";\nimport { ToggleGroupStyles } from \"./styles\";\n\ninterface ToggleGroupContextValue extends VariantProps<typeof ToggleStyles> {\n  spacing?: number;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n});\n\nexport interface ToggleGroupRootProps\n  extends React.ComponentProps<typeof ToggleButtonGroup>,\n    ToggleGroupContextValue {}\n\nexport function ToggleGroupRoot({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  ...props\n}: ToggleGroupRootProps) {\n  return (\n    <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n      <ToggleButtonGroup\n        className={ToggleGroupStyles.Root({ className })}\n        data-size={size}\n        data-slot=\"toggle-group-root\"\n        data-variant={variant}\n        style={{ \"--gap\": spacing } as React.CSSProperties}\n        {...props}\n      />\n    </ToggleGroupContext.Provider>\n  );\n}\n\nexport interface ToggleGroupItemProps\n  extends React.ComponentProps<typeof ToggleButton>,\n    VariantProps<typeof ToggleStyles> {}\n\nexport function ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: ToggleGroupItemProps) {\n  const context = use(ToggleGroupContext);\n  const _variant = context.variant ?? variant;\n  const _size = context.size ?? size;\n  const _spacing = context.spacing ?? 0;\n\n  return (\n    <ToggleButton\n      className={ToggleGroupStyles.Item({\n        variant: _variant,\n        size: _size,\n        className,\n      })}\n      data-size={_size}\n      data-slot=\"toggle-group-item\"\n      data-spacing={_spacing}\n      data-variant={_variant}\n      {...props}\n    >\n      {children}\n    </ToggleButton>\n  );\n}\n",
      "path": "src/registry/ui/toggle-group/toggle-group.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import { compose, cva } from \"~/registry/lib/cva\";\nimport { ToggleStyles } from \"../toggle/styles\";\n\nexport const ToggleGroupStyles = {\n  Root: cva({\n    base: [\n      \"group/toggle-group-root flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md\",\n      \"data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n    ],\n  }),\n  Item: compose(\n    ToggleStyles,\n    cva({\n      base: [\n        \"min-w-0 shrink-0 px-3\",\n        \"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:first:rounded-l-md\",\n        \"data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l\",\n      ],\n    })\n  ),\n};\n",
      "path": "src/registry/ui/toggle-group/styles.ts",
      "type": "registry:ui"
    },
    {
      "content": "export {\n  ToggleGroupItem as Item,\n  ToggleGroupRoot as Root,\n} from \"./toggle-group\";\n",
      "path": "src/registry/ui/toggle-group/namespace.ts",
      "type": "registry:ui"
    }
  ],
  "name": "toggle-group",
  "registryDependencies": [
    "@kanpeki/toggle"
  ],
  "type": "registry:ui"
}