aliveicon 1.4.0 → 1.5.0

package/dist/esm/icons/r/RotateCcw.js

@@ -1,78 +1,28 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const RotateCcw = forwardRef(({ size = 28, className, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const pathControls = useAnimation();
-    const rotateControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const animate = useCallback(async () => {
-        await Promise.all([
-            pathControls.start(() => ({
-                pathLength: 0,
-                opacity: 0.5,
-                transition: { duration: 0 },
-            })),
-            rotateControls.start({ rotate: 0, transition: { duration: 0 } }),
-        ]);
-        await pathControls.start((i) => ({
-            pathLength: [0, 1],
-            opacity: [0.5, 1],
-            transition: {
-                duration: 0.6,
-                delay: i * 0.1,
-                ease: 'easeInOut',
-            },
-        }));
-        await rotateControls.start({
-            rotate: -360,
-            transition: { duration: 0.6, ease: 'easeInOut' },
-        });
-        await rotateControls.start({ rotate: 0, transition: { duration: 0 } });
-        if (loopRef.current)
-            animate();
-    }, [pathControls, rotateControls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            animate();
-    }, [autoAnimateOnLoad, animate]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: animate,
-            stopAnimation: () => {
-                pathControls.start('visible');
-                rotateControls.start({ rotate: 0 });
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            animate();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable)
-            pathControls.start('visible');
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            animate();
-        onClick?.(e);
-    };
-    const paths = ['M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8', 'M3 3v5h5'];
-    return (jsx(motion.div, { className: cn('inline-block', className), style: { width: size, height: size }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, animate: rotateControls, ...props, children: jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: paths.map((d, i) => (jsx(motion.path, { d: d, initial: "visible", animate: pathControls, custom: i, variants: {
-                    visible: { pathLength: 1, opacity: 1 },
-                } }, i))) }) }));
+const spinVariants = {
+    normal: { rotate: 0, transition: { duration: 0 } },
+    animate: {
+        rotate: [0, -360],
+        transition: { duration: 0.6, delay: 0.7, ease: 'easeInOut' },
+    },
+};
+const pathVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0.5, 1],
+        transition: { duration: 0.6, delay: i * 0.1, ease: 'easeInOut' },
+    }),
+};
+const RotateCcw = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs(motion.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%", variants: spinVariants, initial: "normal", animate: controls, children: [jsx(motion.path, { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", custom: 0, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M3 3v5h5", custom: 1, variants: pathVariants, initial: "normal", animate: controls })] }) }));
 });
 RotateCcw.displayName = 'RotateCcw';
 

package/dist/esm/icons/r/RotateCcw.js.map

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

package/dist/esm/icons/r/RotateCw.js

@@ -14,7 +14,7 @@ const spinCwVariants = {
 };
 const RotateCw = forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon(ref, props);
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsx("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: jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), jsx("path", { d: "M21 3v5h-5" })] }) }) }));
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsx("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%", style: { overflow: 'visible' }, children: jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), jsx("path", { d: "M21 3v5h-5" })] }) }) }));
 });
 RotateCw.displayName = 'RotateCw';
 

package/dist/esm/icons/r/RotateCwClock.js

@@ -14,7 +14,7 @@ const spinCwVariants = {
 };
 const RotateCwClock = forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon(ref, props);
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsx("path", { d: "M12 7v5l4 2" }), jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M16 8h5V3" }), jsx("path", { d: "m21 8-2.3-2.3A9.7 9.7 0 0012 3a9 9 0 109 9" })] })] }) }));
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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%", style: { overflow: 'visible' }, children: [jsx("path", { d: "M12 7v5l4 2" }), jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M16 8h5V3" }), jsx("path", { d: "m21 8-2.3-2.3A9.7 9.7 0 0012 3a9 9 0 109 9" })] })] }) }));
 });
 RotateCwClock.displayName = 'RotateCwClock';
 

package/dist/esm/icons/r/RotateCwFadingClock.js

