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

package/dist/hooks/use-animation-profile.esm.js

@@ -2,28 +2,47 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useDevice } from './use-device'
 
 export interface AnimationProfile {
-  duration}
-  easing}
-  performance}
+  duration: {
+    fast: string
+    normal: string
+    slow: string
+  }
+  easing: {
+    ease: string
+    easeIn: string
+    easeOut: string
+    easeInOut: string
+    bounce: string
+  }
+  performance: {
+    mode: 'high' | 'medium' | 'low'
+    batteryOptimized: boolean
+    reducedMotion: boolean
+  }
 }
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  memoryUsage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+}
 
 export const useAnimationProfile = () => {
   const deviceInfo = useDevice()
   const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
-    fps,
-    memoryUsage,
-    batteryLevel,
-    isLowPowerMode})
+    fps: 60,
+    memoryUsage: undefined,
+    batteryLevel: undefined,
+    isLowPowerMode: false
+  })
   const [isReducedMotion, setIsReducedMotion] = useState(false)
 
   // Check for reduced motion preference
   useEffect(() => {
     const checkReducedMotion = () => {
       if (typeof window !== 'undefined' && window.matchMedia) {
-        const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)')
+        const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
         setIsReducedMotion(reducedMotionQuery.matches)
         
         reducedMotionQuery.addEventListener('change', (e) => {
@@ -39,7 +58,9 @@ export const useAnimationProfile = () => {
   useEffect(() => {
     let frameCount = 0
     let lastTime = performance.now()
-    let animationId= () => {
+    let animationId: number
+
+    const measureFPS = () => {
       frameCount++
       const currentTime = performance.now()
       
@@ -69,7 +90,8 @@ export const useAnimationProfile = () => {
         const memory = (performance as any).memory
         setPerformanceMetrics(prev => ({
           ...prev,
-          memoryUsage}))
+          memoryUsage: memory.usedJSHeapSize / memory.jsHeapSizeLimit
+        }))
       }
     }
 
@@ -87,17 +109,19 @@ export const useAnimationProfile = () => {
           const battery = await (navigator as any).getBattery()
           setPerformanceMetrics(prev => ({
             ...prev,
-            batteryLevel,
-            isLowPowerMode}))
+            batteryLevel: battery.level,
+            isLowPowerMode: battery.level < 0.2
+          }))
 
           battery.addEventListener('levelchange', () => {
             setPerformanceMetrics(prev => ({
               ...prev,
-              batteryLevel,
-              isLowPowerMode}))
+              batteryLevel: battery.level,
+              isLowPowerMode: battery.level < 0.2
+            }))
           })
         } catch (error) {
-          console.warn('Battery API not available, error)
+          console.warn('Battery API not available:', error)
         }
       }
     }
@@ -122,20 +146,25 @@ export const useAnimationProfile = () => {
   }, [performanceMetrics.isLowPowerMode, performanceMetrics.batteryLevel, performanceMode])
 
   // Get device-specific animation profile
