"use client" import { Radio as RadioPrimitive } from "@base-ui/react/radio" import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group" import { motion, useReducedMotion } from "motion/react" import { easeOutExpo } from "@/lib/motion" import { cn } from "@/lib/utils" /** Fill scale — ~160ms easeOutExpo, no spring overshoot. */ const fillTween = { duration: 0.16, ease: easeOutExpo, } as const function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) { return ( ) } function Radio({ className, ...props }: RadioPrimitive.Root.Props) { const reduce = useReducedMotion() return ( ( ) : (htmlProps, state) => ( )} initial={false} animate={{ opacity: state.checked ? 1 : 0, scale: state.checked ? 1 : 0.5, }} transition={fillTween} className={cn( htmlProps.className, "flex items-center justify-center" )} > ) } /> ) } export { Radio, RadioGroup }