@@ -14,7 +14,7 @@ const spinCwVariants = {
 };
 const RotateCwFadingClock = forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon(ref, props);
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M12 3a9.75 9.75 0 0 1 6.74 2.74" }), jsx("path", { d: "M18.74 5.74 21 8" }), jsx("path", { d: "M21 8V3" }), jsx("path", { d: "M7.5 19.794c-6-3.464-6-12.124 0-15.588" }), jsx("path", { d: "M7.5 4.206A9 9 0 0 1 12 3" }), jsx("path", { d: "M14 20.775A9 9 0 0 1 12 21" }), jsx("path", { d: "M19 17.656a9 9 0 0 1-1.5 1.456" }), jsx("path", { d: "M21 12a9 9 0 0 1-.228 2" }), jsx("path", { d: "M21 8h-5" })] }), jsx("path", { d: "M12 7v5l4 2" })] }) }));
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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%", style: { overflow: 'visible' }, children: [jsxs(motion.g, { variants: spinCwVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M12 3a9.75 9.75 0 0 1 6.74 2.74" }), jsx("path", { d: "M18.74 5.74 21 8" }), jsx("path", { d: "M21 8V3" }), jsx("path", { d: "M7.5 19.794c-6-3.464-6-12.124 0-15.588" }), jsx("path", { d: "M7.5 4.206A9 9 0 0 1 12 3" }), jsx("path", { d: "M14 20.775A9 9 0 0 1 12 21" }), jsx("path", { d: "M19 17.656a9 9 0 0 1-1.5 1.456" }), jsx("path", { d: "M21 12a9 9 0 0 1-.228 2" }), jsx("path", { d: "M21 8h-5" })] }), jsx("path", { d: "M12 7v5l4 2" })] }) }));
 });
 RotateCwFadingClock.displayName = 'RotateCwFadingClock';
 

package/dist/esm/icons/s/SquareActivity.js

@@ -45,7 +45,7 @@ const SquareActivity = forwardRef(({ className, size = 28, style, ...props }, re
             height: size,
             display: 'inline-block',
             ...style,
-        }, ...iconProps, children: 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: [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 } })] }) }));
+        }, ...iconProps, children: 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: [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" })] }) }));
 });
 SquareActivity.displayName = 'SquareActivity';
 

package/dist/esm/icons/u/UndoDot.js

@@ -1,76 +1,29 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const UndoDot = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = useAnimation();
-    const circleControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const animate = useCallback(async () => {
-        await controls.start((i) => ({
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: {
-                duration: 0.6,
-                delay: i * 0.1,
-                ease: 'easeInOut',
-            },
-        }));
-        await circleControls.start({
-            opacity: [0, 1],
-            scale: [0.4, 1],
-            transition: { duration: 0.3, ease: 'easeOut' },
-        });
-        await controls.start('visible');
-        await circleControls.start('visible');
-        if (loopRef.current)
-            animate();
-    }, [controls, circleControls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            animate();
-    }, [autoAnimateOnLoad, animate]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: animate,
-            stopAnimation: () => {
-                controls.start('visible');
-                circleControls.start('visible');
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            animate();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            controls.start('visible');
-            circleControls.start('visible');
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            animate();
-        onClick?.(e);
-    };
-    const paths = ['M21 17a9 9 0 0 0-15-6.7L3 13', 'M3 7v6h6'];
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [paths.map((d, i) => (jsx(motion.path, { d: d, initial: "visible", animate: controls, custom: i, variants: {
-                        visible: { pathLength: 1, opacity: 1 },
-                    } }, i))), jsx(motion.circle, { cx: "12", cy: "17", r: "1", initial: "visible", animate: circleControls, variants: {
-                        visible: { opacity: 1, scale: 1 },
-                    } })] }) }));
+const pathVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.6, delay: i * 0.1, ease: 'easeInOut' },
+    }),
+};
+const dotVariants = {
+    normal: { opacity: 1, scale: 1 },
+    animate: {
+        opacity: [0, 1],
+        scale: [0.4, 1],
+        transition: { duration: 0.3, delay: 0.7, ease: 'easeOut' },
+    },
+};
+const UndoDot = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsx(motion.path, { d: "M21 17a9 9 0 0 0-15-6.7L3 13", custom: 0, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M3 7v6h6", custom: 1, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.circle, { cx: "12", cy: "17", r: "1", variants: dotVariants, initial: "normal", animate: controls })] }) }));
 });
 UndoDot.displayName = 'UndoDot';
 

