Radio Group

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 VariantProps, cva } from 'class-variance-authority';
6 
7import { cn } from '@/lib/utils';
8 
9const radioGroupVariants = cva('', {
10  variants: {
11    orientation: {
12      vertical: 'grid',
13      horizontal: 'flex flex-row',
14    },
15    density: {
16      default: '',
17      comfortable: '',
18    },
19    size: {
20      sm: '',
21      default: '',
22      lg: '',
23    },
24  },
25  compoundVariants: [
26    { size: 'sm', density: 'default', class: 'gap-2' },
27    { size: 'sm', density: 'comfortable', class: 'gap-3' },
28    { size: 'default', density: 'default', class: 'gap-3' },
29    { size: 'default', density: 'comfortable', class: 'gap-4' },
30    { size: 'lg', density: 'default', class: 'gap-3' },
31    { size: 'lg', density: 'comfortable', class: 'gap-4' },
32  ],
33  defaultVariants: {
34    orientation: 'vertical',
35    density: 'default',
36    size: 'default',
37  },
38});
39 
40function RadioGroup({
41  className,
42  orientation = 'vertical',
43  density = 'default',
44  size = 'default',
45  ...props
46}: RadioGroupPrimitive.Props & VariantProps<typeof radioGroupVariants>) {
47  return (
48    <RadioGroupPrimitive
49      data-slot="radio-group"
50      data-orientation={orientation}
51      data-density={density}
52      data-size={size}
53      aria-orientation={orientation ?? undefined}
54      className={cn(
55        radioGroupVariants({ orientation, density, size }),
56        className,
57      )}
58      {...props}
59    />
60  );
61}
62 
63function RadioGroupItem({
64  className,
65  size = 'default',
66  ...props
67}: RadioPrimitive.Root.Props & {
68  size?: 'sm' | 'default' | 'lg';
69}) {
70  const isLg = size === 'lg';
71  const bboxSize = isLg ? 'size-6' : 'size-5';
72  const circleSize = isLg ? 'size-5' : 'size-4';
73  const dotSize = isLg ? 'size-2.5' : 'size-2';
74 
75  return (
76    <RadioPrimitive.Root
77      data-slot="radio-group-item"
78      data-size={size}
79      className={cn(
80        bboxSize,
81        'group relative shrink-0 cursor-pointer rounded-full outline-none',
82        'flex items-center justify-center',
83        'data-disabled:cursor-not-allowed',
84        className,
85      )}
86      {...props}>
87      <div
88        className={cn(
89          circleSize,
90          'rounded-full border bg-transparent transition-colors',
91          'border-stroke-primary',
92          'ring-stroke-status-focus group-focus-visible:border-stroke-active group-focus-visible:ring-2',
93// … truncated