aura-glass/dist/esm/hooks/useMotionPreference.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { useReducedMotion } from './useReducedMotion.js';

function useMotionAwareAnimation() {
  const prefersReducedMotion = useReducedMotion();
  const getAnimationProps = (props = {}) => {
    if (prefersReducedMotion) {
      return {
        ...props,
        // Use a zero-duration transition compatible with Framer Motion
        transition: {
          duration: 0
        },
        animate: props?.initial || {}
      };
    }
    return props;
  };
  // Normalize easing to Framer Motion-friendly values
  const normalizeEase = easing => {
    if (typeof easing === 'string') {
      const e = easing.trim().toLowerCase();
      // Convert common CSS names to Framer Motion names
      if (e === 'ease-in') return 'easeIn';
      if (e === 'ease-out') return 'easeOut';
      if (e === 'ease-in-out' || e === 'ease') return 'easeInOut';
      if (e === 'linear') return 'linear';
      if (e === 'spring') return 'spring';
      // Support CSS cubic-bezier() by converting to an array that Framer understands
      if (e.startsWith('cubic-bezier(') && e.endsWith(')')) {
        const nums = e.slice('cubic-bezier('.length, -1).split(',').map(n => parseFloat(n.trim())).filter(n => Number.isFinite(n));
        if (nums.length === 4) return nums;
      }
      // Fallback
      return 'easeInOut';
    }
    return easing;
  };
  const getTransition = (duration = 0.3, easing = 'easeOut') => {
    if (prefersReducedMotion) {
      return {
        duration: 0
      };
    }
    const normalized = normalizeEase(easing);
    if (normalized === 'spring') {
      // Let callers provide additional spring settings if needed elsewhere
      return {
        type: 'spring'
      };
    }
    return {
      duration,
      ease: normalized
    };
  };
  return {
    getAnimationProps,
    getTransition
  };
}
function useAnimationDuration(baseDuration = 200) {
  const prefersReducedMotion = useReducedMotion();
  return {
    duration: prefersReducedMotion ? 0 : baseDuration
  };
}
function useMotionPreference() {
  const prefersReducedMotion = useReducedMotion();
  const shouldAnimate = !prefersReducedMotion;
  return {
    shouldAnimate,
    prefersReducedMotion
  };
}

export { useAnimationDuration, useMotionAwareAnimation, useMotionPreference };
//# sourceMappingURL=useMotionPreference.js.map