@hanzo/ui 5.3.35 → 5.3.38

package/dist/animation/animated-icon.mjs

@@ -1,351 +1,3 @@
 "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 };
+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};