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

package/dist/hooks/use-accessibility-support.js

@@ -1,54 +1,71 @@
 import { useState, useCallback, useRef, useEffect, KeyboardEvent } from 'react'
 
 export interface AccessibilitySupportConfig {
-  enableAriaSupport?}
+  enableAriaSupport?: boolean
+  enableKeyboardNavigation?: boolean
+  enableScreenReaderSupport?: boolean
+  enableFocusManagement?: boolean
+  enableHighContrast?: boolean
+  enableReducedMotion?: boolean
+  enableVoiceControl?: boolean
+}
 
 export interface AccessibilityState {
-  hasAriaLabels}
+  hasAriaLabels: boolean
+  hasKeyboardNavigation: boolean
+  hasScreenReaderSupport: boolean
+  hasFocusManagement: boolean
+  isHighContrast: boolean
+  isReducedMotion: boolean
+  isVoiceControlEnabled: boolean
+  accessibilityLevel: 'basic' | 'enhanced' | 'advanced'
+}
 
 export interface AccessibilityFeatures {
-  ariaLabels, string>
-  keyboardShortcuts, string>
-  focusableElements, string>
+  ariaLabels: Map<string, string>
+  keyboardShortcuts: Map<string, string>
+  focusableElements: Set<string>
+  screenReaderText: Map<string, string>
 }
 
 export interface AccessibilitySupportCallbacks {
-  onAriaEnhanced?) => void
-  onKeyboardNavigationEnabled?) => void
-  onScreenReaderEnhanced?) => void
-  onFocusManagementImproved?) => void
-  onAccessibilityWarning?) => void
+  onAriaEnhanced?: (feature: string) => void
+  onKeyboardNavigationEnabled?: (feature: string) => void
+  onScreenReaderEnhanced?: (feature: string) => void
+  onFocusManagementImproved?: (feature: string) => void
+  onAccessibilityWarning?: (warning: string) => void
 }
 
 export const useAccessibilitySupport = (
-  config= {},
-  callbacks= {}
+  config: AccessibilitySupportConfig = {},
+  callbacks: AccessibilitySupportCallbacks = {}
 ) => {
   const {
     enableAriaSupport = true,
-    enableKeyboardNavigation= true,
+    enableKeyboardNavigation: enableKeyboardNav = true,
     enableScreenReaderSupport = true,
     enableFocusManagement = true,
-    enableHighContrast= true,
-    enableReducedMotion= true,
-    enableVoiceControl= true
+    enableHighContrast: enableHighContrastMode = true,
+    enableReducedMotion: enableReducedMotionMode = true,
+    enableVoiceControl: enableVoiceControlMode = true
   } = config
 
   const [state, setState] = useState<AccessibilityState>({
-    hasAriaLabels,
-    hasKeyboardNavigation,
-    hasScreenReaderSupport,
-    hasFocusManagement,
-    isHighContrast,
-    isReducedMotion,
-    isVoiceControlEnabled,
-    accessibilityLevel})
+    hasAriaLabels: false,
+    hasKeyboardNavigation: false,
+    hasScreenReaderSupport: false,
+    hasFocusManagement: false,
+    isHighContrast: false,
+    isReducedMotion: false,
+    isVoiceControlEnabled: false,
+    accessibilityLevel: 'basic'
+  })
 
   const [features, setFeatures] = useState<AccessibilityFeatures>({
-    ariaLabels),
-    keyboardShortcuts),
-    focusableElements),
-    screenReaderText)
+    ariaLabels: new Map(),
+    keyboardShortcuts: new Map(),
+    focusableElements: new Set(),
+    screenReaderText: new Map()
   })
 
   const [isEnhancing, setIsEnhancing] = useState(false)
@@ -56,12 +73,12 @@ export const useAccessibilitySupport = (
   const [accessibilityWarnings, setAccessibilityWarnings] = useState<string[]>([])
   
   const focusableElementsRef = useRef<Set<HTMLElement>>(new Set())
-  const keyboardListenersRef = useRef<Map<string, (event) => void>>(new Map())
+  const keyboardListenersRef = useRef<Map<string, (event: KeyboardEvent) => void>>(new Map())
 
   // ARIA support
   const enhanceAriaSupport = useCallback((
-    elementId,
-    ariaAttributes, string>
+    elementId: string,
+    ariaAttributes: Record<string, string>
   ) => {
     if (!enableAriaSupport) return false
 
@@ -78,13 +95,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...ariaEnhancements])
       setState(prev => ({
         ...prev,
-        hasAriaLabels,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasAriaLabels: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        ariaLabels, JSON.stringify(ariaAttributes)))
+        ariaLabels: new Map(prev.ariaLabels.set(elementId, JSON.stringify(ariaAttributes)))
       }))
       
       setIsEnhancing(false)
