Radio Group

1"use client";
2 
3import * as RadixRadio from "@radix-ui/react-radio-group";
4import { type ComponentPropsWithoutRef, forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { focusRing, glass } from "@/lib/glass";
7 
8export const RadioGroup = RadixRadio.Root;
9 
10export const RadioGroupItem = forwardRef<
11  HTMLButtonElement,
12  ComponentPropsWithoutRef<typeof RadixRadio.Item>
13>(({ className, ...props }, ref) => (
14  <RadixRadio.Item
15    ref={ref as any}
16    className={cn(
17      glass,
18      focusRing,
19      "w-5 h-5 rounded-full flex items-center justify-center data-[state=checked]:bg-[#007AFF] data-[state=checked]:border-[#007AFF]",
20      className,
21    )}
22    {...props}
23  >
24    <RadixRadio.Indicator className="w-2 h-2 bg-white rounded-full" />
25  </RadixRadio.Item>
26));
27RadioGroupItem.displayName = "RadioGroupItem";