aliveicon 1.3.0 → 1.5.0

package/dist/cjs/icons/b/BanknoteArrowDown.js

@@ -5,20 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
 const strokeVariants = {
-    normal: { opacity: 1, strokeDashoffset: 0, strokeDasharray: '0 1' },
+    normal: { opacity: 1, pathLength: 1, transition: { duration: 0.3 } },
     animate: {
-        strokeDashoffset: [1, 0],
-        strokeDasharray: ['0 1', '1 0'],
+        pathLength: [0, 1],
         opacity: [0, 1],
         transition: { duration: 0.7, ease: 'easeInOut' },
     },
 };
-const BanknoteArrowDown = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const BanknoteArrowDown = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/BanknoteArrowDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BanknoteArrowDown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BanknoteArrowDown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/BanknoteArrowUp.js

@@ -5,20 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
 const strokeVariants = {
-    normal: { opacity: 1, strokeDashoffset: 0, strokeDasharray: '0 1' },
+    normal: { opacity: 1, pathLength: 1, transition: { duration: 0.3 } },
     animate: {
-        strokeDashoffset: [1, 0],
-        strokeDasharray: ['0 1', '1 0'],
+        pathLength: [0, 1],
         opacity: [0, 1],
         transition: { duration: 0.7, ease: 'easeInOut' },
     },
 };
-const BanknoteArrowUp = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const BanknoteArrowUp = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/BanknoteArrowUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"BanknoteArrowUp.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BanknoteArrowUp.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/BanknoteCheck.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
@@ -24,7 +24,7 @@ const popVariants = {
         transition: { duration: 0.4, delay: i * 0.08, ease: 'easeInOut' },
     }),
 };
-const BanknoteCheck = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const BanknoteCheck = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx("path", { d: "M11.748 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4.875" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m16 19 2 2 4-4", variants: drawVariants, initial: "normal", animate: controls, custom: 0 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M18 12h.01", variants: popVariants, initial: "normal", animate: controls, custom: 0 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6 12h.01", variants: popVariants, initial: "normal", animate: controls, custom: 0 }), jsxRuntime.jsx(framerMotion.motion.circle, { cx: "12", cy: "12", r: "2", variants: popVariants, initial: "normal", animate: controls, custom: 1 })] }) }));
 });

package/dist/cjs/icons/b/BanknoteX.js

@@ -5,20 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
 const strokeVariants = {
-    normal: { opacity: 1, strokeDashoffset: 0, strokeDasharray: '0 1' },
+    normal: { opacity: 1, pathLength: 1, transition: { duration: 0.3 } },
     animate: {
-        strokeDashoffset: [1, 0],
-        strokeDasharray: ['0 1', '1 0'],
+        pathLength: [0, 1],
         opacity: [0, 1],
         transition: { duration: 0.7, ease: 'easeInOut' },
     },
 };
-const BanknoteX = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const BanknoteX = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/BanknoteX.js.map

@@ -1 +1 @@
-{"version":3,"file":"BanknoteX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BanknoteX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/Barcode.js

@@ -5,20 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
 const strokeVariants = {
-    normal: { opacity: 1, strokeDashoffset: 0, strokeDasharray: '0 1' },
+    normal: { opacity: 1, pathLength: 1, transition: { duration: 0.3 } },
     animate: {
-        strokeDashoffset: [1, 0],
-        strokeDasharray: ['0 1', '1 0'],
+        pathLength: [0, 1],
         opacity: [0, 1],
         transition: { duration: 0.5, ease: 'easeInOut' },
     },
 };
-const Barcode = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const Barcode = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/Barcode.js.map

@@ -1 +1 @@
-{"version":3,"file":"Barcode.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Barcode.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/Barrel.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
@@ -17,7 +17,7 @@ const drawVariants = {
         transition: { duration: 0.5, delay: i * 0.1, ease: 'easeInOut' },
     }),
 };
-const Barrel = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const Barrel = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M10 3a41 41 0 000 18", variants: drawVariants, initial: "normal", animate: controls, custom: 0 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M14 3a41 41 0 010 18", variants: drawVariants, initial: "normal", animate: controls, custom: 1 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M16.997 21a2 2 0 001.68-.92 15.25 15.25 0 000-16.16 2 2 0 00-1.68-.92h-10a2 2 0 00-1.681.92 15.25 15.25 0 000 16.16 2 2 0 001.681.92z", variants: drawVariants, initial: "normal", animate: controls, custom: 2 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M3.54 16h16.914", variants: drawVariants, initial: "normal", animate: controls, custom: 3 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M3.54 8h16.914", variants: drawVariants, initial: "normal", animate: controls, custom: 4 })] }) }));
 });

