@enact-ui/animate 0.1.0 → 0.2.0

package/dist/hooks/use-draw-path.d.ts

@@ -0,0 +1,96 @@
+import type { MotionStyle } from "../presets/motion-styles";
+/**
+ * Easing function type for path drawing animation.
+ */
+export type DrawPathEasing = "linear" | "easeOut" | "easeOutExpo" | "easeInOut" | "spring";
+/**
+ * Options for the useDrawPath hook.
+ */
+export interface UseDrawPathOptions {
+    /** Starting path length (0-1). Defaults to 0. */
+    from?: number;
+    /** Target path length (0-1). 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?: DrawPathEasing;
+    /** 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?: (pathLength: number) => void;
+    /** Whether animation is enabled. Defaults to true. */
+    enabled?: boolean;
+}
+/**
+ * Return type for the useDrawPath hook.
+ */
+export interface UseDrawPathResult {
+    /** Current path length (0-1) for strokeDasharray/strokeDashoffset. */
+    pathLength: number;
+    /** 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 SVG path/arc drawing.
+ *
+ * Features:
+ * - Animates pathLength from 0 to 1 (for strokeDasharray/strokeDashoffset)
+ * - Configurable duration and easing
+ * - Respects reduced motion preferences
+ * - Start/pause/resume/reset controls
+ *
+ * @param options - Configuration options for the animation
+ * @returns Object with current pathLength (0-1) and control functions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage for circular progress
+ * const { pathLength } = useDrawPath({ to: 0.75 }); // 75% drawn
+ * return (
+ *   <circle
+ *     strokeDasharray="100"
+ *     strokeDashoffset={100 - pathLength * 100}
+ *     pathLength="100"
+ *   />
+ * );
+ *
+ * // With motion/react
+ * const { pathLength } = useDrawPath({ to: 0.9, duration: 1500 });
+ * return (
+ *   <motion.circle
+ *     strokeDasharray="100"
+ *     strokeDashoffset={100 - pathLength * 100}
+ *     pathLength="100"
+ *   />
+ * );
+ *
+ * // Manual control
+ * const { pathLength, start, reset } = useDrawPath({
+ *   to: 1,
+ *   autoStart: false,
+ * });
+ * ```
+ */
+export declare function useDrawPath(options: UseDrawPathOptions): UseDrawPathResult;
+//# sourceMappingURL=use-draw-path.d.ts.map

package/dist/hooks/use-draw-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-draw-path.d.ts","sourceRoot":"","sources":["../../src/hooks/use-draw-path.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAO5D;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE3F;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,iDAAiD;IACjD,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,cAAc,CAAC;IACxB,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,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAC;IACnB,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;AA8CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CA4K1E"}

package/dist/hooks/use-draw-path.js

@@ -0,0 +1,227 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+/**
+ * useDrawPath Hook
+ *
+ * Animates SVG path/arc drawing by animating pathLength from 0 to 1.
+ * Perfect for trust score rings, progress arcs, and SVG path drawing animations.
+ * 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;
+}
+// =============================================================================
+// useDrawPath Hook
+// =============================================================================
+/**
+ * Hook for animating SVG path/arc drawing.
+ *
+ * Features:
+ * - Animates pathLength from 0 to 1 (for strokeDasharray/strokeDashoffset)
+ * - Configurable duration and easing
+ * - Respects reduced motion preferences
+ * - Start/pause/resume/reset controls
+ *
+ * @param options - Configuration options for the animation
+ * @returns Object with current pathLength (0-1) and control functions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage for circular progress
+ * const { pathLength } = useDrawPath({ to: 0.75 }); // 75% drawn
+ * return (
+ *   <circle
+ *     strokeDasharray="100"
+ *     strokeDashoffset={100 - pathLength * 100}
+ *     pathLength="100"
+ *   />
+ * );
+ *
+ * // With motion/react
+ * const { pathLength } = useDrawPath({ to: 0.9, duration: 1500 });
+ * return (
+ *   <motion.circle
+ *     strokeDasharray="100"
+ *     strokeDashoffset={100 - pathLength * 100}
+ *     pathLength="100"
+ *   />
+ * );
+ *
+ * // Manual control
+ * const { pathLength, start, reset } = useDrawPath({
+ *   to: 1,
+ *   autoStart: false,
+ * });
+ * ```
+ */
+export function useDrawPath(options) {
+    const { from = 0, to, duration: customDuration, motionStyle = "standard", easing = "easeOutExpo", delay = 0, autoStart = true, onComplete, onUpdate, enabled = true, } = options;
+    // Get duration from motion style if not custom
+    const duration = customDuration ?? getDuration(motionStyle, "slow");
+    // State
+    const [pathLength, setPathLength] = 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();
+    // 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 currentPathLength = currentFromRef.current + (currentToRef.current - currentFromRef.current) * easedProgress;
+        setPathLength(currentPathLength);
+        onUpdate?.(currentPathLength);
+        if (progress < 1) {
+            animationRef.current = requestAnimationFrame(animate);
+        }
+        else {
+            setIsAnimating(false);
+            setIsComplete(true);
+            onComplete?.();
+        }
+    }, [duration, easing, onComplete, onUpdate]);
+    // Start animation
+    const start = useCallback(() => {
+        if (!enabled) {
+            setPathLength(currentToRef.current);
+            setIsComplete(true);
+            return;
+        }
+        // Handle reduced motion - jump to end value immediately
+        if (prefersReducedMotion) {
+            setPathLength(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();
+        setPathLength(currentFromRef.current);
+        setIsAnimating(false);
+        setIsComplete(false);
+        startTimeRef.current = null;
+        pausedTimeRef.current = null;
+    }, [cancelAnimation]);
+    // Update target value
+    const update = useCallback((newTo) => {
+        currentFromRef.current = pathLength;
+        currentToRef.current = newTo;
+        start();
+    }, [pathLength, 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 {
+        pathLength,
+        isAnimating,
+        isComplete,
+        start,
+        pause,
+        resume,
+        reset,
+        update,
+        prefersReducedMotion,
+    };
+}
+//# sourceMappingURL=use-draw-path.js.map

package/dist/hooks/use-draw-path.js.map

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

package/dist/hooks/use-motion-preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-motion-preset.d.ts","sourceRoot":"","sources":["../../src/hooks/use-motion-preset.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgF,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAY5I,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAChC,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,kCAAkC;IAClC,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AAED,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IAC/B,8DAA8D;IAC9D,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AAmFD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,mBAAmB,CAAC;AAC/F,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"use-motion-preset.d.ts","sourceRoot":"","sources":["../../src/hooks/use-motion-preset.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgF,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAY5I,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAChC,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,kCAAkC;IAClC,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AAED,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IAC/B,8DAA8D;IAC9D,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,oBAAoB,EAAE,OAAO,CAAC;CACjC;AA+ED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,mBAAmB,CAAC;AAC/F,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,kBAAkB,CAAC"}

package/dist/hooks/use-motion-preset.js

@@ -1,31 +1,27 @@
-// Copyright (c) 2025 Amsterdam Data Labs
 "use client";
 import { useEffect, useMemo, useState } from "react";
 import { getPreset } from "../presets/motion-presets";
-/** Default CSS variable values (fallback if not in browser) */
-const DEFAULT_CSS_VARS = {
-    durationMultiplier: 1,
-    opacityMin: 0.35,
-    opacityMax: 0.6,
-};
 /**
  * Reads motion CSS variables from the document root.
- * Returns default values if not in browser environment.
+ * Throws when not in a browser environment or when required CSS variables are missing/invalid.
  */
 function readCSSVariables() {
     if (typeof window === "undefined") {
-        return DEFAULT_CSS_VARS;
+        throw new Error("useMotionPreset/readCSSVariables requires a browser environment");
     }
     const root = document.documentElement;
     const styles = getComputedStyle(root);
-    const parseFloat_ = (value, fallback) => {
+    const parseMotionVar = (value) => {
         const parsed = parseFloat(value);
-        return Number.isNaN(parsed) ? fallback : parsed;
+        if (Number.isNaN(parsed)) {
+            throw new Error("Motion CSS variable could not be parsed as a number");
+        }
+        return parsed;
     };
     return {
-        durationMultiplier: parseFloat_(styles.getPropertyValue("--motion-duration-multiplier"), DEFAULT_CSS_VARS.durationMultiplier),
-        opacityMin: parseFloat_(styles.getPropertyValue("--motion-opacity-min"), DEFAULT_CSS_VARS.opacityMin),
-        opacityMax: parseFloat_(styles.getPropertyValue("--motion-opacity-max"), DEFAULT_CSS_VARS.opacityMax),
+        durationMultiplier: parseMotionVar(styles.getPropertyValue("--motion-duration-multiplier")),
+        opacityMin: parseMotionVar(styles.getPropertyValue("--motion-opacity-min")),
+        opacityMax: parseMotionVar(styles.getPropertyValue("--motion-opacity-max")),
     };
 }
 /**
@@ -81,8 +77,13 @@ export function useMotionPreset(component, preset) {
             return false;
         return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     });
-    // Track CSS variables (may change with theme)
-    const [cssVars, setCssVars] = useState(DEFAULT_CSS_VARS);
+    // Track CSS variables (read from document; throws in SSR or when vars are invalid)
+    const [cssVars, setCssVars] = useState(() => {
+        if (typeof window === "undefined") {
+            throw new Error("useMotionPreset requires a browser environment");
+        }
+        return readCSSVariables();
+    });
     // Listen for reduced motion preference changes
     useEffect(() => {
         const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

package/dist/hooks/use-motion-preset.js.map

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

package/dist/hooks/use-stagger.d.ts

@@ -0,0 +1,174 @@
+import { type MotionStyle } from "../presets/motion-styles";
+/**
+ * Stagger direction patterns.
+ */
+export type StaggerDirection = "forward" | "reverse" | "center" | "edges" | "random";
+/**
+ * Options for configuring stagger behavior.
+ */
+export interface StaggerOptions {
+    /** Direction of the stagger effect */
+    direction?: StaggerDirection;
+    /** Total number of items (required for some patterns) */
+    totalItems?: number;
+    /** Custom delay multiplier (overrides motion style) */
+    delayMultiplier?: number;
+    /** Maximum total stagger delay in ms */
+    maxDelay?: number;
+    /** Whether to use spring physics for items */
+    useSpring?: boolean;
+    /** Custom delay function for advanced patterns */
+    getDelay?: (index: number, total: number) => number;
+}
+/**
+ * Container animation variants.
+ */
+export interface ContainerVariants {
+    hidden: Record<string, unknown>;
+    visible: Record<string, unknown>;
+}
+/**
+ * Item animation variants.
+ * Visible can be a function for custom delays based on index.
+ */
+export interface ItemVariants {
+    hidden: Record<string, unknown>;
+    visible: Record<string, unknown> | ((custom: number) => Record<string, unknown>);
+}
+/**
+ * Result of the useStagger hook.
+ */
+export interface StaggerResult {
+    /** Variants for the container element */
+    containerVariants: ContainerVariants;
+    /** Variants for child items */
+    itemVariants: ItemVariants;
+    /** Props to spread on the container */
+    containerProps: {
+        initial: string;
+        animate: string;
+        exit?: string;
+        variants: ContainerVariants;
+    };
+    /** Function to get props for an item at a specific index */
+    getItemProps: (index: number) => {
+        variants: ItemVariants;
+        custom: number;
+    };
+}
+/**
+ * Hook for creating staggered animations.
+ *
+ * Creates container and item variants for Motion library that orchestrate
+ * staggered entrance animations for lists and grids.
+ *
+ * @param style - The motion style to apply
+ * @param options - Stagger configuration options
+ * @returns Stagger animation configuration
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { useStagger } from "@enact-ui/animate";
+ *
+ * function AnimatedList({ items }) {
+ *   const { containerProps, getItemProps } = useStagger("standard");
+ *
+ *   return (
+ *     <motion.ul {...containerProps}>
+ *       {items.map((item, index) => (
+ *         <motion.li key={item.id} {...getItemProps(index)}>
+ *           {item.content}
+ *         </motion.li>
+ *       ))}
+ *     </motion.ul>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Center-out stagger pattern
+ * const { containerProps, getItemProps } = useStagger("bold", {
+ *   direction: "center",
+ *   totalItems: items.length,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom delay function for grid layouts
+ * const { containerProps, getItemProps } = useStagger("playful", {
+ *   getDelay: (index, total) => {
+ *     const row = Math.floor(index / columns);
+ *     const col = index % columns;
+ *     return (row + col) * 50; // Diagonal wave
+ *   },
+ * });
+ * ```
+ */
+export declare function useStagger(style?: MotionStyle, options?: StaggerOptions): StaggerResult;
+/**
+ * Creates a grid stagger pattern (diagonal wave).
+ *
+ * @param columns - Number of columns in the grid
+ * @param baseDelay - Base delay between items in ms
+ * @returns Delay function for useStagger
+ *
+ * @example
+ * ```tsx
+ * const { containerProps, getItemProps } = useStagger("standard", {
+ *   getDelay: gridStagger(4, 50),
+ * });
+ * ```
+ */
+export declare function gridStagger(columns: number, baseDelay?: number): (index: number, total: number) => number;
+/**
+ * Creates a wave stagger pattern (sine-based).
+ *
+ * @param amplitude - Wave amplitude (higher = more variation)
+ * @param frequency - Wave frequency
+ * @param baseDelay - Base delay in ms
+ * @returns Delay function for useStagger
+ *
+ * @example
+ * ```tsx
+ * const { containerProps, getItemProps } = useStagger("playful", {
+ *   getDelay: waveStagger(100, 0.5, 30),
+ * });
+ * ```
+ */
+export declare function waveStagger(amplitude?: number, frequency?: number, baseDelay?: number): (index: number, total: number) => number;
+/**
+ * Creates a cascade stagger pattern (accelerating).
+ *
+ * Items start slow and speed up as the animation progresses.
+ *
+ * @param baseDelay - Base delay in ms
+ * @param acceleration - Acceleration factor (0-1)
+ * @returns Delay function for useStagger
+ *
+ * @example
+ * ```tsx
+ * const { containerProps, getItemProps } = useStagger("bold", {
+ *   getDelay: cascadeStagger(80, 0.8),
+ * });
+ * ```
+ */
+export declare function cascadeStagger(baseDelay?: number, acceleration?: number): (index: number, total: number) => number;
+/**
+ * Creates an explode stagger pattern (from center outward, fast).
+ *
+ * @param baseDelay - Base delay in ms
+ * @returns Delay function for useStagger
+ *
+ * @example
+ * ```tsx
+ * const { containerProps, getItemProps } = useStagger("playful", {
+ *   direction: "center",
+ *   getDelay: explodeStagger(20),
+ * });
+ * ```
+ */
+export declare function explodeStagger(baseDelay?: number): (index: number, total: number) => number;
+//# sourceMappingURL=use-stagger.d.ts.map

package/dist/hooks/use-stagger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stagger.d.ts","sourceRoot":"","sources":["../../src/hooks/use-stagger.ts"],"names":[],"mappings":"AAcA,OAAO,EAAkB,KAAK,WAAW,EAAe,MAAM,0BAA0B,CAAC;AAMzF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErF;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B,sCAAsC;IACtC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACvD;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACpF;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,yCAAyC;IACzC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,+BAA+B;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,uCAAuC;IACvC,cAAc,EAAE;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,iBAAiB,CAAC;KAC/B,CAAC;IACF,4DAA4D;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAC7B,QAAQ,EAAE,YAAY,CAAC;QACvB,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AA0CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,WAAwB,EAAE,OAAO,GAAE,cAAmB,GAAG,aAAa,CAgFvG;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,GAAE,MAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAM7G;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,SAAS,GAAE,MAAY,EAAE,SAAS,GAAE,MAAY,EAAE,SAAS,GAAE,MAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAK9I;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,SAAS,GAAE,MAAW,EAAE,YAAY,GAAE,MAAY,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAK3H;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,SAAS,GAAE,MAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAM/F"}