{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Group of toggles with single or multiple selection.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/toggle.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/toggle-group/toggle-group.tsx",
      "content": "'use client'\n\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle'\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'\nimport type { VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { toggleVariants } from '@/components/ui/toggle'\nimport { cn } from '@/lib/utils'\n\nconst ToggleGroupContext = React.createContext<\n\tVariantProps<typeof toggleVariants> & {\n\t\tspacing?: number\n\t\torientation?: 'horizontal' | 'vertical'\n\t}\n>({\n\tsize: 'default',\n\tvariant: 'default',\n\tspacing: 2,\n\torientation: 'horizontal',\n})\n\nfunction ToggleGroup({\n\tclassName,\n\tvariant,\n\tsize,\n\tspacing = 2,\n\torientation = 'horizontal',\n\tchildren,\n\t...props\n}: ToggleGroupPrimitive.Props &\n\tVariantProps<typeof toggleVariants> & {\n\t\tspacing?: number\n\t\torientation?: 'horizontal' | 'vertical'\n\t}) {\n\tconst contextValue = React.useMemo(\n\t\t() => ({ variant, size, spacing, orientation }),\n\t\t[variant, size, spacing, orientation],\n\t)\n\n\treturn (\n\t\t<ToggleGroupPrimitive\n\t\t\tdata-slot=\"toggle-group\"\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tdata-spacing={spacing}\n\t\t\tdata-orientation={orientation}\n\t\t\torientation={orientation}\n\t\t\tstyle={{ '--gap': spacing } as React.CSSProperties}\n\t\t\tclassName={cn(\n\t\t\t\t'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>\n\t\t</ToggleGroupPrimitive>\n\t)\n}\n\nfunction ToggleGroupItem({\n\tclassName,\n\tchildren,\n\tvariant = 'default',\n\tsize = 'default',\n\t...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n\tconst context = React.useContext(ToggleGroupContext)\n\n\treturn (\n\t\t<TogglePrimitive\n\t\t\tdata-slot=\"toggle-group-item\"\n\t\t\tdata-variant={context.variant || variant}\n\t\t\tdata-size={context.size || size}\n\t\t\tdata-spacing={context.spacing}\n\t\t\tclassName={cn(\n\t\t\t\t'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: context.variant || variant,\n\t\t\t\t\tsize: context.size || size,\n\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TogglePrimitive>\n\t)\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
      "type": "registry:ui",
      "target": "components/ui/toggle-group.tsx"
    }
  ],
  "type": "registry:ui"
}