@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/themes/motion-reduction.esm.js

@@ -0,0 +1,602 @@
+import { screenReaderOptimizer } from './screen-reader';
+
+// Motion reduction theme configuration
+export interface MotionReductionThemeConfig {
+  motion;
+    duration;
+      normal;
+      slow;
+    };
+    easing;
+      easeIn;
+      easeOut;
+      easeInOut;
+    };
+    animations;
+      type;
+      preferences;
+        reduceAnimation;
+        reduceTransition;
+        reduceTransform;
+      };
+    };
+  };
+}
+
+// Motion reduction utilities
+export class MotionReductionManager {
+  private isReducedMotion= false;
+  private isReducedAnimation= false;
+  private isReducedTransition= false;
+  private isReducedTransform= false;
+  // private motionPreferences= new Set(); // Unused for now
+  private originalStyles, string> = new Map();
+  private reducedMotionStyles, string> = new Map();
+
+  constructor() {
+    this.initializeSystemPreference();
+    this.setupEventListeners();
+  }
+
+  // Initialize system preference detection
+  private initializeSystemPreference()== 'undefined' && window.matchMedia) {
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+      this.isReducedMotion = reducedMotionQuery.matches;
+      
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.isReducedMotion = e.matches;
+        this.applyMotionReduction();
+      });
+    }
+  }
+
+  // Setup event listeners
+  private setupEventListeners()== 'undefined') {
+      window.addEventListener('storage', (e) => {
+        if (e.key === 'motion-reduction-preferences') {
+          this.loadPreferences();
+        }
+      });
+    }
+  }
+
+  // Enable motion reduction
+  enable()= true;
+    this.applyMotionReduction();
+  }
+
+  // Disable motion reduction
+  disable()= false;
+    this.removeMotionReduction();
+  }
+
+  // Toggle motion reduction
+  toggle()) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  // Check if motion reduction is enabled
+  isMotionReduced();
+  }
+
+  // Set specific motion reduction preferences
+  setPreferences(preferences;
+    reduceTransition?;
+    reduceTransform?;
+  })== undefined) {
+      this.isReducedAnimation = preferences.reduceAnimation;
+    }
+    if (preferences.reduceTransition !== undefined) {
+      this.isReducedTransition = preferences.reduceTransition;
+    }
+    if (preferences.reduceTransform !== undefined) {
+      this.isReducedTransform = preferences.reduceTransform;
+    }
+    
+    this.savePreferences();
+    this.applyMotionReduction();
+  }
+
+  // Get current motion reduction preferences
+  getPreferences();
+    reduceAnimation;
+    reduceTransition;
+    reduceTransform;
+  } {
+    return {
+      reduceMotion,
+      reduceAnimation,
+      reduceTransition,
+      reduceTransform};
+  }
+
+  // Apply motion reduction to the document
+  applyMotionReduction()) return;
+
+    // Add reduced motion class to document
+    document.documentElement.classList.add('reduced-motion');
+    
+    // Apply reduced motion styles
+    this.applyReducedMotionStyles();
+    
+    // Process existing elements
+    this.processExistingElements();
+    
+    // Announce motion reduction change
+    if (screenReaderOptimizer) {
+      screenReaderOptimizer.announceMotionChange(true);
+    }
+  }
+
+  // Remove motion reduction from the document
+  removeMotionReduction());
+    
+    // Remove reduced motion styles
+    this.removeReducedMotionStyles();
+    
+    // Restore original styles
+    this.restoreOriginalStyles();
+    
+    // Announce motion reduction change
+    if (screenReaderOptimizer) {
+      screenReaderOptimizer.announceMotionChange(false);
+    }
+  }
+
+  // Apply reduced motion styles
+  private applyReducedMotionStyles()= document.createElement('style');
+    style.id = 'reduced-motion-styles';
+    
+    style.textContent = `
+      .reduced-motion,
+      .reduced-motion * {
+        /* Disable animations */
+        animation-duration;
+        animation-iteration-count;
+        animation-delay;
+        
+        /* Disable transitions */
+        transition-duration;
+        transition-delay;
+        
+        /* Disable transforms */
+        transform;
+        
+        /* Disable scroll behavior */
+        scroll-behavior;
+      }
+      
+      .reduced-motion .motion-safe,
+      .reduced-motion *[data-motion-safe="true"] {
+        /* Allow safe motion for essential animations */
+        animation-duration;
+        transition-duration;
+      }
+      
+      .reduced-motion .motion-reduce,
+      .reduced-motion *[data-motion-reduce="true"] {
+        /* Apply reduced motion for non-essential animations */
+        animation-duration;
+        transition-duration;
+      }
+      
+      /* Specific component overrides */
+      .reduced-motion .modal,
+      .reduced-motion .tooltip,
+      .reduced-motion .popover {
+        animation;
+        transition;
+      }
+      
+      .reduced-motion .skeleton {
+        animation;
+      }
+      
+      .reduced-motion .progress-bar {
+        transition;
+      }
+      
+      .reduced-motion .carousel,
+      .reduced-motion .slider {
+        scroll-behavior;
+      }
+    `;
+    
+    document.head.appendChild(style);
+  }
+
+  // Remove reduced motion styles
+  private removeReducedMotionStyles()= document.getElementById('reduced-motion-styles');
+    if (style) {
+      style.remove();
+    }
+  }
+
+  // Process existing elements
+  private processExistingElements()= document.querySelectorAll('[class*="animate"], [class*="transition"], [class*="transform"]');
+    animatedElements.forEach(element => {
+      this.processElement(element as HTMLElement);
+    });
+    
+    // Process elements with data attributes
+    const motionElements = document.querySelectorAll('[data-motion], [data-animation], [data-transition]');
+    motionElements.forEach(element => {
+      this.processElement(element as HTMLElement);
+    });
+  }
+
+  // Process individual element
+  private processElement(element))) {
+      this.originalStyles.set(element, element.style.cssText);
+    }
+    
+    // Apply reduced motion styles
+    const reducedStyles = this.getReducedMotionStyles(element);
+    element.style.cssText = reducedStyles;
+    
+    // Store reduced styles
+    this.reducedMotionStyles.set(element, reducedStyles);
+  }
+
+  // Get reduced motion styles for element
+  private getReducedMotionStyles(element)= element.style.cssText;
+    
+    let reducedStyles = originalStyles;
+    
+    // Remove animation properties
+    if (this.isReducedAnimation) {
+      reducedStyles = reducedStyles.replace(/animation[^;]*;?/g, '');
+      reducedStyles += 'animation;';
+    }
+    
+    // Remove transition properties
+    if (this.isReducedTransition) {
+      reducedStyles = reducedStyles.replace(/transition[^;]*;?/g, '');
+      reducedStyles += 'transition;';
+    }
+    
+    // Remove transform properties
+    if (this.isReducedTransform) {
+      reducedStyles = reducedStyles.replace(/transform[^;]*;?/g, '');
+      reducedStyles += 'transform;';
+    }
+    
+    return reducedStyles;
+  }
+
+  // Restore original styles
+  private restoreOriginalStyles(), element) => {
+      if (element && element.offsetParent !== null) {
+        element.style.cssText = originalStyle;
+      }
+    });
+    
+    this.originalStyles.clear();
+    this.reducedMotionStyles.clear();
+  }
+
+  // Save preferences to localStorage
+  private savePreferences()== 'undefined' && window.localStorage) {
+      const preferences = {
+        reduceAnimation,
+        reduceTransition,
+        reduceTransform,
+        timestamp)
+      };
+      
+      window.localStorage.setItem('motion-reduction-preferences', JSON.stringify(preferences));
+    }
+  }
+
+  // Load preferences from localStorage
+  private loadPreferences()== 'undefined' && window.localStorage) {
+      try {
+        const stored = window.localStorage.getItem('motion-reduction-preferences');
+        if (stored) {
+          const preferences = JSON.parse(stored);
+          
+          this.isReducedAnimation = preferences.reduceAnimation || false;
+          this.isReducedTransition = preferences.reduceTransition || false;
+          this.isReducedTransform = preferences.reduceTransform || false;
+        }
+      } catch (error) {
+        console.warn('Failed to load motion reduction preferences, error);
+      }
+    }
+  }
+
+  // Check if element should have motion reduced
+  shouldReduceMotion(element)) return false;
+    
+    // Check for motion-safe override
+    if (element.classList.contains('motion-safe') || element.getAttribute('data-motion-safe') === 'true') {
+      return false;
+    }
+    
+    // Check for motion-reduce override
+    if (element.classList.contains('motion-reduce') || element.getAttribute('data-motion-reduce') === 'true') {
+      return true;
+    }
+    
+    return true;
+  }
+
+  // Get appropriate duration for element
+  getDuration(element, defaultDuration, type))) {
+      return defaultDuration;
+    }
+    
+    // Parse duration
+    const duration = parseFloat(defaultDuration);
+    const unit = defaultDuration.replace(/[\d.]/g, '');
+    
+    if (type === 'animation') {
+      return this.isReducedAnimation ? '0.01ms' , 50)}${unit}`;
+    } else {
+      return this.isReducedTransition ? '0.01ms' , 50)}${unit}`;
+    }
+  }
+
+  // Get appropriate easing for element
+  getEasing(element, defaultEasing))) {
+      return defaultEasing;
+    }
+    
+    // Use linear easing for reduced motion
+    return 'linear';
+  }
+
+  // Create motion-safe wrapper
+  createMotionSafeWrapper(element, callback) => void))) {
+      callback();
+      return;
+    }
+    
+    // Execute callback without motion
+    const originalReducedMotion = this.isReducedMotion;
+    this.isReducedMotion = false;
+    
+    try {
+      callback();
+    } finally {
+      this.isReducedMotion = originalReducedMotion;
+    }
+  }
+
+  // Animate element with motion reduction awareness
+  animateElement(
+    element,
+    keyframes],
+    options))) {
+      // Apply reduced motion options
+      const reducedOptions = {
+        ...options,
+        duration=== 'number' ? options.duration , 50),
+        easing};
+      
+      return element.animate(keyframes, reducedOptions);
+    }
+    
+    return element.animate(keyframes, options);
+  }
+
+  // Add motion reduction observer
+  addMotionReductionObserver(callback) => void)) => void {
+    const observer = new MutationObserver(() => {
+      callback(this.isReducedMotion);
+    });
+    
+    observer.observe(document.documentElement, {
+      attributes,
+      attributeFilter]
+    });
+    
+    // Return cleanup function
+    return () => observer.disconnect();
+  }
+
+  // Get motion reduction statistics
+  getStatistics();
+    reducedElements;
+    safeElements;
+    preferences;
+      reduceAnimation;
+      reduceTransition;
+      reduceTransform;
+    };
+  } {
+    const totalElements = document.querySelectorAll('*').length;
+    const reducedElements = document.querySelectorAll('.reduced-motion *').length;
+    const safeElements = document.querySelectorAll('.motion-safe, [data-motion-safe="true"]').length;
+    
+    return {
+      totalElements,
+      reducedElements,
+      safeElements,
+      preferences)
+    };
+  }
+
+  // Reset all motion reduction settings
+  reset()= false;
+    this.isReducedAnimation = false;
+    this.isReducedTransition = false;
+    this.isReducedTransform = false;
+    
+    this.removeMotionReduction();
+    this.clearPreferences();
+  }
+
+  // Clear stored preferences
+  private clearPreferences()== 'undefined' && window.localStorage) {
+      window.localStorage.removeItem('motion-reduction-preferences');
+    }
+    
+    this.originalStyles.clear();
+    this.reducedMotionStyles.clear();
+  }
+
+  // Destroy motion reduction manager
+  destroy());
+    this.clearPreferences();
+    
+    // Remove event listeners
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('storage', this.loadPreferences.bind(this));
+    }
+  }
+}
+
+// Motion reduction utilities
+export class MotionReductionUtils {
+  // Check if motion should be reduced for element
+  static shouldReduceMotion(element)== 'undefined' && window.matchMedia) {
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+      if (reducedMotionQuery.matches) return true;
+    }
+    
+    // Check element attributes
+    if (element.classList.contains('motion-reduce') || element.getAttribute('data-motion-reduce') === 'true') {
+      return true;
+    }
+    
+    // Check parent elements
+    const parent = element.closest('.motion-reduce, [data-motion-reduce="true"]');
+    if (parent) return true;
+    
+    return false;
+  }
+
+  // Get reduced duration
+  static getReducedDuration(duration, reductionFactor= 0.1)= parseFloat(duration);
+    const unit = duration.replace(/[\d.]/g, '');
+    
+    return `${Math.max(parsed * reductionFactor, 1)}${unit}`;
+  }
+
+  // Get reduced easing
+  static getReducedEasing(_easing);
+  }
+
+  // Create motion-safe animation
+  static createMotionSafeAnimation(
+    element,
+    keyframes],
+    options))) {
+      // Return null to indicate no animation should be performed
+      return null;
+    }
+    
+    return element.animate(keyframes, options);
+  }
+
+  // Apply motion reduction to CSS custom properties
+  static applyMotionReductionToCSS(element))) return;
+    
+    const style = element.style;
+    
+    // Reduce animation duration
+    if (style.getPropertyValue('--animation-duration')) {
+      const duration = style.getPropertyValue('--animation-duration');
+      style.setProperty('--animation-duration', this.getReducedDuration(duration));
+    }
+    
+    // Reduce transition duration
+    if (style.getPropertyValue('--transition-duration')) {
+      const duration = style.getPropertyValue('--transition-duration');
+      style.setProperty('--transition-duration', this.getReducedDuration(duration));
+    }
+    
+    // Set easing to linear
+    if (style.getPropertyValue('--animation-easing')) {
+      style.setProperty('--animation-easing', 'linear');
+    }
+    
+    if (style.getPropertyValue('--transition-easing')) {
+      style.setProperty('--transition-easing', 'linear');
+    }
+  }
+
+  // Remove motion reduction from CSS custom properties
+  static removeMotionReductionFromCSS(element)= element.style;
+    
+    // Remove custom properties
+    style.removeProperty('--animation-duration');
+    style.removeProperty('--transition-duration');
+    style.removeProperty('--animation-easing');
+    style.removeProperty('--transition-easing');
+  }
+
+  // Check if element has motion
+  static hasMotion(element)= window.getComputedStyle(element);
+    
+    return (
+      computedStyle.animation !== 'none' ||
+      computedStyle.transition !== 'all 0s ease 0s' ||
+      computedStyle.transform !== 'none'
+    );
+  }
+
+  // Get motion information for element
+  static getMotionInfo(element);
+    hasTransition;
+    hasTransform;
+    animationDuration;
+    transitionDuration;
+    transform;
+  } {
+    const computedStyle = window.getComputedStyle(element);
+    
+    return {
+      hasAnimation== 'none',
+      hasTransition== 'all 0s ease 0s',
+      hasTransform== 'none',
+      animationDuration,
+      transitionDuration,
+      transform};
+  }
+}
+
+// Motion reduction hooks for React
+export class MotionReductionHooks {
+  // Get motion reduction state
+  static useMotionReduction();
+    preferences;
+      reduceTransition;
+      reduceTransform;
+    };
+    shouldReduceMotion) => boolean;
+  } {
+    // This would be implemented in a React component
+    // For now, return a mock implementation
+    return {
+      isReduced,
+      preferences,
+        reduceTransition,
+        reduceTransform},
+      shouldReduceMotion) => false
+    };
+  }
+
+  // Get motion-safe duration
+  static useMotionSafeDuration(defaultDuration, _type);
+  }
+
+  // Get motion-safe easing
+  static useMotionSafeEasing(defaultEasing);
+  }
+}
+
+// Export default instances
+export const motionReductionManager = new MotionReductionManager();
+
+// Export default
+export default {
+  MotionReductionManager,
+  MotionReductionUtils,
+  MotionReductionHooks,
+  motionReductionManager
+};