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

package/dist/hooks/use-advanced-transition-system.d.ts

@@ -1,390 +0,0 @@
-export interface TransitionConfig {
-  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: boolean
-  currentEasing: string
-  currentDuration: number
-  currentDelay: number
-  performanceScore: number
-  deviceType: 'mobile' | 'tablet' | 'desktop'
-  batteryLevel: 'normal' | 'low' | 'critical'
-  reducedMotion: boolean
-}
-
-export interface TransitionPerformanceMetrics {
-  frameRate: number
-  memoryUsage: number
-  transitionTime: number
-  smoothness: number
-  batteryImpact: number
-}
-
-export interface AdvancedTransitionSystemCallbacks {
-  onTransitionStart?: (config: TransitionConfig) => void
-  onTransitionComplete?: (duration: number) => void
-  onPerformanceOptimized?: (metrics: TransitionPerformanceMetrics) => void
-  onDeviceOptimized?: (deviceType: string) => void
-  onAccessibilityEnhanced?: (feature: string) => void
-}
-
-export declare const useAdvancedTransitionSystem: (
-  config: TransitionConfig = {},
-  callbacks: AdvancedTransitionSystemCallbacks = {}
-) => {
-  const {
-    duration = 300,
-    easing = 'ease-out',
-    delay = 0,
-    performance: enablePerformance = true,
-    deviceOptimization = true,
-    accessibility = true,
-    batteryAware = true
-  } = config
-
-  const [transitionState, setTransitionState] = useState<TransitionState>({
-    isTransitioning: false,
-    currentEasing: easing,
-    currentDuration: duration,
-    currentDelay: delay,
-    performanceScore: 0,
-    deviceType: 'desktop',
-    batteryLevel: 'normal',
-    reducedMotion: false
-  })
-
-  const [performanceMetrics, setPerformanceMetrics] = useState<TransitionPerformanceMetrics>({
-    frameRate: 60,
-    memoryUsage: 0,
-    transitionTime: 0,
-    smoothness: 0,
-    batteryImpact: 0
-  })
-
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  const transitionStartTimeRef = useRef(0)
-  const frameCountRef = useRef(0)
-  const lastFrameTimeRef = useRef(0)
-  const performanceTimerRef = useRef<number | null>(null)
-
-  // Detect device type and optimize transitions accordingly
-  const detectDeviceType = useCallback(() => {
-    const width = window.innerWidth
-
-    let deviceType: TransitionState['deviceType'] = 'desktop'
-
-    if (width <= 480) {
-      deviceType = 'mobile'
-    } else if (width <= 768) {
-      deviceType = 'tablet'
-    } else {
-      deviceType = 'desktop'
-    }
-
-    setTransitionState(prev => ({
-      ...prev,
-      deviceType
-    }))
-
-    return deviceType
-  }, [])
-
-  // Detect reduced motion preference
-  const detectReducedMotion = useCallback(() => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    setTransitionState(prev => ({
-      ...prev,
-      reducedMotion: prefersReducedMotion
-    }))
-
-    return prefersReducedMotion
-  }, [])
-
-  // Simulate battery level detection (in real app, use Battery API)
-  const detectBatteryLevel = useCallback(() => {
-    // Simulate battery levels for demo purposes
-    const batteryLevels = ['normal', 'low', 'critical'] as const
-    const randomLevel = batteryLevels[Math.floor(Math.random() * batteryLevels.length)]
-
-    setTransitionState(prev => ({
-      ...prev,
-      batteryLevel: randomLevel
-    }))
-
-    return randomLevel
-  }, [])
-
-  // Optimize transition duration based on device and battery
-  const optimizeTransitionDuration = useCallback((baseDuration: number) => {
-    let optimizedDuration = baseDuration
-
-    // Device-specific optimization
-    if (deviceOptimization) {
-      switch (transitionState.deviceType) {
-        case 'mobile':
-          optimizedDuration = Math.min(baseDuration, 200)
-          break
-        case 'tablet':
-          optimizedDuration = Math.min(baseDuration, 300)
-          break
-        case 'desktop':
-          optimizedDuration = baseDuration
-          break
-      }
-    }
-
-    // Battery-aware optimization
-    if (batteryAware) {
-      switch (transitionState.batteryLevel) {
-        case 'low':
-          optimizedDuration = Math.min(optimizedDuration, 150)
-          break
-        case 'critical':
-          optimizedDuration = Math.min(optimizedDuration, 100)
-          break
-        case 'normal':
-        default:
-          break
-      }
-    }
-
-    // Reduced motion optimization
-    if (transitionState.reducedMotion) {
-      optimizedDuration = 0
-    }
-
-    return optimizedDuration
-  }, [deviceOptimization, batteryAware, transitionState.deviceType, transitionState.batteryLevel, transitionState.reducedMotion])
-
-  // Start a transition with optimization
-  const startTransition = useCallback((customConfig?: Partial<TransitionConfig>) => {
-    const finalConfig = { ...config, ...customConfig }
-    const optimizedDuration = optimizeTransitionDuration(finalConfig.duration || duration)
-
-    setTransitionState(prev => ({
-      ...prev,
-      isTransitioning: true,
-      currentDuration: optimizedDuration,
-      currentDelay: finalConfig.delay || delay,
-      currentEasing: finalConfig.easing || easing
-    }))
-
-    transitionStartTimeRef.current = performance.now()
-    frameCountRef.current = 0
-    lastFrameTimeRef.current = performance.now()
-
-    callbacks.onTransitionStart?.(finalConfig)
-
-    // Complete transition after duration
-    setTimeout(() => {
-      setTransitionState(prev => ({
-        ...prev,
-        isTransitioning: false
-      }))
-
-      const actualDuration = performance.now() - transitionStartTimeRef.current
-      callbacks.onTransitionComplete?.(actualDuration)
-    }, optimizedDuration + (finalConfig.delay || delay))
-  }, [config, duration, delay, easing, optimizeTransitionDuration, callbacks])
-
-  // Performance monitoring
-  const startPerformanceMonitoring = useCallback(() => {
-    if (!enablePerformance) return () => {}
-
-    const measurePerformance = () => {
-      const currentTime = performance.now()
-      const deltaTime = currentTime - lastFrameTimeRef.current
-
-      if (deltaTime > 0) {
-        frameCountRef.current++
-        const currentFrameRate = 1000 / deltaTime
-
-        // Calculate smoothness based on frame rate consistency
-        const smoothness = Math.max(0, 100 - Math.abs(currentFrameRate - 60))
-
-        // Simulate memory usage (in real app, use Performance API)
-        const memoryUsage = Math.random() * 100
-
-        // Calculate transition time if transitioning
-        const transitionTime = transitionState.isTransitioning 
-          ? currentTime - transitionStartTimeRef.current 
-          : 0
-
-        // Calculate battery impact based on performance
-        const batteryImpact = Math.max(0, 100 - (currentFrameRate * 0.5) - memoryUsage * 0.3)
-
-        setPerformanceMetrics({
-          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: overallScore
-        }))
-
-        lastFrameTimeRef.current = currentTime
-
-        callbacks.onPerformanceOptimized?.({
-          frameRate: Math.round(currentFrameRate),
-          memoryUsage: Math.round(memoryUsage),
-          transitionTime: Math.round(transitionTime),
-          smoothness: Math.round(smoothness),
-          batteryImpact: Math.round(batteryImpact)
-        })
-      }
-
-      performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-    }
-
-    performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [performance, transitionState.isTransitioning, callbacks])
-
-  // Device optimization
-  const optimizeForDevice = useCallback(() => {
-    if (!deviceOptimization) return
-
-    const deviceType = detectDeviceType()
-    const optimizations: string[] = []
-
-    switch (deviceType) {
-      case 'mobile':
-        optimizations.push('Mobile-optimized transitions (200ms max)')
-        optimizations.push('Reduced animation complexity')
-        optimizations.push('Touch-friendly timing')
-        break
-      case 'tablet':
-        optimizations.push('Tablet-optimized transitions (300ms max)')
-        optimizations.push('Balanced performance and smoothness')
-        break
-      case 'desktop':
-        optimizations.push('Desktop-optimized transitions (full duration)')
-        optimizations.push('Maximum visual quality')
-        break
-    }
-
-    setOptimizations(prev => [...prev, ...optimizations])
-    callbacks.onDeviceOptimized?.(deviceType)
-  }, [deviceOptimization, detectDeviceType, callbacks])
-
-  // Accessibility enhancement
-  const enhanceAccessibility = useCallback(() => {
-    if (!accessibility) return
-
-    const enhancements = [
-      'Reduced motion support',
-      'Screen reader compatibility',
-      'Focus management during transitions',
-      'ARIA transition states',
-      'Keyboard navigation support'
-    ]
-
-    enhancements.forEach(enhancement => {
-      callbacks.onAccessibilityEnhanced?.(enhancement)
-    })
-  }, [accessibility, callbacks])
-
-  // Auto-optimize on mount
-  const autoOptimize = useCallback(() => {
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      detectDeviceType()
-      detectReducedMotion()
-      detectBatteryLevel()
-      optimizeForDevice()
-      enhanceAccessibility()
-
-      setIsOptimizing(false)
-    }, 200)
-  }, [detectDeviceType, detectReducedMotion, detectBatteryLevel, optimizeForDevice, enhanceAccessibility])
-
-  // Initialize on mount
-  useEffect(() => {
-    autoOptimize()
-
-    const stopPerformanceMonitoring = startPerformanceMonitoring()
-
-    // Listen for device changes
-    const handleResize = () => {
-      detectDeviceType()
-    }
-
-    // Listen for reduced motion changes
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const handleMotionChange = () => {
-      detectReducedMotion()
-    }
-
-    window.addEventListener('resize', handleResize)
-    mediaQuery.addEventListener('change', handleMotionChange)
-
-    return () => {
-      stopPerformanceMonitoring()
-      window.removeEventListener('resize', handleResize)
-      mediaQuery.removeEventListener('change', handleMotionChange)
-    }
-  }, [autoOptimize, startPerformanceMonitoring, detectDeviceType, detectReducedMotion])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    transitionState,
-    performanceMetrics,
-    isOptimizing,
-    optimizations,
-
-    // Functions
-    startTransition,
-    optimizeForDevice,
-    enhanceAccessibility,
-    startPerformanceMonitoring,
-    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([])
-  }
-}
-
-export default useAdvancedTransitionSystem

