@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.8 → 0.2.10

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

@@ -2,22 +2,27 @@ import { screenReaderOptimizer } from './screen-reader';
 
 // Motion reduction theme configuration
 export interface MotionReductionThemeConfig {
-  motion;
-    duration;
-      normal;
-      slow;
+  motion: {
+    reduced: boolean;
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
     };
-    easing;
-      easeIn;
-      easeOut;
-      easeInOut;
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
     };
-    animations;
-      type;
-      preferences;
-        reduceAnimation;
-        reduceTransition;
-        reduceTransform;
+    animations: {
+      enabled: boolean;
+      type: 'none' | 'reduced' | 'full';
+      preferences: {
+        reduceMotion: boolean;
+        reduceAnimation: boolean;
+        reduceTransition: boolean;
+        reduceTransform: boolean;
       };
     };
   };
@@ -25,13 +30,13 @@ export interface MotionReductionThemeConfig {
 
 // 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();
+  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();
@@ -39,8 +44,9 @@ export class MotionReductionManager {
   }
 
   // Initialize system preference detection
-  private initializeSystemPreference()== 'undefined' && window.matchMedia) {
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+  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) => {
@@ -51,7 +57,9 @@ export class MotionReductionManager {
   }
 
   // Setup event listeners
-  private setupEventListeners()== 'undefined') {
+  private setupEventListeners(): void {
+    // Listen for preference changes
+    if (typeof window !== 'undefined') {
       window.addEventListener('storage', (e) => {
         if (e.key === 'motion-reduction-preferences') {
           this.loadPreferences();
@@ -61,17 +69,20 @@ export class MotionReductionManager {
   }
 
   // Enable motion reduction
-  enable()= true;
+  enable(): void {
+    this.isReducedMotion = true;
     this.applyMotionReduction();
   }
 
   // Disable motion reduction
-  disable()= false;
+  disable(): void {
+    this.isReducedMotion = false;
     this.removeMotionReduction();
   }
 
   // Toggle motion reduction
-  toggle()) {
+  toggle(): void {
+    if (this.isReducedMotion) {
       this.disable();
     } else {
       this.enable();
@@ -79,14 +90,17 @@ export class MotionReductionManager {
   }
 
   // Check if motion reduction is enabled
-  isMotionReduced();
+  isMotionReduced(): boolean {
+    return this.isReducedMotion;
   }
 
   // Set specific motion reduction preferences
-  setPreferences(preferences;
-    reduceTransition?;
-    reduceTransform?;
-  })== undefined) {
+  setPreferences(preferences: {
+    reduceAnimation?: boolean;
+    reduceTransition?: boolean;
+    reduceTransform?: boolean;
+  }): void {
+    if (preferences.reduceAnimation !== undefined) {
       this.isReducedAnimation = preferences.reduceAnimation;
     }
     if (preferences.reduceTransition !== undefined) {
@@ -101,20 +115,23 @@ export class MotionReductionManager {
   }
 
   // Get current motion reduction preferences
-  getPreferences();
-    reduceAnimation;
-    reduceTransition;
-    reduceTransform;
+  getPreferences(): {
+    reduceMotion: boolean;
+    reduceAnimation: boolean;
+    reduceTransition: boolean;
+    reduceTransform: boolean;
   } {
     return {
-      reduceMotion,
-      reduceAnimation,
-      reduceTransition,
-      reduceTransform};
+      reduceMotion: this.isReducedMotion,
+      reduceAnimation: this.isReducedAnimation,
+      reduceTransition: this.isReducedTransition,
+      reduceTransform: this.isReducedTransform
+    };
   }
 
   // Apply motion reduction to the document
-  applyMotionReduction()) return;
+  applyMotionReduction(): void {
+    if (!this.isReducedMotion) return;
 
     // Add reduced motion class to document
     document.documentElement.classList.add('reduced-motion');
@@ -132,7 +149,9 @@ export class MotionReductionManager {
   }
 
   // Remove motion reduction from the document
-  removeMotionReduction());
+  removeMotionReduction(): void {
+    // Remove reduced motion class
+    document.documentElement.classList.remove('reduced-motion');
     
     // Remove reduced motion styles
     this.removeReducedMotionStyles();
@@ -147,61 +166,62 @@ export class MotionReductionManager {
   }
 
   // Apply reduced motion styles
-  private applyReducedMotionStyles()= document.createElement('style');
+  private applyReducedMotionStyles(): void {
+    const style = document.createElement('style');
     style.id = 'reduced-motion-styles';
     
     style.textContent = `
       .reduced-motion,
       .reduced-motion * {
         /* Disable animations */
-        animation-duration;
-        animation-iteration-count;
-        animation-delay;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        animation-delay: 0s !important;
         
         /* Disable transitions */
-        transition-duration;
-        transition-delay;
+        transition-duration: 0.01ms !important;
+        transition-delay: 0s !important;
         
         /* Disable transforms */
-        transform;
+        transform: none !important;
         
         /* Disable scroll behavior */
-        scroll-behavior;
+        scroll-behavior: auto !important;
       }
       
       .reduced-motion .motion-safe,
       .reduced-motion *[data-motion-safe="true"] {
         /* Allow safe motion for essential animations */
-        animation-duration;
-        transition-duration;
+        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;
-        transition-duration;
+        animation-duration: 50ms !important;
+        transition-duration: 50ms !important;
       }
       
       /* Specific component overrides */
       .reduced-motion .modal,
       .reduced-motion .tooltip,
       .reduced-motion .popover {
-        animation;
-        transition;
+        animation: none !important;
+        transition: none !important;
       }
       
       .reduced-motion .skeleton {
-        animation;
+        animation: none !important;
       }
       
       .reduced-motion .progress-bar {
-        transition;
+        transition: none !important;
       }
       
       .reduced-motion .carousel,
       .reduced-motion .slider {
-        scroll-behavior;
+        scroll-behavior: auto !important;
       }
     `;
     
@@ -209,14 +229,17 @@ export class MotionReductionManager {
   }
 
   // Remove reduced motion styles
-  private removeReducedMotionStyles()= document.getElementById('reduced-motion-styles');
+  private removeReducedMotionStyles(): void {
+    const style = document.getElementById('reduced-motion-styles');
     if (style) {
       style.remove();
     }
   }
 
   // Process existing elements
-  private processExistingElements()= document.querySelectorAll('[class*="animate"], [class*="transition"], [class*="transform"]');
+  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);
     });
@@ -229,7 +252,9 @@ export class MotionReductionManager {
   }
 
   // Process individual element
-  private processElement(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);
     }
     
@@ -242,33 +267,35 @@ export class MotionReductionManager {
   }
 
   // Get reduced motion styles for element
-  private getReducedMotionStyles(element)= element.style.cssText;
+  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;';
+      reducedStyles += 'animation: none !important;';
     }
     
     // Remove transition properties
     if (this.isReducedTransition) {
       reducedStyles = reducedStyles.replace(/transition[^;]*;?/g, '');
-      reducedStyles += 'transition;';
+      reducedStyles += 'transition: none !important;';
     }
     
     // Remove transform properties
     if (this.isReducedTransform) {
       reducedStyles = reducedStyles.replace(/transform[^;]*;?/g, '');
-      reducedStyles += 'transform;';
+      reducedStyles += 'transform: none !important;';
     }
     
     return reducedStyles;
   }
 
   // Restore original styles
-  private restoreOriginalStyles(), element) => {
+  private restoreOriginalStyles(): void {
+    this.originalStyles.forEach((originalStyle, element) => {
       if (element && element.offsetParent !== null) {
         element.style.cssText = originalStyle;
       }
@@ -279,12 +306,13 @@ export class MotionReductionManager {
   }
 
   // Save preferences to localStorage
-  private savePreferences()== 'undefined' && window.localStorage) {
+  private savePreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
       const preferences = {
-        reduceAnimation,
-        reduceTransition,
-        reduceTransform,
-        timestamp)
+        reduceAnimation: this.isReducedAnimation,
+        reduceTransition: this.isReducedTransition,
+        reduceTransform: this.isReducedTransform,
+        timestamp: Date.now()
       };
       
       window.localStorage.setItem('motion-reduction-preferences', JSON.stringify(preferences));
@@ -292,7 +320,8 @@ export class MotionReductionManager {
   }
 
   // Load preferences from localStorage
-  private loadPreferences()== 'undefined' && window.localStorage) {
+  private loadPreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
       try {
         const stored = window.localStorage.getItem('motion-reduction-preferences');
         if (stored) {
@@ -303,13 +332,14 @@ export class MotionReductionManager {
           this.isReducedTransform = preferences.reduceTransform || false;
         }
       } catch (error) {
-        console.warn('Failed to load motion reduction preferences, error);
+        console.warn('Failed to load motion reduction preferences:', error);
       }
     }
   }
 
   // Check if element should have motion reduced
-  shouldReduceMotion(element)) return false;
+  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') {
@@ -325,7 +355,8 @@ export class MotionReductionManager {
   }
 
   // Get appropriate duration for element
-  getDuration(element, defaultDuration, type))) {
+  getDuration(element: HTMLElement, defaultDuration: string, type: 'animation' | 'transition'): string {
+    if (!this.shouldReduceMotion(element)) {
       return defaultDuration;
     }
     
@@ -334,14 +365,15 @@ export class MotionReductionManager {
     const unit = defaultDuration.replace(/[\d.]/g, '');
     
     if (type === 'animation') {
-      return this.isReducedAnimation ? '0.01ms' , 50)}${unit}`;
+      return this.isReducedAnimation ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
     } else {
-      return this.isReducedTransition ? '0.01ms' , 50)}${unit}`;
+      return this.isReducedTransition ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
     }
   }
 
   // Get appropriate easing for element
-  getEasing(element, defaultEasing))) {
+  getEasing(element: HTMLElement, defaultEasing: string): string {
+    if (!this.shouldReduceMotion(element)) {
       return defaultEasing;
     }
     
@@ -350,7 +382,8 @@ export class MotionReductionManager {
   }
 
   // Create motion-safe wrapper
-  createMotionSafeWrapper(element, callback) => void))) {
+  createMotionSafeWrapper(element: HTMLElement, callback: () => void): void {
+    if (!this.shouldReduceMotion(element)) {
       callback();
       return;
     }
@@ -368,14 +401,17 @@ export class MotionReductionManager {
 
   // Animate element with motion reduction awareness
   animateElement(
-    element,
-    keyframes],
-    options))) {
+    element: HTMLElement,
+    keyframes: Keyframe[],
+    options: KeyframeAnimationOptions
+  ): Animation {
+    if (this.shouldReduceMotion(element)) {
       // Apply reduced motion options
       const reducedOptions = {
         ...options,
-        duration=== 'number' ? options.duration , 50),
-        easing};
+        duration: Math.min(typeof options.duration === 'number' ? options.duration : 300, 50),
+        easing: 'linear'
+      };
       
       return element.animate(keyframes, reducedOptions);
     }
