{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "title": "Radio Group",
  "description": "A set of mutually exclusive options where only one can be selected at a time.",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "packages/ui/src/radio-group.tsx",
      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { Circle as CircleIcon } from \"lucide-react\";\nimport { cn } from \"./utils\";\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"grid w-full gap-2\", className)}\n      data-slot=\"radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        // Base styles\n        \"peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border\",\n        \"border-input bg-input-bg text-primary\",\n        // Smooth color transitions\n        \"transition-colors duration-150\",\n        // Click area extension — bumped toward AAA touch target\n        \"after:absolute after:-inset-x-4 after:-inset-y-3\",\n        // Checked state - primary bg with white indicator\n        \"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground\",\n        // Focus styles - outside border like buttons/checkbox\n        \"focus:ring-0 focus:ring-offset-0 focus-visible:outline-2 focus-visible:outline-ring/50 focus-visible:outline-offset-2\",\n        // Invalid styles - border and indicator red, outline only on focus, no transition\n        \"aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:transition-none dark:aria-invalid:border-destructive/50\",\n        \"aria-invalid:focus-visible:outline-destructive/50\",\n        // Invalid + checked - red bg with white indicator (like checked but red)\n        \"aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-checked:text-destructive-foreground\",\n        // Disabled styles\n        \"disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50\",\n        className\n      )}\n      data-slot=\"radio-group-item\"\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        className={cn(\n          // Micro-animation: scale + opacity transition\n          \"transition-[transform,opacity] duration-150\",\n          // Hidden when unchecked — start from scale(0.5), never scale(0)\n          \"data-[unchecked]:scale-50 data-[unchecked]:opacity-0\",\n          // Visible when checked\n          \"data-[checked]:scale-100 data-[checked]:opacity-100\"\n        )}\n        data-slot=\"radio-group-indicator\"\n        keepMounted\n      >\n        <CircleIcon className=\"size-2 fill-current\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}