{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio",
  "type": "registry:ui",
  "title": "Radio Group",
  "description": "Tactile radio option card system.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/radio.tsx",
      "content": "import * as React from 'react'\nimport { motion } from 'motion/react'\nimport { cn } from '@/lib/utils'\n\nexport interface RadioOption {\n  value: string\n  label: string\n  description?: string\n  badge?: string\n}\n\nexport interface RadioGroupProps {\n  options: RadioOption[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (val: string) => void\n  name?: string\n  className?: string\n}\n\nexport function RadioGroup({\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  name = 'radio-group',\n  className,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue || options[0]?.value)\n  const selectedValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  const handleSelect = (val: string) => {\n    setInternalValue(val)\n    onValueChange?.(val)\n  }\n\n  return (\n    <div className={cn('space-y-3 font-sans', className)}>\n      {options.map((opt) => {\n        const isSelected = selectedValue === opt.value\n        return (\n          <motion.div\n            key={opt.value}\n            whileHover={{ y: -2, boxShadow: '5px 5px 0 0 var(--rk-shadow-color)' }}\n            whileTap={{ y: 1, boxShadow: '2px 2px 0 0 var(--rk-shadow-color)' }}\n            transition={{ type: 'spring', stiffness: 500, damping: 25 }}\n            onClick={() => handleSelect(opt.value)}\n            className={cn(\n              'p-4 rounded-2xl rk-border rk-shadow-sm cursor-pointer select-none transition-colors duration-150 flex items-center justify-between',\n              isSelected ? 'bg-rk-peach' : 'bg-rk-surface hover:bg-rk-canvas'\n            )}\n          >\n            <div className=\"flex items-center gap-3.5\">\n              <div\n                className={cn(\n                  'w-5 h-5 rounded-full rk-border-sm flex items-center justify-center transition-colors shrink-0 aspect-square p-0',\n                  isSelected ? 'bg-rk-ink' : 'bg-rk-surface'\n                )}\n              >\n                {isSelected && (\n                  <motion.div\n                    initial={{ scale: 0 }}\n                    animate={{ scale: 1 }}\n                    transition={{ type: 'spring', stiffness: 500, damping: 25 }}\n                    className=\"w-2 h-2 rounded-full bg-rk-primary shrink-0 aspect-square\"\n                  />\n                )}\n              </div>\n              <div>\n                <div className=\"font-extrabold text-sm text-rk-ink\">{opt.label}</div>\n                {opt.description && (\n                  <div className=\"text-xs font-bold text-black/60\">{opt.description}</div>\n                )}\n              </div>\n            </div>\n            {opt.badge && (\n              <span className=\"text-xs font-mono font-bold px-2.5 py-0.5 rounded-full bg-rk-primary rk-border-sm shrink-0\">\n                {opt.badge}\n              </span>\n            )}\n          </motion.div>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/radio.tsx"
    }
  ]
}