-  const getAnimationProfile = useCallback(()=> {
-    const baseProfile= {
-      duration,
-        normal,
-        slow},
-      easing,
-        easeIn,
-        easeOut,
-        easeInOut,
-        bounce, -0.55, 0.265, 1.55)'
+  const getAnimationProfile = useCallback((): AnimationProfile => {
+    const baseProfile: AnimationProfile = {
+      duration: {
+        fast: '0.15s',
+        normal: '0.3s',
+        slow: '0.5s'
+      },
+      easing: {
+        ease: 'ease',
+        easeIn: 'ease-in',
+        easeOut: 'ease-out',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
       },
-      performance,
-        batteryOptimized,
-        reducedMotion}
+      performance: {
+        mode: performanceMode,
+        batteryOptimized: shouldOptimizeForBattery,
+        reducedMotion: isReducedMotion
+      }
     }
 
     // Apply device-specific optimizations
@@ -203,13 +232,13 @@ export const useAnimationProfile = () => {
   }, [deviceInfo.isMobile, deviceInfo.isTablet, getAnimationProfile])
 
   // Get optimized duration for specific use case
-  const getOptimizedDuration = useCallback((type= 'normal') => {
+  const getOptimizedDuration = useCallback((type: 'fast' | 'normal' | 'slow' = 'normal') => {
     const profile = getAnimationProfile()
     return profile.duration[type]
   }, [getAnimationProfile])
 
   // Get optimized easing for specific use case
-  const getOptimizedEasing = useCallback((type] = 'ease') => {
+  const getOptimizedEasing = useCallback((type: keyof AnimationProfile['easing'] = 'ease') => {
     const profile = getAnimationProfile()
     return profile.easing[type]
   }, [getAnimationProfile])
@@ -224,7 +253,7 @@ export const useAnimationProfile = () => {
   }, [isReducedMotion, performanceMode, shouldOptimizeForBattery])
 
   return {
-    profile),
+    profile: getAnimationProfile(),
     performanceMetrics,
     deviceInfo,
     getAnimationClasses,
@@ -238,12 +267,12 @@ export const useAnimationProfile = () => {
 }
 
 // Convenience hooks for specific use cases
-export const useAnimationDuration = (type= 'normal') => {
+export const useAnimationDuration = (type: 'fast' | 'normal' | 'slow' = 'normal') => {
   const { getOptimizedDuration } = useAnimationProfile()
   return getOptimizedDuration(type)
 }
 
-export const useAnimationEasing = (type] = 'ease') => {
+export const useAnimationEasing = (type: keyof AnimationProfile['easing'] = 'ease') => {
   const { getOptimizedEasing } = useAnimationProfile()
   return getOptimizedEasing(type)
 }

package/dist/hooks/use-animation-profile.js

@@ -2,28 +2,47 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useDevice } from './use-device'
 
 export interface AnimationProfile {
-  duration}
-  easing}
-  performance}
+  duration: {
+    fast: string
+    normal: string
+    slow: string
+  }
+  easing: {
+    ease: string
+    easeIn: string
+    easeOut: string
+    easeInOut: string
+    bounce: string
+  }
+  performance: {
+    mode: 'high' | 'medium' | 'low'
+    batteryOptimized: boolean
+    reducedMotion: boolean
+  }
 }
 
 export interface PerformanceMetrics {
-  fps}
+  fps: number
+  memoryUsage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+}
 
 export const useAnimationProfile = () => {
   const deviceInfo = useDevice()
   const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
-    fps,
-    memoryUsage,
-    batteryLevel,
-    isLowPowerMode})
+    fps: 60,
+    memoryUsage: undefined,
+    batteryLevel: undefined,
+    isLowPowerMode: false
+  })
   const [isReducedMotion, setIsReducedMotion] = useState(false)
 
   // Check for reduced motion preference
   useEffect(() => {
     const checkReducedMotion = () => {
       if (typeof window !== 'undefined' && window.matchMedia) {
-        const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)')
+        const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
         setIsReducedMotion(reducedMotionQuery.matches)
         
         reducedMotionQuery.addEventListener('change', (e) => {
@@ -39,7 +58,9 @@ export const useAnimationProfile = () => {
   useEffect(() => {
     let frameCount = 0
     let lastTime = performance.now()
-    let animationId= () => {
+    let animationId: number
+
+    const measureFPS = () => {
       frameCount++
       const currentTime = performance.now()
       
@@ -69,7 +90,8 @@ export const useAnimationProfile = () => {
         const memory = (performance as any).memory
         setPerformanceMetrics(prev => ({
           ...prev,
-          memoryUsage}))
+          memoryUsage: memory.usedJSHeapSize / memory.jsHeapSizeLimit
+        }))
       }
     }
 
@@ -87,17 +109,19 @@ export const useAnimationProfile = () => {
           const battery = await (navigator as any).getBattery()
           setPerformanceMetrics(prev => ({
             ...prev,
-            batteryLevel,
-            isLowPowerMode}))
+            batteryLevel: battery.level,
+            isLowPowerMode: battery.level < 0.2
+          }))
 
           battery.addEventListener('levelchange', () => {
             setPerformanceMetrics(prev => ({
               ...prev,
-              batteryLevel,
-              isLowPowerMode}))
+              batteryLevel: battery.level,
+              isLowPowerMode: battery.level < 0.2
+            }))
           })
         } catch (error) {
-          console.warn('Battery API not available, error)
+          console.warn('Battery API not available:', error)
         }
       }
     }
@@ -122,20 +146,25 @@ export const useAnimationProfile = () => {
   }, [performanceMetrics.isLowPowerMode, performanceMetrics.batteryLevel, performanceMode])
 
   // Get device-specific animation profile
