"use client"; import type { Variants } from "motion/react"; import { motion, useAnimation } from "motion/react"; import type { HTMLAttributes } from "react"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { cn } from "@/lib/utils"; export interface SpeakerWaveIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface SpeakerWaveIconProps extends HTMLAttributes { size?: number; } const WAVE_VARIANTS: Variants = { normal: { opacity: 1, scale: 1 }, animate: (custom: number) => ({ opacity: 0, scale: 0, transition: { opacity: { duration: 0.2, ease: "easeInOut", repeat: 1, repeatType: "reverse", repeatDelay: 0.2, delay: 0.2 * (custom - 1), }, scale: { duration: 0.2, ease: "easeInOut", repeat: 1, repeatType: "reverse", repeatDelay: 0.2, delay: 0.2 * (custom - 1), }, }, }), }; const SpeakerWaveIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const waveControls = useAnimation(); const isControlledRef = useRef(false); useImperativeHandle(ref, () => { isControlledRef.current = true; return { startAnimation: () => { waveControls.start("animate"); }, stopAnimation: () => { waveControls.start("normal"); }, }; }); const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseEnter?.(e); } else { waveControls.start("animate"); } }, [waveControls, onMouseEnter] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseLeave?.(e); } else { waveControls.start("normal"); } }, [waveControls, onMouseLeave] ); return (

); } ); SpeakerWaveIcon.displayName = "SpeakerWaveIcon"; export { SpeakerWaveIcon };