radio-group

1"use client"
2
3import * as React from "react"
4import { Radio } from "@base-ui/react/radio"
5import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group"
6import { cn } from "@/lib/utils"
7
8type RadioGroupProps = React.ComponentPropsWithoutRef<typeof BaseRadioGroup>
9
10const RadioGroup = React.forwardRef<
11    React.ComponentRef<typeof BaseRadioGroup>,
12    RadioGroupProps
13>(({ className, ...props }, ref) => (
14    <BaseRadioGroup
15        className={cn("grid gap-3", className)}
16        {...props}
17        ref={ref}
18    />
19))
20RadioGroup.displayName = "RadioGroup"
21
22type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof Radio.Root>
23
24const RadioGroupItem = React.forwardRef<
25    React.ComponentRef<typeof Radio.Root>,
26    RadioGroupItemProps
27>(({ className, ...props }, ref) => (
28    <Radio.Root
29        ref={ref}
30        className={cn(
31            "peer h-5 w-5 shrink-0 rounded-full border-2 border-black bg-white focus-brutal disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-main",
32            className
33        )}
34        {...props}
35    >
36        <Radio.Indicator className="flex h-full w-full items-center justify-center data-unchecked:hidden">
37            <span className="h-2 w-2 rounded-full bg-black" />
38        </Radio.Indicator>
39    </Radio.Root>
40))
41RadioGroupItem.displayName = "RadioGroupItem"
42
43export { RadioGroup, RadioGroupItem }