package/dist/hooks/use-animation-profile.d.ts

@@ -1,285 +0,0 @@
-export interface AnimationProfile {
-  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: number
-  memoryUsage?: number
-  batteryLevel?: number
-  isLowPowerMode?: boolean
-}
-
-export declare const useAnimationProfile: () => {
-  const deviceInfo = useDevice()
-  const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
-    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: reduce)')
-        setIsReducedMotion(reducedMotionQuery.matches)
-
-        reducedMotionQuery.addEventListener('change', (e) => {
-          setIsReducedMotion(e.matches)
-        })
-      }
-    }
-
-    checkReducedMotion()
-  }, [])
-
-  // Monitor frame rate
-  useEffect(() => {
-    let frameCount = 0
-    let lastTime = performance.now()
-    let animationId: number
-
-    const measureFPS = () => {
-      frameCount++
-      const currentTime = performance.now()
-
-      if (currentTime - lastTime >= 1000) {
-        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
-        setPerformanceMetrics(prev => ({ ...prev, fps }))
-        frameCount = 0
-        lastTime = currentTime
-      }
-
-      animationId = requestAnimationFrame(measureFPS)
-    }
-
-    animationId = requestAnimationFrame(measureFPS)
-
-    return () => {
-      if (animationId) {
-        cancelAnimationFrame(animationId)
-      }
-    }
-  }, [])
-
-  // Monitor memory usage (if available)
-  useEffect(() => {
-    const updateMemoryInfo = () => {
-      if ('memory' in performance) {
-        const memory = (performance as any).memory
-        setPerformanceMetrics(prev => ({
-          ...prev,
-          memoryUsage: memory.usedJSHeapSize / memory.jsHeapSizeLimit
-        }))
-      }
-    }
-
-    const interval = setInterval(updateMemoryInfo, 5000)
-    updateMemoryInfo()
-
-    return () => clearInterval(interval)
-  }, [])
-
-  // Monitor battery status (if available)
-  useEffect(() => {
-    const updateBatteryInfo = async () => {
-      if ('getBattery' in navigator) {
-        try {
-          const battery = await (navigator as any).getBattery()
-          setPerformanceMetrics(prev => ({
-            ...prev,
-            batteryLevel: battery.level,
-            isLowPowerMode: battery.level < 0.2
-          }))
-
-          battery.addEventListener('levelchange', () => {
-            setPerformanceMetrics(prev => ({
-              ...prev,
-              batteryLevel: battery.level,
-              isLowPowerMode: battery.level < 0.2
-            }))
-          })
-        } catch (error) {
-          console.warn('Battery API not available:', error)
-        }
-      }
-    }
-
-    updateBatteryInfo()
-  }, [])
-
-  // Determine performance mode based on metrics
-  const performanceMode = useMemo(() => {
-    if (performanceMetrics.fps < 30) return 'low'
-    if (performanceMetrics.fps < 50) return 'medium'
-    return 'high'
-  }, [performanceMetrics.fps])
-
-  // Determine if battery optimization should be enabled
-  const shouldOptimizeForBattery = useMemo(() => {
-    return (
-      performanceMetrics.isLowPowerMode ||
-      (performanceMetrics.batteryLevel !== undefined && performanceMetrics.batteryLevel < 0.3) ||
-      performanceMode === 'low'
-    )
-  }, [performanceMetrics.isLowPowerMode, performanceMetrics.batteryLevel, performanceMode])
-
-  // Get device-specific animation profile
-  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: {
-        mode: performanceMode,
-        batteryOptimized: shouldOptimizeForBattery,
-        reducedMotion: isReducedMotion
-      }
-    }
-
-    // Apply device-specific optimizations
-    if (deviceInfo.isMobile) {
-      baseProfile.duration.fast = '0.1s'
-      baseProfile.duration.normal = '0.2s'
-      baseProfile.duration.slow = '0.3s'
-    } else if (deviceInfo.isTablet) {
-      baseProfile.duration.fast = '0.15s'
-      baseProfile.duration.normal = '0.25s'
-      baseProfile.duration.slow = '0.4s'
-    }
-
-    // Apply performance-based optimizations
-    if (performanceMode === 'low' || shouldOptimizeForBattery) {
-      baseProfile.duration.fast = '0.05s'
-      baseProfile.duration.normal = '0.1s'
-      baseProfile.duration.slow = '0.15s'
-    }
-
-    // Apply reduced motion preferences
-    if (isReducedMotion) {
-      baseProfile.duration.fast = '0.01s'
-      baseProfile.duration.normal = '0.01s'
-      baseProfile.duration.slow = '0.01s'
-      baseProfile.easing.ease = 'linear'
-      baseProfile.easing.easeIn = 'linear'
-      baseProfile.easing.easeOut = 'linear'
-      baseProfile.easing.easeInOut = 'linear'
-      baseProfile.easing.bounce = 'linear'
-    }
-
-    return baseProfile
-  }, [deviceInfo.isMobile, deviceInfo.isTablet, performanceMode, shouldOptimizeForBattery, isReducedMotion])
-
-  // Get CSS classes for the current animation profile
-  const getAnimationClasses = useCallback(() => {
-    const profile = getAnimationProfile()
-    const classes = []
-
-    // Device-specific classes
-    if (deviceInfo.isMobile) {
-      classes.push('coach-stan-mobile-animation')
-    } else if (deviceInfo.isTablet) {
-      classes.push('coach-stan-tablet-animation')
-    } else {
-      classes.push('coach-stan-desktop-animation')
-    }
-
-    // Performance-based classes
-    if (profile.performance.mode === 'low' || profile.performance.batteryOptimized) {
-      classes.push('coach-stan-performance-mode')
-    }
-
-    if (profile.performance.batteryOptimized) {
-      classes.push('coach-stan-battery-saver')
-    }
-
-    // Reduced motion classes
-    if (profile.performance.reducedMotion) {
-      classes.push('reduced-motion')
-    }
-
-    return classes.join(' ')
-  }, [deviceInfo.isMobile, deviceInfo.isTablet, getAnimationProfile])
-
-  // Get optimized duration for specific use case
-  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: keyof AnimationProfile['easing'] = 'ease') => {
-    const profile = getAnimationProfile()
-    return profile.easing[type]
-  }, [getAnimationProfile])
-
-  // Check if animations should be disabled
-  const shouldDisableAnimations = useCallback(() => {
-    return (
-      isReducedMotion ||
-      performanceMode === 'low' ||
-      shouldOptimizeForBattery
-    )
-  }, [isReducedMotion, performanceMode, shouldOptimizeForBattery])
-
-  return {
-    profile: getAnimationProfile(),
-    performanceMetrics,
-    deviceInfo,
-    getAnimationClasses,
-    getOptimizedDuration,
-    getOptimizedEasing,
-    shouldDisableAnimations,
-    isReducedMotion,
-    performanceMode,
-    shouldOptimizeForBattery
-  }
-}
-
-// Convenience hooks for specific use cases
-export declare const useAnimationDuration: (type: 'fast' | 'normal' | 'slow' = 'normal') => {
-  const { getOptimizedDuration } = useAnimationProfile()
-  return getOptimizedDuration(type)
-}
-
-export declare const useAnimationEasing: (type: keyof AnimationProfile['easing'] = 'ease') => {
-  const { getOptimizedEasing } = useAnimationProfile()
-  return getOptimizedEasing(type)
-}
-
-export declare const useAnimationClasses: () => {
-  const { getAnimationClasses } = useAnimationProfile()
-  return getAnimationClasses()
-}
-
-export declare const usePerformanceMode: () => {
-  const { performanceMode, shouldOptimizeForBattery } = useAnimationProfile()
-  return { performanceMode, shouldOptimizeForBattery }
-}