radio-group

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5import { CircleIcon } from "lucide-react"
6import * as React from "react"
7 
8function RadioGroup({
9  className,
10  ...props
11}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
12  return (
13    <RadioGroupPrimitive.Root
14      data-slot="radio-group"
15      className={cn("grid gap-3", className)}
16      {...props}
17    />
18  )
19}
20 
21function RadioGroupItem({
22  className,
23  ...props
24}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
25  return (
26    <RadioGroupPrimitive.Item
27      data-slot="radio-group-item"
28      className={cn(
29        "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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
30        className,
31      )}
32      {...props}
33    >
34      <RadioGroupPrimitive.Indicator
35        data-slot="radio-group-indicator"
36        className="relative flex items-center justify-center"
37      >
38        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
39      </RadioGroupPrimitive.Indicator>
40    </RadioGroupPrimitive.Item>
41  )
42}
43 
44export { RadioGroup, RadioGroupItem }