@enact-ui/animate 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,5 +1,819 @@
+// src/hooks/use-count-up.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/presets/motion-styles.ts
+var subtleStyle = {
+  name: "Subtle",
+  description: "Gentle, minimal animations ideal for professional UIs",
+  duration: {
+    fast: 150,
+    normal: 200,
+    slow: 300
+  },
+  spring: {
+    stiffness: 400,
+    damping: 35,
+    mass: 0.8
+  },
+  easing: {
+    enter: "easeOut",
+    exit: "easeIn",
+    interactive: "easeInOut"
+  },
+  staggerDelay: 30
+};
+var standardStyle = {
+  name: "Standard",
+  description: "Balanced, professional animations for general use",
+  duration: {
+    fast: 200,
+    normal: 300,
+    slow: 400
+  },
+  spring: {
+    stiffness: 300,
+    damping: 28,
+    mass: 1
+  },
+  easing: {
+    enter: "easeOut",
+    exit: "easeIn",
+    interactive: "easeInOut"
+  },
+  staggerDelay: 50
+};
+var boldStyle = {
+  name: "Bold",
+  description: "Dramatic, attention-grabbing animations for emphasis",
+  duration: {
+    fast: 250,
+    normal: 400,
+    slow: 600
+  },
+  spring: {
+    stiffness: 250,
+    damping: 22,
+    mass: 1.2
+  },
+  easing: {
+    enter: "easeOut",
+    exit: "easeIn",
+    interactive: "easeInOut"
+  },
+  staggerDelay: 80
+};
+var playfulStyle = {
+  name: "Playful",
+  description: "Bouncy, fun animations with elastic spring physics",
+  duration: {
+    fast: 200,
+    normal: 350,
+    slow: 500
+  },
+  spring: {
+    stiffness: 200,
+    damping: 15,
+    mass: 1
+  },
+  easing: {
+    enter: "easeOut",
+    exit: "easeIn",
+    interactive: "easeInOut"
+  },
+  staggerDelay: 60
+};
+var motionStyles = {
+  subtle: subtleStyle,
+  standard: standardStyle,
+  bold: boldStyle,
+  playful: playfulStyle
+};
+function getMotionStyle(style) {
+  return motionStyles[style];
+}
+function getSpringConfig(style) {
+  return motionStyles[style].spring;
+}
+function getDuration(style, speed) {
+  return motionStyles[style].duration[speed];
+}
+function msToSeconds(ms) {
+  return ms / 1e3;
+}
+
+// src/hooks/use-count-up.ts
+var 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;
+  }
+};
+function useReducedMotion() {
+  const [prefersReducedMotion2, 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 prefersReducedMotion2;
+}
+function createDefaultFormatter(decimals, useLocale, locale) {
+  return (value) => {
+    if (useLocale) {
+      return value.toLocaleString(locale, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      });
+    }
+    return value.toFixed(decimals);
+  };
+}
+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;
+  const duration = customDuration ?? getDuration(motionStyle, "slow");
+  const [value, setValue] = useState(from);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const animationRef = useRef(null);
+  const startTimeRef = useRef(null);
+  const pausedTimeRef = useRef(null);
+  const currentFromRef = useRef(from);
+  const currentToRef = useRef(to);
+  const prefersReducedMotion2 = useReducedMotion();
+  const formatter = customFormatter ?? createDefaultFormatter(decimals, useLocale, locale);
+  const displayValue = `${prefix}${formatter(value)}${suffix}`;
+  const cancelAnimation = useCallback(() => {
+    if (animationRef.current !== null) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  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]
+  );
+  const start = useCallback(() => {
+    if (!enabled) {
+      setValue(currentToRef.current);
+      setIsComplete(true);
+      return;
+    }
+    if (prefersReducedMotion2) {
+      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, prefersReducedMotion2, cancelAnimation, animate, delay, onComplete]);
+  const pause = useCallback(() => {
+    if (isAnimating && animationRef.current !== null) {
+      pausedTimeRef.current = performance.now();
+      cancelAnimation();
+      setIsAnimating(false);
+    }
+  }, [isAnimating, cancelAnimation]);
+  const resume = useCallback(() => {
+    if (!isAnimating && !isComplete && pausedTimeRef.current !== null && startTimeRef.current !== null) {
+      const pausedDuration = performance.now() - pausedTimeRef.current;
+      startTimeRef.current += pausedDuration;
+      pausedTimeRef.current = null;
+      setIsAnimating(true);
+      animationRef.current = requestAnimationFrame(animate);
+    }
+  }, [isAnimating, isComplete, animate]);
+  const reset = useCallback(() => {
+    cancelAnimation();
+    setValue(currentFromRef.current);
+    setIsAnimating(false);
+    setIsComplete(false);
+    startTimeRef.current = null;
+    pausedTimeRef.current = null;
+  }, [cancelAnimation]);
+  const update = useCallback(
+    (newTo) => {
+      currentFromRef.current = value;
+      currentToRef.current = newTo;
+      start();
+    },
+    [value, start]
+  );
+  useEffect(() => {
+    if (autoStart) {
+      currentFromRef.current = from;
+      currentToRef.current = to;
+      start();
+    }
+    return () => {
+      cancelAnimation();
+    };
+  }, []);
+  useEffect(() => {
+    if (to !== currentToRef.current && isComplete) {
+      update(to);
+    }
+  }, [to, isComplete, update]);
+  return {
+    value,
+    displayValue,
+    isAnimating,
+    isComplete,
+    start,
+    pause,
+    resume,
+    reset,
+    update,
+    prefersReducedMotion: prefersReducedMotion2
+  };
+}
+
+// src/components/CountUp.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var CountUp = ({
+  to,
+  from = 0,
+  duration,
+  motionStyle = "standard",
+  easing = "easeOutExpo",
+  decimals = 0,
+  useLocale = true,
+  locale,
+  formatter,
+  delay = 0,
+  autoStart = true,
+  onComplete,
+  onUpdate,
+  prefix = "",
+  suffix = "",
+  enabled = true,
+  children,
+  ...spanProps
+}) => {
+  const hookOptions = {
+    from,
+    to,
+    motionStyle,
+    easing,
+    decimals,
+    useLocale,
+    delay,
+    autoStart,
+    prefix,
+    suffix,
+    enabled,
+    // Only include optional props if they are defined
+    ...duration !== void 0 && { duration },
+    ...locale !== void 0 && { locale },
+    ...formatter !== void 0 && { formatter },
+    ...onComplete !== void 0 && { onComplete },
+    ...onUpdate !== void 0 && { onUpdate }
+  };
+  const { value, displayValue, isAnimating } = useCountUp(hookOptions);
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx(Fragment, { children: children({ value, displayValue, isAnimating }) });
+  }
+  return /* @__PURE__ */ jsx("span", { ...spanProps, children: displayValue });
+};
+
+// src/components/MotionDiv.tsx
+import { motion } from "motion/react";
+
+// src/hooks/use-component-animation.ts
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+function useReducedMotion2() {
+  const [prefersReducedMotion2, setPrefersReducedMotion] = useState2(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect2(() => {
+    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 prefersReducedMotion2;
+}
+function createDisabledProps(skipInitial) {
+  return {
+    initial: skipInitial ? false : { opacity: 1 },
+    animate: { opacity: 1 },
+    exit: { opacity: 1 },
+    transition: { type: "tween", duration: 0 }
+  };
+}
+function useComponentAnimation(preset, style = "standard", options = {}) {
+  const { enabled = true, skipInitial = false, ...presetOptions } = options;
+  const prefersReducedMotion2 = useReducedMotion2();
+  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: prefersReducedMotion2,
+    isEnabled: enabled
+  };
+}
+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
+  });
+}
+function useAnimationVariants(preset, style = "standard", options = {}) {
+  const { enabled = true, ...presetOptions } = options;
+  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]);
+}
+
+// src/components/MotionDiv.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MotionDiv({
+  preset,
+  exit: exitPreset,
+  as = "div",
+  motionStyle = "standard",
+  presetOptions,
+  enabled = true,
+  skipInitial = false,
+  children,
+  ...motionProps
+}) {
+  const animation = useComponentAnimation(preset, motionStyle, {
+    ...presetOptions,
+    enabled,
+    skipInitial
+  });
+  const exitAnimation = exitPreset && typeof exitPreset === "object" && "getProps" in exitPreset && typeof exitPreset.getProps === "function" ? exitPreset.getProps(motionStyle, presetOptions) : null;
+  const { prefersReducedMotion: prefersReducedMotion2, isEnabled, ...animationProps } = animation;
+  const exitValue = exitAnimation ? exitAnimation.initial : void 0;
+  const MotionComponent = motion[as];
+  const finalProps = {
+    ...motionProps,
+    ...animationProps,
+    ...exitValue !== void 0 && { exit: exitValue },
+    "data-reduced-motion": prefersReducedMotion2,
+    "data-animation-enabled": isEnabled
+  };
+  return /* @__PURE__ */ jsx2(MotionComponent, { ...finalProps, children });
+}
+function createMotionProps(preset, style = "standard", options) {
+  return preset.getProps(style, options);
+}
+function createAccessibleMotionProps(preset, style = "standard", options) {
+  return preset.getProps(style, options);
+}
+
+// src/components/StaggerContainer.tsx
+import { Children, cloneElement, isValidElement } from "react";
+
+// src/hooks/use-stagger.ts
+import { useMemo as useMemo2 } from "react";
+function calculateDelay(index, total, direction, baseDelay) {
+  switch (direction) {
+    case "forward":
+      return index * baseDelay;
+    case "reverse":
+      return (total - 1 - index) * baseDelay;
+    case "center": {
+      const center = (total - 1) / 2;
+      const distanceFromCenter = Math.abs(index - center);
+      return distanceFromCenter * baseDelay;
+    }
+    case "edges": {
+      const center = (total - 1) / 2;
+      const distanceFromCenter = Math.abs(index - center);
+      const maxDistance = center;
+      return (maxDistance - distanceFromCenter) * baseDelay;
+    }
+    case "random":
+      return Math.random() * total * baseDelay * 0.5;
+    default:
+      return index * baseDelay;
+  }
+}
+function useStagger(style = "standard", options = {}) {
+  const { direction = "forward", totalItems = 10, delayMultiplier, maxDelay = 1e3, useSpring = true, getDelay: customGetDelay } = options;
+  const styleConfig = getMotionStyle(style);
+  const baseDelay = delayMultiplier ?? styleConfig.staggerDelay;
+  const result = useMemo2(() => {
+    const getDelayForIndex = (index) => {
+      if (customGetDelay) {
+        return Math.min(customGetDelay(index, totalItems), maxDelay);
+      }
+      return Math.min(calculateDelay(index, totalItems, direction, baseDelay), maxDelay);
+    };
+    const containerVariants = {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(baseDelay),
+          delayChildren: 0,
+          when: "beforeChildren"
+        }
+      }
+    };
+    const itemTransition = useSpring ? {
+      type: "spring",
+      stiffness: styleConfig.spring.stiffness,
+      damping: styleConfig.spring.damping,
+      mass: styleConfig.spring.mass
+    } : {
+      type: "tween",
+      duration: msToSeconds(styleConfig.duration.normal),
+      ease: [0.25, 0.1, 0.25, 1]
+    };
+    const itemVariants = {
+      hidden: {
+        opacity: 0,
+        y: 20
+      },
+      visible: (custom) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+          ...itemTransition,
+          delay: msToSeconds(getDelayForIndex(custom))
+        }
+      })
+    };
+    const containerProps = {
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      variants: containerVariants
+    };
+    const getItemProps = (index) => ({
+      variants: itemVariants,
+      custom: index
+    });
+    return {
+      containerVariants,
+      itemVariants,
+      containerProps,
+      getItemProps
+    };
+  }, [direction, totalItems, baseDelay, maxDelay, useSpring, customGetDelay, styleConfig]);
+  return result;
+}
+function gridStagger(columns, baseDelay = 50) {
+  return (index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    return (row + col) * baseDelay;
+  };
+}
+function waveStagger(amplitude = 100, frequency = 0.5, baseDelay = 30) {
+  return (index) => {
+    const wave = Math.sin(index * frequency) * amplitude;
+    return index * baseDelay + Math.abs(wave);
+  };
+}
+function cascadeStagger(baseDelay = 80, acceleration = 0.8) {
+  return (index) => {
+    const factor = acceleration ** index;
+    return baseDelay * (1 - factor) * (1 / (1 - acceleration));
+  };
+}
+function explodeStagger(baseDelay = 20) {
+  return (index, total) => {
+    const center = (total - 1) / 2;
+    const distance = Math.abs(index - center);
+    return distance * baseDelay;
+  };
+}
+
+// src/components/StaggerContainer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StaggerItem({ children, index, variants }) {
+  if (!isValidElement(children)) {
+    return children;
+  }
+  const motionProps = {
+    variants,
+    custom: index,
+    initial: "hidden",
+    animate: "visible",
+    exit: "hidden"
+  };
+  return cloneElement(children, motionProps);
+}
+function StaggerContainer({
+  children,
+  style = "standard",
+  direction = "forward",
+  delay,
+  maxDelay = 1e3,
+  useSpring = true,
+  getDelay,
+  className,
+  as: Element = "div",
+  animate = true
+}) {
+  const childArray = Children.toArray(children);
+  const totalItems = childArray.length;
+  const staggerOptions = {
+    direction,
+    totalItems,
+    ...delay !== void 0 && { delayMultiplier: delay },
+    maxDelay,
+    useSpring,
+    ...getDelay !== void 0 && { getDelay }
+  };
+  const { itemVariants } = useStagger(style, staggerOptions);
+  if (!animate) {
+    return /* @__PURE__ */ jsx3(Element, { className, children });
+  }
+  return /* @__PURE__ */ jsx3(Element, { className, children: childArray.map((child, index) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    return /* @__PURE__ */ jsx3(StaggerItem, { index, variants: itemVariants, children: child }, child.key ?? index);
+  }) });
+}
+function withStagger(WrappedComponent) {
+  return function StaggerWrapper({
+    style = "standard",
+    direction = "forward",
+    delay,
+    maxDelay,
+    useSpring,
+    getDelay,
+    children,
+    ...props
+  }) {
+    const staggerProps = {
+      children: /* @__PURE__ */ jsx3(WrappedComponent, { ...props, children }),
+      style,
+      direction,
+      ...delay !== void 0 && { delay },
+      ...maxDelay !== void 0 && { maxDelay },
+      ...useSpring !== void 0 && { useSpring },
+      ...getDelay !== void 0 && { getDelay }
+    };
+    return /* @__PURE__ */ jsx3(StaggerContainer, { ...staggerProps });
+  };
+}
+
+// src/hooks/use-draw-path.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+var easingFunctions2 = {
+  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;
+  }
+};
+function useReducedMotion3() {
+  const [prefersReducedMotion2, setPrefersReducedMotion] = useState3(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect3(() => {
+    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 prefersReducedMotion2;
+}
+function useDrawPath(options) {
+  const {
+    from = 0,
+    to,
+    duration: customDuration,
+    motionStyle = "standard",
+    easing = "easeOutExpo",
+    delay = 0,
+    autoStart = true,
+    onComplete,
+    onUpdate,
+    enabled = true
+  } = options;
+  const duration = customDuration ?? getDuration(motionStyle, "slow");
+  const [pathLength, setPathLength] = useState3(from);
+  const [isAnimating, setIsAnimating] = useState3(false);
+  const [isComplete, setIsComplete] = useState3(false);
+  const animationRef = useRef2(null);
+  const startTimeRef = useRef2(null);
+  const pausedTimeRef = useRef2(null);
+  const currentFromRef = useRef2(from);
+  const currentToRef = useRef2(to);
+  const prefersReducedMotion2 = useReducedMotion3();
+  const cancelAnimation = useCallback2(() => {
+    if (animationRef.current !== null) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  const animate = useCallback2(
+    (timestamp) => {
+      if (startTimeRef.current === null) {
+        startTimeRef.current = timestamp;
+      }
+      const elapsed = timestamp - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easingFunctions2[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]
+  );
+  const start = useCallback2(() => {
+    if (!enabled) {
+      setPathLength(currentToRef.current);
+      setIsComplete(true);
+      return;
+    }
+    if (prefersReducedMotion2) {
+      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, prefersReducedMotion2, cancelAnimation, animate, delay, onComplete]);
+  const pause = useCallback2(() => {
+    if (isAnimating && animationRef.current !== null) {
+      pausedTimeRef.current = performance.now();
+      cancelAnimation();
+      setIsAnimating(false);
+    }
+  }, [isAnimating, cancelAnimation]);
+  const resume = useCallback2(() => {
+    if (!isAnimating && !isComplete && pausedTimeRef.current !== null && startTimeRef.current !== null) {
+      const pausedDuration = performance.now() - pausedTimeRef.current;
+      startTimeRef.current += pausedDuration;
+      pausedTimeRef.current = null;
+      setIsAnimating(true);
+      animationRef.current = requestAnimationFrame(animate);
+    }
+  }, [isAnimating, isComplete, animate]);
+  const reset = useCallback2(() => {
+    cancelAnimation();
+    setPathLength(currentFromRef.current);
+    setIsAnimating(false);
+    setIsComplete(false);
+    startTimeRef.current = null;
+    pausedTimeRef.current = null;
+  }, [cancelAnimation]);
+  const update = useCallback2(
+    (newTo) => {
+      currentFromRef.current = pathLength;
+      currentToRef.current = newTo;
+      start();
+    },
+    [pathLength, start]
+  );
+  useEffect3(() => {
+    if (autoStart) {
+      currentFromRef.current = from;
+      currentToRef.current = to;
+      start();
+    }
+    return () => {
+      cancelAnimation();
+    };
+  }, []);
+  useEffect3(() => {
+    if (to !== currentToRef.current && isComplete) {
+      update(to);
+    }
+  }, [to, isComplete, update]);
+  return {
+    pathLength,
+    isAnimating,
+    isComplete,
+    start,
+    pause,
+    resume,
+    reset,
+    update,
+    prefersReducedMotion: prefersReducedMotion2
+  };
+}
+
 // src/hooks/use-motion-preset.ts
-import { useEffect, useMemo, useState } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
 
 // src/presets/motion-presets.ts
 var ambientPaths = {
@@ -53,29 +867,27 @@ function applyMotionPreset(preset, baseConfig) {
 }
 
 // src/hooks/use-motion-preset.ts
-var DEFAULT_CSS_VARS = {
-  durationMultiplier: 1,
-  opacityMin: 0.35,
-  opacityMax: 0.6
-};
 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"))
   };
 }
-function computePathsMotion(preset, cssVars, prefersReducedMotion) {
-  if (prefersReducedMotion) {
+function computePathsMotion(preset, cssVars, prefersReducedMotion2) {
+  if (prefersReducedMotion2) {
     return {
       baseDuration: 0,
       opacity: [cssVars.opacityMin, cssVars.opacityMin, cssVars.opacityMin],
@@ -98,8 +910,8 @@ function computePathsMotion(preset, cssVars, prefersReducedMotion) {
     prefersReducedMotion: false
   };
 }
-function computeRaysMotion(preset, cssVars, prefersReducedMotion) {
-  if (prefersReducedMotion) {
+function computeRaysMotion(preset, cssVars, prefersReducedMotion2) {
+  if (prefersReducedMotion2) {
     return {
       cycleDuration: 0,
       intensity: 0,
@@ -115,19 +927,24 @@ function computeRaysMotion(preset, cssVars, prefersReducedMotion) {
   };
 }
 function useMotionPreset(component, preset) {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+  const [prefersReducedMotion2, setPrefersReducedMotion] = useState4(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   });
-  const [cssVars, setCssVars] = useState(DEFAULT_CSS_VARS);
-  useEffect(() => {
+  const [cssVars, setCssVars] = useState4(() => {
+    if (typeof window === "undefined") {
+      throw new Error("useMotionPreset requires a browser environment");
+    }
+    return readCSSVariables();
+  });
+  useEffect4(() => {
     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);
   }, []);
-  useEffect(() => {
+  useEffect4(() => {
     setCssVars(readCSSVariables());
     const observer = new MutationObserver(() => {
       setCssVars(readCSSVariables());
@@ -138,20 +955,1513 @@ function useMotionPreset(component, preset) {
     });
     return () => observer.disconnect();
   }, []);
-  return useMemo(() => {
+  return useMemo3(() => {
     if (component === "paths") {
       const presetConfig2 = getPreset(preset, "paths");
-      return computePathsMotion(presetConfig2, cssVars, prefersReducedMotion);
+      return computePathsMotion(presetConfig2, cssVars, prefersReducedMotion2);
     }
     const presetConfig = getPreset(preset, "rays");
-    return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion);
-  }, [component, preset, cssVars, prefersReducedMotion]);
+    return computeRaysMotion(presetConfig, cssVars, prefersReducedMotion2);
+  }, [component, preset, cssVars, prefersReducedMotion2]);
+}
+
+// src/presets/component-presets.ts
+function createTweenTransition(style, options) {
+  const duration = options?.duration ?? getDuration(style, "normal");
+  return {
+    type: "tween",
+    duration: msToSeconds(duration),
+    ease: [0.25, 0.1, 0.25, 1],
+    // cubic-bezier ease-out
+    delay: options?.delay ? msToSeconds(options.delay) : 0
+  };
+}
+function createSpringTransition(style, options) {
+  const spring = getSpringConfig(style);
+  return {
+    type: "spring",
+    stiffness: spring.stiffness,
+    damping: spring.damping,
+    mass: spring.mass,
+    delay: options?.delay ? msToSeconds(options.delay) : 0
+  };
 }
+function getTransition(style, preferSpring, options) {
+  const useSpring = options?.useSpring ?? preferSpring;
+  return useSpring ? createSpringTransition(style, options) : createTweenTransition(style, options);
+}
+var fadeIn = {
+  metadata: {
+    id: "fadeIn",
+    name: "Fade In",
+    description: "Smooth opacity transition from invisible to visible",
+    useCase: ["entrance", "reveal"],
+    context: ["tooltip", "dropdown", "modal", "notification"],
+    intensity: 2,
+    hasMovement: false
+  },
+  getProps: (style, options) => ({
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: createTweenTransition(style, options)
+  })
+};
+var fadeOut = {
+  metadata: {
+    id: "fadeOut",
+    name: "Fade Out",
+    description: "Smooth opacity transition from visible to invisible",
+    useCase: ["exit"],
+    context: ["tooltip", "dropdown", "modal", "notification"],
+    intensity: 2,
+    hasMovement: false
+  },
+  getProps: (style, options) => ({
+    initial: { opacity: 1 },
+    animate: { opacity: 0 },
+    transition: createTweenTransition(style, options)
+  })
+};
+var DEFAULT_SLIDE_DISTANCE = 20;
+var slideUp = {
+  metadata: {
+    id: "slideUp",
+    name: "Slide Up",
+    description: "Element slides upward while fading in",
+    useCase: ["entrance", "reveal"],
+    context: ["modal", "card", "list-item", "notification"],
+    intensity: 3,
+    hasMovement: true,
+    direction: "up"
+  },
+  getProps: (style, options) => {
+    const distance = options?.distance ?? DEFAULT_SLIDE_DISTANCE;
+    return {
+      initial: { opacity: 0, y: distance },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: distance },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var slideDown = {
+  metadata: {
+    id: "slideDown",
+    name: "Slide Down",
+    description: "Element slides downward while fading in",
+    useCase: ["entrance", "reveal"],
+    context: ["dropdown", "tooltip", "notification"],
+    intensity: 3,
+    hasMovement: true,
+    direction: "down"
+  },
+  getProps: (style, options) => {
+    const distance = options?.distance ?? DEFAULT_SLIDE_DISTANCE;
+    return {
+      initial: { opacity: 0, y: -distance },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -distance },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var slideLeft = {
+  metadata: {
+    id: "slideLeft",
+    name: "Slide Left",
+    description: "Element slides leftward while fading in",
+    useCase: ["entrance", "transition"],
+    context: ["drawer", "page", "section"],
+    intensity: 3,
+    hasMovement: true,
+    direction: "left"
+  },
+  getProps: (style, options) => {
+    const distance = options?.distance ?? DEFAULT_SLIDE_DISTANCE;
+    return {
+      initial: { opacity: 0, x: distance },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -distance },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var slideRight = {
+  metadata: {
+    id: "slideRight",
+    name: "Slide Right",
+    description: "Element slides rightward while fading in",
+    useCase: ["entrance", "transition"],
+    context: ["drawer", "page", "section"],
+    intensity: 3,
+    hasMovement: true,
+    direction: "right"
+  },
+  getProps: (style, options) => {
+    const distance = options?.distance ?? DEFAULT_SLIDE_DISTANCE;
+    return {
+      initial: { opacity: 0, x: -distance },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: distance },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var DEFAULT_SCALE_FROM = 0.95;
+var DEFAULT_ZOOM_SCALE = 0.5;
+var scale = {
+  metadata: {
+    id: "scale",
+    name: "Scale",
+    description: "Subtle scale transition with fade",
+    useCase: ["entrance", "emphasis"],
+    context: ["modal", "card", "notification"],
+    intensity: 3,
+    hasMovement: true,
+    direction: "in"
+  },
+  getProps: (style, options) => {
+    const scaleFrom = options?.scale ?? DEFAULT_SCALE_FROM;
+    return {
+      initial: { opacity: 0, scale: scaleFrom },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: scaleFrom },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var zoomIn = {
+  metadata: {
+    id: "zoomIn",
+    name: "Zoom In",
+    description: "Dramatic zoom from small to full size",
+    useCase: ["entrance", "emphasis"],
+    context: ["hero", "modal", "card"],
+    intensity: 4,
+    hasMovement: true,
+    direction: "in"
+  },
+  getProps: (style, options) => {
+    const scaleFrom = options?.scale ?? DEFAULT_ZOOM_SCALE;
+    return {
+      initial: { opacity: 0, scale: scaleFrom },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: scaleFrom },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var zoomOut = {
+  metadata: {
+    id: "zoomOut",
+    name: "Zoom Out",
+    description: "Scale from larger to normal size",
+    useCase: ["entrance", "emphasis"],
+    context: ["hero", "modal"],
+    intensity: 4,
+    hasMovement: true,
+    direction: "out"
+  },
+  getProps: (style, options) => {
+    const scaleTo = options?.scale ?? 1.1;
+    return {
+      initial: { opacity: 0, scale: scaleTo },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: scaleTo },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var DEFAULT_ROTATION = 10;
+var rotate = {
+  metadata: {
+    id: "rotate",
+    name: "Rotate",
+    description: "Subtle rotation animation with fade",
+    useCase: ["entrance", "emphasis"],
+    context: ["card", "notification"],
+    intensity: 4,
+    hasMovement: true
+  },
+  getProps: (style, options) => {
+    const rotation = options?.rotation ?? DEFAULT_ROTATION;
+    return {
+      initial: { opacity: 0, rotate: -rotation },
+      animate: { opacity: 1, rotate: 0 },
+      exit: { opacity: 0, rotate: rotation },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var slideUpScale = {
+  metadata: {
+    id: "slideUpScale",
+    name: "Slide Up & Scale",
+    description: "Combines upward slide with subtle scale",
+    useCase: ["entrance", "emphasis"],
+    context: ["hero", "card", "section"],
+    intensity: 4,
+    hasMovement: true,
+    direction: "up"
+  },
+  getProps: (style, options) => {
+    const distance = options?.distance ?? DEFAULT_SLIDE_DISTANCE;
+    const scaleFrom = options?.scale ?? 0.98;
+    return {
+      initial: { opacity: 0, y: distance, scale: scaleFrom },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: distance, scale: scaleFrom },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var flip = {
+  metadata: {
+    id: "flip",
+    name: "Flip",
+    description: "3D flip animation on the X axis",
+    useCase: ["entrance", "transition"],
+    context: ["card"],
+    intensity: 5,
+    hasMovement: true
+  },
+  getProps: (style, options) => {
+    const rotation = options?.rotation ?? 90;
+    return {
+      initial: { opacity: 0, rotateX: rotation },
+      animate: { opacity: 1, rotateX: 0 },
+      exit: { opacity: 0, rotateX: -rotation },
+      transition: getTransition(style, true, options)
+    };
+  }
+};
+var expand = {
+  metadata: {
+    id: "expand",
+    name: "Expand",
+    description: "Height expansion animation",
+    useCase: ["entrance", "reveal"],
+    context: ["section"],
+    intensity: 2,
+    hasMovement: true,
+    direction: "down"
+  },
+  getProps: (style, options) => ({
+    initial: { opacity: 0, height: 0 },
+    animate: { opacity: 1, height: "auto" },
+    exit: { opacity: 0, height: 0 },
+    transition: createTweenTransition(style, options)
+  })
+};
+var componentPresets = {
+  fadeIn,
+  fadeOut,
+  slideUp,
+  slideDown,
+  slideLeft,
+  slideRight,
+  scale,
+  zoomIn,
+  zoomOut,
+  rotate,
+  slideUpScale,
+  flip,
+  expand
+};
+function getComponentPreset(name) {
+  return componentPresets[name];
+}
+function getPresetsByUseCase(useCase) {
+  return Object.values(componentPresets).filter((preset) => preset.metadata.useCase.includes(useCase));
+}
+function getPresetsByContext(context) {
+  return Object.values(componentPresets).filter((preset) => preset.metadata.context.includes(context));
+}
+
+// src/presets/micro-interactions.ts
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getReducedMotionProps() {
+  return {};
+}
+var buttonPress = {
+  name: "buttonPress",
+  description: "Scale down slightly on press, spring back on release",
+  useCase: ["buttons", "clickable cards", "list items", "interactive elements", "call-to-action"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const scaleAmount = style === "subtle" ? 0.98 : style === "playful" ? 0.92 : 0.95;
+    return {
+      whileTap: {
+        scale: scaleAmount
+      },
+      whileHover: {
+        scale: style === "subtle" ? 1.01 : 1.02
+      },
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness,
+        damping: config.spring.damping,
+        mass: config.spring.mass
+      }
+    };
+  }
+};
+var cardHover = {
+  name: "cardHover",
+  description: "Subtle lift with shadow enhancement on hover",
+  useCase: ["cards", "tiles", "panels", "content blocks", "media items", "product listings"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const liftAmount = style === "subtle" ? -2 : style === "playful" ? -8 : -4;
+    const shadowIntensity = style === "subtle" ? 0.08 : style === "playful" ? 0.2 : 0.12;
+    return {
+      whileHover: {
+        y: liftAmount,
+        boxShadow: `0 ${Math.abs(liftAmount) * 2}px ${Math.abs(liftAmount) * 4}px rgba(0, 0, 0, ${shadowIntensity})`
+      },
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness,
+        damping: config.spring.damping,
+        mass: config.spring.mass
+      }
+    };
+  }
+};
+var iconSpin = {
+  name: "iconSpin",
+  description: "360 degree rotation animation",
+  useCase: ["refresh buttons", "sync icons", "loading indicators", "settings icons", "interactive icons"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    return {
+      whileTap: {
+        rotate: 360
+      },
+      whileHover: {
+        rotate: style === "playful" ? 15 : 5
+      },
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness * 0.8,
+        damping: config.spring.damping,
+        mass: config.spring.mass
+      }
+    };
+  }
+};
+var pulse = {
+  name: "pulse",
+  description: "Scale pulse animation with breathing effect",
+  useCase: ["notifications", "live indicators", "attention grabbers", "status badges", "loading states"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const scaleRange = style === "subtle" ? 1.03 : style === "playful" ? 1.12 : 1.06;
+    return {
+      initial: {
+        scale: 1
+      },
+      animate: {
+        scale: [1, scaleRange, 1]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.slow),
+        repeat: Infinity,
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var shake = {
+  name: "shake",
+  description: "Horizontal shake animation for error states",
+  useCase: ["error states", "invalid inputs", "denied actions", "form validation", "authentication failures"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const shakeDistance = style === "subtle" ? 4 : style === "playful" ? 12 : 8;
+    return {
+      initial: {
+        x: 0
+      },
+      animate: {
+        x: [0, -shakeDistance, shakeDistance, -shakeDistance, shakeDistance, 0]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.fast),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var wiggle = {
+  name: "wiggle",
+  description: "Playful rotation wiggle animation",
+  useCase: ["playful interfaces", "gamification", "attention indicators", "celebration elements", "decorative icons"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const wiggleAngle = style === "subtle" ? 3 : style === "playful" ? 12 : 6;
+    return {
+      whileHover: {
+        rotate: [0, -wiggleAngle, wiggleAngle, -wiggleAngle, wiggleAngle, 0]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.normal),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var heartbeat = {
+  name: "heartbeat",
+  description: "Double-pulse heartbeat pattern animation",
+  useCase: ["like buttons", "health apps", "love reactions", "favorite indicators", "activity monitors"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const pulseScale = style === "subtle" ? 1.1 : style === "playful" ? 1.3 : 1.2;
+    return {
+      initial: {
+        scale: 1
+      },
+      animate: {
+        scale: [1, pulseScale, 1, pulseScale * 0.95, 1]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.slow * 1.5),
+        repeat: Infinity,
+        repeatDelay: msToSeconds(config.duration.normal),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var rubberBand = {
+  name: "rubberBand",
+  description: "Elastic stretch and snap back animation",
+  useCase: ["emphasis animations", "attention grabbers", "playful buttons", "celebration effects", "interactive feedback"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const stretchX = style === "subtle" ? 1.05 : style === "playful" ? 1.25 : 1.15;
+    const stretchY = style === "subtle" ? 0.95 : style === "playful" ? 0.75 : 0.85;
+    return {
+      whileTap: {
+        scaleX: [1, stretchX, 0.95, 1.05, 1],
+        scaleY: [1, stretchY, 1.05, 0.95, 1]
+      },
+      whileHover: {
+        scaleX: 1.02,
+        scaleY: 0.98
+      },
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness * 0.6,
+        damping: config.spring.damping * 0.5,
+        mass: config.spring.mass
+      }
+    };
+  }
+};
+var scale2 = {
+  name: "scale",
+  description: "Scale up animation for selection feedback",
+  useCase: ["checkboxes", "toggles", "radio buttons", "selection states", "activation feedback"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const scaleAmount = style === "subtle" ? 1.05 : style === "playful" ? 1.2 : 1.1;
+    return {
+      initial: {
+        scale: 0.8,
+        opacity: 0
+      },
+      animate: {
+        scale: [0.8, scaleAmount, 1],
+        opacity: 1
+      },
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness,
+        damping: config.spring.damping,
+        mass: config.spring.mass
+      }
+    };
+  }
+};
+var shimmer = {
+  name: "shimmer",
+  description: "Gradient shimmer effect that slides across the element",
+  useCase: ["skeleton loading", "placeholder content", "progress indicators", "loading states", "content placeholders"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const duration = style === "subtle" ? 2 : style === "playful" ? 1.2 : 1.5;
+    return {
+      initial: {
+        backgroundPosition: "200% 0"
+      },
+      animate: {
+        backgroundPosition: ["-200% 0", "200% 0"]
+      },
+      transition: {
+        duration,
+        repeat: Infinity,
+        ease: config.easing.exit,
+        repeatDelay: 0.5
+      }
+    };
+  }
+};
+var glowPulse = {
+  name: "glowPulse",
+  description: "Glowing pulse effect for emphasis and AI indicators",
+  useCase: ["AI content indicators", "featured items", "premium elements", "special badges", "magical effects"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const glowIntensity = style === "subtle" ? 8 : style === "playful" ? 20 : 12;
+    const glowColor = "rgba(99, 102, 241, 0.6)";
+    return {
+      initial: {
+        boxShadow: `0 0 0 rgba(99, 102, 241, 0)`
+      },
+      animate: {
+        boxShadow: [`0 0 0 rgba(99, 102, 241, 0)`, `0 0 ${glowIntensity}px ${glowColor}`, `0 0 0 rgba(99, 102, 241, 0)`]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.slow * 1.5),
+        repeat: Infinity,
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var progressFill = {
+  name: "progressFill",
+  description: "Animated fill from 0% to target width for progress bars",
+  useCase: ["progress bars", "completion indicators", "skill bars", "loading progress", "data visualization"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const duration = style === "subtle" ? 0.6 : style === "playful" ? 1.2 : 0.8;
+    return {
+      initial: {
+        scaleX: 0
+      },
+      animate: {
+        scaleX: 1
+      },
+      transition: {
+        duration,
+        ease: config.easing.exit
+      }
+    };
+  }
+};
+var checkmarkDraw = {
+  name: "checkmarkDraw",
+  description: "Animated checkmark draw effect for success states",
+  useCase: ["success confirmations", "completed tasks", "checkboxes", "form submissions", "achievement unlocks"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const duration = style === "subtle" ? config.duration.fast : style === "playful" ? config.duration.slow : config.duration.normal;
+    return {
+      initial: {
+        pathLength: 0,
+        opacity: 0
+      },
+      animate: {
+        pathLength: 1,
+        opacity: 1
+      },
+      transition: {
+        duration: msToSeconds(duration),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var successFlash = {
+  name: "successFlash",
+  description: "Brief success highlight flash animation",
+  useCase: ["success toasts", "inline confirmations", "save indicators", "completion feedback", "achievement notifications"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const scale3 = style === "subtle" ? 1.02 : style === "playful" ? 1.08 : 1.05;
+    return {
+      initial: {
+        scale: 1,
+        backgroundColor: "transparent"
+      },
+      animate: {
+        scale: [1, scale3, 1],
+        backgroundColor: ["transparent", "var(--color-surface-success-subtle)", "transparent"]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.fast),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var badgePop = {
+  name: "badgePop",
+  description: "Pop animation for badge count changes",
+  useCase: ["notification badges", "count indicators", "numeric updates", "inventory changes", "score updates"],
+  getProps: (style) => {
+    if (prefersReducedMotion()) return getReducedMotionProps();
+    const config = getMotionStyle(style);
+    const scale3 = style === "subtle" ? 1.15 : style === "playful" ? 1.4 : 1.25;
+    return {
+      initial: {
+        scale: 0,
+        opacity: 0
+      },
+      animate: {
+        scale: [0, scale3, 1],
+        opacity: [0, 1, 1]
+      },
+      transition: {
+        duration: msToSeconds(config.duration.fast),
+        ease: config.easing.interactive
+      }
+    };
+  }
+};
+var microInteractions = {
+  buttonPress,
+  cardHover,
+  iconSpin,
+  pulse,
+  scale: scale2,
+  shake,
+  wiggle,
+  heartbeat,
+  rubberBand,
+  shimmer,
+  glowPulse,
+  progressFill,
+  checkmarkDraw,
+  successFlash,
+  badgePop
+};
+function getMicroInteraction(name) {
+  return microInteractions[name];
+}
+function getMicroInteractionNames() {
+  return Object.keys(microInteractions);
+}
+function findPresetsForUseCase(useCase) {
+  const searchTerm = useCase.toLowerCase();
+  return Object.values(microInteractions).filter((preset) => preset.useCase.some((uc) => uc.toLowerCase().includes(searchTerm)));
+}
+
+// src/presets/stagger-presets.ts
+function createBaseItemVariants(style) {
+  const config = getMotionStyle(style);
+  return {
+    hidden: {
+      opacity: 0,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: config.spring.stiffness,
+        damping: config.spring.damping,
+        mass: config.spring.mass
+      }
+    }
+  };
+}
+var staggerSequential = {
+  name: "Sequential",
+  description: "Items animate one after another from top to bottom",
+  useCase: ["Navigation menus", "Vertical lists", "Table rows", "Form fields", "Sidebar items"],
+  getDelay(index, _total, style) {
+    const config = getMotionStyle(style);
+    return msToSeconds(config.staggerDelay * index);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay),
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants: createBaseItemVariants
+};
+var staggerReverse = {
+  name: "Reverse",
+  description: "Items animate from bottom to top",
+  useCase: ["Toast notifications", "Chat messages (newest first)", "Bottom-anchored content", "Rising effect animations", "Upward reveals"],
+  getDelay(index, total, style) {
+    const config = getMotionStyle(style);
+    const reverseIndex = total - 1 - index;
+    return msToSeconds(config.staggerDelay * reverseIndex);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay),
+          staggerDirection: -1,
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        y: -20
+      },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness,
+          damping: config.spring.damping,
+          mass: config.spring.mass
+        }
+      }
+    };
+  }
+};
+var staggerCenter = {
+  name: "Center",
+  description: "Items animate from center outward",
+  useCase: ["Hero sections", "Featured content", "Pricing cards", "Centered navigation", "Focus-based reveals"],
+  getDelay(index, total, style) {
+    const config = getMotionStyle(style);
+    const centerIndex = (total - 1) / 2;
+    const distanceFromCenter = Math.abs(index - centerIndex);
+    return msToSeconds(config.staggerDelay * distanceFromCenter);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay),
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        scale: 0.8
+      },
+      visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness,
+          damping: config.spring.damping,
+          mass: config.spring.mass
+        }
+      }
+    };
+  }
+};
+var staggerRandom = {
+  name: "Random",
+  description: "Items animate in random order",
+  useCase: ["Photo galleries", "Tag clouds", "Creative portfolios", "Playful interfaces", "Organic reveals"],
+  getDelay(index, total, style) {
+    const config = getMotionStyle(style);
+    const seed = index * 7919 % total / total;
+    const maxDelay = config.staggerDelay * total;
+    return msToSeconds(seed * maxDelay);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay * 0.3),
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        scale: 0.9,
+        rotate: -5
+      },
+      visible: {
+        opacity: 1,
+        scale: 1,
+        rotate: 0,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness,
+          damping: config.spring.damping,
+          mass: config.spring.mass
+        }
+      }
+    };
+  }
+};
+var staggerGrid = {
+  name: "Grid",
+  description: "2D diagonal wave pattern for grid layouts",
+  useCase: ["Image galleries", "Card grids", "Dashboard widgets", "Product catalogs", "Portfolio items"],
+  getDelay(index, _total, style, columns = 4) {
+    const config = getMotionStyle(style);
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const diagonalIndex = row + col;
+    return msToSeconds(config.staggerDelay * diagonalIndex);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay * 0.8),
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        scale: 0.9,
+        y: 10
+      },
+      visible: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness,
+          damping: config.spring.damping,
+          mass: config.spring.mass
+        }
+      }
+    };
+  }
+};
+var staggerWave = {
+  name: "Wave",
+  description: "Sine-wave based stagger pattern for organic motion",
+  useCase: ["Audio visualizers", "Timeline animations", "Organic reveals", "Music interfaces", "Flowing sequences"],
+  getDelay(index, total, style) {
+    const config = getMotionStyle(style);
+    const wavePosition = index / total * Math.PI * 2;
+    const waveOffset = (Math.sin(wavePosition) + 1) / 2;
+    const baseDelay = config.staggerDelay * index;
+    const waveDelay = config.staggerDelay * waveOffset * 2;
+    return msToSeconds(baseDelay + waveDelay);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay * 0.6),
+          delayChildren: msToSeconds(config.duration.fast * 0.5)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        y: 15,
+        x: -5
+      },
+      visible: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness,
+          damping: config.spring.damping,
+          mass: config.spring.mass
+        }
+      }
+    };
+  }
+};
+var staggerCascade = {
+  name: "Cascade",
+  description: "Fast initial items, progressively slower later ones",
+  useCase: ["Long lists", "Data tables", "Search results", "Infinite scroll content", "Progressive reveals"],
+  getDelay(index, total, style) {
+    const config = getMotionStyle(style);
+    const normalizedIndex = index / Math.max(total - 1, 1);
+    const cascadeFactor = Math.sqrt(normalizedIndex);
+    const maxDuration = config.staggerDelay * total;
+    return msToSeconds(cascadeFactor * maxDuration);
+  },
+  getContainerVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: msToSeconds(config.staggerDelay * 0.4),
+          delayChildren: msToSeconds(config.duration.fast * 0.3)
+        }
+      }
+    };
+  },
+  getItemVariants(style) {
+    const config = getMotionStyle(style);
+    return {
+      hidden: {
+        opacity: 0,
+        x: -10
+      },
+      visible: {
+        opacity: 1,
+        x: 0,
+        transition: {
+          type: "spring",
+          stiffness: config.spring.stiffness + 50,
+          // Slightly snappier
+          damping: config.spring.damping + 5,
+          mass: config.spring.mass * 0.9
+        }
+      }
+    };
+  }
+};
+var staggerPresets = {
+  sequential: staggerSequential,
+  reverse: staggerReverse,
+  center: staggerCenter,
+  random: staggerRandom,
+  grid: staggerGrid,
+  wave: staggerWave,
+  cascade: staggerCascade
+};
+function getStaggerPreset(name) {
+  const preset = staggerPresets[name];
+  if (!preset) {
+    throw new Error(`Unknown stagger preset: ${name}. Available: ${Object.keys(staggerPresets).join(", ")}`);
+  }
+  return preset;
+}
+function calculateStaggerDelays(preset, total, style) {
+  const staggerPreset = getStaggerPreset(preset);
+  return Array.from({ length: total }, (_, index) => staggerPreset.getDelay(index, total, style));
+}
+
+// src/utils/easing.ts
+var linear = [0, 0, 1, 1];
+var easeIn = [0.4, 0, 1, 1];
+var easeOut = [0, 0, 0.2, 1];
+var easeInOut = [0.4, 0, 0.2, 1];
+var easeOutQuart = [0.25, 1, 0.5, 1];
+var easeInOutCubic = [0.65, 0, 0.35, 1];
+var easeOutBack = [0.34, 1.56, 0.64, 1];
+var easeOutExpo = [0.16, 1, 0.3, 1];
+var easeInOutQuint = [0.83, 0, 0.17, 1];
+function createTween(duration, ease) {
+  return {
+    type: "tween",
+    duration,
+    ease: ease ?? easeOut
+  };
+}
+function createTweenFromParams(params) {
+  const result = {
+    type: "tween",
+    duration: params.duration
+  };
+  if (params.ease !== void 0) {
+    return { ...result, ease: params.ease };
+  }
+  return result;
+}
+var durations = {
+  /** Micro-interactions: hover states, small toggles (100ms) */
+  instant: 0.1,
+  /** Quick feedback: button clicks, checkboxes (200ms) */
+  fast: 0.2,
+  /** Standard transitions: most UI elements (300ms) */
+  normal: 0.3,
+  /** Emphasized transitions: modals, drawers (400ms) */
+  slow: 0.4,
+  /** Dramatic transitions: page changes, reveals (600ms) */
+  slower: 0.6
+};
+var easingPresets = {
+  linear,
+  easeIn,
+  easeOut,
+  easeInOut,
+  easeOutQuart,
+  easeInOutCubic,
+  easeOutBack,
+  easeOutExpo,
+  easeInOutQuint
+};
+var tweenPresets = {
+  /** Quick fade for hover states and micro-interactions */
+  instant: createTween(durations.instant, easeOut),
+  /** Snappy transition for interactive elements */
+  fast: createTween(durations.fast, easeOut),
+  /** Balanced transition for most UI elements */
+  normal: createTween(durations.normal, easeOutQuart),
+  /** Smooth transition for modals and overlays */
+  slow: createTween(durations.slow, easeOutQuart),
+  /** Dramatic transition for page-level changes */
+  slower: createTween(durations.slower, easeInOutCubic)
+};
+
+// src/utils/reduced-motion.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var INSTANT_TRANSITION = {
+  duration: 0,
+  delay: 0
+};
+function getReducedMotionVariant(normalVariant, reducedVariant, prefersReducedMotion2) {
+  return prefersReducedMotion2 ? reducedVariant : normalVariant;
+}
+function filterVariantForReducedMotion(variant, options) {
+  const { preserveOpacity = true, preserveColors = true } = options;
+  const filtered = {};
+  for (const [key, value] of Object.entries(variant)) {
+    const isOpacityProperty = key === "opacity";
+    const isColorProperty = key === "color" || key === "backgroundColor" || key === "borderColor" || key === "fill" || key === "stroke";
+    if (preserveOpacity && isOpacityProperty || preserveColors && isColorProperty) {
+      filtered[key] = value;
+    }
+  }
+  return filtered;
+}
+function createReducedMotionProps(props, prefersReducedMotion2, options = {}) {
+  if (!prefersReducedMotion2) {
+    return props;
+  }
+  const { preserveOpacity = true, preserveColors = true, reducedTransition } = options;
+  const transition = reducedTransition ?? INSTANT_TRANSITION;
+  const processVariant = (variant) => {
+    if (variant === void 0 || typeof variant === "string" || typeof variant === "boolean") {
+      return variant;
+    }
+    return filterVariantForReducedMotion(variant, { preserveOpacity, preserveColors });
+  };
+  const processVariants = (variants) => {
+    if (!variants) {
+      return void 0;
+    }
+    const processed = {};
+    for (const [key, variant] of Object.entries(variants)) {
+      processed[key] = filterVariantForReducedMotion(variant, { preserveOpacity, preserveColors });
+    }
+    return processed;
+  };
+  const processNonBooleanVariant = (variant) => {
+    if (variant === void 0 || typeof variant === "string") {
+      return variant;
+    }
+    return filterVariantForReducedMotion(variant, { preserveOpacity, preserveColors });
+  };
+  return {
+    ...props,
+    initial: processVariant(props.initial),
+    animate: processNonBooleanVariant(props.animate),
+    exit: processNonBooleanVariant(props.exit),
+    variants: processVariants(props.variants),
+    transition,
+    // Disable hover/tap/focus animations in reduced motion mode
+    // as they often involve movement
+    whileHover: void 0,
+    whileTap: void 0,
+    whileFocus: void 0,
+    whileDrag: void 0,
+    whileInView: processNonBooleanVariant(props.whileInView)
+  };
+}
+function checkReducedMotion() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+
+// src/utils/select-preset.ts
+function calculateMatchScore(preset, criteria) {
+  let score = 0;
+  let factors = 0;
+  if (criteria.useCase) {
+    factors++;
+    if (preset.metadata.useCase.includes(criteria.useCase)) {
+      score += 1;
+    }
+  }
+  if (criteria.context) {
+    factors++;
+    if (preset.metadata.context.includes(criteria.context)) {
+      score += 1;
+    }
+  }
+  if (criteria.maxIntensity !== void 0) {
+    factors++;
+    if (preset.metadata.intensity <= criteria.maxIntensity) {
+      score += 1;
+    }
+  }
+  if (criteria.minIntensity !== void 0) {
+    factors++;
+    if (preset.metadata.intensity >= criteria.minIntensity) {
+      score += 1;
+    }
+  }
+  if (criteria.preferMovement !== void 0) {
+    factors++;
+    if (preset.metadata.hasMovement === criteria.preferMovement) {
+      score += 1;
+    }
+  }
+  if (criteria.direction && preset.metadata.direction) {
+    factors++;
+    if (preset.metadata.direction === criteria.direction) {
+      score += 1;
+    }
+  }
+  if (criteria.prioritizeAccessibility) {
+    factors++;
+    score += (5 - preset.metadata.intensity) / 5;
+  }
+  return factors > 0 ? score / factors : 0;
+}
+function determineStyle(criteria) {
+  if (criteria.style) {
+    return criteria.style;
+  }
+  if (criteria.prioritizeAccessibility) {
+    return "subtle";
+  }
+  if (criteria.context === "hero" || criteria.context === "page") {
+    return "bold";
+  }
+  if (criteria.context === "tooltip" || criteria.context === "dropdown") {
+    return "subtle";
+  }
+  return "standard";
+}
+function generateReasoning(preset, criteria, score) {
+  const reasons = [];
+  if (criteria.useCase && preset.metadata.useCase.includes(criteria.useCase)) {
+    reasons.push(`matches use case "${criteria.useCase}"`);
+  }
+  if (criteria.context && preset.metadata.context.includes(criteria.context)) {
+    reasons.push(`suitable for "${criteria.context}" context`);
+  }
+  if (criteria.direction && preset.metadata.direction === criteria.direction) {
+    reasons.push(`provides "${criteria.direction}" movement`);
+  }
+  if (criteria.prioritizeAccessibility && preset.metadata.intensity <= 2) {
+    reasons.push("has low intensity for accessibility");
+  }
+  if (reasons.length === 0) {
+    reasons.push("general-purpose animation");
+  }
+  return `Selected "${preset.metadata.name}" (${Math.round(score * 100)}% match): ${reasons.join(", ")}.`;
+}
+function selectPreset(criteria) {
+  const allPresets = Object.entries(componentPresets);
+  const scoredPresets = allPresets.map(([name, preset]) => ({
+    name,
+    preset,
+    score: calculateMatchScore(preset, criteria)
+  }));
+  scoredPresets.sort((a, b) => b.score - a.score);
+  const best = scoredPresets[0];
+  const style = determineStyle(criteria);
+  if (!best) {
+    throw new Error("selectPreset: no presets available; cannot select a preset.");
+  }
+  const alternatives = scoredPresets.slice(1, 4).filter((p) => p.score > 0.3).map((p) => p.name);
+  return {
+    preset: best.preset,
+    presetName: best.name,
+    style,
+    confidence: best.score,
+    reasoning: generateReasoning(best.preset, criteria, best.score),
+    alternatives
+  };
+}
+function getRecommendations(context, options = {}) {
+  const { maxResults = 5, minScore = 0.3 } = options;
+  const contextPresets = getPresetsByContext(context);
+  const recommendations = contextPresets.map((preset) => {
+    const name = Object.entries(componentPresets).find(([_, p]) => p === preset)?.[0];
+    const contextFit = preset.metadata.context.indexOf(context) === 0 ? 1 : 0.7;
+    const intensityFit = 1 - Math.abs(preset.metadata.intensity - 3) / 4;
+    const score = (contextFit + intensityFit) / 2;
+    return {
+      preset,
+      name,
+      reason: `${preset.metadata.description}. Ideal for ${preset.metadata.context.slice(0, 2).join(", ")}.`,
+      score
+    };
+  });
+  return recommendations.filter((r) => r.score >= minScore).sort((a, b) => b.score - a.score).slice(0, maxResults);
+}
+function getDefaultPreset(context) {
+  const defaults = {
+    modal: "scale",
+    dropdown: "slideDown",
+    tooltip: "fadeIn",
+    drawer: "slideRight",
+    card: "fadeIn",
+    "list-item": "slideUp",
+    notification: "slideRight",
+    page: "fadeIn",
+    section: "slideUp",
+    hero: "slideUpScale"
+  };
+  return componentPresets[defaults[context]];
+}
+function suggestAnimations(context, style = "standard") {
+  const entranceResult = selectPreset({
+    useCase: "entrance",
+    context,
+    style
+  });
+  const exitResult = selectPreset({
+    useCase: "exit",
+    context,
+    style
+  });
+  return {
+    entrance: entranceResult.preset,
+    entranceName: entranceResult.presetName,
+    exit: exitResult.preset,
+    exitName: exitResult.presetName,
+    style
+  };
+}
+function getAllPresetNames() {
+  return Object.keys(componentPresets);
+}
+function getAllContexts() {
+  return ["modal", "dropdown", "tooltip", "drawer", "card", "list-item", "notification", "page", "section", "hero"];
+}
+function getAllUseCases() {
+  return ["entrance", "exit", "transition", "emphasis", "reveal"];
+}
+function getPresetMetadata(name) {
+  return componentPresets[name].metadata;
+}
+
+// src/utils/spring-configs.ts
+var springGentle = {
+  type: "spring",
+  stiffness: 200,
+  damping: 30,
+  mass: 1
+};
+var springSnappy = {
+  type: "spring",
+  stiffness: 400,
+  damping: 30,
+  mass: 0.8
+};
+var springBouncy = {
+  type: "spring",
+  stiffness: 300,
+  damping: 15,
+  mass: 1
+};
+var springStiff = {
+  type: "spring",
+  stiffness: 500,
+  damping: 35,
+  mass: 0.6
+};
+function createSpring(stiffness, damping, mass) {
+  return {
+    type: "spring",
+    stiffness,
+    damping,
+    mass
+  };
+}
+function createSpringFromParams(params) {
+  return {
+    type: "spring",
+    stiffness: params.stiffness,
+    damping: params.damping,
+    mass: params.mass
+  };
+}
+var springPresets = {
+  gentle: springGentle,
+  snappy: springSnappy,
+  bouncy: springBouncy,
+  stiff: springStiff
+};
 export {
+  CountUp,
+  INSTANT_TRANSITION,
+  MotionDiv,
+  REDUCED_MOTION_QUERY,
+  StaggerContainer,
   ambientPaths,
   applyMotionPreset,
+  badgePop,
+  boldStyle,
+  buttonPress,
+  calculateStaggerDelays,
+  cardHover,
+  cascadeStagger,
+  checkReducedMotion,
+  checkmarkDraw,
+  componentPresets,
+  createAccessibleMotionProps,
+  createMotionProps,
+  createReducedMotionProps,
+  createSpring,
+  createSpringFromParams,
+  createTween,
+  createTweenFromParams,
+  durations,
+  easeIn,
+  easeInOut,
+  easeInOutCubic,
+  easeInOutQuint,
+  easeOut,
+  easeOutBack,
+  easeOutExpo,
+  easeOutQuart,
+  easingPresets,
+  expand,
+  explodeStagger,
+  fadeIn,
+  fadeOut,
+  findPresetsForUseCase,
+  flip,
+  getAllContexts,
+  getAllPresetNames,
+  getAllUseCases,
+  getComponentPreset,
+  getDefaultPreset,
+  getDuration,
+  getMicroInteraction,
+  getMicroInteractionNames,
+  getMotionStyle,
   getPreset,
+  getPresetMetadata,
+  getPresetsByContext,
+  getPresetsByUseCase,
+  getRecommendations,
+  getReducedMotionVariant,
+  getSpringConfig,
+  getStaggerPreset,
+  glowPulse,
+  gridStagger,
+  heartbeat,
+  iconSpin,
   lightRays,
-  useMotionPreset
+  linear,
+  microInteractions,
+  motionStyles,
+  msToSeconds,
+  playfulStyle,
+  progressFill,
+  pulse,
+  rotate,
+  rubberBand,
+  scale,
+  scale2 as scaleMicro,
+  selectPreset,
+  shake,
+  shimmer,
+  slideDown,
+  slideLeft,
+  slideRight,
+  slideUp,
+  slideUpScale,
+  springBouncy,
+  springGentle,
+  springPresets,
+  springSnappy,
+  springStiff,
+  staggerCascade,
+  staggerCenter,
+  staggerGrid,
+  staggerPresets,
+  staggerRandom,
+  staggerReverse,
+  staggerSequential,
+  staggerWave,
+  standardStyle,
+  subtleStyle,
+  successFlash,
+  suggestAnimations,
+  tweenPresets,
+  useAnimationVariants,
+  useComponentAnimation,
+  useCountUp,
+  useDelayedAnimation,
+  useDrawPath,
+  useMotionPreset,
+  useReducedMotion2 as useReducedMotion,
+  useStagger,
+  waveStagger,
+  wiggle,
+  withStagger,
+  zoomIn,
+  zoomOut
 };
 //# sourceMappingURL=index.mjs.map