"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 QueueListIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface QueueListIconProps extends HTMLAttributes { size?: number; } const ITEM_DURATION = 0.2; const INITIAL_DELAY = 0.1; const STAGGER_DELAY = 0.15; const CREATE_ITEM_VARIANTS = (delay: number): Variants => ({ normal: { opacity: 1, }, animate: { opacity: [0, 1], transition: { duration: ITEM_DURATION, ease: "easeOut", delay, }, }, }); const LIST_ITEMS = [ { y: 19.5, path: "M3.75 19.5H20.25" }, { y: 15.75, path: "M3.75 15.75H20.25" }, { y: 12, path: "M3.75 12H20.25" }, ] as const; const QueueListIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const isControlledRef = useRef(false); useImperativeHandle(ref, () => { isControlledRef.current = true; return { startAnimation: () => controls.start("animate"), stopAnimation: () => controls.start("normal"), }; }); const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseEnter?.(e); } else { controls.start("animate"); } }, [controls, onMouseEnter] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseLeave?.(e); } else { controls.start("normal"); } }, [controls, onMouseLeave] ); return (

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