package/dist/esm/icons/u/UndoDot.js.map

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

package/dist/esm/icons/u/UnfoldHorizontal.js

@@ -1,79 +1,29 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const UnfoldHorizontal = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const pathControls = useAnimation();
-    const arrowControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const animate = useCallback(async () => {
-        await pathControls.start((i) => ({
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: {
-                duration: 0.4,
-                delay: i * 0.08,
-                ease: 'easeInOut',
-            },
-        }));
-        await arrowControls.start({
-            x: [0, -4, 0, 0, 4, 0],
-            scale: [1, 1.1, 1, 1, 1.1, 1],
-            transition: {
-                duration: 1,
-                ease: [0.6, 0.01, -0.05, 0.95],
-                times: [0, 0.25, 0.5, 0.5, 0.75, 1],
-            },
-        });
-        await pathControls.start('visible');
-        if (loopRef.current)
-            animate();
-    }, [pathControls, arrowControls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            animate();
-    }, [autoAnimateOnLoad, animate]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: animate,
-            stopAnimation: () => {
-                pathControls.start('visible');
-                arrowControls.start({ x: 0 });
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            animate();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            pathControls.start('visible');
-            arrowControls.start({ x: 0 });
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            animate();
-        onClick?.(e);
-    };
-    const staticPaths = ['M16 12h6', 'M8 12H2', 'M12 2v2', 'M12 8v2', 'M12 14v2', 'M12 20v2'];
-    const leftArrow = 'M5 9l-3 3 3 3';
-    const rightArrow = 'M19 15l3-3-3-3';
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [staticPaths.map((d, i) => (jsx(motion.path, { d: d, initial: "visible", animate: pathControls, custom: i, variants: {
-                        visible: { pathLength: 1, opacity: 1 },
-                    } }, i))), jsx(motion.path, { d: leftArrow, initial: { opacity: 1 }, animate: arrowControls }), jsx(motion.path, { d: rightArrow, initial: { opacity: 1 }, animate: arrowControls })] }) }));
+const pathVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, delay: i * 0.08, ease: 'easeInOut' },
+    }),
+};
+const arrowVariants = {
+    normal: { x: 0, scale: 1 },
+    animate: (distance) => ({
+        x: [0, distance, 0],
+        scale: [1, 1.1, 1],
+        transition: { duration: 0.6, delay: 0.8, ease: 'easeInOut' },
+    }),
+};
+const UnfoldHorizontal = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsx(motion.path, { d: "M16 12h6", custom: 0, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M8 12H2", custom: 1, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 2v2", custom: 2, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 8v2", custom: 3, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 14v2", custom: 4, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 20v2", custom: 5, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M5 9l-3 3 3 3", custom: 2, variants: arrowVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M19 15l3-3-3-3", custom: -2, variants: arrowVariants, initial: "normal", animate: controls })] }) }));
 });
 UnfoldHorizontal.displayName = 'UnfoldHorizontal';
 

package/dist/esm/icons/u/UnfoldHorizontal.js.map

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

package/dist/esm/icons/u/UnfoldVertical.js