package/dist/cjs/icons/b/Baseline.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
@@ -17,7 +17,7 @@ const pathVariants = {
         transition: { duration: 0.6, ease: 'easeInOut' },
     },
 };
-const Baseline = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const Baseline = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/Bath.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
@@ -17,7 +17,7 @@ const pathVariants = {
         transition: { duration: 0.7, ease: 'easeInOut' },
     },
 };
-const Bath = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const Bath = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn(className), style: {
             width: size,

package/dist/cjs/icons/b/Battery.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
 var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
@@ -26,7 +26,7 @@ const pathVariants = {
         },
     },
 };
-const Battery = React.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+const Battery = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
     return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.rect, { x: "2", y: "7", width: "16", height: "10", rx: "2", ry: "2", variants: pathVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: pathVariants, animate: controls, initial: "normal" })] }) }));
 });

package/dist/cjs/icons/b/BatteryCharging.js

@@ -5,86 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
-const BatteryCharging = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = framerMotion.useAnimation();
-    const boltControls = framerMotion.useAnimation();
-    const loopRef = React.useRef(loopOnHover);
-    const isControlledRef = React.useRef(false);
-    const triggerAnimation = React.useCallback(async () => {
-        await Promise.all([controls.start('animate'), boltControls.start('pulse')]);
-        await Promise.all([controls.start('normal'), boltControls.start('normal')]);
-        if (loopRef.current)
-            triggerAnimation();
-    }, [controls, boltControls]);
-    React.useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    React.useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    React.useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => {
-                controls.start('normal');
-                boltControls.start('normal');
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            controls.start('normal');
-            boltControls.start('normal');
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    const pathVariants = {
-        normal: {
-            pathLength: 1,
-            pathOffset: 0,
-            opacity: 1,
-            transition: { duration: 0.3 },
-        },
-        animate: {
-            pathLength: [0, 1],
-            pathOffset: [1, 0],
-            opacity: [0, 1],
-            transition: {
-                duration: 0.6,
-                ease: 'easeInOut',
-            },
-        },
-    };
-    const boltVariants = {
-        normal: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
-        pulse: {
-            scale: [1, 1.2, 1],
-            opacity: [1, 0.6, 1],
-            transition: {
-                duration: 0.8,
-                repeat: Infinity,
-                ease: 'easeInOut',
-            },
-        },
-    };
-    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2", variants: pathVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1", variants: pathVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m11 7-3 5h4l-3 5", variants: boltVariants, animate: boltControls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: pathVariants, animate: controls, initial: "normal" })] }) }));
+const pathVariants = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+    },
+};
+const boltVariants = {
+    normal: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
+    animate: {
+        scale: [1, 1.2, 1],
+        opacity: [1, 0.6, 1],
+        transition: { duration: 0.8, repeat: Infinity, ease: 'easeInOut' },
+    },
+};
+const BatteryCharging = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props, { cycleMs: 800 });
+    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2", variants: pathVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1", variants: pathVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m11 7-3 5h4l-3 5", variants: boltVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: pathVariants, initial: "normal", animate: controls })] }) }));
 });
 BatteryCharging.displayName = 'BatteryCharging';
 

package/dist/cjs/icons/b/BatteryCharging.js.map

