@hanzo/ui 5.3.25 → 5.3.28

package/dist/animation/index.mjs

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