@@ -99,8 +117,8 @@ export const useAccessibilitySupport = (
 
   // Keyboard navigation
   const enableKeyboardNavigationFeature = useCallback((
-    elementId,
-    shortcuts, string>
+    elementId: string,
+    shortcuts: Record<string, string>
   ) => {
     if (!enableKeyboardNav) return false
 
@@ -117,13 +135,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...keyboardEnhancements])
       setState(prev => ({
         ...prev,
-        hasKeyboardNavigation,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasKeyboardNavigation: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        keyboardShortcuts, JSON.stringify(shortcuts)))
+        keyboardShortcuts: new Map(prev.keyboardShortcuts.set(elementId, JSON.stringify(shortcuts)))
       }))
       
       setIsEnhancing(false)
@@ -138,8 +157,9 @@ export const useAccessibilitySupport = (
 
   // Screen reader support
   const enhanceScreenReaderSupport = useCallback((
-    elementId,
-    screenReaderText) => {
+    elementId: string,
+    screenReaderText: string
+  ) => {
     if (!enableScreenReaderSupport) return false
 
     setIsEnhancing(true)
@@ -155,13 +175,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...screenReaderEnhancements])
       setState(prev => ({
         ...prev,
-        hasScreenReaderSupport,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasScreenReaderSupport: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        screenReaderText, screenReaderText))
+        screenReaderText: new Map(prev.screenReaderText.set(elementId, screenReaderText))
       }))
       
       setIsEnhancing(false)
@@ -176,8 +197,9 @@ export const useAccessibilitySupport = (
 
   // Focus management
   const improveFocusManagement = useCallback((
-    elementId,
-    focusStrategy) => {
+    elementId: string,
+    focusStrategy: 'trap' | 'cycle' | 'skip' | 'highlight'
+  ) => {
     if (!enableFocusManagement) return false
 
     setIsEnhancing(true)
@@ -193,13 +215,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...focusEnhancements])
       setState(prev => ({
         ...prev,
-        hasFocusManagement,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasFocusManagement: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        focusableElements))
+        focusableElements: new Set(prev.focusableElements.add(elementId))
       }))
       
       setIsEnhancing(false)
