radio-group

1import * as React from "react"
2import { Radio } from "@base-ui/react/radio"
3import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group"
4import { CircleIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8function RadioGroup({
9	className,
10	...props
11}: React.ComponentProps<typeof BaseRadioGroup>) {
12	return (
13		<BaseRadioGroup
14			data-slot="radio-group"
15			className={cn("group grid gap-3", className)}
16			{...props}
17		/>
18	)
19}
20 
21function RadioGroupItem({
22	className,
23	...props
24}: React.ComponentProps<typeof Radio.Root>) {
25	return (
26		<Radio.Root
27			data-slot="radio-group-item"
28			className={cn(
29				"bg-input text-primary hover:border-ring/70 focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive data-checked:border-primary aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50",
30				className
31			)}
32			{...props}
33		>
34			<Radio.Indicator
35				data-slot="radio-group-indicator"
36				className="relative flex size-full 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			</Radio.Indicator>
40		</Radio.Root>
41	)
42}
43 
44export { RadioGroup, RadioGroupItem }