import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const ChartCovariateIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { animate( ".dot-1", { scale: [0, 1.2, 1], opacity: [0, 1] }, { duration: 0.25, ease: "easeOut" }, ); animate( ".dot-2", { scale: [0, 1.2, 1], opacity: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.08 }, ); animate( ".dot-3", { scale: [0, 1.2, 1], opacity: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.16 }, ); animate( ".dot-4", { scale: [0, 1.2, 1], opacity: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.24 }, ); animate( ".trend-line", { pathLength: [0, 1] }, { duration: 0.5, ease: "easeInOut", delay: 0.3 }, ); }, [animate]); const stop = useCallback(() => { animate( ".dot-1 , .dot-2 , .dot-3 , .dot-4", { scale: 1, opacity: 1 }, { duration: 0.2, ease: "easeInOut" }, ); animate( ".trend-line", { pathLength: 1 }, { duration: 0.2, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); ChartCovariateIcon.displayName = "ChartCovariateIcon"; export default ChartCovariateIcon;

chart-covariate-icon

Installation