@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/themes/motion-reduction.js

@@ -1,176 +1,118 @@
 import { screenReaderOptimizer } from './screen-reader';
-
-// Motion reduction theme configuration
-export interface MotionReductionThemeConfig {
-  motion: {
-    reduced: boolean;
-    duration: {
-      fast: string;
-      normal: string;
-      slow: string;
-    };
-    easing: {
-      ease: string;
-      easeIn: string;
-      easeOut: string;
-      easeInOut: string;
-    };
-    animations: {
-      enabled: boolean;
-      type: 'none' | 'reduced' | 'full';
-      preferences: {
-        reduceMotion: boolean;
-        reduceAnimation: boolean;
-        reduceTransition: boolean;
-        reduceTransform: boolean;
-      };
-    };
-  };
-}
-
 // Motion reduction utilities
 export class MotionReductionManager {
-  private isReducedMotion: boolean = false;
-  private isReducedAnimation: boolean = false;
-  private isReducedTransition: boolean = false;
-  private isReducedTransform: boolean = false;
-  // private motionPreferences: Set<string> = new Set(); // Unused for now
-  private originalStyles: Map<HTMLElement, string> = new Map();
-  private reducedMotionStyles: Map<HTMLElement, string> = new Map();
-
-  constructor() {
-    this.initializeSystemPreference();
-    this.setupEventListeners();
-  }
-
-  // Initialize system preference detection
-  private initializeSystemPreference(): void {
-    if (typeof window !== 'undefined' && window.matchMedia) {
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-      this.isReducedMotion = reducedMotionQuery.matches;
-      
-      reducedMotionQuery.addEventListener('change', (e) => {
-        this.isReducedMotion = e.matches;
+    constructor() {
+        this.isReducedMotion = false;
+        this.isReducedAnimation = false;
+        this.isReducedTransition = false;
+        this.isReducedTransform = false;
+        // private motionPreferences: Set<string> = new Set(); // Unused for now
+        this.originalStyles = new Map();
+        this.reducedMotionStyles = new Map();
+        this.initializeSystemPreference();
+        this.setupEventListeners();
+    }
+    // Initialize system preference detection
+    initializeSystemPreference() {
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.isReducedMotion = reducedMotionQuery.matches;
+            reducedMotionQuery.addEventListener('change', (e) => {
+                this.isReducedMotion = e.matches;
+                this.applyMotionReduction();
+            });
+        }
+    }
+    // Setup event listeners
+    setupEventListeners() {
+        // Listen for preference changes
+        if (typeof window !== 'undefined') {
+            window.addEventListener('storage', (e) => {
+                if (e.key === 'motion-reduction-preferences') {
+                    this.loadPreferences();
+                }
+            });
+        }
+    }
+    // Enable motion reduction
+    enable() {
+        this.isReducedMotion = true;
+        this.applyMotionReduction();
+    }
+    // Disable motion reduction
+    disable() {
+        this.isReducedMotion = false;
+        this.removeMotionReduction();
+    }
+    // Toggle motion reduction
+    toggle() {
+        if (this.isReducedMotion) {
+            this.disable();
+        }
+        else {
+            this.enable();
+        }
+    }
+    // Check if motion reduction is enabled
+    isMotionReduced() {
+        return this.isReducedMotion;
+    }
+    // Set specific motion reduction preferences
+    setPreferences(preferences) {
+        if (preferences.reduceAnimation !== 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();
-      });
-    }
-  }
-
-  // Setup event listeners
-  private setupEventListeners(): void {
-    // Listen for preference changes
-    if (typeof window !== 'undefined') {
-      window.addEventListener('storage', (e) => {
-        if (e.key === 'motion-reduction-preferences') {
-          this.loadPreferences();
-        }
-      });
-    }
-  }
-
-  // Enable motion reduction
-  enable(): void {
-    this.isReducedMotion = true;
-    this.applyMotionReduction();
-  }
-
-  // Disable motion reduction
-  disable(): void {
-    this.isReducedMotion = false;
-    this.removeMotionReduction();
-  }
-
-  // Toggle motion reduction
-  toggle(): void {
-    if (this.isReducedMotion) {
-      this.disable();
-    } else {
-      this.enable();
-    }
-  }
-
-  // Check if motion reduction is enabled
-  isMotionReduced(): boolean {
-    return this.isReducedMotion;
-  }
-
-  // Set specific motion reduction preferences
-  setPreferences(preferences: {
-    reduceAnimation?: boolean;
-    reduceTransition?: boolean;
-    reduceTransform?: boolean;
-  }): void {
-    if (preferences.reduceAnimation !== 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(): {
-    reduceMotion: boolean;
-    reduceAnimation: boolean;
-    reduceTransition: boolean;
-    reduceTransform: boolean;
-  } {
-    return {
-      reduceMotion: this.isReducedMotion,
-      reduceAnimation: this.isReducedAnimation,
-      reduceTransition: this.isReducedTransition,
-      reduceTransform: this.isReducedTransform
-    };
-  }
-
-  // Apply motion reduction to the document
-  applyMotionReduction(): void {
-    if (!this.isReducedMotion) return;
-
-    // Add reduced motion class to document
-    document.documentElement.classList.add('reduced-motion');
-    
+    }
+    // Get current motion reduction preferences
+    getPreferences() {
+        return {
+            reduceMotion: this.isReducedMotion,
+            reduceAnimation: this.isReducedAnimation,
+            reduceTransition: this.isReducedTransition,
+            reduceTransform: this.isReducedTransform
+        };
+    }
+    // Apply motion reduction to the document
+    applyMotionReduction() {
+        if (!this.isReducedMotion)
+            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 class
+        document.documentElement.classList.remove('reduced-motion');
+        // Remove reduced motion styles
+        this.removeReducedMotionStyles();
+        // Restore original styles
+        this.restoreOriginalStyles();
+        // Announce motion reduction change
+        if (screenReaderOptimizer) {
+            screenReaderOptimizer.announceMotionChange(false);
+        }
+    }
     // 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(): void {
-    // Remove reduced motion class
-    document.documentElement.classList.remove('reduced-motion');
-    
-    // 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(): void {
-    const style = document.createElement('style');
-    style.id = 'reduced-motion-styles';
-    
-    style.textContent = `
+    applyReducedMotionStyles() {
+        const style = document.createElement('style');
+        style.id = 'reduced-motion-styles';
+        style.textContent = `
       .reduced-motion,
       .reduced-motion * {
         /* Disable animations */
@@ -224,439 +166,340 @@ export class MotionReductionManager {
         scroll-behavior: auto !important;
       }
     `;
-    
-    document.head.appendChild(style);
-  }
-
-  // Remove reduced motion styles
-  private removeReducedMotionStyles(): void {
-    const style = document.getElementById('reduced-motion-styles');
-    if (style) {
-      style.remove();
-    }
-  }
-
-  // Process existing elements
-  private processExistingElements(): void {
-    // Process elements with animations
-    const animatedElements = 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: HTMLElement): void {
-    // Store original styles if not already stored
-    if (!this.originalStyles.has(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: HTMLElement): string {
-    const originalStyles = element.style.cssText;
-    
-    let reducedStyles = originalStyles;
-    
-    // Remove animation properties
-    if (this.isReducedAnimation) {
-      reducedStyles = reducedStyles.replace(/animation[^;]*;?/g, '');
-      reducedStyles += 'animation: none !important;';
-    }
-    
-    // Remove transition properties
-    if (this.isReducedTransition) {
-      reducedStyles = reducedStyles.replace(/transition[^;]*;?/g, '');
-      reducedStyles += 'transition: none !important;';
-    }
-    
-    // Remove transform properties
-    if (this.isReducedTransform) {
-      reducedStyles = reducedStyles.replace(/transform[^;]*;?/g, '');
-      reducedStyles += 'transform: none !important;';
-    }
-    
-    return reducedStyles;
-  }
-
-  // Restore original styles
-  private restoreOriginalStyles(): void {
-    this.originalStyles.forEach((originalStyle, element) => {
-      if (element && element.offsetParent !== null) {
-        element.style.cssText = originalStyle;
-      }
-    });
-    
-    this.originalStyles.clear();
-    this.reducedMotionStyles.clear();
-  }
-
-  // Save preferences to localStorage
-  private savePreferences(): void {
-    if (typeof window !== 'undefined' && window.localStorage) {
-      const preferences = {
-        reduceAnimation: this.isReducedAnimation,
-        reduceTransition: this.isReducedTransition,
-        reduceTransform: this.isReducedTransform,
-        timestamp: Date.now()
-      };
-      
-      window.localStorage.setItem('motion-reduction-preferences', JSON.stringify(preferences));
-    }
-  }
-
-  // Load preferences from localStorage
-  private loadPreferences(): void {
-    if (typeof window !== '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);
-      }
+        document.head.appendChild(style);
+    }
+    // Remove reduced motion styles
+    removeReducedMotionStyles() {
+        const style = document.getElementById('reduced-motion-styles');
+        if (style) {
+            style.remove();
+        }
+    }
+    // Process existing elements
+    processExistingElements() {
+        // Process elements with animations
+        const animatedElements = document.querySelectorAll('[class*="animate"], [class*="transition"], [class*="transform"]');
+        animatedElements.forEach(element => {
+            this.processElement(element);
+        });
+        // Process elements with data attributes
+        const motionElements = document.querySelectorAll('[data-motion], [data-animation], [data-transition]');
+        motionElements.forEach(element => {
+            this.processElement(element);
+        });
+    }
+    // Process individual element
+    processElement(element) {
+        // Store original styles if not already stored
+        if (!this.originalStyles.has(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
+    getReducedMotionStyles(element) {
+        const originalStyles = element.style.cssText;
+        let reducedStyles = originalStyles;
+        // Remove animation properties
+        if (this.isReducedAnimation) {
+            reducedStyles = reducedStyles.replace(/animation[^;]*;?/g, '');
+            reducedStyles += 'animation: none !important;';
+        }
+        // Remove transition properties
+        if (this.isReducedTransition) {
+            reducedStyles = reducedStyles.replace(/transition[^;]*;?/g, '');
+            reducedStyles += 'transition: none !important;';
+        }
+        // Remove transform properties
+        if (this.isReducedTransform) {
+            reducedStyles = reducedStyles.replace(/transform[^;]*;?/g, '');
+            reducedStyles += 'transform: none !important;';
+        }
+        return reducedStyles;
+    }
+    // Restore original styles
+    restoreOriginalStyles() {
+        this.originalStyles.forEach((originalStyle, element) => {
+            if (element && element.offsetParent !== null) {
+                element.style.cssText = originalStyle;
+            }
+        });
+        this.originalStyles.clear();
+        this.reducedMotionStyles.clear();
+    }
+    // Save preferences to localStorage
+    savePreferences() {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const preferences = {
+                reduceAnimation: this.isReducedAnimation,
+                reduceTransition: this.isReducedTransition,
+                reduceTransform: this.isReducedTransform,
+                timestamp: Date.now()
+            };
+            window.localStorage.setItem('motion-reduction-preferences', JSON.stringify(preferences));
+        }
+    }
+    // Load preferences from localStorage
+    loadPreferences() {
+        if (typeof window !== '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) {
+        if (!this.isReducedMotion)
+            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) {
+        if (!this.shouldReduceMotion(element)) {
+            return defaultDuration;
+        }
+        // Parse duration
+        const duration = parseFloat(defaultDuration);
+        const unit = defaultDuration.replace(/[\d.]/g, '');
+        if (type === 'animation') {
+            return this.isReducedAnimation ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
+        }
+        else {
+            return this.isReducedTransition ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
+        }
+    }
+    // Get appropriate easing for element
+    getEasing(element, defaultEasing) {
+        if (!this.shouldReduceMotion(element)) {
+            return defaultEasing;
+        }
+        // Use linear easing for reduced motion
+        return 'linear';
+    }
+    // Create motion-safe wrapper
+    createMotionSafeWrapper(element, callback) {
+        if (!this.shouldReduceMotion(element)) {
+            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) {
+        if (this.shouldReduceMotion(element)) {
+            // Apply reduced motion options
+            const reducedOptions = {
+                ...options,
+                duration: Math.min(typeof options.duration === 'number' ? options.duration : 300, 50),
+                easing: 'linear'
+            };
+            return element.animate(keyframes, reducedOptions);
+        }
+        return element.animate(keyframes, options);
+    }
+    // Add motion reduction observer
+    addMotionReductionObserver(callback) {
+        const observer = new MutationObserver(() => {
+            callback(this.isReducedMotion);
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+        // Return cleanup function
+        return () => observer.disconnect();
+    }
+    // Get motion reduction statistics
+    getStatistics() {
+        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: this.getPreferences()
+        };
+    }
+    // Reset all motion reduction settings
+    reset() {
+        this.isReducedMotion = false;
+        this.isReducedAnimation = false;
+        this.isReducedTransition = false;
+        this.isReducedTransform = false;
+        this.removeMotionReduction();
+        this.clearPreferences();
+    }
+    // Clear stored preferences
+    clearPreferences() {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.removeItem('motion-reduction-preferences');
+        }
+        this.originalStyles.clear();
+        this.reducedMotionStyles.clear();
+    }
+    // Destroy motion reduction manager
+    destroy() {
+        this.removeMotionReduction();
+        this.clearPreferences();
+        // Remove event listeners
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('storage', this.loadPreferences.bind(this));
+        }
     }
-  }
-
-  // Check if element should have motion reduced
-  shouldReduceMotion(element: HTMLElement): boolean {
-    if (!this.isReducedMotion) 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: HTMLElement, defaultDuration: string, type: 'animation' | 'transition'): string {
-    if (!this.shouldReduceMotion(element)) {
-      return defaultDuration;
-    }
-    
-    // Parse duration
-    const duration = parseFloat(defaultDuration);
-    const unit = defaultDuration.replace(/[\d.]/g, '');
-    
-    if (type === 'animation') {
-      return this.isReducedAnimation ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
-    } else {
-      return this.isReducedTransition ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
-    }
-  }
-
-  // Get appropriate easing for element
-  getEasing(element: HTMLElement, defaultEasing: string): string {
-    if (!this.shouldReduceMotion(element)) {
-      return defaultEasing;
-    }
-    
-    // Use linear easing for reduced motion
-    return 'linear';
-  }
-
-  // Create motion-safe wrapper
-  createMotionSafeWrapper(element: HTMLElement, callback: () => void): void {
-    if (!this.shouldReduceMotion(element)) {
-      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: HTMLElement,
-    keyframes: Keyframe[],
-    options: KeyframeAnimationOptions
-  ): Animation {
-    if (this.shouldReduceMotion(element)) {
-      // Apply reduced motion options
-      const reducedOptions = {
-        ...options,
-        duration: Math.min(typeof options.duration === 'number' ? options.duration : 300, 50),
-        easing: 'linear'
-      };
-      
-      return element.animate(keyframes, reducedOptions);
-    }
-    
-    return element.animate(keyframes, options);
-  }
-
-  // Add motion reduction observer
-  addMotionReductionObserver(callback: (isReduced: boolean) => void): () => void {
-    const observer = new MutationObserver(() => {
-      callback(this.isReducedMotion);
-    });
-    
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-    
-    // Return cleanup function
-    return () => observer.disconnect();
-  }
-
-  // Get motion reduction statistics
-  getStatistics(): {
-    totalElements: number;
-    reducedElements: number;
-    safeElements: number;
-    preferences: {
-      reduceMotion: boolean;
-      reduceAnimation: boolean;
-      reduceTransition: boolean;
-      reduceTransform: boolean;
-    };
-  } {
-    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: this.getPreferences()
-    };
-  }
-
-  // Reset all motion reduction settings
-  reset(): void {
-    this.isReducedMotion = false;
-    this.isReducedAnimation = false;
-    this.isReducedTransition = false;
-    this.isReducedTransform = false;
-    
-    this.removeMotionReduction();
-    this.clearPreferences();
-  }
-
-  // Clear stored preferences
-  private clearPreferences(): void {
-    if (typeof window !== 'undefined' && window.localStorage) {
-      window.localStorage.removeItem('motion-reduction-preferences');
-    }
-    
-    this.originalStyles.clear();
-    this.reducedMotionStyles.clear();
-  }
-
-  // Destroy motion reduction manager
-  destroy(): void {
-    this.removeMotionReduction();
-    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: HTMLElement): boolean {
-    // Check system preference
-    if (typeof window !== 'undefined' && window.matchMedia) {
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-      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: string, reductionFactor: number = 0.1): string {
-    const parsed = parseFloat(duration);
-    const unit = duration.replace(/[\d.]/g, '');
-    
-    return `${Math.max(parsed * reductionFactor, 1)}${unit}`;
-  }
-
-  // Get reduced easing
-  static getReducedEasing(_easing: string): string {
-    return 'linear';
-  }
-
-  // Create motion-safe animation
-  static createMotionSafeAnimation(
-    element: HTMLElement,
-    keyframes: Keyframe[],
-    options: KeyframeAnimationOptions
-  ): Animation | null {
-    if (this.shouldReduceMotion(element)) {
-      // 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: HTMLElement): void {
-    if (!this.shouldReduceMotion(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: HTMLElement): void {
-    const style = 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: HTMLElement): boolean {
-    const computedStyle = window.getComputedStyle(element);
-    
-    return (
-      computedStyle.animation !== 'none' ||
-      computedStyle.transition !== 'all 0s ease 0s' ||
-      computedStyle.transform !== 'none'
-    );
-  }
-
-  // Get motion information for element
-  static getMotionInfo(element: HTMLElement): {
-    hasAnimation: boolean;
-    hasTransition: boolean;
-    hasTransform: boolean;
-    animationDuration: string;
-    transitionDuration: string;
-    transform: string;
-  } {
-    const computedStyle = window.getComputedStyle(element);
-    
-    return {
-      hasAnimation: computedStyle.animation !== 'none',
-      hasTransition: computedStyle.transition !== 'all 0s ease 0s',
-      hasTransform: computedStyle.transform !== 'none',
-      animationDuration: computedStyle.animationDuration,
-      transitionDuration: computedStyle.transitionDuration,
-      transform: computedStyle.transform
-    };
-  }
+    // Check if motion should be reduced for element
+    static shouldReduceMotion(element) {
+        // Check system preference
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            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) {
+        const parsed = parseFloat(duration);
+        const unit = duration.replace(/[\d.]/g, '');
+        return `${Math.max(parsed * reductionFactor, 1)}${unit}`;
+    }
+    // Get reduced easing
+    static getReducedEasing(_easing) {
+        return 'linear';
+    }
+    // Create motion-safe animation
+    static createMotionSafeAnimation(element, keyframes, options) {
+        if (this.shouldReduceMotion(element)) {
+            // 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) {
+        if (!this.shouldReduceMotion(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) {
+        const style = 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) {
+        const computedStyle = window.getComputedStyle(element);
+        return (computedStyle.animation !== 'none' ||
+            computedStyle.transition !== 'all 0s ease 0s' ||
+            computedStyle.transform !== 'none');
+    }
+    // Get motion information for element
+    static getMotionInfo(element) {
+        const computedStyle = window.getComputedStyle(element);
+        return {
+            hasAnimation: computedStyle.animation !== 'none',
+            hasTransition: computedStyle.transition !== 'all 0s ease 0s',
+            hasTransform: computedStyle.transform !== 'none',
+            animationDuration: computedStyle.animationDuration,
+            transitionDuration: computedStyle.transitionDuration,
+            transform: computedStyle.transform
+        };
+    }
 }
-
 // Motion reduction hooks for React
 export class MotionReductionHooks {
-  // Get motion reduction state
-  static useMotionReduction(): {
-    isReduced: boolean;
-    preferences: {
-      reduceAnimation: boolean;
-      reduceTransition: boolean;
-      reduceTransform: boolean;
-    };
-    shouldReduceMotion: (element: HTMLElement) => boolean;
-  } {
-    // This would be implemented in a React component
-    // For now, return a mock implementation
-    return {
-      isReduced: false,
-      preferences: {
-        reduceAnimation: false,
-        reduceTransition: false,
-        reduceTransform: false
-      },
-      shouldReduceMotion: () => false
-    };
-  }
-
-  // Get motion-safe duration
-  static useMotionSafeDuration(defaultDuration: string, _type: 'animation' | 'transition'): string {
-    // This would be implemented in a React component
-    return defaultDuration;
-  }
-
-  // Get motion-safe easing
-  static useMotionSafeEasing(defaultEasing: string): string {
-    // This would be implemented in a React component
-    return defaultEasing;
-  }
+    // Get motion reduction state
+    static useMotionReduction() {
+        // This would be implemented in a React component
+        // For now, return a mock implementation
+        return {
+            isReduced: false,
+            preferences: {
+                reduceAnimation: false,
+                reduceTransition: false,
+                reduceTransform: false
+            },
+            shouldReduceMotion: () => false
+        };
+    }
+    // Get motion-safe duration
+    static useMotionSafeDuration(defaultDuration, _type) {
+        // This would be implemented in a React component
+        return defaultDuration;
+    }
+    // Get motion-safe easing
+    static useMotionSafeEasing(defaultEasing) {
+        // This would be implemented in a React component
+        return defaultEasing;
+    }
 }
-
 // Export default instances
 export const motionReductionManager = new MotionReductionManager();
-
 // Export default
 export default {
-  MotionReductionManager,
-  MotionReductionUtils,
-  MotionReductionHooks,
-  motionReductionManager
+    MotionReductionManager,
+    MotionReductionUtils,
+    MotionReductionHooks,
+    motionReductionManager
 };