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

package/dist/hooks/use-advanced-transition-system.esm.js

@@ -1,52 +1,74 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface TransitionConfig {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  performance?: boolean
+  deviceOptimization?: boolean
+  accessibility?: boolean
+  batteryAware?: boolean
+}
 
 export interface TransitionState {
-  isTransitioning}
+  isTransitioning: boolean
+  currentEasing: string
+  currentDuration: number
+  currentDelay: number
+  performanceScore: number
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  batteryLevel: 'normal' | 'low' | 'critical'
+  reducedMotion: boolean
+}
 
 export interface TransitionPerformanceMetrics {
-  frameRate}
+  frameRate: number
+  memoryUsage: number
+  transitionTime: number
+  smoothness: number
+  batteryImpact: number
+}
 
 export interface AdvancedTransitionSystemCallbacks {
-  onTransitionStart?) => void
-  onTransitionComplete?) => void
-  onPerformanceOptimized?) => void
-  onDeviceOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onTransitionStart?: (config: TransitionConfig) => void
+  onTransitionComplete?: (duration: number) => void
+  onPerformanceOptimized?: (metrics: TransitionPerformanceMetrics) => void
+  onDeviceOptimized?: (deviceType: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useAdvancedTransitionSystem = (
-  config= {},
-  callbacks= {}
+  config: TransitionConfig = {},
+  callbacks: AdvancedTransitionSystemCallbacks = {}
 ) => {
   const {
     duration = 300,
     easing = 'ease-out',
     delay = 0,
-    performance= true,
+    performance: enablePerformance = true,
     deviceOptimization = true,
     accessibility = true,
     batteryAware = true
   } = config
 
   const [transitionState, setTransitionState] = useState<TransitionState>({
-    isTransitioning,
-    currentEasing,
-    currentDuration,
-    currentDelay,
-    performanceScore,
-    deviceType,
-    batteryLevel,
-    reducedMotion})
+    isTransitioning: false,
+    currentEasing: easing,
+    currentDuration: duration,
+    currentDelay: delay,
+    performanceScore: 0,
+    deviceType: 'desktop',
+    batteryLevel: 'normal',
+    reducedMotion: false
+  })
 
   const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
-    frameRate,
-    memoryUsage,
-    transitionTime,
-    smoothness,
-    batteryImpact})
+    frameRate: 60,
+    memoryUsage: 0,
+    transitionTime: 0,
+    smoothness: 0,
+    batteryImpact: 0
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -61,7 +83,7 @@ export const useAdvancedTransitionSystem = (
   const detectDeviceType = useCallback(() => {
     const width = window.innerWidth
     
-    let deviceType] = 'desktop'
+    let deviceType: TransitionState['deviceType'] = 'desktop'
     
     if (width <= 480) {
       deviceType = 'mobile'
@@ -81,11 +103,12 @@ export const useAdvancedTransitionSystem = (
 
   // Detect reduced motion preference
   const detectReducedMotion = useCallback(() => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
     
     setTransitionState(prev => ({
       ...prev,
-      reducedMotion}))
+      reducedMotion: prefersReducedMotion
+    }))
     
     return prefersReducedMotion
   }, [])
@@ -98,23 +121,27 @@ export const useAdvancedTransitionSystem = (
     
     setTransitionState(prev => ({
       ...prev,
-      batteryLevel}))
+      batteryLevel: randomLevel
+    }))
     
     return randomLevel
   }, [])
 
   // Optimize transition duration based on device and battery
