@enact-ui/animate 0.1.0 → 0.2.0

package/dist/hooks/use-component-animation.js

@@ -0,0 +1,231 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+/**
+ * useComponentAnimation Hook
+ *
+ * Hook for applying component animation presets with motion style support.
+ * Provides a clean API for animating components with Motion library.
+ *
+ * @packageDocumentation
+ */
+import { useEffect, useMemo, useState } from "react";
+// =============================================================================
+// Reduced Motion Detection
+// =============================================================================
+/**
+ * Hook to detect if user prefers reduced motion.
+ * Updates reactively when the preference changes.
+ */
+function useReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    });
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const handler = (e) => {
+            setPrefersReducedMotion(e.matches);
+        };
+        mediaQuery.addEventListener("change", handler);
+        return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    return prefersReducedMotion;
+}
+// =============================================================================
+// Reduced Motion Variants
+// =============================================================================
+/**
+ * Creates disabled animation props (no animation).
+ */
+function createDisabledProps(skipInitial) {
+    return {
+        initial: skipInitial ? false : { opacity: 1 },
+        animate: { opacity: 1 },
+        exit: { opacity: 1 },
+        transition: { type: "tween", duration: 0 },
+    };
+}
+// =============================================================================
+// Main Hook
+// =============================================================================
+/**
+ * Hook for applying component animation presets.
+ *
+ * Provides Motion library compatible animation props that:
+ * - Apply the selected motion style (subtle, standard, bold, playful)
+ * - Support customization via options
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply (defaults to "standard")
+ * @param options - Additional customization options
+ * @returns Animation props for Motion library components
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { useComponentAnimation, fadeIn } from "@enact-ui/animate";
+ *
+ * function MyComponent() {
+ *   const animation = useComponentAnimation(fadeIn, "standard");
+ *
+ *   return (
+ *     <motion.div {...animation}>
+ *       Content
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With AnimatePresence for exit animations
+ * import { AnimatePresence, motion } from "motion/react";
+ * import { useComponentAnimation, slideUp } from "@enact-ui/animate";
+ *
+ * function Modal({ isOpen, children }) {
+ *   const animation = useComponentAnimation(slideUp, "bold");
+ *
+ *   return (
+ *     <AnimatePresence>
+ *       {isOpen && (
+ *         <motion.div {...animation}>
+ *           {children}
+ *         </motion.div>
+ *       )}
+ *     </AnimatePresence>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom options
+ * const animation = useComponentAnimation(slideUp, "playful", {
+ *   distance: 40,
+ *   delay: 100,
+ *   useSpring: true,
+ * });
+ * ```
+ */
+export function useComponentAnimation(preset, style = "standard", options = {}) {
+    const { enabled = true, skipInitial = false, ...presetOptions } = options;
+    const prefersReducedMotion = useReducedMotion();
+    // Memoize presetOptions to avoid unnecessary re-renders
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Using JSON.stringify for deep comparison
+    const memoizedPresetOptions = useMemo(() => presetOptions, [JSON.stringify(presetOptions)]);
+    const animationProps = useMemo(() => {
+        if (!enabled) {
+            return createDisabledProps(skipInitial);
+        }
+        const props = preset.getProps(style, memoizedPresetOptions);
+        if (skipInitial) {
+            return {
+                ...props,
+                initial: false,
+            };
+        }
+        return props;
+    }, [preset, style, memoizedPresetOptions, enabled, skipInitial]);
+    return {
+        ...animationProps,
+        prefersReducedMotion,
+        isEnabled: enabled,
+    };
+}
+/**
+ * Hook for applying animation props with a delay.
+ *
+ * Useful for staggering animations without using variants.
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply
+ * @param index - The index of this item (for calculating delay)
+ * @param options - Additional customization options
+ * @returns Animation props with calculated delay
+ *
+ * @example
+ * ```tsx
+ * function ListItem({ index, children }) {
+ *   const animation = useDelayedAnimation(fadeIn, "standard", index, {
+ *     delayMultiplier: 50, // 50ms between each item
+ *   });
+ *
+ *   return (
+ *     <motion.li {...animation}>
+ *       {children}
+ *     </motion.li>
+ *   );
+ * }
+ * ```
+ */
+export function useDelayedAnimation(preset, style = "standard", index, options = {}) {
+    const { delayMultiplier = 50, maxDelay = 500, ...restOptions } = options;
+    const calculatedDelay = Math.min(index * delayMultiplier, maxDelay);
+    return useComponentAnimation(preset, style, {
+        ...restOptions,
+        delay: (restOptions.delay ?? 0) + calculatedDelay,
+    });
+}
+/**
+ * Hook that returns animation props as a function for use with variants.
+ *
+ * Useful when you need to pass animation config to Motion's variants system.
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply
+ * @param options - Additional customization options
+ * @returns Object containing variants and transition
+ *
+ * @example
+ * ```tsx
+ * function Container({ children }) {
+ *   const { variants, transition } = useAnimationVariants(fadeIn, "standard");
+ *
+ *   return (
+ *     <motion.div
+ *       initial="initial"
+ *       animate="animate"
+ *       exit="exit"
+ *       variants={variants}
+ *       transition={transition}
+ *     >
+ *       {children}
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ */
+export function useAnimationVariants(preset, style = "standard", options = {}) {
+    const { enabled = true, ...presetOptions } = options;
+    // Memoize presetOptions to avoid unnecessary re-renders
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Using JSON.stringify for deep comparison
+    const memoizedPresetOptions = useMemo(() => presetOptions, [JSON.stringify(presetOptions)]);
+    return useMemo(() => {
+        if (!enabled) {
+            return {
+                variants: {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                },
+                transition: { type: "tween", duration: 0.15 },
+            };
+        }
+        const props = preset.getProps(style, memoizedPresetOptions);
+        return {
+            variants: {
+                initial: props.initial,
+                animate: props.animate,
+                exit: (props.exit ?? props.initial),
+            },
+            transition: props.transition,
+        };
+    }, [preset, style, memoizedPresetOptions, enabled]);
+}
+// =============================================================================
+// Re-exports for convenience
+// =============================================================================
+export { useReducedMotion };
+//# sourceMappingURL=use-component-animation.js.map

