Radio Group

1"use client"
2 
3import * as React from "react"
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5 
6import { cn } from "@/lib/utils"
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-2.5", 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        "flex size-[18px] shrink-0 items-center justify-center rounded-full border border-[#9599a1] bg-[linear-gradient(180deg,#ffffff_0%,#e8ebef_55%,#dcdfe4_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_1px_2px_rgba(20,30,50,0.2)] outline-none transition-[filter] hover:brightness-103 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:brightness-95 disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:border-[var(--aqua-edge,#1c5fb8)] data-[state=checked]:bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] data-[state=checked]:shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_1px_2px_rgba(20,60,130,0.35)]",
30        className
31      )}
32      {...props}
33    >
34      <RadioGroupPrimitive.Indicator
35        data-slot="radio-group-indicator"
36        className="flex size-full items-center justify-center"
37      >
38        <span className="size-2 rounded-full bg-white shadow-[0_1px_1px_rgba(10,40,90,0.35)]" />
39      </RadioGroupPrimitive.Indicator>
40    </RadioGroupPrimitive.Item>
41  )
42}
43 
44export { RadioGroup, RadioGroupItem }