Radio Group

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13  type KeyboardEvent,
14  type ReactNode,
15} from 'react'
16import { motion, useReducedMotion } from 'motion/react'
17import { cn } from '@/lib/utils'
18import { springs } from '@/lib/motion-tokens'
19import { playHoverSound, playClickSound } from '@/lib/sound'
20 
21interface RadioGroupContextValue {
22  value: string | undefined
23  setValue: (v: string) => void
24  name?: string
25  groupId: string
26  focusedValue: string | null
27  setFocusedValue: (v: string) => void
28  itemValues: string[]
29  registerItem: (v: string) => void
30  unregisterItem: (v: string) => void
31  required?: boolean
32  ariaInvalid?: boolean
33}
34 
35const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
36 
37function useRadioGroupCtx(componentName: string) {
38  const ctx = useContext(RadioGroupContext)
39  if (!ctx) throw new Error(`${componentName} must be used within RadioGroup`)
40  return ctx
41}
42 
43export interface RadioGroupProps {
44  value?: string
45  defaultValue?: string
46  onValueChange?: (value: string) => void
47  name?: string
48  children?: ReactNode
49  className?: string
50  required?: boolean
51  'aria-invalid'?: boolean
52  'aria-describedby'?: string
53}
54 
55export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
56  (
57    {
58      value: valueProp,
59      defaultValue,
60      onValueChange,
61      name,
62      children,
63      className,
64      required,
65      'aria-invalid': ariaInvalid,
66      'aria-describedby': ariaDescribedby,
67      ...props
68    },
69    ref,
70  ) => {
71    const isControlled = valueProp !== undefined
72    const [internal, setInternal] = useState(defaultValue)
73    const value = isControlled ? valueProp : internal
74    const groupId = useId()
75    const containerRef = useRef<HTMLDivElement>(null)
76 
77    const [itemValues, setItemValues] = useState<string[]>([])
78    const [focusedValue, setFocusedValue] = useState<string | null>(null)
79 
80    const registerItem = useCallback((v: string) => {
81      setItemValues((prev) => (prev.includes(v) ? prev : [...prev, v]))
82    }, [])
83 
84    const unregisterItem = useCallback((v: string) => {
85      setItemValues((prev) => prev.filter((x) => x !== v))
86    }, [])
87 
88    const setValue = useCallback(
89      (v: string) => {
90        if (!isControlled) setInternal(v)
91        onValueChange?.(v)
92        setFocusedValue(v)
93      },
94      [isControlled, onValueChange],
95    )
96 
97    const handleKeyDown = useCallback(
98// … truncated