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

package/dist/hooks/use-hardware-acceleration.js

@@ -1,24 +1,45 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface GPUInfo {
-  vendor}
+  vendor: string
+  renderer: string
+  version: string
+  isWebGLSupported: boolean
+  isWebGL2Supported: boolean
+  maxTextureSize: number
+  maxAnisotropy: number
+  maxPrecision: string
+}
 
 export interface HardwareAccelerationMetrics {
-  fps}
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  gpuUtilization: number
+  batteryImpact: number
+  performanceScore: number
+}
 
 export interface HardwareAccelerationConfig {
-  enableGPUMonitoring?}
+  enableGPUMonitoring?: boolean
+  enablePerformanceTracking?: boolean
+  enableBatteryOptimization?: boolean
+  enableAutomaticOptimization?: boolean
+  fpsTarget?: number
+  memoryThreshold?: number
+  batteryLowThreshold?: number
+}
 
 export interface HardwareAccelerationCallbacks {
-  onGPUDetected?) => void
-  onPerformanceWarning?, metrics) => void
-  onBatteryWarning?, isLow) => void
-  onOptimizationApplied?) => void
+  onGPUDetected?: (gpuInfo: GPUInfo) => void
+  onPerformanceWarning?: (warning: string, metrics: HardwareAccelerationMetrics) => void
+  onBatteryWarning?: (level: number, isLow: boolean) => void
+  onOptimizationApplied?: (optimization: string) => void
 }
 
 export const useHardwareAcceleration = (
-  config= {},
-  callbacks= {}
+  config: HardwareAccelerationConfig = {},
+  callbacks: HardwareAccelerationCallbacks = {}
 ) => {
   const {
     enableGPUMonitoring = true,
@@ -32,12 +53,13 @@ export const useHardwareAcceleration = (
 
   const [gpuInfo, setGpuInfo] = useState<GPUInfo | null>(null)
   const [metrics, setMetrics] = useState<HardwareAccelerationMetrics>({
-    fps,
-    frameTime,
-    memoryUsage,
-    gpuUtilization,
-    batteryImpact,
-    performanceScore})
+    fps: 60,
+    frameTime: 16.67,
+    memoryUsage: 0,
+    gpuUtilization: 0,
+    batteryImpact: 0,
+    performanceScore: 100
+  })
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
   const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false)
