alarm-smoke

1"use client";
2 
3import { motion, useAnimation, type Variants } from "motion/react";
4import type { HTMLAttributes } from "react";
5import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6import { cn } from "@/lib/utils";
7 
8export interface AlarmSmokeIconHandle {
9  startAnimation: () => void;
10  stopAnimation: () => void;
11}
12 
13interface AlarmSmokeIconProps extends HTMLAttributes<HTMLDivElement> {
14  size?: number;
15}
16 
17const ALARM_VARIANTS: Variants = {
18  normal: { scale: 1 },
19  animate: {
20    scale: [1, 1.05, 1],
21    transition: {
22      duration: 0.5,
23      ease: "easeInOut",
24      delay: 0.2,
25      repeat: Number.POSITIVE_INFINITY,
26    },
27  },
28};
29 
30const SMOKE_VARIANTS: Variants = {
31  normal: {
32    y: 0,
33    opacity: 1,
34  },
35  animate: {
36    y: [6, 0],
37    opacity: [0, 1, 0],
38    transition: {
39      duration: 1.4,
40      ease: "easeOut",
41      repeat: Number.POSITIVE_INFINITY,
42    },
43  },
44};
45 
46const AlarmSmokeIcon = forwardRef<AlarmSmokeIconHandle, AlarmSmokeIconProps>(
47  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
48    const controls = useAnimation();
49    const isControlledRef = useRef(false);
50 
51    useImperativeHandle(ref, () => {
52      isControlledRef.current = true;
53      return {
54        startAnimation: () => controls.start("animate"),
55        stopAnimation: () => controls.start("normal"),
56      };
57    });
58 
59    const handleMouseEnter = useCallback(
60      (e: React.MouseEvent<HTMLDivElement>) => {
61        if (isControlledRef.current) {
62          onMouseEnter?.(e);
63        } else {
64          controls.start("animate");
65        }
66      },
67      [controls, onMouseEnter]
68    );
69 
70    const handleMouseLeave = useCallback(
71      (e: React.MouseEvent<HTMLDivElement>) => {
72        if (isControlledRef.current) {
73          onMouseLeave?.(e);
74        } else {
75          controls.start("normal");
76        }
77      },
78      [controls, onMouseLeave]
79    );
80 
81    return (
82      <div
83        className={cn(className)}
84        onMouseEnter={handleMouseEnter}
85        onMouseLeave={handleMouseLeave}
86        {...props}
87      >
88        <motion.svg
89          fill="none"
90          height={size}
91          stroke="currentColor"
92          strokeLinecap="round"
93          strokeLinejoin="round"
94          strokeWidth="2"
95          style={{ overflow: "visible" }}
96          viewBox="0 0 24 24"
97          width={size}
98          xmlns="http://www.w3.org/2000/svg"
99        >
100          <motion.path
101            animate={controls}
102// … truncated