| 1 | "use client"; |
| 2 | |
| 3 | import { Radio as RadioPrimitive } from "@base-ui/react/radio"; |
| 4 | import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"; |
| 5 | |
| 6 | import { cn } from "~/lib/utils"; |
| 7 | |
| 8 | function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { |
| 9 | return ( |
| 10 | <RadioGroupPrimitive |
| 11 | className={cn("flex flex-col gap-3", className)} |
| 12 | data-slot="radio-group" |
| 13 | {...props} |
| 14 | /> |
| 15 | ); |
| 16 | } |
| 17 | |
| 18 | function Radio({ className, ...props }: RadioPrimitive.Root.Props) { |
| 19 | return ( |
| 20 | <RadioPrimitive.Root |
| 21 | className={cn( |
| 22 | "relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-full not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:outline-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:focus-visible:aria-invalid:outline-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", |
| 23 | className, |
| 24 | )} |
| 25 | data-slot="radio" |
| 26 | {...props} |
| 27 | > |
| 28 | {/* Leave a contrasting inner gap inside the 2px focus outline. */} |
| 29 | <RadioPrimitive.Indicator |
| 30 | className="-inset-px absolute flex size-4.5 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary sm:size-4 sm:before:size-1.5 in-[[data-slot=radio]:focus-visible]:inset-shadow-[0_0_0_3px_var(--background)] 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" |
| 31 | data-slot="radio-indicator" |
| 32 | /> |
| 33 | </RadioPrimitive.Root> |
| 34 | ); |
| 35 | } |
| 36 | |
| 37 | export { RadioGroup, Radio, Radio as RadioGroupItem }; |