package/dist/hooks/use-component-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-animation.js","sourceRoot":"","sources":["../../src/hooks/use-component-animation.ts"],"names":[],"mappings":"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"}

package/dist/hooks/use-count-up.d.ts

@@ -0,0 +1,111 @@
+import type { MotionStyle } from "../presets/motion-styles";
+/**
+ * Easing function type for count-up animation.
+ */
+export type CountUpEasing = "linear" | "easeOut" | "easeOutExpo" | "easeInOut" | "spring";
+/**
+ * Options for the useCountUp hook.
+ */
+export interface UseCountUpOptions {
+    /** Starting value. Defaults to 0. */
+    from?: number;
+    /** Target value to count to. Required. */
+    to: number;
+    /** Duration in milliseconds. Defaults to motion style duration. */
+    duration?: number;
+    /** Motion style to use for timing. Defaults to "standard". */
+    motionStyle?: MotionStyle;
+    /** Easing function. Defaults to "easeOutExpo". */
+    easing?: CountUpEasing;
+    /** Number of decimal places. Defaults to 0. */
+    decimals?: number;
+    /** Whether to use locale-specific formatting (e.g., 1,234). Defaults to true. */
+    useLocale?: boolean;
+    /** Locale for formatting. Defaults to browser locale. */
+    locale?: string;
+    /** Custom formatter function. Overrides decimals and locale settings. */
+    formatter?: (value: number) => string;
+    /** Delay before starting animation in ms. Defaults to 0. */
+    delay?: number;
+    /** Whether to start animation immediately. Defaults to true. */
+    autoStart?: boolean;
+    /** Callback when animation completes. */
+    onComplete?: () => void;
+    /** Callback on each value update. */
+    onUpdate?: (value: number) => void;
+    /** Prefix to add before the number (e.g., "$"). */
+    prefix?: string;
+    /** Suffix to add after the number (e.g., "%"). */
+    suffix?: string;
+    /** Whether animation is enabled. Defaults to true. */
+    enabled?: boolean;
+}
+/**
+ * Return type for the useCountUp hook.
+ */
+export interface UseCountUpResult {
+    /** Current animated value (raw number). */
+    value: number;
+    /** Formatted display string with prefix/suffix. */
+    displayValue: string;
+    /** Whether animation is currently running. */
+    isAnimating: boolean;
+    /** Whether animation has completed. */
+    isComplete: boolean;
+    /** Start or restart the animation. */
+    start: () => void;
+    /** Pause the animation at current value. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Reset to starting value. */
+    reset: () => void;
+    /** Update the target value (will animate to new value). */
+    update: (newTo: number) => void;
+    /** Whether reduced motion is preferred. */
+    prefersReducedMotion: boolean;
+}
+/**
+ * Hook for animating numbers from one value to another.
+ *
+ * Features:
+ * - Configurable duration and easing
+ * - Respects reduced motion preferences
+ * - Locale-aware number formatting
+ * - Start/pause/resume/reset controls
+ * - Prefix and suffix support
+ * - Custom formatter support
+ *
+ * @param options - Configuration options for the animation
+ * @returns Object with current value, display string, and control functions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const { displayValue } = useCountUp({ to: 1000 });
+ * return <span>{displayValue}</span>;
+ *
+ * // With formatting
+ * const { displayValue } = useCountUp({
+ *   to: 99.5,
+ *   decimals: 1,
+ *   suffix: "%",
+ *   duration: 1500,
+ * });
+ *
+ * // Currency
+ * const { displayValue } = useCountUp({
+ *   to: 1234567,
+ *   prefix: "$",
+ *   useLocale: true,
+ * });
+ *
+ * // Manual control
+ * const { displayValue, start, reset, isAnimating } = useCountUp({
+ *   to: 500,
+ *   autoStart: false,
+ * });
+ * ```
+ */
+export declare function useCountUp(options: UseCountUpOptions): UseCountUpResult;
+//# sourceMappingURL=use-count-up.d.ts.map

