aliveicon 1.0.21 → 1.0.23

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useAnimation, motion } from 'framer-motion';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2959,7 +2959,7 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
-function cn(...inputs) {
+function cn$5(...inputs) {
     return twMerge(clsx(inputs));
 }
 const squareVariants = {
@@ -2974,7 +2974,7 @@ const squareVariants = {
         transition: { duration: 0.6, ease: 'easeInOut' },
     },
 };
-const pathVariants = {
+const pathVariants$2 = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3027,13 +3027,411 @@ function SquareActivity({ size = 28, className, style, autoAnimateOnLoad = false
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsx("div", { className: cn('rounded-md', className), style: {
+    return (jsx("div", { className: cn$5('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.rect, { width: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$2, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+}
+
+function cn$4(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const bounceVariant$1 = {
+    normal: {
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+        },
+    },
+    animate: {
+        scale: 1.2,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 10,
+        },
+    },
+};
+const lineVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const bouncePathVariants$1 = {
+    hidden: {
+        pathLength: 0,
+        opacity: 0,
+    },
+    visible: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { delay: i * 0.1, duration: 0.4, ease: 'easeInOut' },
+            opacity: { delay: i * 0.1, duration: 0.2 },
+        },
+    }),
+};
+function ArrowDown({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, isBounce = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    const paths = [
+        "M3.5 13h6",
+        "m2 16 4.5-9 4.5 9",
+        "M18 7v9",
+        "m14 12 4 4 4-4",
+    ];
+    return (jsx("div", { className: cn$4('inline-block', className), style: {
+            width: size,
+            height: size,
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: isBounce ? bounceVariant$1 : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants$1 : lineVariants$1, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+}
+
+function cn$3(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const bounceVariant = {
+    normal: {
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+        },
+    },
+    animate: {
+        scale: 1.2,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 10,
+        },
+    },
+};
+const lineVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const bouncePathVariants = {
+    hidden: {
+        pathLength: 0,
+        opacity: 0,
+    },
+    visible: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { delay: i * 0.1, duration: 0.4, ease: 'easeInOut' },
+            opacity: { delay: i * 0.1, duration: 0.2 },
+        },
+    }),
+};
+function ArrowUp({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, isBounce = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    const paths = [
+        "M3.5 13h6", // horizontal part of the "A"
+        "m2 16 4.5-9 4.5 9", // the "A" structure stays same
+        "M18 16V7", // arrow line, now reversed (was 7→16, now 16→7)
+        "m22 12-4-4-4 4", // arrow head pointing upward
+    ];
+    return (jsx("div", { className: cn$3('inline-block', className), style: {
+            width: size,
+            height: size,
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: isBounce ? bounceVariant : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+}
+
+function cn$2(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const circleVariants = {
+    normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        scale: [1, 1.2, 1],
+        opacity: [1, 0.8, 1],
+        transition: {
+            duration: 0.6,
+            times: [0, 0.5, 1],
+            ease: 'easeInOut'
+        },
+    },
+};
+const pathVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+function AccessibilityActivity({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$2('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M13.76 17.5a5 5 0 0 0-6.88-6", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+}
+
+function cn$1(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+function Activity({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        console.log("started animation");
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$1('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.rect, { width: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: jsx(motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }) }) }));
 }
 
-export { SquareActivity };
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const windVariants = {
+    normal: (custom) => ({
+        pathLength: 1,
+        opacity: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+            delay: custom,
+        },
+    }),
+    animate: (custom) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.5,
+            ease: 'easeInOut',
+            delay: custom,
+        },
+    }),
+};
+const AirVent = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current) {
+            controls.start('animate');
+        }
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current) {
+            controls.start('normal');
+        }
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }), jsx(motion.path, { d: "M6 8h12", variants: windVariants, initial: "normal", animate: controls, custom: 0.1 }), jsx(motion.path, { d: "M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12", variants: windVariants, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M6.6 15.6A2 2 0 1 0 10 17v-5", variants: windVariants, initial: "normal", animate: controls, custom: 0.2 })] }) }));
+});
+AirVent.displayName = 'AirVent';
+
+export { AccessibilityActivity, Activity, AirVent, ArrowDown, ArrowUp, SquareActivity };
 //# sourceMappingURL=index.js.map