alarm-clock-plus-icon

1import { forwardRef, useImperativeHandle, useRef } from "react";
2import type {
3  AnimatedIconHandle,
4  AnimatedIconProps,
5  IconEasing,
6} from "./types";
7import { motion, useAnimate } from "motion/react";
8 
9type CustomStyleProps = {
10  stiffness?: number;
11  damping?: number;
12  durationY?: number;
13  durationX?: number;
14  ease?: IconEasing;
15};
16 
17const AlarmClockPlusIcon = forwardRef<
18  AnimatedIconHandle,
19  AnimatedIconProps & CustomStyleProps
20>(
21  (
22    {
23      size = 24,
24      color = "currentColor",
25      strokeWidth = 2,
26      className = "",
27      stiffness = 200,
28      damping = 25,
29      durationY = 0.2,
30      durationX = 0.3,
31      ease = "linear",
32      ...props
33    },
34    ref,
35  ) => {
36    const [scope, animate] = useAnimate();
37    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
38 
39    const start = async () => {
40      animationControls.current.forEach((control) => control.stop());
41      animationControls.current = [];
42 
43      animationControls.current.push(
44        animate(
45          ".clock",
46          {
47            y: -1.5,
48            x: [-1, 1, -1, 1, -1, 0],
49          },
50          {
51            y: {
52              duration: durationY,
53              type: "spring",
54              stiffness: stiffness,
55              damping: damping,
56            },
57            x: { duration: durationX, repeat: Infinity, ease: ease },
58          },
59        ),
60      );
61 
62      animationControls.current.push(
63        animate(
64          ".bells",
65          {
66            y: -2.5,
67            x: [-2, 2, -2, 2, -2, 0],
68          },
69          {
70            y: {
71              duration: durationY,
72              type: "spring",
73              stiffness: stiffness,
74              damping: damping,
75            },
76            x: { duration: durationX, repeat: Infinity, ease: ease },
77          },
78        ),
79      );
80 
81      await animate(
82        ".plus",
83        { scale: [1, 1.2, 1] },
84        { duration: durationY, ease: "easeOut" },
85      );
86    };
87 
88    const stop = () => {
89      animationControls.current.forEach((control) => control.stop());
90      animationControls.current = [];
91 
92      animate(".clock", { y: 0, x: 0 }, { duration: durationY * 2 });
93      animate(".bells", { y: 0, x: 0 }, { duration: durationY * 2 });
94    };
95 
96    useImperativeHandle(ref, () => {
97      return {
98        startAnimation: start,
99        stopAnimation: stop,
100      };
101    });
102 
103    // 🖱 hover logic (only when NOT controlled)
104    const handleHoverStart = () => {
105      start();
106// … truncated