package/dist/hooks/use-count-up.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-count-up.d.ts","sourceRoot":"","sources":["../../src/hooks/use-count-up.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAO5D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE1F;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kDAAkD;IAClD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,iCAAiC;IACjC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,2DAA2D;IAC3D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2CAA2C;IAC3C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AA8DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAyLvE"}

package/dist/hooks/use-count-up.js

@@ -0,0 +1,246 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+/**
+ * useCountUp Hook
+ *
+ * Animates a number from a start value to an end value with configurable
+ * duration, easing, and formatting. Respects reduced motion preferences.
+ *
+ * @packageDocumentation
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getDuration } from "../presets/motion-styles";
+// =============================================================================
+// Easing Functions
+// =============================================================================
+const easingFunctions = {
+    linear: (t) => t,
+    easeOut: (t) => 1 - (1 - t) ** 3,
+    easeOutExpo: (t) => (t === 1 ? 1 : 1 - 2 ** (-10 * t)),
+    easeInOut: (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2),
+    spring: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0 ? 0 : t === 1 ? 1 : 2 ** (-10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+};
+// =============================================================================
+// Reduced Motion Detection
+// =============================================================================
+function useReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    });
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const handler = (e) => {
+            setPrefersReducedMotion(e.matches);
+        };
+        mediaQuery.addEventListener("change", handler);
+        return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    return prefersReducedMotion;
+}
+// =============================================================================
+// Default Formatter
+// =============================================================================
+function createDefaultFormatter(decimals, useLocale, locale) {
+    return (value) => {
+        if (useLocale) {
+            return value.toLocaleString(locale, {
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+            });
+        }
+        return value.toFixed(decimals);
+    };
+}
+// =============================================================================
+// useCountUp Hook
+// =============================================================================
+/**
+ * Hook for animating numbers from one value to another.
+ *
+ * Features:
+ * - Configurable duration and easing
+ * - Respects reduced motion preferences
+ * - Locale-aware number formatting
+ * - Start/pause/resume/reset controls
+ * - Prefix and suffix support
+ * - Custom formatter support
+ *
+ * @param options - Configuration options for the animation
+ * @returns Object with current value, display string, and control functions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const { displayValue } = useCountUp({ to: 1000 });
+ * return <span>{displayValue}</span>;
+ *
+ * // With formatting
+ * const { displayValue } = useCountUp({
+ *   to: 99.5,
+ *   decimals: 1,
+ *   suffix: "%",
+ *   duration: 1500,
+ * });
+ *
+ * // Currency
+ * const { displayValue } = useCountUp({
+ *   to: 1234567,
+ *   prefix: "$",
+ *   useLocale: true,
+ * });
+ *
+ * // Manual control
+ * const { displayValue, start, reset, isAnimating } = useCountUp({
+ *   to: 500,
+ *   autoStart: false,
+ * });
+ * ```
+ */
+export function useCountUp(options) {
+    const { from = 0, to, duration: customDuration, motionStyle = "standard", easing = "easeOutExpo", decimals = 0, useLocale = true, locale, formatter: customFormatter, delay = 0, autoStart = true, onComplete, onUpdate, prefix = "", suffix = "", enabled = true, } = options;
+    // Get duration from motion style if not custom (use slow for count-up animations)
+    const duration = customDuration ?? getDuration(motionStyle, "slow");
+    // State
+    const [value, setValue] = useState(from);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isComplete, setIsComplete] = useState(false);
+    // Refs for animation control
+    const animationRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const pausedTimeRef = useRef(null);
+    const currentFromRef = useRef(from);
+    const currentToRef = useRef(to);
+    // Reduced motion
+    const prefersReducedMotion = useReducedMotion();
+    // Formatter
+    const formatter = customFormatter ?? createDefaultFormatter(decimals, useLocale, locale);
+    // Format display value
+    const displayValue = `${prefix}${formatter(value)}${suffix}`;
+    // Cancel animation
+    const cancelAnimation = useCallback(() => {
+        if (animationRef.current !== null) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+    }, []);
+    // Animation frame handler
+    const animate = useCallback((timestamp) => {
+        if (startTimeRef.current === null) {
+            startTimeRef.current = timestamp;
+        }
+        const elapsed = timestamp - startTimeRef.current;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = easingFunctions[easing](progress);
+        const currentValue = currentFromRef.current + (currentToRef.current - currentFromRef.current) * easedProgress;
+        setValue(currentValue);
+        onUpdate?.(currentValue);
+        if (progress < 1) {
+            animationRef.current = requestAnimationFrame(animate);
+        }
+        else {
+            setIsAnimating(false);
+            setIsComplete(true);
+            onComplete?.();
+        }
+    }, [duration, easing, onComplete, onUpdate]);
+    // Start animation
+    const start = useCallback(() => {
+        if (!enabled) {
+            setValue(currentToRef.current);
+            setIsComplete(true);
+            return;
+        }
+        // Handle reduced motion - jump to end value immediately
+        if (prefersReducedMotion) {
+            setValue(currentToRef.current);
+            setIsComplete(true);
+            onComplete?.();
+            return;
+        }
+        cancelAnimation();
+        setIsComplete(false);
+        startTimeRef.current = null;
+        pausedTimeRef.current = null;
+        const startAnimation = () => {
+            setIsAnimating(true);
+            animationRef.current = requestAnimationFrame(animate);
+        };
+        if (delay > 0) {
+            setTimeout(startAnimation, delay);
+        }
+        else {
+            startAnimation();
+        }
+    }, [enabled, prefersReducedMotion, cancelAnimation, animate, delay, onComplete]);
+    // Pause animation
+    const pause = useCallback(() => {
+        if (isAnimating && animationRef.current !== null) {
+            pausedTimeRef.current = performance.now();
+            cancelAnimation();
+            setIsAnimating(false);
+        }
+    }, [isAnimating, cancelAnimation]);
+    // Resume animation
+    const resume = useCallback(() => {
+        if (!isAnimating && !isComplete && pausedTimeRef.current !== null && startTimeRef.current !== null) {
+            // Adjust start time to account for paused duration
+            const pausedDuration = performance.now() - pausedTimeRef.current;
+            startTimeRef.current += pausedDuration;
+            pausedTimeRef.current = null;
+            setIsAnimating(true);
+            animationRef.current = requestAnimationFrame(animate);
+        }
+    }, [isAnimating, isComplete, animate]);
+    // Reset to starting value
+    const reset = useCallback(() => {
+        cancelAnimation();
+        setValue(currentFromRef.current);
+        setIsAnimating(false);
+        setIsComplete(false);
+        startTimeRef.current = null;
+        pausedTimeRef.current = null;
+    }, [cancelAnimation]);
+    // Update target value
+    const update = useCallback((newTo) => {
+        currentFromRef.current = value;
+        currentToRef.current = newTo;
+        start();
+    }, [value, start]);
+    // Auto-start on mount - intentionally only runs once
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to start animation on mount, not on every dependency change
+    useEffect(() => {
+        if (autoStart) {
+            currentFromRef.current = from;
+            currentToRef.current = to;
+            start();
+        }
+        return () => {
+            cancelAnimation();
+        };
+    }, []);
+    // Update target when `to` prop changes
+    useEffect(() => {
+        if (to !== currentToRef.current && isComplete) {
+            update(to);
+        }
+    }, [to, isComplete, update]);
+    return {
+        value,
+        displayValue,
+        isAnimating,
+        isComplete,
+        start,
+        pause,
+        resume,
+        reset,
+        update,
+        prefersReducedMotion,
+    };
+}
+//# sourceMappingURL=use-count-up.js.map

package/dist/hooks/use-count-up.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-count-up.js","sourceRoot":"","sources":["../../src/hooks/use-count-up.ts"],"names":[],"mappings":"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"}