{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"toggle-group","type":"registry:ui","description":"A set of two-state buttons that can be toggled on or off, grouped together with shared variant and size. Use for grouped exclusive or multiple selection toggles like text alignment, built on Radix Toggle Group.","dependencies":["radix-ui","class-variance-authority"],"registryDependencies":["utils","toggle"],"files":[{"path":"ui/toggle-group.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\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>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </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> &\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      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-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"}],"categories":["form"],"accessibility":{"support":"primitive","pattern":"toggle group","primitive":"Radix Toggle Group","keyboard":[{"keys":["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],"action":"Move within the composite control."},{"keys":["Enter","Space"],"action":"Activate the focused control."}],"aria":["Uses roving focus and pressed/selected state for single or multiple selection."],"consumer":["Label the group and every icon-only item."]},"api":{"source":"src/ui/toggle-group.tsx","exports":[{"name":"ToggleGroup","kind":"component","propsType":"React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>","props":[{"name":"variant","type":"null | \"default\" | \"outline\"","required":false},{"name":"size","type":"null | \"default\" | \"sm\" | \"lg\"","required":false}]},{"name":"ToggleGroupItem","kind":"component","propsType":"React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>","props":[{"name":"variant","type":"null | \"default\" | \"outline\"","required":false},{"name":"size","type":"null | \"default\" | \"sm\" | \"lg\"","required":false}]}]}}