"use client" import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox" import { motion, useReducedMotion } from "motion/react" import { easeOutExpo } from "@/lib/motion" import { cn } from "@/lib/utils" /** Check path draw + soft scale — ~160ms easeOutExpo, no spring. */ const checkTween = { duration: 0.16, ease: easeOutExpo, } as const const CHECK_PATH = "M4.5 8.2 7.1 10.8 11.6 5.2" function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { const reduce = useReducedMotion() return ( { const show = state.checked || state.indeterminate return ( ) } : (htmlProps, state) => { const show = state.checked || state.indeterminate return ( )} initial={false} animate={{ opacity: show ? 1 : 0, scale: show ? 1 : 0.82, }} transition={checkTween} > ) } } /> ) } export { Checkbox }