Radio Group

import { RadioGroup, RadioGroupItem } from "@/components/redpanda-ui/radio-group"
import { Label } from "@/components/redpanda-ui/label"

<RadioGroup defaultValue="option1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="r1" />
    <Label htmlFor="r1">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="r2" />
    <Label htmlFor="r2">Option 2</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option3" id="r3" />
    <Label htmlFor="r3">Option 3</Label>
  </div>
</RadioGroup>

import { useState } from "react"

function ControlledRadioGroup() {
  const [value, setValue] = useState("option1")

  return (
    <RadioGroup value={value} onValueChange={setValue}>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option1" id="r1" />
        <Label htmlFor="r1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option2" id="r2" />
        <Label htmlFor="r2">Option 2</Label>
      </div>
    </RadioGroup>
  )
}

<RadioGroup defaultValue="fast">
  <div className="flex items-center space-x-2">
    <RadioGroupItem 
      value="fast" 
      id="fast"
      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
    />
    <Label htmlFor="fast">Fast Animation</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem 
      value="slow" 
      id="slow"
      transition={{ type: 'spring', stiffness: 100, damping: 30 }}
    />
    <Label htmlFor="slow">Slow Animation</Label>
  </div>
</RadioGroup>

RadioGroup (Root Container)
├── RadioGroupItem (Individual Radio Button)
│   ├── Motion wrapper - handles hover/tap animations
│   ├── Border/Visual styling - circular border
│   └── RadioGroupIndicator (Selection Indicator)
│       └── Motion Circle - animated filled circle
└── Layout - grid with gap-2.5 spacing

Animation States:
├── Hover - scale: 1.05
├── Tap - scale: 0.95
└── Selection Indicator
    ├── Initial - opacity: 0, scale: 0
    ├── Selected - opacity: 1, scale: 1
    └── Deselected - opacity: 0, scale: 0