-  const optimizeTransitionDuration = useCallback((baseDuration) => {
+  const optimizeTransitionDuration = useCallback((baseDuration: number) => {
     let optimizedDuration = baseDuration
     
     // Device-specific optimization
     if (deviceOptimization) {
       switch (transitionState.deviceType) {
-        case 'mobile'= Math.min(baseDuration, 200)
+        case 'mobile':
+          optimizedDuration = Math.min(baseDuration, 200)
           break
-        case 'tablet'= Math.min(baseDuration, 300)
+        case 'tablet':
+          optimizedDuration = Math.min(baseDuration, 300)
           break
-        case 'desktop'= baseDuration
+        case 'desktop':
+          optimizedDuration = baseDuration
           break
       }
     }
@@ -122,11 +149,16 @@ export const useAdvancedTransitionSystem = (
     // Battery-aware optimization
     if (batteryAware) {
       switch (transitionState.batteryLevel) {
-        case 'low'= Math.min(optimizedDuration, 150)
+        case 'low':
+          optimizedDuration = Math.min(optimizedDuration, 150)
           break
-        case 'critical'= Math.min(optimizedDuration, 100)
+        case 'critical':
+          optimizedDuration = Math.min(optimizedDuration, 100)
           break
-        case 'normal'}
+        case 'normal':
+        default:
+          break
+      }
     }
     
     // Reduced motion optimization
@@ -138,16 +170,17 @@ export const useAdvancedTransitionSystem = (
   }, [deviceOptimization, batteryAware, transitionState.deviceType, transitionState.batteryLevel, transitionState.reducedMotion])
 
   // Start a transition with optimization
-  const startTransition = useCallback((customConfig?) => {
+  const startTransition = useCallback((customConfig?: Partial<TransitionConfig>) => {
     const finalConfig = { ...config, ...customConfig }
     const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
     
     setTransitionState(prev => ({
       ...prev,
-      isTransitioning,
-      currentDuration,
-      currentDelay,
-      currentEasing}))
+      isTransitioning: true,
+      currentDuration: optimizedDuration,
+      currentDelay: finalConfig.delay || delay,
+      currentEasing: finalConfig.easing || easing
+    }))
     
     transitionStartTimeRef.current = performance.now()
     frameCountRef.current = 0
@@ -159,7 +192,8 @@ export const useAdvancedTransitionSystem = (
     setTimeout(() => {
       setTransitionState(prev => ({
         ...prev,
-        isTransitioning}))
+        isTransitioning: false
+      }))
       
       const actualDuration = performance.now() - transitionStartTimeRef.current
       callbacks.onTransitionComplete?.(actualDuration)
@@ -187,30 +221,34 @@ export const useAdvancedTransitionSystem = (
         // Calculate transition time if transitioning
         const transitionTime = transitionState.isTransitioning 
           ? currentTime - transitionStartTimeRef.current 
-          = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
+          : 0
+        
+        // Calculate battery impact based on performance
+        const batteryImpact = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
         
         setPerformanceMetrics({
-          frameRate),
-          memoryUsage),
-          transitionTime),
-          smoothness),
-          batteryImpact)
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
         })
         
         // Update performance score
         const overallScore = Math.round((smoothness + batteryImpact) / 2)
         setTransitionState(prev => ({
           ...prev,
-          performanceScore}))
+          performanceScore: overallScore
+        }))
         
         lastFrameTimeRef.current = currentTime
         
         callbacks.onPerformanceOptimized?.({
-          frameRate),
-          memoryUsage),
-          transitionTime),
-          smoothness),
-          batteryImpact)
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
         })
       }
       
@@ -231,17 +269,20 @@ export const useAdvancedTransitionSystem = (
     if (!deviceOptimization) return
     
     const deviceType = detectDeviceType()
-    const optimizations] = []
+    const optimizations: string[] = []
     
     switch (deviceType) {
-      case 'mobile')')
+      case 'mobile':
+        optimizations.push('Mobile-optimized transitions (200ms max)')
         optimizations.push('Reduced animation complexity')
         optimizations.push('Touch-friendly timing')
         break
-      case 'tablet')')
+      case 'tablet':
+        optimizations.push('Tablet-optimized transitions (300ms max)')
         optimizations.push('Balanced performance and smoothness')
         break
-      case 'desktop')')
+      case 'desktop':
+        optimizations.push('Desktop-optimized transitions (full duration)')
         optimizations.push('Maximum visual quality')
         break
     }
