@luxfi/ui 7.4.15 → 8.1.0

package/src/animated-icon.tsx

@@ -0,0 +1,520 @@
+"use client"
+
+import React, { useEffect, useRef, useState } from "react"
+import { AnimatePresence, motion, Variants } from "motion/react"
+
+import { cn } from "./utils"
+
+/**
+ * Custom hook to detect prefers-reduced-motion
+ */
+function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setPrefersReducedMotion(mediaQuery.matches)
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches)
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  return prefersReducedMotion
+}
+
+export interface AnimatedIconProps {
+  /**
+   * Icon type for built-in icons or SVG paths
+   */
+  icon?:
+    | "loading"
+    | "heart"
+    | "star"
+    | "hamburger"
+    | "arrow"
+    | "check"
+    | "x"
+    | "custom"
+  /**
+   * Custom SVG path or paths for morphing
+   */
+  paths?: string | string[]
+  /**
+   * Animation type
+   */
+  animation?: "spin" | "pulse" | "bounce" | "morph" | "draw" | "hover" | "click"
+  /**
+   * Icon size
+   */
+  size?: number | string
+  /**
+   * Icon color
+   */
+  color?: string
+  /**
+   * Animation duration in milliseconds
+   */
+  duration?: number
+  /**
+   * Whether to animate automatically
+   */
+  autoAnimate?: boolean
+  /**
+   * Whether animation should repeat
+   */
+  repeat?: boolean
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Callback when animation completes
+   */
+  onAnimationComplete?: () => void
+  /**
+   * Callback when icon is clicked
+   */
+  onClick?: () => void
+  /**
+   * Whether icon is interactive
+   */
+  interactive?: boolean
+  /**
+   * Hover animation type
+   */
+  hoverAnimation?: "scale" | "rotate" | "glow" | "shake"
+  /**
+   * Click animation type
+   */
+  clickAnimation?: "scale" | "rotate" | "ripple"
+  /**
+   * Custom variants for complex animations
+   */
+  customVariants?: Variants
+  /**
+   * SVG viewBox
+   */
+  viewBox?: string
+  /**
+   * Stroke width for SVG paths
+   */
+  strokeWidth?: number
+  /**
+   * Whether to show loading state
+   */
+  loading?: boolean
+  /**
+   * Progress value for progress-based animations (0-1)
+   */
+  progress?: number
+}
+
+// Built-in icon paths
+const 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",
+}
+
+const animationVariants: { [key: string]: Variants } = {
+  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 },
+    },
+  },
+}
+
+const hoverVariants = {
+  scale: { scale: 1.2 },
+  rotate: { rotate: 15 },
+  glow: { filter: "drop-shadow(0 0 8px currentColor)" },
+  shake: { x: [-2, 2, -2, 2, 0] },
+}
+
+const clickVariants = {
+  scale: { scale: 0.9 },
+  rotate: { rotate: 180 },
+  ripple: { scale: [1, 1.3, 1] },
+}
+
+/**
+ * Path morphing animation component
+ */
+function MorphingPath({
+  paths,
+  duration,
+  strokeWidth = 2,
+  autoAnimate,
+  repeat,
+  onComplete,
+}: {
+  paths: string[]
+  duration: number
+  strokeWidth: number
+  autoAnimate: boolean
+  repeat: boolean
+  onComplete?: () => void
+}) {
+  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 (
+    <motion.path
+      d={paths[currentPathIndex]}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      animate={{ d: paths[currentPathIndex] }}
+      transition={{ duration: duration / 1000, ease: "easeInOut" }}
+    />
+  )
+}
+
+/**
+ * Progressive drawing animation
+ */
+function DrawingPath({
+  path,
+  duration,
+  strokeWidth = 2,
+  progress,
+  autoAnimate,
+}: {
+  path: string
+  duration: number
+  strokeWidth: number
+  progress?: number
+  autoAnimate: boolean
+}) {
+  const pathRef = useRef<SVGPathElement>(null)
+  const [pathLength, setPathLength] = useState(0)
+
+  useEffect(() => {
+    if (pathRef.current) {
+      const length = pathRef.current.getTotalLength()
+      setPathLength(length)
+    }
+  }, [path])
+
+  const animatedLength =
+    progress !== undefined ? pathLength * progress : pathLength
+
+  return (
+    <motion.path
+      ref={pathRef}
+      d={path}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial={{ pathLength: 0 }}
+      animate={
+        autoAnimate
+          ? { pathLength: 1 }
+          : { pathLength: animatedLength / pathLength }
+      }
+      transition={{ duration: duration / 1000, ease: "easeInOut" }}
+      style={{
+        strokeDasharray: pathLength,
+        strokeDashoffset: pathLength - animatedLength,
+      }}
+    />
+  )
+}
+
+/**
+ * Loading spinner component
+ */
+function LoadingSpinner({
+  size,
+  strokeWidth = 2,
+}: {
+  size: number | string
+  strokeWidth: number
+}) {
+  return (
+    <motion.div
+      animate={{ rotate: 360 }}
+      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+      style={{ width: size, height: size }}
+    >
+      <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray="60 40"
+          opacity="0.3"
+        />
+      </svg>
+    </motion.div>
+  )
+}
+
+/**
+ * Animated icon component with multiple animation types
+ */
+export function AnimatedIcon({
+  icon = "loading",
+  paths,
+  animation = "spin",
+  size = 24,
+  color = "currentColor",
+  duration = 1000,
+  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,
+}: AnimatedIconProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isClicked, setIsClicked] = useState(false)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const variants = customVariants || animationVariants[animation] || {}
+  const shouldAnimate = autoAnimate && !prefersReducedMotion
+
+  // Get icon paths
+  const getIconPaths = () => {
+    if (paths) {
+      return Array.isArray(paths) ? paths : [paths]
+    }
+
+    const builtInPath = iconPaths[icon as keyof typeof iconPaths]
+    return Array.isArray(builtInPath) ? builtInPath : [builtInPath]
+  }
+
+  const iconPathsArray = getIconPaths()
+
+  const handleClick = () => {
+    if (!interactive) return
+
+    setIsClicked(true)
+    setTimeout(() => setIsClicked(false), 200)
+    onClick?.()
+  }
+
+  const getHoverVariant = () => {
+    if (!interactive || !isHovered) return {}
+    return hoverVariants[hoverAnimation] || {}
+  }
+
+  const getClickVariant = () => {
+    if (!interactive || !isClicked) return {}
+    return clickVariants[clickAnimation] || {}
+  }
+
+  if (loading) {
+    return <LoadingSpinner size={size} strokeWidth={strokeWidth} />
+  }
+
+  const renderIcon = () => {
+    if (animation === "morph" && iconPathsArray.length > 1) {
+      return (
+        <MorphingPath
+          paths={iconPathsArray}
+          duration={duration}
+          strokeWidth={strokeWidth}
+          autoAnimate={shouldAnimate}
+          repeat={repeat}
+          onComplete={onAnimationComplete}
+        />
+      )
+    }
+
+    if (animation === "draw") {
+      return (
+        <DrawingPath
+          path={iconPathsArray[0]}
+          duration={duration}
+          strokeWidth={strokeWidth}
+          progress={progress}
+          autoAnimate={shouldAnimate}
+        />
+      )
+    }
+
+    return iconPathsArray.map((path, index) => (
+      <motion.path
+        key={index}
+        d={path}
+        fill={icon === "heart" ? "currentColor" : "none"}
+        stroke={icon === "heart" ? "none" : "currentColor"}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    ))
+  }
+
+  return (
+    <motion.div
+      className={cn(
+        "inline-flex items-center justify-center",
+        interactive && "cursor-pointer",
+        className
+      )}
+      style={{
+        width: size,
+        height: size,
+        color,
+        ...style,
+      }}
+      onClick={handleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      variants={variants}
+      animate={shouldAnimate ? "animate" : "initial"}
+      whileHover={!prefersReducedMotion ? getHoverVariant() : {}}
+      whileTap={!prefersReducedMotion ? getClickVariant() : {}}
+      onAnimationComplete={onAnimationComplete}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox={viewBox}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <AnimatePresence mode="wait">{renderIcon()}</AnimatePresence>
+      </svg>
+    </motion.div>
+  )
+}
+
+/**
+ * Preset animated icon variations
+ */
+export const AnimatedIconPresets = {
+  /**
+   * Spinning loading indicator
+   */
+  Spinner: (props: Omit<AnimatedIconProps, "icon" | "animation">) => (
+    <AnimatedIcon icon="loading" animation="spin" {...props} />
+  ),
+
+  /**
+   * Pulsing heart
+   */
+  HeartBeat: (props: Omit<AnimatedIconProps, "icon" | "animation">) => (
+    <AnimatedIcon icon="heart" animation="pulse" color="#ef4444" {...props} />
+  ),
+
+  /**
+   * Morphing hamburger to X
+   */
+  MenuToggle: (props: Omit<AnimatedIconProps, "icon" | "animation">) => (
+    <AnimatedIcon icon="hamburger" animation="morph" {...props} />
+  ),
+
+  /**
+   * Drawing checkmark
+   */
+  CheckDraw: (props: Omit<AnimatedIconProps, "icon" | "animation">) => (
+    <AnimatedIcon icon="check" animation="draw" color="#10b981" {...props} />
+  ),
+
+  /**
+   * Bouncing star
+   */
+  BounceStar: (props: Omit<AnimatedIconProps, "icon" | "animation">) => (
+    <AnimatedIcon icon="star" animation="bounce" color="#fbbf24" {...props} />
+  ),
+
+  /**
+   * Interactive arrow
+   */
+  HoverArrow: (props: Omit<AnimatedIconProps, "icon" | "hoverAnimation">) => (
+    <AnimatedIcon icon="arrow" hoverAnimation="scale" interactive {...props} />
+  ),
+}
+
+export default AnimatedIcon