Radio

1"use client";
2 
3import { Radio as RadioPrimitive } from "@base-ui/react/radio";
4import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import {
8  coarseTarget,
9  colorTransition,
10  selectionFocus,
11  stateStepping,
12} from "@/lib/recipes";
13 
14export function RadioGroup({
15  className,
16  ...props
17}: RadioGroupPrimitive.Props): React.ReactElement {
18  return (
19    <RadioGroupPrimitive
20      className={cn("flex flex-col gap-2", className)}
21      data-slot="radio-group"
22      {...props}
23    />
24  );
25}
26 
27export interface RadioProps extends RadioPrimitive.Root.Props {
28  /** Optional label. When present, the radio is wrapped in a `<label>` so clicking the label selects it. */
29  children?: React.ReactNode;
30  /** Additional classes for the outer `<label>` (only applies when `children` is provided). */
31  wrapperClassName?: string;
32}
33 
34export function Radio({
35  className,
36  wrapperClassName,
37  children,
38  disabled,
39  ...props
40}: RadioProps): React.ReactElement {
41  const dot = (
42    <RadioPrimitive.Root
43      disabled={disabled}
44      className={cn(
45        "inline-flex size-4 shrink-0 items-center justify-center rounded-full",
46        stateStepping.neutralFill,
47        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
48        colorTransition,
49        selectionFocus,
50        children == null && coarseTarget,
51        className,
52      )}
53      data-slot="radio"
54      {...props}
55    >
56      <RadioPrimitive.Indicator
57        className="flex items-center justify-center"
58        data-slot="radio-indicator"
59      >
60        <span
61          aria-hidden="true"
62          className="!bg-ink size-1.5 rounded-full"
63        />
64      </RadioPrimitive.Indicator>
65    </RadioPrimitive.Root>
66  );
67 
68  if (children == null) return dot;
69 
70  return (
71    <label
72      className={cn(
73        "inline-flex items-center gap-2 text-small text-ink",
74        disabled && "cursor-not-allowed opacity-50",
75        wrapperClassName,
76      )}
77      data-slot="radio-label"
78    >
79      {dot}
80      <span>{children}</span>
81    </label>
82  );
83}
84 
85export { RadioPrimitive, RadioGroupPrimitive };