@@ -384,14 +420,14 @@ export class MotionReductionManager {
   }
 
   // Add motion reduction observer
-  addMotionReductionObserver(callback) => void)) => void {
+  addMotionReductionObserver(callback: (isReduced: boolean) => void): () => void {
     const observer = new MutationObserver(() => {
       callback(this.isReducedMotion);
     });
     
     observer.observe(document.documentElement, {
-      attributes,
-      attributeFilter]
+      attributes: true,
+      attributeFilter: ['class']
     });
     
     // Return cleanup function
@@ -399,13 +435,15 @@ export class MotionReductionManager {
   }
 
   // Get motion reduction statistics
-  getStatistics();
-    reducedElements;
-    safeElements;
-    preferences;
-      reduceAnimation;
-      reduceTransition;
-      reduceTransform;
+  getStatistics(): {
+    totalElements: number;
+    reducedElements: number;
+    safeElements: number;
+    preferences: {
+      reduceMotion: boolean;
+      reduceAnimation: boolean;
+      reduceTransition: boolean;
+      reduceTransform: boolean;
     };
   } {
     const totalElements = document.querySelectorAll('*').length;
@@ -416,12 +454,13 @@ export class MotionReductionManager {
       totalElements,
       reducedElements,
       safeElements,
-      preferences)
+      preferences: this.getPreferences()
     };
   }
 
   // Reset all motion reduction settings
