shadcn/app/public/registry/styles/default/animated-number.json

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