Radio

1import { RadioGroup, Radio as BaseRadio } from "@base-ui/react";
2import { cn } from "@/lib/utils";
3 
4function Radio({ className, ...props }: BaseRadio.Root.Props) {
5  return (
6    <BaseRadio.Root
7      className={cn(
8        "size-4 shrink-0 rounded-full border border-black-800 bg-white-1000 outline-none focus-visible:border-blue-500 data-disabled:border-grey-300 data-disabled:bg-grey-100 dark:border-white-1000 dark:bg-grey-800 dark:focus-visible:border-blue-400 dark:data-disabled:border-grey-600 dark:data-disabled:bg-grey-700",
9        className,
10      )}
11      {...props}
12    >
13      <BaseRadio.Indicator className="flex h-full w-full items-center justify-center">
14        <div className="size-2 rounded-full bg-black-800 dark:bg-white-1000" />
15      </BaseRadio.Indicator>
16    </BaseRadio.Root>
17  );
18}
19 
20export { Radio, RadioGroup };