@@ -229,8 +252,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...highContrastEnhancements])
       setState(prev => ({
         ...prev,
-        isHighContrast,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isHighContrast: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -259,8 +283,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...reducedMotionEnhancements])
       setState(prev => ({
         ...prev,
-        isReducedMotion,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isReducedMotion: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -289,8 +314,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...voiceControlEnhancements])
       setState(prev => ({
         ...prev,
-        isVoiceControlEnabled,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isVoiceControlEnabled: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -305,10 +331,11 @@ export const useAccessibilitySupport = (
   // Accessibility validation
   const validateAccessibility = useCallback(() => {
     const validation = {
-      isValid,
-      warnings] as string[],
-      errors] as string[],
-      score}
+      isValid: true,
+      warnings: [] as string[],
+      errors: [] as string[],
+      score: 0
+    }
     
     // Check ARIA support
     if (!state.hasAriaLabels) {
@@ -346,16 +373,18 @@ export const useAccessibilitySupport = (
   // Accessibility analysis
   const analyzeAccessibility = useCallback(() => {
     const analysis = {
-      level,
-      features,
-        keyboard,
-        screenReader,
-        focus,
-        highContrast,
-        reducedMotion,
-        voiceControl},
-      coverage,
-      recommendations] as string[]
+      level: state.accessibilityLevel,
+      features: {
+        aria: state.hasAriaLabels,
+        keyboard: state.hasKeyboardNavigation,
+        screenReader: state.hasScreenReaderSupport,
+        focus: state.hasFocusManagement,
+        highContrast: state.isHighContrast,
+        reducedMotion: state.isReducedMotion,
+        voiceControl: state.isVoiceControlEnabled
+      },
+      coverage: 0,
+      recommendations: [] as string[]
     }
     
     // Calculate coverage
@@ -410,11 +439,12 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...autoEnhancements])
       setState(prev => ({
         ...prev,
-        hasAriaLabels,
-        hasKeyboardNavigation,
-        hasScreenReaderSupport,
-        hasFocusManagement,
-        accessibilityLevel}))
+        hasAriaLabels: true,
+        hasKeyboardNavigation: true,
+        hasScreenReaderSupport: true,
+        hasFocusManagement: true,
+        accessibilityLevel: 'enhanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -428,7 +458,7 @@ export const useAccessibilitySupport = (
   useEffect(() => {
     // Check for high contrast preference
     if (enableHighContrastMode) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast)')
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)')
       if (highContrastQuery.matches) {
         enableHighContrastFeature()
       }
@@ -436,7 +466,7 @@ export const useAccessibilitySupport = (
     
     // Check for reduced motion preference
     if (enableReducedMotionMode) {
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)')
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
       if (reducedMotionQuery.matches) {
         enableReducedMotionFeature()
       }
@@ -461,12 +491,12 @@ export const useAccessibilitySupport = (
     
     // Enhancement functions
     enhanceAriaSupport,
-    enableKeyboardNavigation,
+    enableKeyboardNavigation: enableKeyboardNavigationFeature,
     enhanceScreenReaderSupport,
     improveFocusManagement,
-    enableHighContrast,
-    enableReducedMotion,
-    enableVoiceControl,
+    enableHighContrast: enableHighContrastFeature,
+    enableReducedMotion: enableReducedMotionFeature,
+    enableVoiceControl: enableVoiceControlFeature,
     autoEnhanceAccessibility,
     
     // Analysis and validation
@@ -474,14 +504,14 @@ export const useAccessibilitySupport = (
     analyzeAccessibility,
     
     // Utility functions
-    isAccessibilityEnhanced) => state.accessibilityLevel !== 'basic',
-    getAccessibilityLevel) => state.accessibilityLevel,
-    getAccessibilityScore) => {
+    isAccessibilityEnhanced: () => state.accessibilityLevel !== 'basic',
+    getAccessibilityLevel: () => state.accessibilityLevel,
+    getAccessibilityScore: () => {
       const validation = validateAccessibility()
       return validation.score
     },
-    clearEnhancements) => setEnhancements([]),
-    clearWarnings) => setAccessibilityWarnings([])
+    clearEnhancements: () => setEnhancements([]),
+    clearWarnings: () => setAccessibilityWarnings([])
   }
 }
 

package/dist/hooks/use-adaptive-layout.esm.js

@@ -5,23 +5,43 @@ export type Orientation = 'portrait' | 'landscape'
 export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
 export interface AdaptiveLayoutState {
-  deviceType}
+  deviceType: DeviceType
+  orientation: Orientation
+  screenSize: ScreenSize
+  width: number
+  height: number
+  isTouchDevice: boolean
+  isHighDensity: boolean
+  isLowPower: boolean
+  performanceScore: number
+}
 
 export interface AdaptiveLayoutConfig {
-  enablePerformanceOptimization?}
+  enablePerformanceOptimization?: boolean
+  enableTouchOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableMemoryOptimization?: boolean
+  breakpoints?: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+    '2xl': number
+  }
 }
 
 export interface AdaptiveLayoutCallbacks {
-  onDeviceChange?) => void
-  onOrientationChange?) => void
-  onScreenSizeChange?) => void
-  onPerformanceChange?) => void
-  onBatteryChange?) => void
+  onDeviceChange?: (deviceType: DeviceType) => void
+  onOrientationChange?: (orientation: Orientation) => void
+  onScreenSizeChange?: (screenSize: ScreenSize) => void
+  onPerformanceChange?: (score: number) => void
+  onBatteryChange?: (isLow: boolean) => void
 }
 
 export const useAdaptiveLayout = (
-  config= {},
-  callbacks= {}
+  config: AdaptiveLayoutConfig = {},
+  callbacks: AdaptiveLayoutCallbacks = {}
 ) => {
   const {
     enablePerformanceOptimization = true,
@@ -29,34 +49,36 @@ export const useAdaptiveLayout = (
     enableBatteryOptimization = true,
     enableMemoryOptimization = true,
     breakpoints = {
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      '2xl'}
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      '2xl': 1536
+    }
   } = config
 
   const [state, setState] = useState<AdaptiveLayoutState>({
-    deviceType,
-    orientation,
-    screenSize,
-    width,
-    height,
-    isTouchDevice,
-    isHighDensity,
-    isLowPower,
-    performanceScore})
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'lg',
+    width: 0,
+    height: 0,
+    isTouchDevice: false,
+    isHighDensity: false,
+    isLowPower: false,
+    performanceScore: 100
+  })
 
   // Device detection
