{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-toggle-group","type":"registry:component","title":"Toggle Group","description":"Single or multiple selection group built from toggle items.","version":"1.0.0","status":"ga","files":[{"path":"src/components/ui/toggle-group.tsx","type":"registry:component","content":"'use client'\n\nimport * as React from 'react'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/components/ui/toggle'\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }\n>({\n  size: 'default',\n  variant: 'default',\n  spacing: 0\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot='toggle-group'\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\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=default]:data-[variant=outline]:shadow-xs',\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & 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 }\n"}]}