Radio Group

"use client";

import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { LayoutGroup, MotionConfig, motion } from "motion/react";
import { cn } from "@/lib/utils";

// Radio group. There's one dot, and choosing another option sends it across
// to that option's ring instead of blinking one off and the next on, so the
// eye follows the choice. In the cards layout an outline travels with it,
// measured from the cards so it lands exactly on cards of any size.
//
// Tab lands on the chosen option, arrows move the choice (skipping disabled
// options), Home and End jump to the ends.

export type RadioOption =
  | string
  | { value: string; label: ReactNode; description?: ReactNode; /** Right-aligned detail, e.g. a price. */ meta?: ReactNode; icon?: ReactNode; disabled?: boolean };

export type RadioGroupProps = {
  options: readonly RadioOption[];
  /** Chosen value (controlled). Pair with `onChange`. */
  value?: string;
  /** Chosen value on mount (uncontrolled). Leave out for none. */
  defaultValue?: string;