Checkbox

import { Checkbox } from "@/components/redpanda-ui/checkbox"

// Basic checkbox
<Checkbox id="terms" />

// Controlled checkbox
const [checked, setChecked] = useState(false)
<Checkbox
  id="newsletter"
  checked={checked}
  onCheckedChange={setChecked}
/>

// With label
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label htmlFor="terms" className="text-sm font-medium">
    Accept terms and conditions
  </label>
</div>

// Disabled checkbox
<Checkbox id="disabled" disabled />

// With indeterminate state
<Checkbox id="indeterminate" checked="indeterminate" />

Checkbox Component Structure:
┌─────────────────────────────────────────────────────┐
│ <CheckboxPrimitive.Root> (Base UI primitive)       │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <motion.button> (Interactive element)           │ │
│ │                                                 │ │
│ │ Styles Applied:                                 │ │
│ │ • Size (20x20px)                                │ │
│ │ • Border (2px, changes on state)                │ │
│ │ • Background (transparent → filled)             │ │
│ │ • Focus ring (for accessibility)                │ │
│ │ • Motion effects (scale on hover/tap)           │ │
│ │                                                 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ <CheckboxPrimitive.Indicator>               │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ <motion.svg> (Checkmark icon)           │ │ │ │
│ │ │ │                                         │ │ │ │
│ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │
│ │ │ │ │ <motion.path> (Animated path)       │ │ │ │ │
│ │ │ │ │                                     │ │ │ │ │
│ │ │ │ │ Animation States:                   │ │ │ │ │
│ │ │ │ │ • unchecked: pathLength=0, opacity=0│ │ │ │ │
│ │ │ │ │ • checked: pathLength=1, opacity=1  │ │ │ │ │
│ │ │ │ │ • Duration: 0.2s with 0.2s delay   │ │ │ │ │
│ │ │ │ └─────────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

State Management:
• Controlled: Uses checked prop with onCheckedChange
• Uncontrolled: Uses defaultChecked prop
• Internal state: Tracks check state for animations
• Supports indeterminate state for partial selections

Accessibility Features:
• Keyboard navigation (Space to toggle)
• Focus management with visible focus ring
• Screen reader support via Base UI primitives
• ARIA attributes automatically applied
• Label association through id/htmlFor

Animation System:
• Motion library integration for smooth interactions
• Scale animations on hover (1.05x) and tap (0.95x)
• Checkmark draws in with pathLength animation
• 500ms color transition for state changes
• Staggered timing: background first, then checkmark

Motion Props Support:
• All HTMLMotionProps<'button'> supported
• Custom animation overrides via motionProps
• Gesture recognition for enhanced interactions