@@ -49,7 +71,7 @@ export const useHardwareAcceleration = (
   const performanceTimerRef = useRef<number | null>(null)
 
   // GPU capability detection
-  const detectGPU = useCallback(()=> {
+  const detectGPU = useCallback((): GPUInfo | null => {
     if (!enableGPUMonitoring) return null
 
     try {
@@ -58,18 +80,21 @@ export const useHardwareAcceleration = (
       
       if (!gl) {
         return {
-          vendor,
-          renderer,
-          version,
-          isWebGLSupported,
-          isWebGL2Supported,
-          maxTextureSize,
-          maxAnisotropy,
-          maxPrecision}
+          vendor: 'Unknown',
+          renderer: 'WebGL not supported',
+          version: 'Unknown',
+          isWebGLSupported: false,
+          isWebGL2Supported: false,
+          maxTextureSize: 0,
+          maxAnisotropy: 0,
+          maxPrecision: 'Unknown'
+        }
       }
 
       const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
-      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) = gl.getParameter(gl.VERSION) || 'Unknown'
+      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : 'Unknown'
+      const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Unknown'
+      const version = gl.getParameter(gl.VERSION) || 'Unknown'
       
       // Check WebGL2 support
       const canvas2 = document.createElement('canvas')
@@ -81,11 +106,11 @@ export const useHardwareAcceleration = (
       const maxAnisotropy = gl.getParameter((gl as any).MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0
       const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown'
 
-      const gpuInfo= {
+      const gpuInfo: GPUInfo = {
         vendor,
         renderer,
         version,
-        isWebGLSupported,
+        isWebGLSupported: true,
         isWebGL2Supported,
         maxTextureSize,
         maxAnisotropy,
@@ -97,7 +122,7 @@ export const useHardwareAcceleration = (
       
       return gpuInfo
     } catch (error) {
-      console.warn('GPU detection failed, error)
+      console.warn('GPU detection failed:', error)
       return null
     }
   }, [enableGPUMonitoring, callbacks])
@@ -128,7 +153,7 @@ export const useHardwareAcceleration = (
       
       const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4)
       
-      const newMetrics= {
+      const newMetrics: HardwareAccelerationMetrics = {
         fps,
         frameTime,
         memoryUsage,
@@ -166,7 +191,7 @@ export const useHardwareAcceleration = (
         applyBatteryOptimizations()
       }
     } catch (error) {
-      console.warn('Battery API not available, error)
+      console.warn('Battery API not available:', error)
     }
   }, [enableBatteryOptimization, batteryLowThreshold, callbacks])
 
@@ -199,7 +224,7 @@ export const useHardwareAcceleration = (
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const optimizations] = []
+      const optimizations: string[] = []
       
       if (metrics.fps < fpsTarget * 0.8) {
         optimizations.push('Hardware acceleration optimized for better FPS')
@@ -261,7 +286,7 @@ export const useHardwareAcceleration = (
         }
       }
     } catch (error) {
-      console.warn('Hardware acceleration initialization failed, error)
+      console.warn('Hardware acceleration initialization failed:', error)
     }
   }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance])
 
@@ -303,11 +328,14 @@ export const useHardwareAcceleration = (
     checkHardwareAcceleration,
     
     // Computed values
-    isGPUSupported,
-    isWebGL2Supported,
-    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
-    needsOptimization,
-    batteryOptimized}
+    isGPUSupported: !!gpuInfo?.isWebGLSupported,
+    isWebGL2Supported: !!gpuInfo?.isWebGL2Supported,
+    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
+                     metrics.performanceScore >= 80 ? 'good' : 
+                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
+    needsOptimization: metrics.performanceScore < 70,
+    batteryOptimized: metrics.batteryImpact < 50
+  }
 }
 
 export default useHardwareAcceleration

package/dist/hooks/use-input-accessibility.esm.js

@@ -1,27 +1,51 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface InputAccessibilityConfig {
-  enableARIA?, string>
-  focusTrap?}
+  enableARIA?: boolean
+  enableKeyboardNavigation?: boolean
+  enableScreenReader?: boolean
+  enableFocusManagement?: boolean
+  enableHighContrast?: boolean
+  enableReducedMotion?: boolean
+  enableVoiceControl?: boolean
+  ariaLabels?: Record<string, string>
+  focusTrap?: boolean
+  skipLinks?: boolean
+}
 
 export interface AccessibilityFeature {
-  id}
+  id: string
+  name: string
+  type: 'aria' | 'keyboard' | 'screen-reader' | 'focus' | 'contrast' | 'motion' | 'voice'
+  enabled: boolean
+  impact: 'low' | 'medium' | 'high'
+  description: string
+  ariaLabel?: string
+  keyboardShortcut?: string
+}
 
 export interface AccessibilityState {
-  isHighContrast]
+  isHighContrast: boolean
+  isReducedMotion: boolean
+  isVoiceControl: boolean
+  isKeyboardNavigating: boolean
+  isScreenReaderActive: boolean
+  focusIndex: number
+  accessibilityScore: number
+  activeFeatures: string[]
 }
 
 export interface InputAccessibilityCallbacks {
-  onAccessibilityFeatureEnabled?) => void
-  onKeyboardNavigationEnabled?) => void
-  onScreenReaderOptimized?) => void
-  onFocusManagementEnhanced?) => void
-  onAccessibilityScoreChanged?) => void
+  onAccessibilityFeatureEnabled?: (feature: AccessibilityFeature) => void
+  onKeyboardNavigationEnabled?: (feature: string) => void
+  onScreenReaderOptimized?: (optimization: string) => void
+  onFocusManagementEnhanced?: (feature: string) => void
+  onAccessibilityScoreChanged?: (score: number) => void
 }
 
 export const useInputAccessibility = (
-  config= {},
-  callbacks= {}
+  config: InputAccessibilityConfig = {},
+  callbacks: InputAccessibilityCallbacks = {}
 ) => {
   const {
     enableARIA = true,
@@ -36,14 +60,14 @@ export const useInputAccessibility = (
 
   const [accessibilityFeatures, setAccessibilityFeatures] = useState<AccessibilityFeature[]>([])
   const [accessibilityState, setAccessibilityState] = useState<AccessibilityState>({
-    isHighContrast,
-    isReducedMotion,
-    isVoiceControl,
-    isKeyboardNavigating,
-    isScreenReaderActive,
-    focusIndex,
-    accessibilityScore,
-    activeFeatures]
+    isHighContrast: false,
+    isReducedMotion: false,
+    isVoiceControl: false,
+    isKeyboardNavigating: false,
+    isScreenReaderActive: false,
+    focusIndex: 0,
+    accessibilityScore: 0,
+    activeFeatures: []
   })
 
   const [isEnhancing, setIsEnhancing] = useState(false)
@@ -56,97 +80,106 @@ export const useInputAccessibility = (
 
   // Initialize accessibility features
   const initializeAccessibilityFeatures = useCallback(() => {
-    const features] = [
+    const features: AccessibilityFeature[] = [
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'aria-1',
+        name: 'ARIA Labels',
+        type: 'aria',
+        enabled: enableARIA,
+        impact: 'high',
+        description: 'Enhanced ARIA labels for screen readers',
+        ariaLabel: 'Enhanced accessibility labels'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'aria-2',
+        name: 'ARIA Descriptions',
+        type: 'aria',
+        enabled: enableARIA,
+        impact: 'medium',
+        description: 'Detailed ARIA descriptions for complex inputs',
+        ariaLabel: 'Detailed input descriptions'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        keyboardShortcut, Shift+Tab, Arrow keys'
+        id: 'keyboard-1',
+        name: 'Keyboard Navigation',
+        type: 'keyboard',
+        enabled: enableKeyboardNavigation,
+        impact: 'high',
+        description: 'Full keyboard navigation support',
+        keyboardShortcut: 'Tab, Shift+Tab, Arrow keys'
       },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        keyboardShortcut, Ctrl+Z, etc.'
+        id: 'keyboard-2',
+        name: 'Keyboard Shortcuts',
+        type: 'keyboard',
+        enabled: enableKeyboardNavigation,
+        impact: 'medium',
+        description: 'Custom keyboard shortcuts for common actions',
+        keyboardShortcut: 'Ctrl+S, Ctrl+Z, etc.'
       },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'screen-reader-1',
+        name: 'Screen Reader Support',
+        type: 'screen-reader',
+        enabled: enableScreenReader,
+        impact: 'high',
+        description: 'Optimized screen reader compatibility',
+        ariaLabel: 'Screen reader optimized'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'screen-reader-2',
+        name: 'Live Regions',
+        type: 'screen-reader',
+        enabled: enableScreenReader,
+        impact: 'medium',
+        description: 'Live regions for dynamic content updates',
+        ariaLabel: 'Live content updates'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'focus-1',
+        name: 'Focus Management',
+        type: 'focus',
+        enabled: enableFocusManagement,
+        impact: 'high',
+        description: 'Enhanced focus management and visible focus indicators',
+        ariaLabel: 'Focus management'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'focus-2',
+        name: 'Focus Trap',
+        type: 'focus',
+        enabled: enableFocusManagement && focusTrap,
+        impact: 'medium',
+        description: 'Focus trap for modal dialogs and overlays',
+        ariaLabel: 'Focus containment'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'contrast-1',
+        name: 'High Contrast',
+        type: 'contrast',
+        enabled: enableHighContrast,
+        impact: 'medium',
+        description: 'High contrast mode support',
+        ariaLabel: 'High contrast support'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'motion-1',
+        name: 'Reduced Motion',
+        type: 'motion',
+        enabled: enableReducedMotion,
+        impact: 'medium',
+        description: 'Reduced motion preference support',
+        ariaLabel: 'Reduced motion support'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel}
+        id: 'voice-1',
+        name: 'Voice Control',
+        type: 'voice',
+        enabled: enableVoiceControl,
+        impact: 'low',
+        description: 'Voice control and speech recognition support',
+        ariaLabel: 'Voice control support'
+      }
     ]
 
     setAccessibilityFeatures(features)
@@ -157,34 +190,38 @@ export const useInputAccessibility = (
   const monitorSystemPreferences = useCallback(() => {
     // Monitor reduced motion preference
     if (enableReducedMotion) {
-      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion)')
-      const handleMotionChange = (e) => {
+      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion: reduce)')
+      const handleMotionChange = (e: MediaQueryListEvent) => {
         setAccessibilityState(prev => ({
           ...prev,
-          isReducedMotion}))
+          isReducedMotion: e.matches
+        }))
       }
       motionQueryRef.current.addEventListener('change', handleMotionChange)
       
       // Set initial state
       setAccessibilityState(prev => ({
         ...prev,
-        isReducedMotion}))
+        isReducedMotion: motionQueryRef.current?.matches || false
+      }))
     }
 
     // Monitor high contrast preference
     if (enableHighContrast) {
-      contrastQueryRef.current = window.matchMedia('(prefers-contrast)')
-      const handleContrastChange = (e) => {
+      contrastQueryRef.current = window.matchMedia('(prefers-contrast: high)')
+      const handleContrastChange = (e: MediaQueryListEvent) => {
         setAccessibilityState(prev => ({
           ...prev,
-          isHighContrast}))
+          isHighContrast: e.matches
+        }))
       }
       contrastQueryRef.current.addEventListener('change', handleContrastChange)
       
       // Set initial state
       setAccessibilityState(prev => ({
         ...prev,
-        isHighContrast}))
+        isHighContrast: contrastQueryRef.current?.matches || false
+      }))
     }
 
     // Monitor voice control preference (simulated)
