MicroClub Radio Group

1'use client';
2 
3import * as React from 'react';
4import { Radio as RadioPrimitive } from '@base-ui/react/radio';
5import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
6import { cva, type VariantProps } from 'class-variance-authority';
7 
8import { cn } from '@/lib/utils';
9 
10const radioGroupVariants = cva(
11  'peer relative flex shrink-0 items-center justify-center rounded-full border transition-colors outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
12  {
13    variants: {
14      size: {
15        sm: 'size-4 [&_[data-slot=radio-group-indicator]>span]:size-2',
16        md: 'size-5 [&_[data-slot=radio-group-indicator]>span]:size-2.5',
17      },
18    },
19    defaultVariants: {
20      size: 'sm',
21    },
22  }
23);
24 
25const radioGroupItemVariants = cva('inline-flex', {
26  variants: {
27    size: {
28      sm: 'gap-2',
29      md: 'gap-3',
30    },
31  },
32  defaultVariants: {
33    size: 'sm',
34  },
35});
36 
37const textVariants = cva('font-medium transition-colors', {
38  variants: {
39    size: {
40      sm: 'text-sm',
41      md: 'text-base',
42    },
43    disabled: {
44      true: 'text-muted-foreground',
45      false: 'text-foreground',
46    },
47  },
48  defaultVariants: {
49    size: 'sm',
50    disabled: false,
51  },
52});
53 
54const supportTextVariants = cva('font-regular', {
55  variants: {
56    size: {
57      sm: 'text-sm',
58      md: 'text-base',
59    },
60    disabled: {
61      true: 'text-muted-foreground',
62      false: 'text-foreground',
63    },
64  },
65  defaultVariants: {
66    size: 'sm',
67    disabled: false,
68  },
69});
70 
71function McRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
72  return (
73    <RadioGroupPrimitive
74      data-slot="radio-group"
75      className={cn('grid w-full gap-2', className)}
76      {...props}
77    />
78  );
79}
80 
81export interface McRadioGroupItemProps
82  extends RadioPrimitive.Root.Props, VariantProps<typeof radioGroupVariants> {
83  text?: string;
84  supportText?: string;
85}
86 
87function McRadioGroupItem({
88  className,
89  size = 'sm',
90  text,
91  supportText,
92  id,
93  disabled,
94  value,
95  ...props
96}: McRadioGroupItemProps) {
97  const radioId = React.useId();
98  const finalId = id ?? radioId;
99  const labelId = text ? `${finalId}-label` : undefined;
100  const descriptionId = supportText ? `${finalId}-description` : undefined;
101 
102  return (
103    <label
104      htmlFor={finalId}
105      className={cn(
106        radioGroupItemVariants({ size }),
107        supportText ? 'items-start' : 'items-center',
108        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
109// … truncated