@hanzo/ui 5.3.28 → 5.3.29

package/dist/animation/animated-icon.js

@@ -0,0 +1,357 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var react$1 = require('motion/react');
+var utils = require('@/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.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] = react.useState(0);
+  react.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__ */ jsxRuntime.jsx(
+    react$1.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 = react.useRef(null);
+  const [pathLength, setPathLength] = react.useState(0);
+  react.useEffect(() => {
+    if (pathRef.current) {
+      const length = pathRef.current.getTotalLength();
+      setPathLength(length);
+    }
+  }, [path]);
+  const animatedLength = progress !== void 0 ? pathLength * progress : pathLength;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.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__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      animate: { rotate: 360 },
+      transition: { duration: 1, repeat: Infinity, ease: "linear" },
+      style: { width: size, height: size },
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const [isClicked, setIsClicked] = react.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__ */ jsxRuntime.jsx(LoadingSpinner, { size, strokeWidth });
+  }
+  const renderIcon = /* @__PURE__ */ __name(() => {
+    if (animation === "morph" && iconPathsArray.length > 1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MorphingPath,
+        {
+          paths: iconPathsArray,
+          duration,
+          strokeWidth,
+          autoAnimate: shouldAnimate,
+          repeat,
+          onComplete: onAnimationComplete
+        }
+      );
+    }
+    if (animation === "draw") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DrawingPath,
+        {
+          path: iconPathsArray[0],
+          duration,
+          strokeWidth,
+          progress,
+          autoAnimate: shouldAnimate
+        }
+      );
+    }
+    return iconPathsArray.map((path, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.path,
+      {
+        d: path,
+        fill: icon === "heart" ? "currentColor" : "none",
+        stroke: icon === "heart" ? "none" : "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      index
+    ));
+  }, "renderIcon");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: utils.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__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox,
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", children: renderIcon() })
+        }
+      )
+    }
+  );
+}
+__name(AnimatedIcon, "AnimatedIcon");
+var AnimatedIconPresets = {
+  /**
+   * Spinning loading indicator
+   */
+  Spinner: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "loading", animation: "spin", ...props }), "Spinner"),
+  /**
+   * Pulsing heart
+   */
+  HeartBeat: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "heart", animation: "pulse", color: "#ef4444", ...props }), "HeartBeat"),
+  /**
+   * Morphing hamburger to X
+   */
+  MenuToggle: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "hamburger", animation: "morph", ...props }), "MenuToggle"),
+  /**
+   * Drawing checkmark
+   */
+  CheckDraw: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "check", animation: "draw", color: "#10b981", ...props }), "CheckDraw"),
+  /**
+   * Bouncing star
+   */
+  BounceStar: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "star", animation: "bounce", color: "#fbbf24", ...props }), "BounceStar"),
+  /**
+   * Interactive arrow
+   */
+  HoverArrow: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedIcon, { icon: "arrow", hoverAnimation: "scale", interactive: true, ...props }), "HoverArrow")
+};
+var icon_default = AnimatedIcon;
+
+exports.AnimatedIcon = AnimatedIcon;
+exports.AnimatedIconPresets = AnimatedIconPresets;
+exports.default = icon_default;

package/dist/animation/animated-icon.mjs

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