radio

1import * as React from "react"
2import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./radio.css"
7 
8const radioVariants = cva(
9  "radio-indicator inline-flex items-center justify-center shrink-0 rounded-full transition-colors cursor-pointer",
10  {
11    variants: {
12      size: {
13        sm: "h-[var(--layout-size-xs)] w-[var(--layout-size-xs)]",
14        md: "h-[var(--layout-size-sm)] w-[var(--layout-size-sm)]",
15      },
16    },
17    defaultVariants: {
18      size: "sm",
19    },
20  }
21)
22 
23function RadioGroup({
24  className,
25  ...props
26}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
27  return (
28    <RadioGroupPrimitive.Root
29      data-slot="radio-group"
30      className={cn("flex flex-col gap-[var(--layout-gap-md)]", className)}
31      {...props}
32    />
33  )
34}
35 
36function Radio({
37  className,
38  size = "sm",
39  label,
40  description,
41  disabled,
42  ...props
43}: React.ComponentProps<typeof RadioGroupPrimitive.Item> &
44  VariantProps<typeof radioVariants> & {
45    label?: string
46    description?: string
47  }) {
48  const id = React.useId()
49 
50  return (
51    <div
52      data-slot="radio"
53      data-disabled={disabled || undefined}
54      className={cn("flex items-start gap-[var(--layout-gap-md)]", className)}
55    >
56      <div className="flex items-center py-[var(--layout-padding-2xs)]">
57        <RadioGroupPrimitive.Item
58          id={id}
59          className={cn(radioVariants({ size }))}
60          disabled={disabled}
61          {...props}
62        >
63          <RadioGroupPrimitive.Indicator
64            className={cn(
65              "radio-dot rounded-full",
66              size === "sm" ? "size-1.5" : "size-2"
67            )}
68          />
69        </RadioGroupPrimitive.Item>
70      </div>
71      {label && (
72        <label
73          htmlFor={id}
74          className={cn(
75            "flex flex-col",
76            disabled ? "cursor-default" : "cursor-pointer"
77          )}
78        >
79          <span
80            className={cn(
81              "font-accent radio-label",
82              size === "sm" ? "text-content-note" : "text-content-body"
83            )}
84          >
85            {label}
86          </span>
87          {description && (
88            <span className="text-content-note radio-description">
89              {description}
90            </span>
91          )}
92        </label>
93      )}
94    </div>
95  )
96}
97 
98export { RadioGroup, Radio, radioVariants }