-  const detectDevice = useCallback((width, _height)=> {
+  const detectDevice = useCallback((width: number, _height: number): DeviceType => {
     if (width < breakpoints.md) return 'mobile'
     if (width < breakpoints.lg) return 'tablet'
     return 'desktop'
   }, [breakpoints])
 
   // Screen size detection
-  const detectScreenSize = useCallback((width)=> {
+  const detectScreenSize = useCallback((width: number): ScreenSize => {
     if (width < breakpoints.sm) return 'xs'
     if (width < breakpoints.md) return 'sm'
     if (width < breakpoints.lg) return 'md'
@@ -66,17 +88,17 @@ export const useAdaptiveLayout = (
   }, [breakpoints])
 
   // Touch device detection
-  const detectTouchDevice = useCallback(()=> {
+  const detectTouchDevice = useCallback((): boolean => {
     return 'ontouchstart' in window || navigator.maxTouchPoints > 0
   }, [])
 
   // High density display detection
-  const detectHighDensity = useCallback(()=> {
+  const detectHighDensity = useCallback((): boolean => {
     return window.devicePixelRatio > 1
   }, [])
 
   // Battery status detection
-  const detectBatteryStatus = useCallback(async ()=> {
+  const detectBatteryStatus = useCallback(async (): Promise<boolean> => {
     if ('getBattery' in navigator) {
       try {
         const battery = await (navigator as any).getBattery()
@@ -89,7 +111,7 @@ export const useAdaptiveLayout = (
   }, [])
 
   // Performance monitoring
-  const measurePerformance = useCallback(async ()=> {
+  const measurePerformance = useCallback(async (): Promise<number> => {
     if (!enablePerformanceOptimization) return 100
 
     const startTime = performance.now()
@@ -109,7 +131,7 @@ export const useAdaptiveLayout = (
   }, [enablePerformanceOptimization])
 
   // Memory usage monitoring
-  const measureMemoryUsage = useCallback(()=> {
+  const measureMemoryUsage = useCallback((): number => {
     if (!enableMemoryOptimization || !('memory' in performance)) return 0
     
     const memory = (performance as any).memory
@@ -122,12 +144,13 @@ export const useAdaptiveLayout = (
     const height = window.innerHeight
     const deviceType = detectDevice(width, height)
     const screenSize = detectScreenSize(width)
-    const orientation = width > height ? 'landscape' = detectTouchDevice()
+    const orientation = width > height ? 'landscape' : 'portrait'
+    const isTouchDevice = detectTouchDevice()
     const isHighDensity = detectHighDensity()
     const isLowPower = await detectBatteryStatus()
     const performanceScore = await measurePerformance()
 
-    const newState= {
+    const newState: AdaptiveLayoutState = {
       deviceType,
       orientation,
       screenSize,

package/dist/hooks/use-adaptive-layout.js

@@ -5,23 +5,43 @@ export type Orientation = 'portrait' | 'landscape'
 export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
 export interface AdaptiveLayoutState {
-  deviceType}
+  deviceType: DeviceType
+  orientation: Orientation
+  screenSize: ScreenSize
+  width: number
+  height: number
+  isTouchDevice: boolean
+  isHighDensity: boolean
+  isLowPower: boolean
+  performanceScore: number
+}
 
 export interface AdaptiveLayoutConfig {
-  enablePerformanceOptimization?}
+  enablePerformanceOptimization?: boolean
+  enableTouchOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableMemoryOptimization?: boolean
+  breakpoints?: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+    '2xl': number
+  }
 }
 
 export interface AdaptiveLayoutCallbacks {
-  onDeviceChange?) => void
-  onOrientationChange?) => void
-  onScreenSizeChange?) => void
-  onPerformanceChange?) => void
-  onBatteryChange?) => void
+  onDeviceChange?: (deviceType: DeviceType) => void
+  onOrientationChange?: (orientation: Orientation) => void
+  onScreenSizeChange?: (screenSize: ScreenSize) => void
+  onPerformanceChange?: (score: number) => void
+  onBatteryChange?: (isLow: boolean) => void
 }
 
 export const useAdaptiveLayout = (
-  config= {},
-  callbacks= {}
+  config: AdaptiveLayoutConfig = {},
+  callbacks: AdaptiveLayoutCallbacks = {}
 ) => {
   const {
     enablePerformanceOptimization = true,
@@ -29,34 +49,36 @@ export const useAdaptiveLayout = (
     enableBatteryOptimization = true,
     enableMemoryOptimization = true,
     breakpoints = {
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      '2xl'}
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      '2xl': 1536
+    }
   } = config
 
   const [state, setState] = useState<AdaptiveLayoutState>({
-    deviceType,
-    orientation,
-    screenSize,
-    width,
-    height,
-    isTouchDevice,
-    isHighDensity,
-    isLowPower,
-    performanceScore})
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'lg',
+    width: 0,
+    height: 0,
+    isTouchDevice: false,
+    isHighDensity: false,
+    isLowPower: false,
+    performanceScore: 100
+  })
 
   // Device detection
-  const detectDevice = useCallback((width, _height)=> {
+  const detectDevice = useCallback((width: number, _height: number): DeviceType => {
     if (width < breakpoints.md) return 'mobile'
     if (width < breakpoints.lg) return 'tablet'
     return 'desktop'
   }, [breakpoints])
 
   // Screen size detection
-  const detectScreenSize = useCallback((width)=> {
+  const detectScreenSize = useCallback((width: number): ScreenSize => {
     if (width < breakpoints.sm) return 'xs'
     if (width < breakpoints.md) return 'sm'
     if (width < breakpoints.lg) return 'md'
@@ -66,17 +88,17 @@ export const useAdaptiveLayout = (
   }, [breakpoints])
 
   // Touch device detection
-  const detectTouchDevice = useCallback(()=> {
+  const detectTouchDevice = useCallback((): boolean => {
     return 'ontouchstart' in window || navigator.maxTouchPoints > 0
   }, [])
 
   // High density display detection
-  const detectHighDensity = useCallback(()=> {
+  const detectHighDensity = useCallback((): boolean => {
     return window.devicePixelRatio > 1
   }, [])
 
   // Battery status detection
-  const detectBatteryStatus = useCallback(async ()=> {
+  const detectBatteryStatus = useCallback(async (): Promise<boolean> => {
     if ('getBattery' in navigator) {
       try {
         const battery = await (navigator as any).getBattery()
@@ -89,7 +111,7 @@ export const useAdaptiveLayout = (
   }, [])
 
   // Performance monitoring
-  const measurePerformance = useCallback(async ()=> {
+  const measurePerformance = useCallback(async (): Promise<number> => {
     if (!enablePerformanceOptimization) return 100
 
     const startTime = performance.now()
@@ -109,7 +131,7 @@ export const useAdaptiveLayout = (
   }, [enablePerformanceOptimization])
 
   // Memory usage monitoring
-  const measureMemoryUsage = useCallback(()=> {
+  const measureMemoryUsage = useCallback((): number => {
     if (!enableMemoryOptimization || !('memory' in performance)) return 0
     
     const memory = (performance as any).memory
@@ -122,12 +144,13 @@ export const useAdaptiveLayout = (
     const height = window.innerHeight
     const deviceType = detectDevice(width, height)
     const screenSize = detectScreenSize(width)
-    const orientation = width > height ? 'landscape' = detectTouchDevice()
+    const orientation = width > height ? 'landscape' : 'portrait'
+    const isTouchDevice = detectTouchDevice()
     const isHighDensity = detectHighDensity()
     const isLowPower = await detectBatteryStatus()
     const performanceScore = await measurePerformance()
 
-    const newState= {
+    const newState: AdaptiveLayoutState = {
       deviceType,
       orientation,
       screenSize,