'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; export interface AddSquareIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface AddSquareIconProps extends HTMLAttributes { size?: number; } // the boundary makes room, then the add mark resolves at its center const containerVariants: Variants = { normal: { scale: 1 }, animate: { scale: [1, 0.96, 1.025, 1], transition: { duration: 0.48, ease: [0.23, 1, 0.32, 1] }, }, }; const plusVariants: Variants = { normal: { rotate: 0, scale: 1 }, animate: { rotate: [0, -10, 3, 0], scale: [1, 0.82, 1.08, 1], transition: { duration: 0.42, delay: 0.04, ease: [0.23, 1, 0.32, 1] }, }, }; const AddSquareIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

); } ); AddSquareIcon.displayName = 'AddSquareIcon'; export { AddSquareIcon };