Radio Group

1"use client";
2
3import { Radio as RadioPrimitive } from "@base-ui/react/radio";
4import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
5
6import { cn } from "@/lib/classes";
7
8interface RadioGroupProps extends RadioGroupPrimitive.Props {
9  orientation?: "horizontal" | "vertical";
10}
11
12function RadioGroup({
13  className,
14  orientation = "vertical",
15  ...props
16}: RadioGroupProps) {
17  return (
18    <RadioGroupPrimitive
19      className={cn(
20        "flex",
21        className,
22        orientation === "horizontal" && "flex-row flex-wrap gap-4",
23        orientation === "vertical" && "flex-col gap-4"
24      )}
25      data-slot="radio-group"
26      {...props}
27    />
28  );
29}
30
31interface RadioProps extends RadioPrimitive.Root.Props {}
32
33function Radio({ className, ...props }: RadioProps) {
34  return (
35    <RadioPrimitive.Root
36      data-slot="radio"
37      className={cn(
38        "relative isolate size-5 rounded-full inline-flex items-center justify-center shrink-0 overflow-hidden outline-hidden focus:outline-hidden cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
39        "data-disabled:cursor-not-allowed data-disabled:grayscale data-disabled:scale-100 data-disabled:opacity-50",
40        "before:content-[''] before:absolute before:rounded-full before:border-2 before:inset-0 before:border-border not-data-disabled:hover:before:bg-secondary/60",
41        "after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-primary data-unchecked:after:scale-50 data-unchecked:after:opacity-0 after:origin-center data-checked:after:scale-100 data-checked:after:opacity-100",
42        "before:transition-colors before:will-change-[scale,opacity] transition-transform after:[transition:0.2s_linear] after:[transition-property:opacity,scale,transform]",
43        className
44      )}
45      {...props}
46    >
47      <RadioPrimitive.Indicator
48        className="relative z-10 flex items-center justify-center data-unchecked:opacity-0 data-checked:opacity-100 data-unchecked:scale-60 data-checked:scale-100 bg-primary-foreground size-2 rounded-full text-primary-foreground [transition-property:opacity,scale] duration-200 ease-out pointer-events-none will-change-[opacity,scale]"
49        data-slot="radio-indicator"
50      />
51    </RadioPrimitive.Root>
52  );
53}
54
55export { RadioGroup, Radio };