@@ -294,7 +335,7 @@ export const useAdvancedTransitionSystem = (
     }
     
     // Listen for reduced motion changes
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion)')
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
     const handleMotionChange = () => {
       detectReducedMotion()
     }
@@ -333,19 +374,19 @@ export const useAdvancedTransitionSystem = (
     autoOptimize,
     
     // Utility functions
-    getTransitionDuration) => transitionState.currentDuration,
-    getTransitionEasing) => transitionState.currentEasing,
-    getTransitionDelay) => transitionState.currentDelay,
-    isTransitionActive) => transitionState.isTransitioning,
-    getDeviceType) => transitionState.deviceType,
-    getBatteryLevel) => transitionState.batteryLevel,
-    getReducedMotion) => transitionState.reducedMotion,
-    getPerformanceScore) => transitionState.performanceScore,
-    isPerformanceOptimal) => transitionState.performanceScore >= 80,
-    getFrameRate) => performanceMetrics.frameRate,
-    getSmoothness) => performanceMetrics.smoothness,
-    getBatteryImpact) => performanceMetrics.batteryImpact,
-    clearOptimizations) => setOptimizations([])
+    getTransitionDuration: () => transitionState.currentDuration,
+    getTransitionEasing: () => transitionState.currentEasing,
+    getTransitionDelay: () => transitionState.currentDelay,
+    isTransitionActive: () => transitionState.isTransitioning,
+    getDeviceType: () => transitionState.deviceType,
+    getBatteryLevel: () => transitionState.batteryLevel,
+    getReducedMotion: () => transitionState.reducedMotion,
+    getPerformanceScore: () => transitionState.performanceScore,
+    isPerformanceOptimal: () => transitionState.performanceScore >= 80,
+    getFrameRate: () => performanceMetrics.frameRate,
+    getSmoothness: () => performanceMetrics.smoothness,
+    getBatteryImpact: () => performanceMetrics.batteryImpact,
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

package/dist/hooks/use-advanced-transition-system.js

@@ -1,52 +1,74 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface TransitionConfig {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  performance?: boolean
+  deviceOptimization?: boolean
+  accessibility?: boolean
+  batteryAware?: boolean
+}
 
 export interface TransitionState {
-  isTransitioning}
+  isTransitioning: boolean
+  currentEasing: string
+  currentDuration: number
+  currentDelay: number
+  performanceScore: number
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  batteryLevel: 'normal' | 'low' | 'critical'
+  reducedMotion: boolean
+}
 
 export interface TransitionPerformanceMetrics {
-  frameRate}
+  frameRate: number
+  memoryUsage: number
+  transitionTime: number
+  smoothness: number
+  batteryImpact: number
+}
 
 export interface AdvancedTransitionSystemCallbacks {
-  onTransitionStart?) => void
-  onTransitionComplete?) => void
-  onPerformanceOptimized?) => void
-  onDeviceOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onTransitionStart?: (config: TransitionConfig) => void
+  onTransitionComplete?: (duration: number) => void
+  onPerformanceOptimized?: (metrics: TransitionPerformanceMetrics) => void
+  onDeviceOptimized?: (deviceType: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useAdvancedTransitionSystem = (
-  config= {},
-  callbacks= {}
+  config: TransitionConfig = {},
+  callbacks: AdvancedTransitionSystemCallbacks = {}
 ) => {
   const {
     duration = 300,
     easing = 'ease-out',
     delay = 0,
-    performance= true,
+    performance: enablePerformance = true,
     deviceOptimization = true,
     accessibility = true,
     batteryAware = true
   } = config
 
   const [transitionState, setTransitionState] = useState<TransitionState>({
-    isTransitioning,
-    currentEasing,
-    currentDuration,
-    currentDelay,
-    performanceScore,
-    deviceType,
-    batteryLevel,
-    reducedMotion})
+    isTransitioning: false,
+    currentEasing: easing,
+    currentDuration: duration,
+    currentDelay: delay,
+    performanceScore: 0,
+    deviceType: 'desktop',
+    batteryLevel: 'normal',
+    reducedMotion: false
+  })
 
   const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