@@ -193,7 +230,7 @@ export const useInputAccessibility = (
       setTimeout(() => {
         setAccessibilityState(prev => ({
           ...prev,
-          isVoiceControl) > 0.7 // 30% chance of voice control being active
+          isVoiceControl: Math.random() > 0.7 // 30% chance of voice control being active
         }))
       }, 1000)
     }
@@ -218,12 +255,13 @@ export const useInputAccessibility = (
       
       ariaEnhancements.forEach(enhancement => {
         callbacks.onAccessibilityFeatureEnabled?.({
-          id,
-          name,
-          type,
-          enabled,
-          impact,
-          description})
+          id: 'aria-enhancement',
+          name: 'ARIA Enhancement',
+          type: 'aria',
+          enabled: true,
+          impact: 'high',
+          description: enhancement
+        })
       })
     }, 200)
   }, [enableARIA, callbacks])
@@ -320,7 +358,7 @@ export const useInputAccessibility = (
     
     setAccessibilityState(prev => ({
       ...prev,
-      accessibilityScore)
+      accessibilityScore: Math.round(score)
     }))
     
     callbacks.onAccessibilityScoreChanged?.(score)
@@ -337,7 +375,7 @@ export const useInputAccessibility = (
 
   // Get accessibility recommendations
   const getAccessibilityRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (accessibilityState.accessibilityScore < 70) {
       recommendations.push('Accessibility score is low, consider enabling more features')
@@ -404,12 +442,12 @@ export const useInputAccessibility = (
     autoEnhanceAccessibility,
     
     // Utility functions
-    isFeatureEnabled) => accessibilityFeatures.find(f => f.id === featureId)?.enabled || false,
-    getFeatureByName) => accessibilityFeatures.find(f => f.name.toLowerCase().includes(name.toLowerCase())),
-    getAccessibilityScore) => accessibilityState.accessibilityScore,
-    isAccessibilityOptimal) => accessibilityState.accessibilityScore >= 80,
+    isFeatureEnabled: (featureId: string) => accessibilityFeatures.find(f => f.id === featureId)?.enabled || false,
+    getFeatureByName: (name: string) => accessibilityFeatures.find(f => f.name.toLowerCase().includes(name.toLowerCase())),
+    getAccessibilityScore: () => accessibilityState.accessibilityScore,
+    isAccessibilityOptimal: () => accessibilityState.accessibilityScore >= 80,
     getAccessibilityRecommendations,
-    clearEnhancements) => setEnhancements([])
+    clearEnhancements: () => setEnhancements([])
   }
 }