{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "title": "Toggle Group",
  "description": "Single or multi-select toggle controls for compact modes and filters.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/toggle-group.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface ToggleItem {\n  value: string\n  label: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\nexport interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ToggleItem[]\n  type?: 'single' | 'multiple'\n  value?: string | string[]\n  defaultValue?: string | string[]\n  onValueChange?: (value: string | string[]) => void\n  variant?: 'default' | 'outline'\n}\n\nexport function ToggleGroup({ items, type = 'single', value: controlledValue, defaultValue, onValueChange, variant = 'default', className, ...props }: ToggleGroupProps) {\n  const [internalValue, setInternalValue] = React.useState<string | string[]>(defaultValue ?? (type === 'multiple' ? [] : ''))\n  const currentValue = controlledValue ?? internalValue\n  const selectedValues = Array.isArray(currentValue) ? currentValue : currentValue ? [currentValue] : []\n\n  const toggle = (item: ToggleItem) => {\n    if (item.disabled) return\n    const selected = selectedValues.includes(item.value)\n    const nextValue = type === 'multiple'\n      ? (selected ? selectedValues.filter((value) => value !== item.value) : [...selectedValues, item.value])\n      : (selected ? '' : item.value)\n    setInternalValue(nextValue)\n    onValueChange?.(nextValue)\n  }\n\n  return (\n    <div role=\"group\" className={cn('inline-flex flex-wrap items-center gap-2 font-sans', className)} {...props}>\n      {items.map((item) => {\n        const selected = selectedValues.includes(item.value)\n        return <button key={item.value} type=\"button\" aria-pressed={selected} disabled={item.disabled} onClick={() => toggle(item)} className={cn('flex min-h-10 items-center gap-2 rounded-full px-4 text-xs font-black transition-colors focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-40', selected ? 'bg-rk-primary text-rk-ink rk-border-sm rk-shadow-sm' : variant === 'outline' ? 'bg-rk-surface text-rk-ink rk-border-sm hover:bg-rk-mint' : 'bg-rk-canvas text-rk-ink hover:bg-rk-surface')}>{item.icon}<span>{item.label}</span></button>\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/toggle-group.tsx"
    }
  ]
}