Radio group

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiCircle } from "@mdi/js";
5import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
6import type * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10function RadioGroup({
11  className,
12  ...props
13}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
14  return (
15    <RadioGroupPrimitive.Root
16      data-slot="radio-group"
17      className={cn("grid gap-3", className)}
18      {...props}
19    />
20  );
21}
22 
23function RadioGroupItem({
24  className,
25  ...props
26}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
27  return (
28    <RadioGroupPrimitive.Item
29      data-slot="radio-group-item"
30      className={cn(
31        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border transition-[color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
32        className,
33      )}
34      aria-label={
35        props["aria-label"] || props["aria-labelledby"]
36          ? undefined
37          : "Radio button"
38      }
39      {...props}
40    >
41      <RadioGroupPrimitive.Indicator
42        data-slot="radio-group-indicator"
43        className="relative flex items-center justify-center"
44      >
45        <Icon path={mdiCircle} size={0.8} />
46      </RadioGroupPrimitive.Indicator>
47    </RadioGroupPrimitive.Item>
48  );
49}
50 
51export { RadioGroup, RadioGroupItem };