@hanzo/ui 5.3.28 → 5.3.29

package/dist/animation/animated-number.js

@@ -0,0 +1,283 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var react$1 = require('motion/react');
+var utils = require('@/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.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 useAnimatedNumber(targetValue, from, duration, decimals, format, currency, locale, easing, autoStart, useSpringAnim, springConfig, separator) {
+  const [displayValue, setDisplayValue] = react.useState(from);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const animationRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const springValue = react$1.useSpring(from, {
+    stiffness: springConfig.tension || 100,
+    damping: springConfig.friction || 10,
+    mass: springConfig.mass || 1
+  });
+  const [motionValue, setMotionValue] = react.useState(from);
+  const startAnimation = react.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
+  ]);
+  react.useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    if (useSpringAnim) {
+      const unsubscribe = springValue.onChange((latest) => {
+        setDisplayValue(latest);
+        if (Math.abs(latest - targetValue) < 0.01) {
+          setIsAnimating(false);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [springValue, useSpringAnim, targetValue]);
+  react.useEffect(() => {
+    if (autoStart) {
+      startAnimation();
+    }
+  }, [autoStart, startAnimation]);
+  const formattedValue = react.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] = react.useState(false);
+  const [animationKey, setAnimationKey] = react.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
+  );
+  react.useEffect(() => {
+    if (!isAnimating && onComplete && Math.abs(displayValue - currentValue) < 1e-3) {
+      onComplete(displayValue);
+    }
+  }, [isAnimating, displayValue, currentValue, onComplete]);
+  react.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 = usePrefersReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.span,
+    {
+      className: utils.cn("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__ */ jsxRuntime.jsx(
+          react$1.motion.span,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3 },
+            children: formattedValue
+          },
+          animationKey
+        ),
+        suffix
+      ]
+    }
+  );
+}
+__name(AnimatedNumber, "AnimatedNumber");
+function AnimatedCounter({
+  initialValue = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  showControls = true,
+  incrementButton,
+  decrementButton,
+  onChange,
+  className,
+  ...props
+}) {
+  const [currentValue, setCurrentValue] = react.useState(initialValue);
+  const increment = /* @__PURE__ */ __name(() => {
+    const newValue = Math.min(currentValue + step, max);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  }, "increment");
+  const decrement = /* @__PURE__ */ __name(() => {
+    const newValue = Math.max(currentValue - step, min);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  }, "decrement");
+  if (!showControls) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { value: currentValue, className, ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.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 },
+        children: decrementButton || "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { value: currentValue, ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.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 },
+        children: incrementButton || "+"
+      }
+    )
+  ] });
+}
+__name(AnimatedCounter, "AnimatedCounter");
+var number_default = AnimatedNumber;
+
+exports.AnimatedCounter = AnimatedCounter;
+exports.AnimatedNumber = AnimatedNumber;
+exports.default = number_default;

package/dist/animation/animated-number.mjs

@@ -0,0 +1,277 @@
+"use client";
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { motion, useSpring } from 'motion/react';
+import { cn } from '@/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 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 = usePrefersReducedMotion();
+  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 = usePrefersReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      className: cn("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");
+function AnimatedCounter({
+  initialValue = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  showControls = true,
+  incrementButton,
+  decrementButton,
+  onChange,
+  className,
+  ...props
+}) {
+  const [currentValue, setCurrentValue] = useState(initialValue);
+  const increment = /* @__PURE__ */ __name(() => {
+    const newValue = Math.min(currentValue + step, max);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  }, "increment");
+  const decrement = /* @__PURE__ */ __name(() => {
+    const newValue = Math.max(currentValue - step, min);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  }, "decrement");
+  if (!showControls) {
+    return /* @__PURE__ */ jsx(AnimatedNumber, { value: currentValue, className, ...props });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      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 },
+        children: decrementButton || "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatedNumber, { value: currentValue, ...props }),
+    /* @__PURE__ */ jsx(
+      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 },
+        children: incrementButton || "+"
+      }
+    )
+  ] });
+}
+__name(AnimatedCounter, "AnimatedCounter");
+var number_default = AnimatedNumber;
+
+export { AnimatedCounter, AnimatedNumber, number_default as default };

package/dist/animation/animated-testimonials.js

@@ -0,0 +1,97 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var react = require('motion/react');
+var utils = require('@hanzo/ui/lib/utils');
+var avatar = require('@hanzo/ui/primitives/avatar');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var AnimatedTestimonials = React__namespace.forwardRef(
+  ({ className, testimonials, autoPlay = true, duration = 5e3, ...props }, ref) => {
+    const [activeIndex, setActiveIndex] = React__namespace.useState(0);
+    React__namespace.useEffect(() => {
+      if (!autoPlay) return;
+      const interval = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % testimonials.length);
+      }, duration);
+      return () => clearInterval(interval);
+    }, [autoPlay, duration, testimonials.length]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn("relative min-h-[200px]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -20 },
+              transition: { duration: 0.5 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg italic", children: [
+                  '"',
+                  testimonials[activeIndex].content,
+                  '"'
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: testimonials[activeIndex].avatar }),
+                    /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { children: testimonials[activeIndex].author.slice(0, 2).toUpperCase() })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "not-italic font-medium", children: testimonials[activeIndex].author }),
+                    testimonials[activeIndex].role && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      testimonials[activeIndex].role,
+                      testimonials[activeIndex].company && `, ${testimonials[activeIndex].company}`
+                    ] })
+                  ] })
+                ] })
+              ] }) }) })
+            },
+            activeIndex
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setActiveIndex(index),
+              className: utils.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";
+
+exports.AnimatedTestimonials = AnimatedTestimonials;