'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 BatteryFullIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface BatteryFullIconProps extends HTMLAttributes { size?: number; } const BATTERY_DURATION = 1.15; const BARS = [6, 9, 12, 15]; // The cells drain right to left, refill left to right with a springy // overshoot, and the battery surges once the last cell is full. const barVariants: Variants = { normal: { scaleY: 1, visibility: 'visible' }, animate: (i: number) => { const drain = 0.04 + (BARS.length - 1 - i) * 0.04; const fill = 0.36 + i * 0.1; return { scaleY: [1, 1, 0.1, 0.1, 1.2, 1, 1], visibility: ['visible', 'visible', 'hidden', 'hidden', 'visible', 'visible', 'visible'], transition: { duration: BATTERY_DURATION, ease: [0.23, 1, 0.32, 1], times: [0, drain, drain + 0.1, fill, fill + 0.1, fill + 0.18, 1], }, }; }, }; const batteryVariants: Variants = { normal: { transform: 'scale(1)' }, animate: { transform: ['scale(1)', 'scale(1)', 'scale(1.06)', 'scale(0.985)', 'scale(1)'], transition: { duration: BATTERY_DURATION, ease: [0.23, 1, 0.32, 1], times: [0, 0.76, 0.84, 0.92, 1], }, }, }; const BatteryFullIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

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