@@ -1 +1 @@
-{"version":3,"file":"BatteryCharging.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BatteryCharging.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/BatteryFull.js

@@ -5,77 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
-const BatteryFull = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const shellControls = framerMotion.useAnimation();
-    const barsControls = [framerMotion.useAnimation(), framerMotion.useAnimation(), framerMotion.useAnimation()];
-    const loopRef = React.useRef(loopOnHover);
-    const isControlledRef = React.useRef(false);
-    const triggerAnimation = React.useCallback(async () => {
-        await shellControls.start('animate');
-        for (let i = 0; i < barsControls.length; i++) {
-            await barsControls[i].start('on');
-        }
-        if (loopRef.current) {
-            await shellControls.start('normal');
-            await Promise.all(barsControls.map((ctrl) => ctrl.start('off')));
-            triggerAnimation();
-        }
-    }, [shellControls, barsControls]);
-    React.useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    React.useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    React.useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
+const shellVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+    },
+};
+const barVariants = {
+    normal: { opacity: 1, transition: { duration: 0.2 } },
+    animate: (i) => {
+        const start = 0.5 + i * 0.3;
         return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => {
-                shellControls.start('normal');
-                barsControls.forEach((ctrl) => ctrl.start('off'));
-            },
+            opacity: [0, 0, 1],
+            transition: { duration: start + 0.3, times: [0, start / (start + 0.3), 1] },
         };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            shellControls.start('normal');
-            barsControls.forEach((ctrl) => ctrl.start('off'));
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    const shellVariants = {
-        normal: { pathLength: 1, opacity: 1 },
-        animate: {
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: { duration: 0.5, ease: 'easeInOut' },
-        },
-    };
-    const barVariants = {
-        off: { opacity: 0 },
-        on: {
-            opacity: [0, 1],
-            transition: { duration: 0.3 },
-        },
-    };
-    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.rect, { x: "2", y: "7", width: "16", height: "10", rx: "2", ry: "2", variants: shellVariants, initial: "normal", animate: shellControls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: shellVariants, initial: "normal", animate: shellControls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "6", y1: "11", x2: "6", y2: "13", variants: barVariants, initial: "off", animate: barsControls[0] }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "10", y1: "11", x2: "10", y2: "13", variants: barVariants, initial: "off", animate: barsControls[1] }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "14", y1: "11", x2: "14", y2: "13", variants: barVariants, initial: "off", animate: barsControls[2] })] }) }));
+    },
+};
+const BatteryFull = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.rect, { x: "2", y: "7", width: "16", height: "10", rx: "2", ry: "2", variants: shellVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: shellVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "6", y1: "11", x2: "6", y2: "13", custom: 0, variants: barVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "10", y1: "11", x2: "10", y2: "13", custom: 1, variants: barVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "14", y1: "11", x2: "14", y2: "13", custom: 2, variants: barVariants, initial: "normal", animate: controls })] }) }));
 });
 BatteryFull.displayName = 'BatteryFull';
 

package/dist/cjs/icons/b/BatteryFull.js.map

@@ -1 +1 @@
-{"version":3,"file":"BatteryFull.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BatteryFull.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/icons/b/BatteryLow.js

@@ -5,77 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var React = require('react');
+var react = require('react');
 var cn = require('../../lib/cn.js');
+var useAnimatedIcon = require('../../lib/use-animated-icon.js');
 
-const BatteryLow = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const shellControls = framerMotion.useAnimation();
-    const barsControls = [framerMotion.useAnimation(), framerMotion.useAnimation(), framerMotion.useAnimation()];
-    const loopRef = React.useRef(loopOnHover);
-    const isControlledRef = React.useRef(false);
-    const triggerAnimation = React.useCallback(async () => {
-        await shellControls.start('animate');
-        for (let i = 0; i < barsControls.length; i++) {
-            await barsControls[i].start('on');
-        }
-        if (loopRef.current) {
-            await shellControls.start('normal');
-            await Promise.all(barsControls.map((ctrl) => ctrl.start('off')));
-            triggerAnimation();
-        }
-    }, [shellControls, barsControls]);
-    React.useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    React.useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    React.useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
+const shellVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+    },
+};
+const barVariants = {
+    normal: { opacity: 1, transition: { duration: 0.2 } },
+    animate: (i) => {
+        const start = 0.5 + i * 0.3;
         return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => {
-                shellControls.start('normal');
-                barsControls.forEach((ctrl) => ctrl.start('off'));
-            },
+            opacity: [0, 0, 1],
+            transition: { duration: start + 0.3, times: [0, start / (start + 0.3), 1] },
         };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            shellControls.start('normal');
-            barsControls.forEach((ctrl) => ctrl.start('off'));
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    const shellVariants = {
-        normal: { pathLength: 1, opacity: 1 },
-        animate: {
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: { duration: 0.3, ease: 'easeInOut' },
-        },
-    };
-    const barVariants = {
-        off: { opacity: 0 },
-        on: {
-            opacity: [0, 1],
-            transition: { duration: 0.3 },
-        },
-    };
-    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.rect, { x: "2", y: "7", width: "16", height: "10", rx: "2", ry: "2", variants: shellVariants, initial: "normal", animate: shellControls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: shellVariants, initial: "normal", animate: shellControls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "6", y1: "11", x2: "6", y2: "13", variants: barVariants, initial: "off", animate: barsControls[0] })] }) }));
+    },
+};
+const BatteryLow = react.forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon.useAnimatedIcon(ref, props);
+    return (jsxRuntime.jsx("div", { className: cn.cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", 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: [jsxRuntime.jsx(framerMotion.motion.rect, { x: "2", y: "7", width: "16", height: "10", rx: "2", ry: "2", variants: shellVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "22", y1: "11", x2: "22", y2: "13", variants: shellVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.line, { x1: "6", y1: "11", x2: "6", y2: "13", custom: 0, variants: barVariants, initial: "normal", animate: controls })] }) }));
 });
 BatteryLow.displayName = 'BatteryLow';
 

package/dist/cjs/icons/b/BatteryLow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BatteryLow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BatteryLow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}