Radio Group

1"use client";
2 
3import {
4  Children,
5  useRef,
6  useState,
7  useEffect,
8  createContext,
9  useContext,
10  forwardRef,
11  isValidElement,
12  type ReactNode,
13  type HTMLAttributes,
14} from "react";
15import { motion, AnimatePresence } from "framer-motion";
16import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
17import { cn } from "@/lib/utils";
18import { spring } from "@/lib/springs";
19import { fontWeights } from "@/lib/font-weight";
20import { useProximityHover } from "@/hooks/use-proximity-hover";
21import { useShape } from "@/lib/shape-context";
22 
23interface RadioGroupContextValue {
24  registerItem: (index: number, element: HTMLElement | null) => void;
25  activeIndex: number | null;
26  selectedIndex: number | null;
27  selectedValue?: string;
28  onValueChange?: (value: string) => void;
29  /** Whether any item in the group is currently selected. Drives the roving
30   *  tabindex fallback: with no selection, the first item must stay tabbable
31   *  or the whole group becomes unreachable by keyboard. */
32  hasSelection: boolean;
33}
34 
35const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
36 
37function useRadioGroupContext() {
38  const ctx = useContext(RadioGroupContext);
39  if (!ctx) throw new Error("useRadioGroup must be used within a RadioGroup");
40  return ctx;
41}
42 
43interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
44  children: ReactNode;
45  selectedIndex?: number;
46  value?: string;
47  onValueChange?: (value: string) => void;
48}
49 
50const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
51  ({ children, selectedIndex, value, onValueChange, className, ...props }, ref) => {
52    const containerRef = useRef<HTMLDivElement>(null);
53    const childValues = Children.toArray(children)
54      .filter(isValidElement)
55      .map((child) => (child.props as { value?: string }).value);
56    const {
57      activeIndex,
58      setActiveIndex,
59      itemRects,
60      sessionRef,
61      handlers,
62      registerItem,
63      measureItems,
64    } = useProximityHover(containerRef);
65 
66    useEffect(() => {
67      measureItems();
68    }, [measureItems, children]);
69 
70    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
71    const resolvedSelectedIndex =
72      value !== undefined
73        ? childValues.findIndex((childValue) => childValue === value)
74        : selectedIndex ?? -1;
75    // Covers all three selection APIs: value, selectedIndex, per-item selected.
76    const hasSelection =
77      resolvedSelectedIndex >= 0 ||
78// … truncated