@luxfi/ui 8.0.0 → 8.1.0

package/src/animated-number.tsx

@@ -0,0 +1,485 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { Box } from '@hanzo/ui'
+import { motion, MotionValue, useSpring, useTransform } 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 AnimatedNumberProps {
+  /**
+   * Target value to animate to
+   */
+  value: number
+  /**
+   * Starting value for animation
+   */
+  from?: number
+  /**
+   * Animation duration in milliseconds
+   */
+  duration?: number
+  /**
+   * Number of decimal places
+   */
+  decimals?: number
+  /**
+   * Number format type
+   */
+  format?: "number" | "currency" | "percent"
+  /**
+   * Currency code for currency format
+   */
+  currency?: string
+  /**
+   * Locale for number formatting
+   */
+  locale?: string
+  /**
+   * Easing function
+   */
+  easing?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "bounce" | "elastic"
+  /**
+   * Whether to start animation automatically
+   */
+  autoStart?: boolean
+  /**
+   * Callback when animation completes
+   */
+  onComplete?: (value: number) => void
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Prefix text
+   */
+  prefix?: string
+  /**
+   * Suffix text
+   */
+  suffix?: string
+  /**
+   * Whether to use spring animation
+   */
+  useSpring?: boolean
+  /**
+   * Spring configuration
+   */
+  springConfig?: {
+    tension?: number
+    friction?: number
+    mass?: number
+  }
+  /**
+   * Custom number separator
+   */
+  separator?: string
+  /**
+   * Whether to animate on hover
+   */
+  animateOnHover?: boolean
+  /**
+   * Hover animation value
+   */
+  hoverValue?: number
+}
+
+const easingFunctions = {
+  linear: [0, 0, 1, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+  bounce: [0.68, -0.6, 0.32, 1.6],
+  elastic: [0.175, 0.885, 0.32, 1.275],
+} as const
+
+/**
+ * Custom hook for animated number with various formatting options
+ */
+function useAnimatedNumber(
+  targetValue: number,
+  from: number,
+  duration: number,
+  decimals: number,
+  format: "number" | "currency" | "percent",
+  currency: string,
+  locale: string,
+  easing: keyof typeof easingFunctions,
+  autoStart: boolean,
+  useSpringAnim: boolean,
+  springConfig: { tension?: number; friction?: number; mass?: number },
+  separator?: string
+) {
+  const [displayValue, setDisplayValue] = useState(from)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const animationRef = useRef<number | null>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  // Spring animation
+  const springValue = useSpring(from, {
+    stiffness: springConfig.tension || 100,
+    damping: springConfig.friction || 10,
+    mass: springConfig.mass || 1,
+  })
+
+  // Motion value for non-spring animation
+  const [motionValue, setMotionValue] = useState(from)
+
+  const startAnimation = useCallback(() => {
+    // Skip animation if reduced motion is preferred
+    if (prefersReducedMotion) {
+      setDisplayValue(targetValue)
+      return
+    }
+
+    setIsAnimating(true)
+
+    if (useSpringAnim) {
+      springValue.set(targetValue)
+    } else {
+      // Custom easing animation
+      const startTime = Date.now()
+      const startValue = displayValue
+      const distance = targetValue - startValue
+
+      const animate = () => {
+        const elapsed = Date.now() - startTime
+        const progress = Math.min(elapsed / duration, 1)
+
+        // Apply easing
+        const easedProgress = progress // Will be enhanced with actual easing
+        const currentValue = startValue + distance * easedProgress
+
+        setDisplayValue(currentValue)
+        setMotionValue(currentValue)
+
+        if (progress < 1) {
+          animationRef.current = requestAnimationFrame(animate)
+        } else {
+          setIsAnimating(false)
+          animationRef.current = null
+        }
+      }
+
+      animationRef.current = requestAnimationFrame(animate)
+    }
+  }, [
+    targetValue,
+    displayValue,
+    duration,
+    useSpringAnim,
+    springValue,
+    prefersReducedMotion,
+  ])
+
+  // Cleanup animation frame on unmount
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [])
+
+  // Listen to spring value changes
+  useEffect(() => {
+    if (useSpringAnim) {
+      const unsubscribe = springValue.onChange((latest) => {
+        setDisplayValue(latest)
+        // For springs, consider animation complete when value stops changing significantly
+        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: 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,
+  }
+}
+
+/**
+ * Animated number component with formatting and easing options
+ */
+export function AnimatedNumber({
+  value,
+  from = 0,
+  duration = 2000,
+  decimals = 0,
+  format = "number",
+  currency = "USD",
+  locale = "en-US",
+  easing = "easeOut",
+  autoStart = true,
+  onComplete,
+  className,
+  style,
+  prefix = "",
+  suffix = "",
+  useSpring = false,
+  springConfig = {},
+  separator,
+  animateOnHover = false,
+  hoverValue,
+}: AnimatedNumberProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [animationKey, setAnimationKey] = useState(0)
+
+  const currentValue =
+    animateOnHover && isHovered && hoverValue !== undefined ? hoverValue : value
+
+  const { formattedValue, displayValue, isAnimating, startAnimation } =
+    useAnimatedNumber(
+      currentValue,
+      from,
+      duration,
+      decimals,
+      format,
+      currency,
+      locale,
+      easing,
+      autoStart,
+      useSpring,
+      springConfig,
+      separator
+    )
+
+  // Handle completion callback
+  useEffect(() => {
+    if (
+      !isAnimating &&
+      onComplete &&
+      Math.abs(displayValue - currentValue) < 0.001
+    ) {
+      onComplete(displayValue)
+    }
+  }, [isAnimating, displayValue, currentValue, onComplete])
+
+  // Handle hover animation
+  useEffect(() => {
+    if (animateOnHover && hoverValue !== undefined) {
+      startAnimation()
+    }
+  }, [isHovered, animateOnHover, hoverValue, startAnimation])
+
+  const handleMouseEnter = () => {
+    if (animateOnHover) {
+      setIsHovered(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (animateOnHover) {
+      setIsHovered(false)
+    }
+  }
+
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  return (
+    <motion.span
+      className={cn("inline-block tabular-nums", className)}
+      style={style}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      initial={{ scale: 1 }}
+      animate={
+        !prefersReducedMotion && isAnimating
+          ? { scale: [1, 1.05, 1] }
+          : { scale: 1 }
+      }
+      transition={{ duration: 0.3 }}
+    >
+      {prefix}
+      <motion.span
+        key={animationKey}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {formattedValue}
+      </motion.span>
+      {suffix}
+    </motion.span>
+  )
+}
+
+/**
+ * Counter component with increment/decrement controls
+ */
+export interface AnimatedCounterProps
+  extends Omit<AnimatedNumberProps, "value" | "from"> {
+  /**
+   * Initial value
+   */
+  initialValue?: number
+  /**
+   * Minimum value
+   */
+  min?: number
+  /**
+   * Maximum value
+   */
+  max?: number
+  /**
+   * Step increment
+   */
+  step?: number
+  /**
+   * Whether to show controls
+   */
+  showControls?: boolean
+  /**
+   * Custom increment button
+   */
+  incrementButton?: React.ReactNode
+  /**
+   * Custom decrement button
+   */
+  decrementButton?: React.ReactNode
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: number) => void
+}
+
+export function AnimatedCounter({
+  initialValue = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  showControls = true,
+  incrementButton,
+  decrementButton,
+  onChange,
+  className,
+  ...props
+}: AnimatedCounterProps) {
+  const [currentValue, setCurrentValue] = useState(initialValue)
+
+  const increment = () => {
+    const newValue = Math.min(currentValue + step, max)
+    setCurrentValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const decrement = () => {
+    const newValue = Math.max(currentValue - step, min)
+    setCurrentValue(newValue)
+    onChange?.(newValue)
+  }
+
+  if (!showControls) {
+    return (
+      <AnimatedNumber value={currentValue} className={className} {...props} />
+    )
+  }
+
+  return (
+    <Box className={cn("flex items-center gap-2", className)}>
+      <motion.button
+        onClick={decrement}
+        disabled={currentValue <= min}
+        className="flex h-8 w-8 items-center justify-center rounded border bg-background hover:bg-accent disabled:opacity-50"
+        whileTap={{ scale: 0.95 }}
+        whileHover={{ scale: 1.05 }}
+      >
+        {decrementButton || "−"}
+      </motion.button>
+
+      <AnimatedNumber value={currentValue} {...props} />
+
+      <motion.button
+        onClick={increment}
+        disabled={currentValue >= max}
+        className="flex h-8 w-8 items-center justify-center rounded border bg-background hover:bg-accent disabled:opacity-50"
+        whileTap={{ scale: 0.95 }}
+        whileHover={{ scale: 1.05 }}
+      >
+        {incrementButton || "+"}
+      </motion.button>
+    </Box>
+  )
+}
+
+export default AnimatedNumber

package/src/animated-testimonials.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { AnimatePresence, motion } from "motion/react"
+
+import { cn } from "./utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@hanzo/ui"
+import { Box, Card, CardContent, sx } from '@hanzo/ui'
+interface Testimonial {
+  id: string
+  content: string
+  author: string
+  role?: string
+  company?: string
+  avatar?: string
+}
+
+interface AnimatedTestimonialsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  testimonials: Testimonial[]
+  autoPlay?: boolean
+  duration?: number
+}
+
+const AnimatedTestimonials = React.forwardRef<
+  HTMLDivElement,
+  AnimatedTestimonialsProps
+>(
+  (
+    { className, testimonials, autoPlay = true, duration = 5000, ...props },
+    ref
+  ) => {
+    const [activeIndex, setActiveIndex] = React.useState(0)
+
+    React.useEffect(() => {
+      if (!autoPlay) return
+
+      const interval = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % testimonials.length)
+      }, duration)
+
+      return () => clearInterval(interval)
+    }, [autoPlay, duration, testimonials.length])
+
+    return (
+      <Box
+        ref={ref}
+        className={cn("relative min-h-[200px]", className)}
+        {...props}
+      >
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeIndex}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Card>
+              <CardContent {...sx('pt-6')}>
+                <Box tag="blockquote" className="space-y-4">
+                  <Box tag="p" className="text-lg italic">
+                    "{testimonials[activeIndex].content}"
+                  </Box>
+                  <Box tag="footer" className="flex items-center gap-4">
+                    <Avatar>
+                      <AvatarImage src={testimonials[activeIndex].avatar} />
+                      <AvatarFallback>
+                        {testimonials[activeIndex].author
+                          .slice(0, 2)
+                          .toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <Box tag="cite" className="not-italic font-medium">
+                        {testimonials[activeIndex].author}
+                      </Box>
+                      {testimonials[activeIndex].role && (
+                        <Box tag="p" className="text-sm text-muted-foreground">
+                          {testimonials[activeIndex].role}
+                          {testimonials[activeIndex].company &&
+                            `, ${testimonials[activeIndex].company}`}
+                        </Box>
+                      )}
+                    </div>
+                  </Box>
+                </Box>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </AnimatePresence>
+
+        <Box className="mt-4 flex justify-center gap-2">
+          {testimonials.map((_, index) => (
+            <Box tag="button"
+              key={index}
+              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}`}
+            />
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+AnimatedTestimonials.displayName = "AnimatedTestimonials"
+
+export { AnimatedTestimonials, type Testimonial }