@hanzo/ui 5.3.19 → 5.3.22

package/dist/animation/animated-icon.mjs

@@ -1,2 +1,351 @@
-import {useState,useEffect,useRef}from'react';import {motion,AnimatePresence}from'motion/react';import {cn}from'@/lib/utils';import {jsx}from'react/jsx-runtime';var z=Object.defineProperty;var t=(e,r)=>z(e,"name",{value:r,configurable:true});function Z(){let[e,r]=useState(false);return useEffect(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");r(a.matches);let o=t(c=>{r(c.matches);},"handleChange");return a.addEventListener("change",o),()=>a.removeEventListener("change",o)},[]),e}t(Z,"usePrefersReducedMotion");var q={loading:"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83",heart:["M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z","M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"],star:"m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z",hamburger:["M3 12h18M3 6h18M3 18h18","m6 6 12 12M6 18 18 6"],arrow:"M5 12l14 0m-7 -7l7 7l-7 7",check:"m9 12 2 2 4-4",x:"m18 6-12 12M6 6l12 12"},F={spin:{animate:{rotate:360,transition:{duration:1,repeat:1/0,ease:"linear"}}},pulse:{animate:{scale:[1,1.2,1],transition:{duration:1,repeat:1/0,ease:"easeInOut"}}},bounce:{animate:{y:[0,-10,0],transition:{duration:.6,repeat:1/0,ease:"easeInOut"}}},draw:{initial:{pathLength:0,opacity:0},animate:{pathLength:1,opacity:1,transition:{duration:2,ease:"easeInOut"}}},hover:{whileHover:{scale:1.1,transition:{duration:.2}}}},J={scale:{scale:1.2},rotate:{rotate:15},glow:{filter:"drop-shadow(0 0 8px currentColor)"},shake:{x:[-2,2,-2,2,0]}},K={scale:{scale:.9},rotate:{rotate:180},ripple:{scale:[1,1.3,1]}};function U({paths:e,duration:r,strokeWidth:a=2,autoAnimate:o,repeat:c,onComplete:s}){let[i,m]=useState(0);return useEffect(()=>{if(!o||e.length<2)return;let l=setInterval(()=>{m(h=>{let d=(h+1)%e.length;return d===0&&!c&&(clearInterval(l),s?.()),d});},r);return ()=>clearInterval(l)},[o,e.length,r,c,s]),jsx(motion.path,{d:e[i],fill:"none",stroke:"currentColor",strokeWidth:a,strokeLinecap:"round",strokeLinejoin:"round",animate:{d:e[i]},transition:{duration:r/1e3,ease:"easeInOut"}})}t(U,"MorphingPath");function X({path:e,duration:r,strokeWidth:a=2,progress:o,autoAnimate:c}){let s=useRef(null),[i,m]=useState(0);useEffect(()=>{if(s.current){let h=s.current.getTotalLength();m(h);}},[e]);let l=o!==void 0?i*o:i;return jsx(motion.path,{ref:s,d:e,fill:"none",stroke:"currentColor",strokeWidth:a,strokeLinecap:"round",strokeLinejoin:"round",initial:{pathLength:0},animate:c?{pathLength:1}:{pathLength:l/i},transition:{duration:r/1e3,ease:"easeInOut"},style:{strokeDasharray:i,strokeDashoffset:i-l}})}t(X,"DrawingPath");function Y({size:e,strokeWidth:r=2}){return jsx(motion.div,{animate:{rotate:360},transition:{duration:1,repeat:1/0,ease:"linear"},style:{width:e,height:e},children:jsx("svg",{width:"100%",height:"100%",viewBox:"0 0 24 24",fill:"none",children:jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:r,strokeLinecap:"round",strokeDasharray:"60 40",opacity:"0.3"})})})}t(Y,"LoadingSpinner");function u({icon:e="loading",paths:r,animation:a="spin",size:o=24,color:c="currentColor",duration:s=1e3,autoAnimate:i=true,repeat:m=true,className:l,style:h,onAnimationComplete:d,onClick:P,interactive:k=true,hoverAnimation:M="scale",clickAnimation:C="scale",customVariants:x,viewBox:O="0 0 24 24",strokeWidth:v=2,loading:V=false,progress:R}){let[W,y]=useState(false),[H,A]=useState(false),I=Z(),S=x||F[a]||{},b=i&&!I,w=t(()=>{if(r)return Array.isArray(r)?r:[r];let p=q[e];return Array.isArray(p)?p:[p]},"getIconPaths")(),E=t(()=>{k&&(A(true),setTimeout(()=>A(false),200),P?.());},"handleClick"),B=t(()=>!k||!W?{}:J[M]||{},"getHoverVariant"),D=t(()=>!k||!H?{}:K[C]||{},"getClickVariant");if(V)return jsx(Y,{size:o,strokeWidth:v});let T=t(()=>a==="morph"&&w.length>1?jsx(U,{paths:w,duration:s,strokeWidth:v,autoAnimate:b,repeat:m,onComplete:d}):a==="draw"?jsx(X,{path:w[0],duration:s,strokeWidth:v,progress:R,autoAnimate:b}):w.map((p,j)=>jsx(motion.path,{d:p,fill:e==="heart"?"currentColor":"none",stroke:e==="heart"?"none":"currentColor",strokeWidth:v,strokeLinecap:"round",strokeLinejoin:"round"},j)),"renderIcon");return jsx(motion.div,{className:cn("inline-flex items-center justify-center",k&&"cursor-pointer",l),style:{width:o,height:o,color:c,...h},onClick:E,onMouseEnter:()=>y(true),onMouseLeave:()=>y(false),variants:S,animate:b?"animate":"initial",whileHover:I?{}:B(),whileTap:I?{}:D(),onAnimationComplete:d,children:jsx("svg",{width:"100%",height:"100%",viewBox:O,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx(AnimatePresence,{mode:"wait",children:T()})})})}t(u,"AnimatedIcon");var ae={Spinner:t(e=>jsx(u,{icon:"loading",animation:"spin",...e}),"Spinner"),HeartBeat:t(e=>jsx(u,{icon:"heart",animation:"pulse",color:"#ef4444",...e}),"HeartBeat"),MenuToggle:t(e=>jsx(u,{icon:"hamburger",animation:"morph",...e}),"MenuToggle"),CheckDraw:t(e=>jsx(u,{icon:"check",animation:"draw",color:"#10b981",...e}),"CheckDraw"),BounceStar:t(e=>jsx(u,{icon:"star",animation:"bounce",color:"#fbbf24",...e}),"BounceStar"),HoverArrow:t(e=>jsx(u,{icon:"arrow",hoverAnimation:"scale",interactive:true,...e}),"HoverArrow")},ie=u;
-export{u as AnimatedIcon,ae as AnimatedIconPresets,ie as default};
+"use client";
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '@/lib/utils';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = /* @__PURE__ */ __name((event) => {
+      setPrefersReducedMotion(event.matches);
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+__name(usePrefersReducedMotion, "usePrefersReducedMotion");
+var iconPaths = {
+  loading: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83",
+  heart: [
+    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
+    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+  ],
+  star: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z",
+  hamburger: ["M3 12h18M3 6h18M3 18h18", "m6 6 12 12M6 18 18 6"],
+  arrow: "M5 12l14 0m-7 -7l7 7l-7 7",
+  check: "m9 12 2 2 4-4",
+  x: "m18 6-12 12M6 6l12 12"
+};
+var animationVariants = {
+  spin: {
+    animate: {
+      rotate: 360,
+      transition: {
+        duration: 1,
+        repeat: Infinity,
+        ease: "linear"
+      }
+    }
+  },
+  pulse: {
+    animate: {
+      scale: [1, 1.2, 1],
+      transition: {
+        duration: 1,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    }
+  },
+  bounce: {
+    animate: {
+      y: [0, -10, 0],
+      transition: {
+        duration: 0.6,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    }
+  },
+  draw: {
+    initial: { pathLength: 0, opacity: 0 },
+    animate: {
+      pathLength: 1,
+      opacity: 1,
+      transition: { duration: 2, ease: "easeInOut" }
+    }
+  },
+  hover: {
+    whileHover: {
+      scale: 1.1,
+      transition: { duration: 0.2 }
+    }
+  }
+};
+var hoverVariants = {
+  scale: { scale: 1.2 },
+  rotate: { rotate: 15 },
+  glow: { filter: "drop-shadow(0 0 8px currentColor)" },
+  shake: { x: [-2, 2, -2, 2, 0] }
+};
+var clickVariants = {
+  scale: { scale: 0.9 },
+  rotate: { rotate: 180 },
+  ripple: { scale: [1, 1.3, 1] }
+};
+function MorphingPath({
+  paths,
+  duration,
+  strokeWidth = 2,
+  autoAnimate,
+  repeat,
+  onComplete
+}) {
+  const [currentPathIndex, setCurrentPathIndex] = useState(0);
+  useEffect(() => {
+    if (!autoAnimate || paths.length < 2) return;
+    const interval = setInterval(() => {
+      setCurrentPathIndex((prev) => {
+        const next = (prev + 1) % paths.length;
+        if (next === 0 && !repeat) {
+          clearInterval(interval);
+          onComplete?.();
+        }
+        return next;
+      });
+    }, duration);
+    return () => clearInterval(interval);
+  }, [autoAnimate, paths.length, duration, repeat, onComplete]);
+  return /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      d: paths[currentPathIndex],
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      animate: { d: paths[currentPathIndex] },
+      transition: { duration: duration / 1e3, ease: "easeInOut" }
+    }
+  );
+}
+__name(MorphingPath, "MorphingPath");
+function DrawingPath({
+  path,
+  duration,
+  strokeWidth = 2,
+  progress,
+  autoAnimate
+}) {
+  const pathRef = useRef(null);
+  const [pathLength, setPathLength] = useState(0);
+  useEffect(() => {
+    if (pathRef.current) {
+      const length = pathRef.current.getTotalLength();
+      setPathLength(length);
+    }
+  }, [path]);
+  const animatedLength = progress !== void 0 ? pathLength * progress : pathLength;
+  return /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      ref: pathRef,
+      d: path,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      initial: { pathLength: 0 },
+      animate: autoAnimate ? { pathLength: 1 } : { pathLength: animatedLength / pathLength },
+      transition: { duration: duration / 1e3, ease: "easeInOut" },
+      style: {
+        strokeDasharray: pathLength,
+        strokeDashoffset: pathLength - animatedLength
+      }
+    }
+  );
+}
+__name(DrawingPath, "DrawingPath");
+function LoadingSpinner({
+  size,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: { rotate: 360 },
+      transition: { duration: 1, repeat: Infinity, ease: "linear" },
+      style: { width: size, height: size },
+      children: /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: "60 40",
+          opacity: "0.3"
+        }
+      ) })
+    }
+  );
+}
+__name(LoadingSpinner, "LoadingSpinner");
+function AnimatedIcon({
+  icon = "loading",
+  paths,
+  animation = "spin",
+  size = 24,
+  color = "currentColor",
+  duration = 1e3,
+  autoAnimate = true,
+  repeat = true,
+  className,
+  style,
+  onAnimationComplete,
+  onClick,
+  interactive = true,
+  hoverAnimation = "scale",
+  clickAnimation = "scale",
+  customVariants,
+  viewBox = "0 0 24 24",
+  strokeWidth = 2,
+  loading = false,
+  progress
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const variants = customVariants || animationVariants[animation] || {};
+  const shouldAnimate = autoAnimate && !prefersReducedMotion;
+  const getIconPaths = /* @__PURE__ */ __name(() => {
+    if (paths) {
+      return Array.isArray(paths) ? paths : [paths];
+    }
+    const builtInPath = iconPaths[icon];
+    return Array.isArray(builtInPath) ? builtInPath : [builtInPath];
+  }, "getIconPaths");
+  const iconPathsArray = getIconPaths();
+  const handleClick = /* @__PURE__ */ __name(() => {
+    if (!interactive) return;
+    setIsClicked(true);
+    setTimeout(() => setIsClicked(false), 200);
+    onClick?.();
+  }, "handleClick");
+  const getHoverVariant = /* @__PURE__ */ __name(() => {
+    if (!interactive || !isHovered) return {};
+    return hoverVariants[hoverAnimation] || {};
+  }, "getHoverVariant");
+  const getClickVariant = /* @__PURE__ */ __name(() => {
+    if (!interactive || !isClicked) return {};
+    return clickVariants[clickAnimation] || {};
+  }, "getClickVariant");
+  if (loading) {
+    return /* @__PURE__ */ jsx(LoadingSpinner, { size, strokeWidth });
+  }
+  const renderIcon = /* @__PURE__ */ __name(() => {
+    if (animation === "morph" && iconPathsArray.length > 1) {
+      return /* @__PURE__ */ jsx(
+        MorphingPath,
+        {
+          paths: iconPathsArray,
+          duration,
+          strokeWidth,
+          autoAnimate: shouldAnimate,
+          repeat,
+          onComplete: onAnimationComplete
+        }
+      );
+    }
+    if (animation === "draw") {
+      return /* @__PURE__ */ jsx(
+        DrawingPath,
+        {
+          path: iconPathsArray[0],
+          duration,
+          strokeWidth,
+          progress,
+          autoAnimate: shouldAnimate
+        }
+      );
+    }
+    return iconPathsArray.map((path, index) => /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        d: path,
+        fill: icon === "heart" ? "currentColor" : "none",
+        stroke: icon === "heart" ? "none" : "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      index
+    ));
+  }, "renderIcon");
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(
+        "inline-flex items-center justify-center",
+        interactive && "cursor-pointer",
+        className
+      ),
+      style: {
+        width: size,
+        height: size,
+        color,
+        ...style
+      },
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      variants,
+      animate: shouldAnimate ? "animate" : "initial",
+      whileHover: !prefersReducedMotion ? getHoverVariant() : {},
+      whileTap: !prefersReducedMotion ? getClickVariant() : {},
+      onAnimationComplete,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox,
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderIcon() })
+        }
+      )
+    }
+  );
+}
+__name(AnimatedIcon, "AnimatedIcon");
+var AnimatedIconPresets = {
+  /**
+   * Spinning loading indicator
+   */
+  Spinner: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "loading", animation: "spin", ...props }), "Spinner"),
+  /**
+   * Pulsing heart
+   */
+  HeartBeat: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "heart", animation: "pulse", color: "#ef4444", ...props }), "HeartBeat"),
+  /**
+   * Morphing hamburger to X
+   */
+  MenuToggle: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "hamburger", animation: "morph", ...props }), "MenuToggle"),
+  /**
+   * Drawing checkmark
+   */
+  CheckDraw: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "check", animation: "draw", color: "#10b981", ...props }), "CheckDraw"),
+  /**
+   * Bouncing star
+   */
+  BounceStar: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "star", animation: "bounce", color: "#fbbf24", ...props }), "BounceStar"),
+  /**
+   * Interactive arrow
+   */
+  HoverArrow: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "arrow", hoverAnimation: "scale", interactive: true, ...props }), "HoverArrow")
+};
+var icon_default = AnimatedIcon;
+
+export { AnimatedIcon, AnimatedIconPresets, icon_default as default };