{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "title": "Toggle Group",
  "description": "Set of toggles for single- or multi-select segmented controls (alignment, view modes).",
  "dependencies": [
    "@radix-ui/react-toggle-group",
    "@saasflare/ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/toggle-group.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview ToggleGroup — grouped toggle buttons with shared state, variant styling, and configurable spacing.\n * @module packages/ui/components/ui/toggle-group\n * @layer core\n *\n * @component\n * @example\n * import { ToggleGroup, ToggleGroupItem } from '@saasflare/ui';\n * <ToggleGroup type=\"single\" defaultValue=\"center\">\n *   <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n */\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { toggleVariants } from \"@saasflare/ui\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }\n>({\n  size: \"md\",\n  variant: \"default\",\n  spacing: 0,\n})\n\n/**\n * Props for {@link ToggleGroup}.\n *\n * Combines the Radix ToggleGroup root props (`type`, `value`, …) with the\n * shared toggle variant axes and {@link SaasflareComponentProps}. `variant`\n * and `size` propagate to every {@link ToggleGroupItem} via context.\n */\ntype ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  Omit<VariantProps<typeof toggleVariants>, \"size\"> &\n  SaasflareComponentProps & {\n    /** Visual size of the items. (`\"default\"` is a deprecated alias for `\"md\"`.) */\n    size?: VariantProps<typeof toggleVariants>[\"size\"] | \"default\"\n    /** Gap (in spacing units) between items. `0` (default) renders a joined, segmented group; a positive value detaches the items into spaced pills. */\n    spacing?: number\n  }\n\n/**\n * Set of two-state buttons with shared single or multiple selection. Renders\n * as a joined, segmented control by default; set `spacing` to detach the items\n * into spaced pills. `variant` and `size` apply to all items via context.\n *\n * @component\n * @layer core\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"center\">\n *   <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ToggleGroupProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const resolvedSize = size === \"default\" ? \"md\" : size\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={resolvedSize}\n      data-spacing={spacing}\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs\",\n        className\n      )}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size: resolvedSize, spacing }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\n/**\n * A single toggle within a {@link ToggleGroup}. Inherits `variant`, `size`,\n * and `spacing` from the group context; group values win over item props.\n *\n * @component\n * @layer core\n */\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n        \"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md 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, type ToggleGroupProps }\n",
      "target": "components/ui/toggle-group.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/toggle-group.json"
  }
}