-  reset()= false;
+  reset(): void {
+    this.isReducedMotion = false;
     this.isReducedAnimation = false;
     this.isReducedTransition = false;
     this.isReducedTransform = false;
@@ -431,7 +470,8 @@ export class MotionReductionManager {
   }
 
   // Clear stored preferences
-  private clearPreferences()== 'undefined' && window.localStorage) {
+  private clearPreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
       window.localStorage.removeItem('motion-reduction-preferences');
     }
     
@@ -440,7 +480,8 @@ export class MotionReductionManager {
   }
 
   // Destroy motion reduction manager
-  destroy());
+  destroy(): void {
+    this.removeMotionReduction();
     this.clearPreferences();
     
     // Remove event listeners
@@ -453,8 +494,10 @@ export class MotionReductionManager {
 // 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)');
+  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;
     }
     
@@ -471,21 +514,25 @@ export class MotionReductionUtils {
   }
 
   // Get reduced duration
-  static getReducedDuration(duration, reductionFactor= 0.1)= parseFloat(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);
+  static getReducedEasing(_easing: string): string {
+    return 'linear';
   }
 
   // Create motion-safe animation
   static createMotionSafeAnimation(
-    element,
-    keyframes],
-    options))) {
+    element: HTMLElement,
+    keyframes: Keyframe[],
+    options: KeyframeAnimationOptions
+  ): Animation | null {
+    if (this.shouldReduceMotion(element)) {
       // Return null to indicate no animation should be performed
       return null;
     }
@@ -494,7 +541,8 @@ export class MotionReductionUtils {
   }
 
   // Apply motion reduction to CSS custom properties
-  static applyMotionReductionToCSS(element))) return;
+  static applyMotionReductionToCSS(element: HTMLElement): void {
+    if (!this.shouldReduceMotion(element)) return;
     
     const style = element.style;
     
@@ -521,7 +569,8 @@ export class MotionReductionUtils {
   }
 
   // Remove motion reduction from CSS custom properties
-  static removeMotionReductionFromCSS(element)= element.style;
+  static removeMotionReductionFromCSS(element: HTMLElement): void {
+    const style = element.style;
     
     // Remove custom properties
     style.removeProperty('--animation-duration');
@@ -531,7 +580,8 @@ export class MotionReductionUtils {
   }
 
   // Check if element has motion
-  static hasMotion(element)= window.getComputedStyle(element);
+  static hasMotion(element: HTMLElement): boolean {
+    const computedStyle = window.getComputedStyle(element);
     
     return (
       computedStyle.animation !== 'none' ||
@@ -541,52 +591,62 @@ export class MotionReductionUtils {
   }
 
   // Get motion information for element
-  static getMotionInfo(element);
-    hasTransition;
-    hasTransform;
-    animationDuration;
-    transitionDuration;
-    transform;
+  static getMotionInfo(element: HTMLElement): {
+    hasAnimation: boolean;
+    hasTransition: boolean;
+    hasTransform: boolean;
+    animationDuration: string;
+    transitionDuration: string;
+    transform: string;
   } {
     const computedStyle = window.getComputedStyle(element);
     
     return {
-      hasAnimation== 'none',
-      hasTransition== 'all 0s ease 0s',
-      hasTransform== 'none',
-      animationDuration,
-      transitionDuration,
-      transform};
+      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();
-    preferences;
-      reduceTransition;
-      reduceTransform;
+  static useMotionReduction(): {
+    isReduced: boolean;
+    preferences: {
+      reduceAnimation: boolean;
+      reduceTransition: boolean;
+      reduceTransform: boolean;
     };
-    shouldReduceMotion) => boolean;
+    shouldReduceMotion: (element: HTMLElement) => boolean;
   } {
     // This would be implemented in a React component
     // For now, return a mock implementation
     return {
-      isReduced,
-      preferences,
-        reduceTransition,
-        reduceTransform},
-      shouldReduceMotion) => false
+      isReduced: false,
+      preferences: {
+        reduceAnimation: false,
+        reduceTransition: false,
+        reduceTransform: false
+      },
+      shouldReduceMotion: () => false
     };
   }
 
   // Get motion-safe duration
-  static useMotionSafeDuration(defaultDuration, _type);
+  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);
+  static useMotionSafeEasing(defaultEasing: string): string {
+    // This would be implemented in a React component
+    return defaultEasing;
   }
 }