-  const getAnimationProfile = useCallback(()=> {
-    const baseProfile= {
-      duration,
-        normal,
-        slow},
-      easing,
-        easeIn,
-        easeOut,
-        easeInOut,
-        bounce, -0.55, 0.265, 1.55)'
+  const getAnimationProfile = useCallback((): AnimationProfile => {
+    const baseProfile: AnimationProfile = {
+      duration: {
+        fast: '0.15s',
+        normal: '0.3s',
+        slow: '0.5s'
+      },
+      easing: {
+        ease: 'ease',
+        easeIn: 'ease-in',
+        easeOut: 'ease-out',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
       },
-      performance,
-        batteryOptimized,
-        reducedMotion}
+      performance: {
+        mode: performanceMode,
+        batteryOptimized: shouldOptimizeForBattery,
+        reducedMotion: isReducedMotion
+      }
     }
 
     // Apply device-specific optimizations
@@ -203,13 +232,13 @@ export const useAnimationProfile = () => {
   }, [deviceInfo.isMobile, deviceInfo.isTablet, getAnimationProfile])
 
   // Get optimized duration for specific use case
-  const getOptimizedDuration = useCallback((type= 'normal') => {
+  const getOptimizedDuration = useCallback((type: 'fast' | 'normal' | 'slow' = 'normal') => {
     const profile = getAnimationProfile()
     return profile.duration[type]
   }, [getAnimationProfile])
 
   // Get optimized easing for specific use case
-  const getOptimizedEasing = useCallback((type] = 'ease') => {
+  const getOptimizedEasing = useCallback((type: keyof AnimationProfile['easing'] = 'ease') => {
     const profile = getAnimationProfile()
     return profile.easing[type]
   }, [getAnimationProfile])
@@ -224,7 +253,7 @@ export const useAnimationProfile = () => {
   }, [isReducedMotion, performanceMode, shouldOptimizeForBattery])
 
   return {
-    profile),
+    profile: getAnimationProfile(),
     performanceMetrics,
     deviceInfo,
     getAnimationClasses,
@@ -238,12 +267,12 @@ export const useAnimationProfile = () => {
 }
 
 // Convenience hooks for specific use cases
-export const useAnimationDuration = (type= 'normal') => {
+export const useAnimationDuration = (type: 'fast' | 'normal' | 'slow' = 'normal') => {
   const { getOptimizedDuration } = useAnimationProfile()
   return getOptimizedDuration(type)
 }
 
-export const useAnimationEasing = (type] = 'ease') => {
+export const useAnimationEasing = (type: keyof AnimationProfile['easing'] = 'ease') => {
   const { getOptimizedEasing } = useAnimationProfile()
   return getOptimizedEasing(type)
 }

package/dist/hooks/use-battery-animations.esm.js

@@ -1,22 +1,40 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface BatteryAnimationConfig {
-  enableBatteryMonitoring?}
+  enableBatteryMonitoring?: boolean
+  enablePerformanceThrottling?: boolean
+  enableReducedMotion?: boolean
+  enableUserPreferences?: boolean
+  enableAutomaticOptimization?: boolean
+  lowBatteryThreshold?: number
+  criticalBatteryThreshold?: number
+  performanceThrottleThreshold?: number
+  animationComplexityLevels?: 'low' | 'medium' | 'high'
+}
 
 export interface BatteryAnimationState {
-  batteryLevel}
+  batteryLevel: number
+  isLowBattery: boolean
+  isCriticalBattery: boolean
+  isCharging: boolean
+  performanceScore: number
+  shouldThrottle: boolean
+  throttleLevel: 'none' | 'light' | 'moderate' | 'aggressive'
+  reducedMotion: boolean
+  userPreference: 'performance' | 'balanced' | 'battery' | 'accessibility'
+}
 
 export interface BatteryAnimationCallbacks {
-  onBatteryLevelChange?, isLow) => void
-  onPerformanceWarning?, shouldThrottle) => void
-  onAnimationThrottled?, reason) => void
-  onUserPreferenceChange?) => void
-  onReducedMotionChange?) => void
+  onBatteryLevelChange?: (level: number, isLow: boolean) => void
+  onPerformanceWarning?: (score: number, shouldThrottle: boolean) => void
+  onAnimationThrottled?: (level: string, reason: string) => void
+  onUserPreferenceChange?: (preference: string) => void
+  onReducedMotionChange?: (enabled: boolean) => void
 }
 
 export const useBatteryAnimations = (
-  config= {},
-  callbacks= {}
+  config: BatteryAnimationConfig = {},
+  callbacks: BatteryAnimationCallbacks = {}
 ) => {
   const {
     enableBatteryMonitoring = true,
@@ -30,15 +48,16 @@ export const useBatteryAnimations = (
   } = config
 
   const [state, setState] = useState<BatteryAnimationState>({
-    batteryLevel,
-    isLowBattery,
-    isCriticalBattery,
-    isCharging,
-    performanceScore,
-    shouldThrottle,
-    throttleLevel,
-    reducedMotion,
-    userPreference})
+    batteryLevel: 1,
+    isLowBattery: false,
+    isCriticalBattery: false,
+    isCharging: false,
+    performanceScore: 100,
+    shouldThrottle: false,
+    throttleLevel: 'none',
+    reducedMotion: false,
+    userPreference: 'balanced'
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -47,7 +66,7 @@ export const useBatteryAnimations = (
   const batteryCheckIntervalRef = useRef<number | null>(null)
 
   // Battery level detection
-  const getBatteryStatus = useCallback(async ()=> {
+  const getBatteryStatus = useCallback(async (): Promise<void> => {
     if (!enableBatteryMonitoring || !('getBattery' in navigator)) return
 
     try {
@@ -69,7 +88,7 @@ export const useBatteryAnimations = (
       
       callbacks.onBatteryLevelChange?.(batteryLevel, isLowBattery)
     } catch (error) {
-      console.warn('Battery API not available, error)
+      console.warn('Battery API not available:', error)
     }
   }, [enableBatteryMonitoring, lowBatteryThreshold, criticalBatteryThreshold, callbacks])
 
@@ -92,7 +111,7 @@ export const useBatteryAnimations = (
         callbacks.onPerformanceWarning?.(performanceScore, shouldThrottle)
       }
     } catch (error) {
-      console.warn('Performance measurement failed, error)
+      console.warn('Performance measurement failed:', error)
     }
   }, [enablePerformanceThrottling, performanceThrottleThreshold, callbacks])
 
@@ -101,7 +120,7 @@ export const useBatteryAnimations = (
     if (!enableReducedMotion) return
 
     try {
-      const reducedMotion = window.matchMedia('(prefers-reduced-motion)').matches
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
       
       setState(prev => ({
         ...prev,
@@ -110,7 +129,7 @@ export const useBatteryAnimations = (
       
       callbacks.onReducedMotionChange?.(reducedMotion)
     } catch (error) {
-      console.warn('Reduced motion detection failed, error)
+      console.warn('Reduced motion detection failed:', error)
     }
   }, [enableReducedMotion, callbacks])
 
@@ -121,23 +140,23 @@ export const useBatteryAnimations = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      let throttleLevel= 'none'
-      let optimizations] = []
+      let throttleLevel: 'none' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
       
       // Battery-based throttling
       if (state.isCriticalBattery) {
         throttleLevel = 'aggressive'
-        optimizations.push('Critical battery)
+        optimizations.push('Critical battery: Maximum animation throttling applied')
         optimizations.push('All non-essential animations disabled')
         optimizations.push('Only essential UI transitions enabled')
       } else if (state.isLowBattery) {
         throttleLevel = 'moderate'
-        optimizations.push('Low battery)
+        optimizations.push('Low battery: Enhanced animation throttling applied')
         optimizations.push('Animation complexity reduced by 60%')
         optimizations.push('Performance optimizations enabled')
       } else if (state.batteryLevel < 0.5) {
         throttleLevel = 'light'
-        optimizations.push('Medium battery)
+        optimizations.push('Medium battery: Light animation throttling applied')
         optimizations.push('Animation complexity reduced by 30%')
         optimizations.push('Battery optimization enabled')
       }
@@ -159,10 +178,10 @@ export const useBatteryAnimations = (
       // User preference consideration
       if (state.userPreference === 'battery') {
         if (throttleLevel === 'none') throttleLevel = 'light'
-        optimizations.push('User preference)
+        optimizations.push('User preference: Battery optimization enabled')
       } else if (state.userPreference === 'accessibility') {
         if (throttleLevel === 'none') throttleLevel = 'light'
-        optimizations.push('User preference)
+        optimizations.push('User preference: Accessibility optimization enabled')
       }
       
       setState(prev => ({
@@ -176,7 +195,7 @@ export const useBatteryAnimations = (
       callbacks.onAnimationThrottled?.(throttleLevel, 'Battery and performance optimization')
       
       optimizations.forEach(optimization => {
-        console.log('Animation optimization, optimization)
+        console.log('Animation optimization:', optimization)
       })
     }, 300)
   }, [enablePerformanceThrottling, state, callbacks])
@@ -186,27 +205,27 @@ export const useBatteryAnimations = (
     const recommendations = []
     
     if (state.isCriticalBattery) {
-      recommendations.push('Critical battery)
+      recommendations.push('Critical battery: Disable all animations except essential transitions')
       recommendations.push('Use static UI elements instead of animated ones')
       recommendations.push('Minimize DOM updates and reflows')
     } else if (state.isLowBattery) {
-      recommendations.push('Low battery)
+      recommendations.push('Low battery: Reduce animation complexity significantly')
       recommendations.push('Use simple transforms instead of complex animations')
       recommendations.push('Limit animation duration to under 300ms')
     } else if (state.batteryLevel < 0.5) {
-      recommendations.push('Medium battery)
+      recommendations.push('Medium battery: Consider light animation optimization')
       recommendations.push('Use CSS transforms instead of JavaScript animations')
       recommendations.push('Implement animation pausing when not in viewport')
     }
     
     if (state.shouldThrottle) {
-      recommendations.push('Performance issue)
+      recommendations.push('Performance issue: Reduce animation frame rate')
       recommendations.push('Use requestAnimationFrame for smooth animations')
       recommendations.push('Implement animation debouncing')
     }
     
     if (state.reducedMotion) {
-      recommendations.push('Accessibility)
+      recommendations.push('Accessibility: Respect reduced motion preference')
       recommendations.push('Provide alternative non-animated experiences')
       recommendations.push('Use subtle transitions instead of animations')
     }
@@ -217,32 +236,37 @@ export const useBatteryAnimations = (
   // Get optimal animation settings
   const getOptimalAnimationSettings = useCallback(() => {
     const settings = {
-      duration,
-      easing,
-      shouldAnimate,
-      complexity,
-      frameRate}
+      duration: 300,
+      easing: 'ease-out',
+      shouldAnimate: true,
+      complexity: 'medium',
+      frameRate: 60
+    }
     
     switch (state.throttleLevel) {
-      case 'aggressive'= 150
+      case 'aggressive':
+        settings.duration = 150
         settings.easing = 'linear'
         settings.shouldAnimate = false
         settings.complexity = 'minimal'
         settings.frameRate = 30
         break
-      case 'moderate'= 200
+      case 'moderate':
+        settings.duration = 200
         settings.easing = 'ease-out'
         settings.shouldAnimate = true
         settings.complexity = 'low'
         settings.frameRate = 45
         break
-      case 'light'= 250
+      case 'light':
+        settings.duration = 250
         settings.easing = 'ease-out'
         settings.shouldAnimate = true
         settings.complexity = 'medium'
         settings.frameRate = 50
         break
-      default= 300
+      default:
+        settings.duration = 300
         settings.easing = 'ease-out'
         settings.shouldAnimate = true
         settings.complexity = 'high'
@@ -261,12 +285,13 @@ export const useBatteryAnimations = (
   }, [state.throttleLevel, state.reducedMotion])
 
   // Update user preferences
-  const updateUserPreference = useCallback((preference) => {
+  const updateUserPreference = useCallback((preference: string) => {
     if (!enableUserPreferences) return
 
     setState(prev => ({
       ...prev,
-      userPreference}))
+      userPreference: preference as any
+    }))
     
     callbacks.onUserPreferenceChange?.(preference)
     
@@ -295,14 +320,14 @@ export const useBatteryAnimations = (
         checkReducedMotion()
         
         // Listen for preference changes
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion)')
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
         const handleChange = () => checkReducedMotion()
         mediaQuery.addEventListener('change', handleChange)
         
         return () => mediaQuery.removeEventListener('change', handleChange)
       }
     } catch (error) {
-      console.warn('Battery animation initialization failed, error)
+      console.warn('Battery animation initialization failed:', error)
     }
   }, [enableBatteryMonitoring, enablePerformanceThrottling, enableReducedMotion, getBatteryStatus, measurePerformance, checkReducedMotion])
 
@@ -339,14 +364,14 @@ export const useBatteryAnimations = (
     updateUserPreference,
     
     // Computed values
-    batteryPercentage),
-    shouldDisableAnimations=== 'aggressive' || state.reducedMotion,
-    animationSettings),
-    recommendations),
+    batteryPercentage: Math.round(state.batteryLevel * 100),
+    shouldDisableAnimations: state.throttleLevel === 'aggressive' || state.reducedMotion,
+    animationSettings: getOptimalAnimationSettings(),
+    recommendations: getAnimationRecommendations(),
     
     // Utility functions
-    isAnimationOptimized) => state.throttleLevel !== 'none',
-    getBatteryHealth) => {
+    isAnimationOptimized: () => state.throttleLevel !== 'none',
+    getBatteryHealth: () => {
       if (state.batteryLevel >= 0.8) return 'excellent'
       if (state.batteryLevel >= 0.6) return 'good'
       if (state.batteryLevel >= 0.4) return 'fair'