Open History to see the last commit
1import { Radio as RadioPrimitive } from "@base-ui/react/radio";
2import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
3
4import { cn } from "~/lib/utils";
5
6function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
7 return (
8 <RadioGroupPrimitive
9 className={cn("flex flex-col gap-3", className)}
10 data-slot="radio-group"
11 {...props}
12 />
13 );
14}
15
16function Radio({ className, ...props }: RadioPrimitive.Root.Props) {
17 return (
18 <RadioPrimitive.Root
19 className={cn(
20 "surface-well data-checked:bg-none data-checked:shadow-none data-indeterminate:bg-none data-indeterminate:shadow-none relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring aria-invalid:surface-invalid data-disabled:opacity-64 sm:size-4",
21 className,
22 )}
23 data-slot="radio"
24 {...props}
25 >
26 <RadioPrimitive.Indicator
27 className="-inset-px absolute flex size-4.5 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary-foreground in-aria-invalid:[box-shadow:inset_0_0_0_1px_var(--error),var(--lit-shadow)]! data-unchecked:hidden data-checked:surface-gloss-on sm:size-4 sm:before:size-1.5 in-[[data-slot=radio]:focus-visible]:outline-2 in-[[data-slot=radio]:focus-visible]:outline-solid in-[[data-slot=radio]:focus-visible]:-outline-offset-2 in-[[data-slot=radio]:focus-visible]:outline-inherit"
28 data-slot="radio-indicator"
29 />
30 </RadioPrimitive.Root>
31 );
32}
33
34export { RadioGroup, Radio, Radio as RadioGroupItem };