@hanzo/ui 5.3.28 → 5.3.29

package/dist/animation/index.mjs

@@ -0,0 +1,1921 @@
+"use client";
+import * as React9 from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { motion, AnimatePresence, Reorder, useMotionValue as useMotionValue$1, useTransform as useTransform$1, useSpring } from 'motion/react';
+import { cn as cn$1 } from '@/lib/utils';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn } from '@hanzo/ui/lib/utils';
+import { Avatar, AvatarImage, AvatarFallback } from '@hanzo/ui/primitives/avatar';
+import { Card, CardContent, Button } from '@hanzo/ui';
+import { AnimatePresence as AnimatePresence$1, motion as motion$1, useMotionValue, useTransform } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+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");
+function GradientBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const gradientColors = colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
+        backgroundSize: "400% 400%"
+      },
+      animate: paused ? {} : {
+        x: ["0%", "100%", "0%"]
+      },
+      transition: {
+        duration: 10 / speed,
+        repeat: Infinity,
+        ease: "linear"
+      }
+    }
+  );
+}
+__name(GradientBackground, "GradientBackground");
+function BlobBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const blobs = useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 200 + 100,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 10 + 10) / speed
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${blob.color}40, transparent)`,
+        width: blob.size * intensity,
+        height: blob.size * intensity,
+        filter: "blur(40px)"
+      },
+      initial: {
+        x: `${blob.x}%`,
+        y: `${blob.y}%`
+      },
+      animate: paused ? {} : {
+        x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
+        y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
+        scale: [1, 1.2, 1]
+      },
+      transition: {
+        duration: blob.duration,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    blob.id
+  )) });
+}
+__name(BlobBackground, "BlobBackground");
+function WaveBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const waveColor = colors[0] || "#4ecdc4";
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
+          30 * intensity
+        ).toString(16).padStart(2, "0")}, transparent)`
+      },
+      animate: paused ? {} : {
+        y: [index * 10, index * 10 + 20 * intensity, index * 10]
+      },
+      transition: {
+        duration: (3 + index) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(WaveBackground, "WaveBackground");
+function MeshBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const meshColors = colors.length >= 4 ? colors.slice(0, 4) : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${color}60, transparent)`,
+        width: `${60 + index * 20}%`,
+        height: `${60 + index * 20}%`,
+        filter: "blur(60px)",
+        mixBlendMode: "multiply"
+      },
+      initial: {
+        x: `${25 + index * 15}%`,
+        y: `${25 + index * 15}%`
+      },
+      animate: paused ? {} : {
+        x: [
+          `${25 + index * 15}%`,
+          `${35 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        y: [
+          `${25 + index * 15}%`,
+          `${15 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        rotate: [0, 180, 360]
+      },
+      transition: {
+        duration: (8 + index * 2) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(MeshBackground, "MeshBackground");
+function ParallaxBackground({
+  layers,
+  speed,
+  paused
+}) {
+  const mouseX = useMotionValue$1(0);
+  const mouseY = useMotionValue$1(0);
+  useEffect(() => {
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      const { clientX, clientY } = e;
+      const { innerWidth, innerHeight } = window;
+      mouseX.set((clientX / innerWidth - 0.5) * 100);
+      mouseY.set((clientY / innerHeight - 0.5) * 100);
+    }, "handleMouseMove");
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [mouseX, mouseY]);
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
+    const x = useTransform$1(
+      mouseX,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    const y = useTransform$1(
+      mouseY,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute inset-0",
+        style: {
+          background: `radial-gradient(circle, ${layer.color}, transparent)`,
+          opacity: layer.opacity,
+          x: paused ? 0 : x,
+          y: paused ? 0 : y
+        }
+      },
+      index
+    );
+  }) });
+}
+__name(ParallaxBackground, "ParallaxBackground");
+function ParticlesBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const particles = useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 4 + 2,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 20 + 20) / speed,
+      delay: Math.random() * 5
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        backgroundColor: particle.color,
+        width: particle.size * intensity,
+        height: particle.size * intensity,
+        opacity: 0.6
+      },
+      initial: {
+        x: `${particle.x}%`,
+        y: `${particle.y}%`
+      },
+      animate: paused ? {} : {
+        y: [`${particle.y}%`, `${particle.y - 100}%`],
+        opacity: [0, 0.6, 0]
+      },
+      transition: {
+        duration: particle.duration,
+        repeat: Infinity,
+        delay: particle.delay,
+        ease: "linear"
+      }
+    },
+    particle.id
+  )) });
+}
+__name(ParticlesBackground, "ParticlesBackground");
+function AnimatedBackground({
+  animation = "gradient",
+  speed = 1,
+  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
+  paused = false,
+  className,
+  style,
+  children,
+  intensity = 1,
+  blur = false,
+  blurAmount = 20,
+  opacity = 1,
+  elementCount = 5,
+  width = "100%",
+  height = "100%",
+  fullscreen = false,
+  parallaxLayers = [
+    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
+    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
+    { speed: 1.5, color: "#45b7d150", opacity: 0.3 }
+  ]
+}) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const isAnimationPaused = paused || prefersReducedMotion;
+  const containerStyle = useMemo(
+    () => ({
+      width: fullscreen ? "100vw" : width,
+      height: fullscreen ? "100vh" : height,
+      opacity,
+      filter: blur ? `blur(${blurAmount}px)` : void 0,
+      ...style
+    }),
+    [fullscreen, width, height, opacity, blur, blurAmount, style]
+  );
+  const renderAnimation = /* @__PURE__ */ __name(() => {
+    const props = { colors, speed, intensity, paused: isAnimationPaused };
+    switch (animation) {
+      case "blob":
+        return /* @__PURE__ */ jsx(BlobBackground, { ...props, elementCount });
+      case "wave":
+        return /* @__PURE__ */ jsx(WaveBackground, { ...props });
+      case "mesh":
+        return /* @__PURE__ */ jsx(MeshBackground, { ...props });
+      case "parallax":
+        return /* @__PURE__ */ jsx(
+          ParallaxBackground,
+          {
+            layers: parallaxLayers,
+            speed,
+            paused: isAnimationPaused
+          }
+        );
+      case "particles":
+        return /* @__PURE__ */ jsx(ParticlesBackground, { ...props, elementCount });
+      default:
+        return /* @__PURE__ */ jsx(GradientBackground, { ...props });
+    }
+  }, "renderAnimation");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1(
+        "relative overflow-hidden",
+        fullscreen && "fixed inset-0 z-0",
+        className
+      ),
+      style: containerStyle,
+      children: [
+        renderAnimation(),
+        children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
+      ]
+    }
+  );
+}
+__name(AnimatedBackground, "AnimatedBackground");
+var AnimatedBeam = React9.forwardRef(
+  ({
+    className,
+    duration = 3,
+    delay = 0,
+    pathColor = "gray",
+    pathWidth = 2,
+    gradientStartColor = "#18CCFC",
+    gradientStopColor = "#6344F5",
+    containerRef,
+    fromRef,
+    toRef,
+    ...props
+  }, ref) => {
+    const [pathD, setPathD] = React9.useState("");
+    React9.useEffect(() => {
+      if (!containerRef?.current || !fromRef?.current || !toRef?.current) return;
+      const updatePath = /* @__PURE__ */ __name(() => {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const fromRect = fromRef.current.getBoundingClientRect();
+        const toRect = toRef.current.getBoundingClientRect();
+        const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
+        const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
+        const toX = toRect.left - containerRect.left + toRect.width / 2;
+        const toY = toRect.top - containerRect.top + toRect.height / 2;
+        const controlX = (fromX + toX) / 2;
+        const controlY = Math.min(fromY, toY) - 50;
+        setPathD(`M ${fromX} ${fromY} Q ${controlX} ${controlY} ${toX} ${toY}`);
+      }, "updatePath");
+      updatePath();
+      window.addEventListener("resize", updatePath);
+      return () => window.removeEventListener("resize", updatePath);
+    }, [containerRef, fromRef, toRef]);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        className: cn("pointer-events-none absolute inset-0", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathD,
+              stroke: pathColor,
+              strokeWidth: pathWidth,
+              fill: "none",
+              strokeOpacity: 0.2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: pathD,
+              stroke: `url(#gradient-${gradientStartColor}-${gradientStopColor})`,
+              strokeWidth: pathWidth,
+              fill: "none",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: {
+                duration,
+                delay,
+                ease: "easeInOut",
+                repeat: Infinity
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `gradient-${gradientStartColor}-${gradientStopColor}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientStartColor }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedBeam.displayName = "AnimatedBeam";
+var INTERACTIVE_SELECTORS = [
+  "a",
+  "button",
+  "input",
+  "textarea",
+  "select",
+  '[role="button"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])',
+  ".cursor-pointer",
+  '[data-cursor="pointer"]'
+].join(", ");
+var TEXT_SELECTORS = [
+  'input[type="text"]',
+  'input[type="email"]',
+  'input[type="password"]',
+  'input[type="search"]',
+  "textarea",
+  '[contenteditable="true"]',
+  '[data-cursor="text"]'
+].join(", ");
+var GRAB_SELECTORS = ['[data-cursor="grab"]', ".cursor-grab"].join(", ");
+var GRABBING_SELECTORS = [
+  '[data-cursor="grabbing"]',
+  ".cursor-grabbing"
+].join(", ");
+function isTouchDevice() {
+  if (typeof window === "undefined") return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || // @ts-ignore
+  navigator.msMaxTouchPoints > 0;
+}
+__name(isTouchDevice, "isTouchDevice");
+function useCursorState() {
+  const [cursorState, setCursorState] = useState({
+    position: { x: 0, y: 0 },
+    isHovering: false,
+    isClicking: false,
+    cursorType: "default"
+  });
+  const updatePosition = useCallback((x, y) => {
+    setCursorState((prev) => ({
+      ...prev,
+      position: { x, y }
+    }));
+  }, []);
+  const updateHoverState = useCallback(
+    (isHovering, cursorType = "default") => {
+      setCursorState((prev) => ({
+        ...prev,
+        isHovering,
+        cursorType
+      }));
+    },
+    []
+  );
+  const updateClickState = useCallback((isClicking) => {
+    setCursorState((prev) => ({
+      ...prev,
+      isClicking
+    }));
+  }, []);
+  return {
+    cursorState,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  };
+}
+__name(useCursorState, "useCursorState");
+function useCursorTrail(trailLength, position) {
+  const [trail, setTrail] = useState([]);
+  const trailRef = useRef([]);
+  useEffect(() => {
+    trailRef.current.push(position);
+    if (trailRef.current.length > trailLength) {
+      trailRef.current.shift();
+    }
+    setTrail([...trailRef.current]);
+  }, [position, trailLength]);
+  return trail;
+}
+__name(useCursorTrail, "useCursorTrail");
+function AnimatedCursor({
+  isVisible = true,
+  size = 20,
+  color = "#000000",
+  trailColor = "#00000050",
+  animationDuration = 200,
+  showTrail = true,
+  trailLength = 8,
+  blendMode = "normal",
+  hoverScale = 1.5,
+  hideOnTouch = true,
+  className,
+  clickAnimationDuration = 100,
+  zIndex = 9999
+}) {
+  const { cursorState, updatePosition, updateHoverState, updateClickState } = useCursorState();
+  const trail = useCursorTrail(trailLength, cursorState.position);
+  const [isTouch, setIsTouch] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setIsTouch(isTouchDevice());
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      try {
+        requestAnimationFrame(() => {
+          updatePosition(e.clientX, e.clientY);
+        });
+      } catch (error) {
+        console.warn("AnimatedCursor: Error updating position", error);
+      }
+    }, "handleMouseMove");
+    const handleMouseOver = /* @__PURE__ */ __name((e) => {
+      try {
+        const target = e.target;
+        if (target?.closest?.(INTERACTIVE_SELECTORS)) {
+          updateHoverState(true, "pointer");
+        } else if (target?.closest?.(TEXT_SELECTORS)) {
+          updateHoverState(true, "text");
+        } else if (target?.closest?.(GRAB_SELECTORS)) {
+          updateHoverState(true, "grab");
+        } else if (target?.closest?.(GRABBING_SELECTORS)) {
+          updateHoverState(true, "grabbing");
+        } else {
+          updateHoverState(false, "default");
+        }
+      } catch (error) {
+        console.warn("AnimatedCursor: Error handling mouse over", error);
+        updateHoverState(false, "default");
+      }
+    }, "handleMouseOver");
+    const handleMouseDown = /* @__PURE__ */ __name(() => {
+      updateClickState(true);
+    }, "handleMouseDown");
+    const handleMouseUp = /* @__PURE__ */ __name(() => {
+      updateClickState(false);
+    }, "handleMouseUp");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      updateHoverState(false, "default");
+    }, "handleMouseLeave");
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [
+    mounted,
+    hideOnTouch,
+    isTouch,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  ]);
+  useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    try {
+      const originalCursor = document.body.style.cursor;
+      document.body.style.cursor = "none";
+      return () => {
+        try {
+          document.body.style.cursor = originalCursor;
+        } catch (error) {
+          console.warn("AnimatedCursor: Error restoring cursor style", error);
+        }
+      };
+    } catch (error) {
+      console.warn("AnimatedCursor: Error hiding cursor", error);
+    }
+  }, [mounted, hideOnTouch, isTouch]);
+  if (!mounted || !isVisible || hideOnTouch && isTouch) {
+    return null;
+  }
+  const currentScale = cursorState.isHovering ? hoverScale : 1;
+  const clickScale = cursorState.isClicking ? 0.8 : 1;
+  const finalScale = currentScale * clickScale;
+  const getCursorShape = /* @__PURE__ */ __name(() => {
+    switch (cursorState.cursorType) {
+      case "text":
+        return "h-6 w-0.5";
+      case "grab":
+      case "grabbing":
+        return "rounded-md";
+      default:
+        return "rounded-full";
+    }
+  }, "getCursorShape");
+  return /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none fixed inset-0", className), children: [
+    showTrail && trail.map((point, index) => {
+      const opacity = (index + 1) / trail.length * 0.5;
+      const scale = (index + 1) / trail.length * 0.8;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute",
+          style: {
+            left: point.x - size / 2,
+            top: point.y - size / 2,
+            width: size,
+            height: size,
+            backgroundColor: trailColor,
+            borderRadius: "50%",
+            opacity,
+            transform: `scale(${scale})`,
+            zIndex: zIndex - index - 1,
+            mixBlendMode: blendMode
+          }
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute transition-transform duration-100 ease-out",
+          getCursorShape()
+        ),
+        style: {
+          left: cursorState.position.x - size / 2,
+          top: cursorState.position.y - size / 2,
+          width: cursorState.cursorType === "text" ? 2 : size,
+          height: cursorState.cursorType === "text" ? 24 : size,
+          backgroundColor: color,
+          transform: `scale(${finalScale})`,
+          transitionDuration: `${animationDuration}ms`,
+          zIndex,
+          mixBlendMode: blendMode
+        }
+      }
+    ),
+    cursorState.isHovering && cursorState.cursorType !== "text" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute rounded-full border-2 transition-all duration-200 ease-out",
+        style: {
+          left: cursorState.position.x - size * hoverScale / 2,
+          top: cursorState.position.y - size * hoverScale / 2,
+          width: size * hoverScale,
+          height: size * hoverScale,
+          borderColor: color,
+          opacity: 0.3,
+          zIndex: zIndex - 1,
+          mixBlendMode: blendMode
+        }
+      }
+    )
+  ] });
+}
+__name(AnimatedCursor, "AnimatedCursor");
+function usePrefersReducedMotion2() {
+  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(usePrefersReducedMotion2, "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 = usePrefersReducedMotion2();
+  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$1(
+        "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");
+function usePrefersReducedMotion3() {
+  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(usePrefersReducedMotion3, "usePrefersReducedMotion");
+var slideVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var fadeVariants = {
+  hidden: { opacity: 0 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, transition: { duration: 0.3 } }
+};
+var scaleVariants = {
+  hidden: { opacity: 0, scale: 0.8 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut",
+      type: "spring",
+      stiffness: 100
+    }
+  }), "visible"),
+  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
+};
+var slideUpVariants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: -50, transition: { duration: 0.3 } }
+};
+var slideDownVariants = {
+  hidden: { opacity: 0, y: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: 50, transition: { duration: 0.3 } }
+};
+var slideLeftVariants = {
+  hidden: { opacity: 0, x: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: -50, transition: { duration: 0.3 } }
+};
+var slideRightVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var animationVariants2 = {
+  slide: slideVariants,
+  fade: fadeVariants,
+  scale: scaleVariants,
+  slideUp: slideUpVariants,
+  slideDown: slideDownVariants,
+  slideLeft: slideLeftVariants,
+  slideRight: slideRightVariants
+};
+function useVirtualizedList(items, containerHeight, itemHeight, enabled) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const visibleItems = useMemo(() => {
+    if (!enabled) return items;
+    const startIndex = Math.floor(scrollTop / itemHeight);
+    const endIndex = Math.min(
+      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
+      items.length
+    );
+    return items.slice(startIndex, endIndex).map((item, index) => ({
+      ...item,
+      virtualIndex: startIndex + index,
+      style: {
+        position: "absolute",
+        top: (startIndex + index) * itemHeight,
+        height: itemHeight,
+        width: "100%"
+      }
+    }));
+  }, [items, scrollTop, itemHeight, containerHeight, enabled]);
+  const totalHeight = items.length * itemHeight;
+  const handleScroll = useCallback((e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  return {
+    visibleItems,
+    totalHeight,
+    handleScroll
+  };
+}
+__name(useVirtualizedList, "useVirtualizedList");
+function AnimatedList({
+  items,
+  animation = "slideUp",
+  staggerDelay = 100,
+  duration = 500,
+  reorderable = false,
+  enableAddRemove = true,
+  layout = "vertical",
+  gridColumns = 3,
+  className,
+  itemClassName,
+  style,
+  onReorder,
+  onItemClick,
+  showHoverEffects = true,
+  customVariants,
+  virtualized = false,
+  itemHeight = 60,
+  containerHeight = 400,
+  autoStart = true,
+  onAnimationComplete
+}) {
+  const [animatedItems, setAnimatedItems] = useState(items);
+  const [animationKey, setAnimationKey] = useState(0);
+  const prefersReducedMotion = usePrefersReducedMotion3();
+  const variants = customVariants || animationVariants2[animation];
+  const shouldAnimate = !prefersReducedMotion && autoStart;
+  const { visibleItems, totalHeight, handleScroll } = useVirtualizedList(
+    items,
+    containerHeight,
+    itemHeight,
+    virtualized
+  );
+  useEffect(() => {
+    setAnimatedItems(items);
+  }, [items]);
+  const updatedVariants = useMemo(() => {
+    if (!variants.visible || typeof variants.visible !== "function")
+      return variants;
+    return {
+      ...variants,
+      visible: /* @__PURE__ */ __name((i) => {
+        const original = variants.visible;
+        const originalResult = original(i);
+        return {
+          ...originalResult,
+          transition: {
+            ...originalResult.transition,
+            delay: i * (staggerDelay / 1e3),
+            duration: duration / 1e3
+          }
+        };
+      }, "visible")
+    };
+  }, [variants, staggerDelay, duration]);
+  const getLayoutClassName = /* @__PURE__ */ __name(() => {
+    switch (layout) {
+      case "horizontal":
+        return "flex flex-row gap-4 overflow-x-auto";
+      case "grid":
+        return `grid gap-4 grid-cols-${gridColumns}`;
+      default:
+        return "flex flex-col gap-4";
+    }
+  }, "getLayoutClassName");
+  const renderListItem = /* @__PURE__ */ __name((item, index, virtualStyle) => {
+    const itemContent = /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        custom: index,
+        variants: updatedVariants,
+        initial: shouldAnimate ? "hidden" : "visible",
+        animate: "visible",
+        exit: "exit",
+        layout: enableAddRemove,
+        className: cn$1(
+          "cursor-pointer select-none",
+          showHoverEffects && "hover:scale-105 transition-transform",
+          itemClassName
+        ),
+        style: virtualStyle,
+        onClick: () => onItemClick?.(item, index),
+        whileHover: showHoverEffects ? { scale: 1.02 } : void 0,
+        whileTap: showHoverEffects ? { scale: 0.98 } : void 0,
+        onAnimationComplete: () => {
+          if (index === animatedItems.length - 1) {
+            onAnimationComplete?.();
+          }
+        },
+        children: item.content
+      },
+      item.id
+    );
+    return itemContent;
+  }, "renderListItem");
+  if (reorderable && !virtualized) {
+    return /* @__PURE__ */ jsx(
+      Reorder.Group,
+      {
+        axis: layout === "horizontal" ? "x" : "y",
+        values: animatedItems,
+        onReorder: (newItems) => {
+          setAnimatedItems(newItems);
+          onReorder?.(newItems);
+        },
+        className: cn$1(getLayoutClassName(), className),
+        style,
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => /* @__PURE__ */ jsx(
+          Reorder.Item,
+          {
+            value: item,
+            className: cn$1(
+              "cursor-grab active:cursor-grabbing",
+              itemClassName
+            ),
+            whileDrag: { scale: 1.05, zIndex: 10 },
+            children: item.content
+          },
+          item.id
+        )) })
+      }
+    );
+  }
+  if (virtualized) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn$1("overflow-auto", className),
+        style: { height: containerHeight, ...style },
+        onScroll: handleScroll,
+        children: /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visibleItems.map(
+          (item, index) => renderListItem(item, item.virtualIndex || index, item.style)
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn$1(getLayoutClassName(), className),
+      style,
+      initial: "hidden",
+      animate: "visible",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => renderListItem(item, index)) })
+    },
+    animationKey
+  );
+}
+__name(AnimatedList, "AnimatedList");
+function usePrefersReducedMotion4() {
+  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(usePrefersReducedMotion4, "usePrefersReducedMotion");
+function useAnimatedNumber(targetValue, from, duration, decimals, format, currency, locale, easing, autoStart, useSpringAnim, springConfig, separator) {
+  const [displayValue, setDisplayValue] = useState(from);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const animationRef = useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion4();
+  const springValue = useSpring(from, {
+    stiffness: springConfig.tension || 100,
+    damping: springConfig.friction || 10,
+    mass: springConfig.mass || 1
+  });
+  const [motionValue, setMotionValue] = useState(from);
+  const startAnimation = useCallback(() => {
+    if (prefersReducedMotion) {
+      setDisplayValue(targetValue);
+      return;
+    }
+    setIsAnimating(true);
+    if (useSpringAnim) {
+      springValue.set(targetValue);
+    } else {
+      const startTime = Date.now();
+      const startValue = displayValue;
+      const distance = targetValue - startValue;
+      const animate = /* @__PURE__ */ __name(() => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = progress;
+        const currentValue = startValue + distance * easedProgress;
+        setDisplayValue(currentValue);
+        setMotionValue(currentValue);
+        if (progress < 1) {
+          animationRef.current = requestAnimationFrame(animate);
+        } else {
+          setIsAnimating(false);
+          animationRef.current = null;
+        }
+      }, "animate");
+      animationRef.current = requestAnimationFrame(animate);
+    }
+  }, [
+    targetValue,
+    displayValue,
+    duration,
+    useSpringAnim,
+    springValue,
+    prefersReducedMotion
+  ]);
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (useSpringAnim) {
+      const unsubscribe = springValue.onChange((latest) => {
+        setDisplayValue(latest);
+        if (Math.abs(latest - targetValue) < 0.01) {
+          setIsAnimating(false);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [springValue, useSpringAnim, targetValue]);
+  useEffect(() => {
+    if (autoStart) {
+      startAnimation();
+    }
+  }, [autoStart, startAnimation]);
+  const formattedValue = useMemo(() => {
+    const roundedValue = Math.round(displayValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+    try {
+      switch (format) {
+        case "currency":
+          return new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(roundedValue);
+        case "percent":
+          return new Intl.NumberFormat(locale, {
+            style: "percent",
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(roundedValue / 100);
+        default:
+          let formatted = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+          }).format(roundedValue);
+          if (separator && separator !== ",") {
+            formatted = formatted.replace(/,/g, separator);
+          }
+          return formatted;
+      }
+    } catch (error) {
+      return roundedValue.toFixed(decimals);
+    }
+  }, [displayValue, decimals, format, currency, locale, separator]);
+  return {
+    formattedValue,
+    displayValue,
+    isAnimating,
+    startAnimation
+  };
+}
+__name(useAnimatedNumber, "useAnimatedNumber");
+function AnimatedNumber({
+  value,
+  from = 0,
+  duration = 2e3,
+  decimals = 0,
+  format = "number",
+  currency = "USD",
+  locale = "en-US",
+  easing = "easeOut",
+  autoStart = true,
+  onComplete,
+  className,
+  style,
+  prefix = "",
+  suffix = "",
+  useSpring: useSpring2 = false,
+  springConfig = {},
+  separator,
+  animateOnHover = false,
+  hoverValue
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [animationKey, setAnimationKey] = useState(0);
+  const currentValue = animateOnHover && isHovered && hoverValue !== void 0 ? hoverValue : value;
+  const { formattedValue, displayValue, isAnimating, startAnimation } = useAnimatedNumber(
+    currentValue,
+    from,
+    duration,
+    decimals,
+    format,
+    currency,
+    locale,
+    easing,
+    autoStart,
+    useSpring2,
+    springConfig,
+    separator
+  );
+  useEffect(() => {
+    if (!isAnimating && onComplete && Math.abs(displayValue - currentValue) < 1e-3) {
+      onComplete(displayValue);
+    }
+  }, [isAnimating, displayValue, currentValue, onComplete]);
+  useEffect(() => {
+    if (animateOnHover && hoverValue !== void 0) {
+      startAnimation();
+    }
+  }, [isHovered, animateOnHover, hoverValue, startAnimation]);
+  const handleMouseEnter = /* @__PURE__ */ __name(() => {
+    if (animateOnHover) {
+      setIsHovered(true);
+    }
+  }, "handleMouseEnter");
+  const handleMouseLeave = /* @__PURE__ */ __name(() => {
+    if (animateOnHover) {
+      setIsHovered(false);
+    }
+  }, "handleMouseLeave");
+  const prefersReducedMotion = usePrefersReducedMotion4();
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      className: cn$1("inline-block tabular-nums", className),
+      style,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      initial: { scale: 1 },
+      animate: !prefersReducedMotion && isAnimating ? { scale: [1, 1.05, 1] } : { scale: 1 },
+      transition: { duration: 0.3 },
+      children: [
+        prefix,
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3 },
+            children: formattedValue
+          },
+          animationKey
+        ),
+        suffix
+      ]
+    }
+  );
+}
+__name(AnimatedNumber, "AnimatedNumber");
+var AnimatedTestimonials = React9.forwardRef(
+  ({ className, testimonials, autoPlay = true, duration = 5e3, ...props }, ref) => {
+    const [activeIndex, setActiveIndex] = React9.useState(0);
+    React9.useEffect(() => {
+      if (!autoPlay) return;
+      const interval = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % testimonials.length);
+      }, duration);
+      return () => clearInterval(interval);
+    }, [autoPlay, duration, testimonials.length]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative min-h-[200px]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -20 },
+              transition: { duration: 0.5 },
+              children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-lg italic", children: [
+                  '"',
+                  testimonials[activeIndex].content,
+                  '"'
+                ] }),
+                /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxs(Avatar, { children: [
+                    /* @__PURE__ */ jsx(AvatarImage, { src: testimonials[activeIndex].avatar }),
+                    /* @__PURE__ */ jsx(AvatarFallback, { children: testimonials[activeIndex].author.slice(0, 2).toUpperCase() })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("cite", { className: "not-italic font-medium", children: testimonials[activeIndex].author }),
+                    testimonials[activeIndex].role && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      testimonials[activeIndex].role,
+                      testimonials[activeIndex].company && `, ${testimonials[activeIndex].company}`
+                    ] })
+                  ] })
+                ] })
+              ] }) }) })
+            },
+            activeIndex
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setActiveIndex(index),
+              className: cn(
+                "h-2 w-2 rounded-full transition-all",
+                index === activeIndex ? "w-8 bg-primary" : "bg-muted hover:bg-muted-foreground"
+              ),
+              "aria-label": `Go to testimonial ${index + 1}`
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+AnimatedTestimonials.displayName = "AnimatedTestimonials";
+var AnimatedTooltip = React9.forwardRef(
+  ({ className, content, children, delay = 0, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React9.useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(AnimatePresence$1, { children: isVisible && /* @__PURE__ */ jsxs(
+            motion$1.div,
+            {
+              initial: { opacity: 0, y: 10, scale: 0.95 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: { opacity: 0, y: 10, scale: 0.95 },
+              transition: {
+                duration: 0.2,
+                delay: delay / 1e3,
+                ease: "easeOut"
+              },
+              className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50",
+              children: [
+                content,
+                /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedTooltip.displayName = "AnimatedTooltip";
+function AppleCardsCarousel({
+  cards,
+  autoPlay = false,
+  autoPlayInterval = 5e3,
+  className,
+  cardClassName,
+  showArrows = true,
+  showDots = true,
+  parallaxOffset = 50,
+  stackOffset = 10,
+  stackScale = 0.95,
+  swipeThreshold = 50
+}) {
+  const [currentIndex, setCurrentIndex] = React9.useState(0);
+  const [isAutoPlaying, setIsAutoPlaying] = React9.useState(autoPlay);
+  const containerRef = React9.useRef(null);
+  const dragX = useMotionValue(0);
+  const getCardStyle = /* @__PURE__ */ __name((index) => {
+    const offset = index - currentIndex;
+    const absOffset = Math.abs(offset);
+    if (absOffset > 2) {
+      return {
+        display: "none",
+        x: 0,
+        scale: 1,
+        opacity: 0,
+        zIndex: 0
+      };
+    }
+    const baseX = offset * stackOffset;
+    const scale = Math.pow(stackScale, absOffset);
+    const opacity = Math.max(0, 1 - absOffset * 0.3);
+    const zIndex = cards.length - absOffset;
+    return {
+      display: "block",
+      x: baseX,
+      scale,
+      opacity,
+      zIndex
+    };
+  }, "getCardStyle");
+  const goToNext = React9.useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % cards.length);
+  }, [cards.length]);
+  const goToPrevious = React9.useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
+  }, [cards.length]);
+  const goToCard = React9.useCallback((index) => {
+    setCurrentIndex(index);
+  }, []);
+  const handleDragEnd = React9.useCallback(
+    (event, info) => {
+      const { offset, velocity } = info;
+      if (Math.abs(offset.x) > swipeThreshold || Math.abs(velocity.x) > 500) {
+        if (offset.x > 0) {
+          goToPrevious();
+        } else {
+          goToNext();
+        }
+      }
+    },
+    [goToNext, goToPrevious, swipeThreshold]
+  );
+  React9.useEffect(() => {
+    if (!isAutoPlaying) return;
+    const interval = setInterval(goToNext, autoPlayInterval);
+    return () => clearInterval(interval);
+  }, [isAutoPlaying, goToNext, autoPlayInterval]);
+  const handleMouseEnter = React9.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(false);
+    }
+  }, [autoPlay]);
+  const handleMouseLeave = React9.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(true);
+    }
+  }, [autoPlay]);
+  React9.useEffect(() => {
+    const handleKeyDown = /* @__PURE__ */ __name((e) => {
+      if (e.key === "ArrowLeft") {
+        goToPrevious();
+      } else if (e.key === "ArrowRight") {
+        goToNext();
+      }
+    }, "handleKeyDown");
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goToNext, goToPrevious]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full max-w-6xl mx-auto px-4 py-8", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center", children: /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "popLayout", children: cards.map((card, index) => {
+          const style = getCardStyle(index);
+          const isActive = index === currentIndex;
+          return /* @__PURE__ */ jsx(
+            motion$1.div,
+            {
+              className: cn(
+                "absolute inset-0 w-full h-full",
+                !isActive && "pointer-events-none"
+              ),
+              initial: false,
+              animate: {
+                x: style.x,
+                scale: style.scale,
+                opacity: style.opacity,
+                zIndex: style.zIndex
+              },
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 30
+              },
+              drag: isActive ? "x" : false,
+              dragSnapToOrigin: true,
+              dragElastic: 0.2,
+              onDragEnd: handleDragEnd,
+              whileDrag: { cursor: "grabbing" },
+              style: {
+                x: dragX,
+                display: style.display
+              },
+              children: /* @__PURE__ */ jsxs(
+                Card,
+                {
+                  className: cn(
+                    "relative w-full h-full overflow-hidden cursor-grab",
+                    "bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950",
+                    "shadow-2xl hover:shadow-3xl transition-shadow duration-300",
+                    cardClassName
+                  ),
+                  style: {
+                    background: card.gradient
+                  },
+                  children: [
+                    card.image && /* @__PURE__ */ jsxs(
+                      motion$1.div,
+                      {
+                        className: "absolute inset-0 w-full h-full",
+                        style: {
+                          x: useTransform(
+                            dragX,
+                            [-200, 0, 200],
+                            [parallaxOffset, 0, -parallaxOffset]
+                          )
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: card.image,
+                              alt: card.title,
+                              className: "w-full h-full object-cover"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col justify-end h-full p-8 md:p-12", children: card.content ? card.content : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        motion$1.h3,
+                        {
+                          className: "text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2",
+                          initial: { opacity: 0, y: 20 },
+                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
+                          transition: { delay: 0.1 },
+                          children: card.title
+                        }
+                      ),
+                      card.subtitle && /* @__PURE__ */ jsx(
+                        motion$1.p,
+                        {
+                          className: "text-xl md:text-2xl text-white/80 mb-4",
+                          initial: { opacity: 0, y: 20 },
+                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
+                          transition: { delay: 0.2 },
+                          children: card.subtitle
+                        }
+                      ),
+                      card.description && /* @__PURE__ */ jsx(
+                        motion$1.p,
+                        {
+                          className: "text-base md:text-lg text-white/70 max-w-2xl",
+                          initial: { opacity: 0, y: 20 },
+                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
+                          transition: { delay: 0.3 },
+                          children: card.description
+                        }
+                      )
+                    ] }) })
+                  ]
+                }
+              )
+            },
+            card.id
+          );
+        }) }) }),
+        showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "absolute left-4 top-1/2 -translate-y-1/2 z-20",
+                "bg-white/10 backdrop-blur-md hover:bg-white/20",
+                "text-white border border-white/20",
+                "hidden md:flex"
+              ),
+              onClick: goToPrevious,
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous card" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "absolute right-4 top-1/2 -translate-y-1/2 z-20",
+                "bg-white/10 backdrop-blur-md hover:bg-white/20",
+                "text-white border border-white/20",
+                "hidden md:flex"
+              ),
+              onClick: goToNext,
+              children: [
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next card" })
+              ]
+            }
+          )
+        ] }),
+        showDots && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2", children: cards.map((_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "w-2 h-2 rounded-full transition-all duration-300",
+              "bg-white/40 hover:bg-white/60",
+              index === currentIndex && "w-8 bg-white"
+            ),
+            onClick: () => goToCard(index),
+            children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              "Go to card ",
+              index + 1
+            ] })
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+__name(AppleCardsCarousel, "AppleCardsCarousel");
+var gradientPresets = {
+  sunset: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  ocean: "linear-gradient(135deg, #667eea 0%, #4ca1af 100%)",
+  fire: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+  forest: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+  galaxy: "linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)",
+  aurora: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)",
+  peach: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
+  lavender: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
+};
+var AppleHelloEffect = React9.forwardRef(({ className, text = "Hello", duration = 2, ...props }, ref) => {
+  const letters = text.split("");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex items-center justify-center text-6xl font-bold",
+        className
+      ),
+      ...props,
+      children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+        motion$1.span,
+        {
+          initial: { opacity: 0, y: 50 },
+          animate: { opacity: 1, y: 0 },
+          transition: {
+            duration,
+            delay: index * 0.1,
+            ease: [0.215, 0.61, 0.355, 1]
+          },
+          className: "inline-block",
+          children: letter
+        },
+        index
+      ))
+    }
+  );
+});
+AppleHelloEffect.displayName = "AppleHelloEffect";
+
+export { AnimatedBackground, AnimatedBeam, AnimatedCursor, AnimatedIcon, AnimatedList, AnimatedNumber, AnimatedTestimonials, AnimatedTooltip, AppleCardsCarousel, AppleHelloEffect, gradientPresets };