@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,505 @@
+import { screenReaderOptimizer } from './screen-reader';
+// Motion reduction utilities
+export class MotionReductionManager {
+    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();
+    }
+    // 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
+    applyReducedMotionStyles() {
+        const style = document.createElement('style');
+        style.id = 'reduced-motion-styles';
+        style.textContent = `
+      .reduced-motion,
+      .reduced-motion * {
+        /* Disable animations */
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        animation-delay: 0s !important;
+        
+        /* Disable transitions */
+        transition-duration: 0.01ms !important;
+        transition-delay: 0s !important;
+        
+        /* Disable transforms */
+        transform: none !important;
+        
+        /* Disable scroll behavior */
+        scroll-behavior: auto !important;
+      }
+      
+      .reduced-motion .motion-safe,
+      .reduced-motion *[data-motion-safe="true"] {
+        /* Allow safe motion for essential animations */
+        animation-duration: 150ms !important;
+        transition-duration: 150ms !important;
+      }
+      
+      .reduced-motion .motion-reduce,
+      .reduced-motion *[data-motion-reduce="true"] {
+        /* Apply reduced motion for non-essential animations */
+        animation-duration: 50ms !important;
+        transition-duration: 50ms !important;
+      }
+      
+      /* Specific component overrides */
+      .reduced-motion .modal,
+      .reduced-motion .tooltip,
+      .reduced-motion .popover {
+        animation: none !important;
+        transition: none !important;
+      }
+      
+      .reduced-motion .skeleton {
+        animation: none !important;
+      }
+      
+      .reduced-motion .progress-bar {
+        transition: none !important;
+      }
+      
+      .reduced-motion .carousel,
+      .reduced-motion .slider {
+        scroll-behavior: auto !important;
+      }
+    `;
+        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));
+        }
+    }
+}
+// Motion reduction utilities
+export class MotionReductionUtils {
+    // 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() {
+        // 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
+};