'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 SquareUnlock01IconHandle { startAnimation: () => void; stopAnimation: () => void; } interface SquareUnlock01IconProps extends HTMLAttributes { size?: number; } const UNLOCK_DURATION = 0.95; const UNLOCK_TIMES = [0, 0.12, 0.36, 0.58, 0.8, 0.91, 1]; // The latch releases: the shackle dips, springs up and swings wide on its // left leg, hangs, then drops back to its open rest. The body recoils as // the shackle leaves it. const shackleVariants: Variants = { normal: { translateY: 0, rotate: 0 }, animate: { translateY: [0, 0, -1.8, -1.6, 0.2, -0.06, 0], rotate: [0, 3, -22, -18, 1.5, -0.5, 0], transition: { duration: UNLOCK_DURATION, ease: 'easeInOut', times: UNLOCK_TIMES, }, }, }; const bodyVariants: Variants = { normal: { translateY: 0 }, animate: { translateY: [0, -0.2, 0.7, 0, 0, 0, 0], transition: { duration: UNLOCK_DURATION, ease: 'easeInOut', times: UNLOCK_TIMES, }, }, }; const SquareUnlock01Icon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

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