-    frameRate,
-    memoryUsage,
-    transitionTime,
-    smoothness,
-    batteryImpact})
+    frameRate: 60,
+    memoryUsage: 0,
+    transitionTime: 0,
+    smoothness: 0,
+    batteryImpact: 0
+  })
 
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -61,7 +83,7 @@ export const useAdvancedTransitionSystem = (
   const detectDeviceType = useCallback(() => {
     const width = window.innerWidth
     
-    let deviceType] = 'desktop'
+    let deviceType: TransitionState['deviceType'] = 'desktop'
     
     if (width <= 480) {
       deviceType = 'mobile'
@@ -81,11 +103,12 @@ export const useAdvancedTransitionSystem = (
 
   // Detect reduced motion preference
   const detectReducedMotion = useCallback(() => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
     
     setTransitionState(prev => ({
       ...prev,
-      reducedMotion}))
+      reducedMotion: prefersReducedMotion
+    }))
     
     return prefersReducedMotion
   }, [])
@@ -98,23 +121,27 @@ export const useAdvancedTransitionSystem = (
     
     setTransitionState(prev => ({
       ...prev,
-      batteryLevel}))
+      batteryLevel: randomLevel
+    }))
     
     return randomLevel
   }, [])
 
   // Optimize transition duration based on device and battery
-  const optimizeTransitionDuration = useCallback((baseDuration) => {
+  const optimizeTransitionDuration = useCallback((baseDuration: number) => {
     let optimizedDuration = baseDuration
     
     // Device-specific optimization
     if (deviceOptimization) {
       switch (transitionState.deviceType) {
-        case 'mobile'= Math.min(baseDuration, 200)
+        case 'mobile':
+          optimizedDuration = Math.min(baseDuration, 200)
           break
-        case 'tablet'= Math.min(baseDuration, 300)
+        case 'tablet':
+          optimizedDuration = Math.min(baseDuration, 300)
           break
-        case 'desktop'= baseDuration
+        case 'desktop':
+          optimizedDuration = baseDuration
           break
       }
     }
@@ -122,11 +149,16 @@ export const useAdvancedTransitionSystem = (
     // Battery-aware optimization
     if (batteryAware) {
       switch (transitionState.batteryLevel) {
-        case 'low'= Math.min(optimizedDuration, 150)
+        case 'low':
+          optimizedDuration = Math.min(optimizedDuration, 150)
           break
-        case 'critical'= Math.min(optimizedDuration, 100)
+        case 'critical':
+          optimizedDuration = Math.min(optimizedDuration, 100)
           break
-        case 'normal'}
+        case 'normal':
+        default:
+          break
+      }
     }
     
     // Reduced motion optimization
@@ -138,16 +170,17 @@ export const useAdvancedTransitionSystem = (
   }, [deviceOptimization, batteryAware, transitionState.deviceType, transitionState.batteryLevel, transitionState.reducedMotion])
 
   // Start a transition with optimization
-  const startTransition = useCallback((customConfig?) => {
+  const startTransition = useCallback((customConfig?: Partial<TransitionConfig>) => {
     const finalConfig = { ...config, ...customConfig }
     const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
     
     setTransitionState(prev => ({
       ...prev,
-      isTransitioning,
-      currentDuration,
-      currentDelay,
-      currentEasing}))
+      isTransitioning: true,
+      currentDuration: optimizedDuration,
+      currentDelay: finalConfig.delay || delay,
+      currentEasing: finalConfig.easing || easing
+    }))
     
     transitionStartTimeRef.current = performance.now()
     frameCountRef.current = 0
@@ -159,7 +192,8 @@ export const useAdvancedTransitionSystem = (
     setTimeout(() => {
       setTransitionState(prev => ({
         ...prev,
-        isTransitioning}))
+        isTransitioning: false
+      }))
       
       const actualDuration = performance.now() - transitionStartTimeRef.current
       callbacks.onTransitionComplete?.(actualDuration)
@@ -187,30 +221,34 @@ export const useAdvancedTransitionSystem = (
         // Calculate transition time if transitioning
         const transitionTime = transitionState.isTransitioning 
           ? currentTime - transitionStartTimeRef.current 
-          = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
+          : 0
+        
+        // Calculate battery impact based on performance
+        const batteryImpact = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
         
         setPerformanceMetrics({
-          frameRate),
-          memoryUsage),
-          transitionTime),
-          smoothness),
-          batteryImpact)
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
         })
         
         // Update performance score
         const overallScore = Math.round((smoothness + batteryImpact) / 2)
         setTransitionState(prev => ({
           ...prev,
-          performanceScore}))
+          performanceScore: overallScore
+        }))
         
         lastFrameTimeRef.current = currentTime
         
         callbacks.onPerformanceOptimized?.({
-          frameRate),
-          memoryUsage),
-          transitionTime),
-          smoothness),
-          batteryImpact)
+          frameRate: Math.round(currentFrameRate),
+          memoryUsage: Math.round(memoryUsage),
+          transitionTime: Math.round(transitionTime),
+          smoothness: Math.round(smoothness),
+          batteryImpact: Math.round(batteryImpact)
         })
       }
       