@@ -1,79 +1,29 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const UnfoldVertical = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const pathControls = useAnimation();
-    const arrowControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const animate = useCallback(async () => {
-        await pathControls.start((i) => ({
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: {
-                duration: 0.4,
-                delay: i * 0.08,
-                ease: 'easeInOut',
-            },
-        }));
-        await arrowControls.start({
-            y: [0, -4, 0, 0, 4, 0],
-            scale: [1, 1.1, 1, 1, 1.1, 1],
-            transition: {
-                duration: 1,
-                ease: [0.6, 0.01, -0.05, 0.95],
-                times: [0, 0.25, 0.5, 0.5, 0.75, 1],
-            },
-        });
-        await pathControls.start('visible');
-        if (loopRef.current)
-            animate();
-    }, [pathControls, arrowControls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            animate();
-    }, [autoAnimateOnLoad, animate]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: animate,
-            stopAnimation: () => {
-                pathControls.start('visible');
-                arrowControls.start({ y: 0 });
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            animate();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            pathControls.start('visible');
-            arrowControls.start({ y: 0 });
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            animate();
-        onClick?.(e);
-    };
-    const staticLines = ['M12 22v-6', 'M12 8V2', 'M4 12H2', 'M10 12H8', 'M16 12h-2', 'M22 12h-2'];
-    const topArrow = 'M15 5L12 2L9 5';
-    const bottomArrow = 'M15 19L12 22L9 19';
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [staticLines.map((d, i) => (jsx(motion.path, { d: d, initial: "visible", animate: pathControls, custom: i, variants: {
-                        visible: { pathLength: 1, opacity: 1 },
-                    } }, i))), jsx(motion.path, { d: topArrow, initial: { opacity: 1 }, animate: arrowControls }), jsx(motion.path, { d: bottomArrow, initial: { opacity: 1 }, animate: arrowControls })] }) }));
+const pathVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, delay: i * 0.08, ease: 'easeInOut' },
+    }),
+};
+const arrowVariants = {
+    normal: { y: 0, scale: 1 },
+    animate: (distance) => ({
+        y: [0, distance, 0],
+        scale: [1, 1.1, 1],
+        transition: { duration: 0.6, delay: 0.8, ease: 'easeInOut' },
+    }),
+};
+const UnfoldVertical = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsx(motion.path, { d: "M12 22v-6", custom: 0, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 8V2", custom: 1, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M4 12H2", custom: 2, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M10 12H8", custom: 3, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M16 12h-2", custom: 4, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M22 12h-2", custom: 5, variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M15 5L12 2L9 5", custom: 2, variants: arrowVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M15 19L12 22L9 19", custom: -2, variants: arrowVariants, initial: "normal", animate: controls })] }) }));
 });
 UnfoldVertical.displayName = 'UnfoldVertical';
 

package/dist/esm/icons/u/UnfoldVertical.js.map

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

package/dist/esm/icons/u/Ungroup.js

@@ -1,73 +1,22 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const Ungroup = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const boxControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const animate = useCallback(async () => {
-        await boxControls.start((i) => {
-            const variants = [
-                {
-                    opacity: [0, 1],
-                    x: [-4, 0],
-                    y: [-4, 0],
-                },
-                {
-                    opacity: [0, 1],
-                    x: [4, 0],
-                    y: [4, 0],
-                },
-            ];
-            return {
-                ...variants[i],
-                transition: {
-                    duration: 0.5,
-                    ease: 'easeInOut',
-                },
-            };
-        });
-        if (loopRef.current)
-            animate();
-    }, [boxControls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            animate();
-    }, [autoAnimateOnLoad, animate]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: animate,
-            stopAnimation: () => {
-                boxControls.start({ x: 0, y: 0, opacity: 1 });
-            },
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            animate();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            boxControls.start({ x: 0, y: 0, opacity: 1 });
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            animate();
-        onClick?.(e);
-    };
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { x: "5", y: "4", width: "8", height: "6", rx: "1", initial: { opacity: 1 }, animate: boxControls, custom: 0 }), jsx(motion.rect, { x: "11", y: "14", width: "8", height: "6", rx: "1", initial: { opacity: 1 }, animate: boxControls, custom: 1 })] }) }));
+const boxVariants = {
+    normal: { opacity: 1, x: 0, y: 0 },
+    animate: (offset) => ({
+        opacity: [0, 1],
+        x: [offset, 0],
+        y: [offset, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+    }),
+};
+const Ungroup = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: 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: [jsx(motion.rect, { x: "5", y: "4", width: "8", height: "6", rx: "1", custom: -3, variants: boxVariants, initial: "normal", animate: controls }), jsx(motion.rect, { x: "11", y: "14", width: "8", height: "6", rx: "1", custom: 3, variants: boxVariants, initial: "normal", animate: controls })] }) }));
 });
 Ungroup.displayName = 'Ungroup';
 

package/dist/esm/icons/u/Ungroup.js.map

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