@@ -231,17 +269,20 @@ export const useAdvancedTransitionSystem = (
     if (!deviceOptimization) return
     
     const deviceType = detectDeviceType()
-    const optimizations] = []
+    const optimizations: string[] = []
     
     switch (deviceType) {
-      case 'mobile')')
+      case 'mobile':
+        optimizations.push('Mobile-optimized transitions (200ms max)')
         optimizations.push('Reduced animation complexity')
         optimizations.push('Touch-friendly timing')
         break
-      case 'tablet')')
+      case 'tablet':
+        optimizations.push('Tablet-optimized transitions (300ms max)')
         optimizations.push('Balanced performance and smoothness')
         break
-      case 'desktop')')
+      case 'desktop':
+        optimizations.push('Desktop-optimized transitions (full duration)')
         optimizations.push('Maximum visual quality')
         break
     }
@@ -294,7 +335,7 @@ export const useAdvancedTransitionSystem = (
     }
     
     // Listen for reduced motion changes
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion)')
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
     const handleMotionChange = () => {
       detectReducedMotion()
     }
@@ -333,19 +374,19 @@ export const useAdvancedTransitionSystem = (
     autoOptimize,
     
     // Utility functions
-    getTransitionDuration) => transitionState.currentDuration,
-    getTransitionEasing) => transitionState.currentEasing,
-    getTransitionDelay) => transitionState.currentDelay,
-    isTransitionActive) => transitionState.isTransitioning,
-    getDeviceType) => transitionState.deviceType,
-    getBatteryLevel) => transitionState.batteryLevel,
-    getReducedMotion) => transitionState.reducedMotion,
-    getPerformanceScore) => transitionState.performanceScore,
-    isPerformanceOptimal) => transitionState.performanceScore >= 80,
-    getFrameRate) => performanceMetrics.frameRate,
-    getSmoothness) => performanceMetrics.smoothness,
-    getBatteryImpact) => performanceMetrics.batteryImpact,
-    clearOptimizations) => setOptimizations([])
+    getTransitionDuration: () => transitionState.currentDuration,
+    getTransitionEasing: () => transitionState.currentEasing,
+    getTransitionDelay: () => transitionState.currentDelay,
+    isTransitionActive: () => transitionState.isTransitioning,
+    getDeviceType: () => transitionState.deviceType,
+    getBatteryLevel: () => transitionState.batteryLevel,
+    getReducedMotion: () => transitionState.reducedMotion,
+    getPerformanceScore: () => transitionState.performanceScore,
+    isPerformanceOptimal: () => transitionState.performanceScore >= 80,
+    getFrameRate: () => performanceMetrics.frameRate,
+    getSmoothness: () => performanceMetrics.smoothness,
+    getBatteryImpact: () => performanceMetrics.batteryImpact,
+    clearOptimizations: () => setOptimizations([])
   }
 }