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

package/dist/hooks/use-mobile-layout.d.ts

@@ -1,300 +0,0 @@
-export interface TouchTarget {
-  id: string
-  x: number
-  y: number
-  width: number
-  height: number
-  minSize: number
-  isOptimized: boolean
-}
-
-export interface TouchEvent {
-  type: 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
-  target: TouchTarget
-  coordinates: { x: number; y: number }
-  timestamp: number
-  duration?: number
-  distance?: number
-}
-
-export interface MobileLayoutConfig {
-  enableTouchTargetOptimization?: boolean
-  enableGestureSupport?: boolean
-  enableTouchFeedback?: boolean
-  enablePerformanceOptimization?: boolean
-  minTouchTargetSize?: number
-  touchFeedbackDuration?: number
-  gestureThreshold?: number
-  longPressDelay?: number
-}
-
-export interface MobileLayoutCallbacks {
-  onTouchTargetOptimized?: (target: TouchTarget) => void
-  onGestureDetected?: (event: TouchEvent) => void
-  onTouchFeedback?: (type: string, target: TouchTarget) => void
-  onPerformanceOptimization?: (optimization: string) => void
-}
-
-export declare const useMobileLayout: (
-  config: MobileLayoutConfig = {},
-  callbacks: MobileLayoutCallbacks = {}
-) => {
-  const {
-    enableTouchTargetOptimization = true,
-    enableGestureSupport = true,
-    enableTouchFeedback = true,
-    enablePerformanceOptimization = true,
-    minTouchTargetSize = 44, // iOS/Android recommended minimum
-    touchFeedbackDuration = 150,
-    gestureThreshold = 50,
-    longPressDelay = 500
-  } = config
-
-  const [touchTargets, setTouchTargets] = useState<TouchTarget[]>([])
-  const [activeGestures, setActiveGestures] = useState<TouchEvent[]>([])
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  const touchStartRef = useRef<{ x: number; y: number; timestamp: number } | null>(null)
-  const longPressTimerRef = useRef<number | null>(null)
-  const touchFeedbackRef = useRef<HTMLDivElement | null>(null)
-
-  // Touch target optimization
-  const optimizeTouchTargets = useCallback(() => {
-    if (!enableTouchTargetOptimization) return
-
-    setIsOptimizing(true)
-
-    // Simulate touch target optimization
-    setTimeout(() => {
-      const optimizedTargets = touchTargets.map(target => ({
-        ...target,
-        isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
-      }))
-
-      setTouchTargets(optimizedTargets)
-      setIsOptimizing(false)
-
-      const optimizationCount = optimizedTargets.filter(t => t.isOptimized).length
-      setOptimizations(prev => [...prev, `${optimizationCount} touch targets optimized`])
-
-      optimizedTargets.forEach(target => {
-        if (target.isOptimized) {
-          callbacks.onTouchTargetOptimized?.(target)
-        }
-      })
-    }, 200)
-  }, [enableTouchTargetOptimization, touchTargets, minTouchTargetSize, callbacks])
-
-  // Add touch target
-  const addTouchTarget = useCallback((target: Omit<TouchTarget, 'isOptimized'>) => {
-    const newTarget: TouchTarget = {
-      ...target,
-      isOptimized: target.width >= minTouchTargetSize && target.height >= minTouchTargetSize
-    }
-
-    setTouchTargets(prev => [...prev, newTarget])
-
-    if (newTarget.isOptimized) {
-      callbacks.onTouchTargetOptimized?.(newTarget)
-    }
-  }, [minTouchTargetSize, callbacks])
-
-  // Remove touch target
-  const removeTouchTarget = useCallback((id: string) => {
-    setTouchTargets(prev => prev.filter(target => target.id !== id))
-  }, [])
-
-  // Touch feedback
-  const showTouchFeedback = useCallback((type: string, target: TouchTarget) => {
-    if (!enableTouchFeedback) return
-
-    callbacks.onTouchFeedback?.(type, target)
-
-    // Create visual feedback element
-    if (touchFeedbackRef.current) {
-      const feedback = document.createElement('div')
-      feedback.className = `absolute rounded-full bg-cs-primary/20 pointer-events-none transition-all duration-${touchFeedbackDuration}ms`
-      feedback.style.cssText = `
-        left: ${target.x}px;
-        top: ${target.y}px;
-        width: ${target.width}px;
-        height: ${target.height}px;
-        transform: scale(1.2);
-        opacity: 0.8;
-      `
-
-      touchFeedbackRef.current.appendChild(feedback)
-
-      // Animate feedback
-      setTimeout(() => {
-        feedback.style.transform = 'scale(1)'
-        feedback.style.opacity = '0'
-      }, 50)
-
-      // Remove feedback element
-      setTimeout(() => {
-        if (feedback.parentNode) {
-          feedback.parentNode.removeChild(feedback)
-        }
-      }, touchFeedbackDuration)
-    }
-  }, [enableTouchFeedback, touchFeedbackDuration, callbacks])
-
-  // Gesture detection
-  const detectGesture = useCallback((startEvent: TouchEvent, endEvent: TouchEvent): TouchEvent | null => {
-    if (!enableGestureSupport) return null
-
-    const start = touchStartRef.current
-    if (!start) return null
-
-    const deltaX = endEvent.coordinates.x - start.x
-    const deltaY = endEvent.coordinates.y - start.y
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-    const duration = endEvent.timestamp - start.timestamp
-
-    let gestureType: TouchEvent['type'] = 'tap'
-
-    if (distance > gestureThreshold) {
-      if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        gestureType = deltaX > 0 ? 'swipe' : 'swipe'
-      } else {
-        gestureType = deltaY > 0 ? 'swipe' : 'swipe'
-      }
-    } else if (duration > longPressDelay) {
-      gestureType = 'long-press'
-    }
-
-    const gesture: TouchEvent = {
-      type: gestureType,
-      target: startEvent.target,
-      coordinates: endEvent.coordinates,
-      timestamp: endEvent.timestamp,
-      duration,
-      distance
-    }
-
-    setActiveGestures(prev => [...prev, gesture])
-    callbacks.onGestureDetected?.(gesture)
-
-    return gesture
-  }, [enableGestureSupport, gestureThreshold, longPressDelay, callbacks])
-
-  // Touch event handlers
-  const handleTouchStart = useCallback((event: React.TouchEvent, target: TouchTarget) => {
-    const touch = event.touches[0]
-
-    touchStartRef.current = {
-      x: touch.clientX,
-      y: touch.clientY,
-      timestamp: Date.now()
-    }
-
-    // Start long press timer
-    longPressTimerRef.current = window.setTimeout(() => {
-      const longPressEvent: TouchEvent = {
-        type: 'long-press',
-        target,
-        coordinates: { x: touch.clientX, y: touch.clientY },
-        timestamp: Date.now()
-      }
-
-      setActiveGestures(prev => [...prev, longPressEvent])
-      callbacks.onGestureDetected?.(longPressEvent)
-      showTouchFeedback('long-press', target)
-    }, longPressDelay)
-
-    showTouchFeedback('touch-start', target)
-  }, [longPressDelay, callbacks, showTouchFeedback])
-
-  const handleTouchEnd = useCallback((event: React.TouchEvent, target: TouchTarget) => {
-    if (longPressTimerRef.current) {
-      clearTimeout(longPressTimerRef.current)
-      longPressTimerRef.current = null
-    }
-
-    const touch = event.changedTouches[0]
-    const gesture = detectGesture({
-      type: 'tap',
-      target,
-      coordinates: { x: touch.clientX, y: touch.clientY },
-      timestamp: Date.now()
-    }, {
-      type: 'tap',
-      target,
-      coordinates: { x: touch.clientX, y: touch.clientY },
-      timestamp: Date.now()
-    })
-    if (gesture) {
-      showTouchFeedback(gesture.type, target)
-    }
-
-    touchStartRef.current = null
-  }, [detectGesture, showTouchFeedback])
-
-  // Performance optimization
-  const optimizePerformance = useCallback(() => {
-    if (!enablePerformanceOptimization) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      // Simulate performance optimizations
-      const optimizations = [
-        'Touch event throttling enabled',
-        'Gesture detection optimized',
-        'Touch feedback animations optimized',
-        'Memory usage optimized for touch interactions'
-      ]
-
-      setOptimizations(prev => [...prev, ...optimizations])
-      setIsOptimizing(false)
-
-      optimizations.forEach(optimization => {
-        callbacks.onPerformanceOptimization?.(optimization)
-      })
-    }, 300)
-  }, [enablePerformanceOptimization, callbacks])
-
-  // Initialize performance optimization
-  useEffect(() => {
-    if (enablePerformanceOptimization) {
-      optimizePerformance()
-    }
-  }, [enablePerformanceOptimization, optimizePerformance])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (longPressTimerRef.current) {
-        clearTimeout(longPressTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    touchTargets,
-    activeGestures,
-    isOptimizing,
-    optimizations,
-
-    // Actions
-    addTouchTarget,
-    removeTouchTarget,
-    optimizeTouchTargets,
-    showTouchFeedback,
-    detectGesture,
-    handleTouchStart,
-    handleTouchEnd,
-    optimizePerformance,
-
-    // Computed values
-    touchTargetCount: touchTargets.length,
-    optimizedTargetCount: touchTargets.filter(t => t.isOptimized).length,
-    gestureCount: activeGestures.length,
-    isTouchOptimized: touchTargets.every(t => t.isOptimized)
-  }
-}
-
-export default useMobileLayout

package/dist/hooks/use-mobile-optimization.d.ts

@@ -1,404 +0,0 @@
-export interface MobileOptimizationConfig {
-  enableTouchOptimization?: boolean
-  enablePerformanceOptimization?: boolean
-  enableBatteryOptimization?: boolean
-  enableAccessibilityOptimization?: boolean
-  enableResponsiveOptimization?: boolean
-  touchTargetSize?: number
-  performanceThreshold?: number
-  batteryThreshold?: number
-}
-
-export interface MobileOptimizationState {
-  isMobile: boolean
-  isTouchDevice: boolean
-  screenSize: 'small' | 'medium' | 'large'
-  orientation: 'portrait' | 'landscape'
-  batteryLevel: number
-  performanceScore: number
-  accessibilityLevel: 'basic' | 'enhanced' | 'advanced'
-}
-
-export interface MobileOptimizationCallbacks {
-  onMobileOptimized?: (optimization: string) => void
-  onTouchOptimized?: (feature: string) => void
-  onPerformanceOptimized?: (improvement: string) => void
-  onBatteryOptimized?: (strategy: string) => void
-  onAccessibilityEnhanced?: (feature: string) => void
-}
-
-export declare const useMobileOptimization: (
-  config: MobileOptimizationConfig = {},
-  callbacks: MobileOptimizationCallbacks = {}
-) => {
-  const {
-    enableTouchOptimization = true,
-    enablePerformanceOptimization = true,
-    enableBatteryOptimization = true,
-    enableAccessibilityOptimization = true,
-    enableResponsiveOptimization = true,
-    touchTargetSize = 44,
-
-  } = config
-
-  const [state, setState] = useState<MobileOptimizationState>({
-    isMobile: false,
-    isTouchDevice: false,
-    screenSize: 'medium',
-    orientation: 'portrait',
-    batteryLevel: 1,
-    performanceScore: 100,
-    accessibilityLevel: 'basic'
-  })
-
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-  const [touchTargets] = useState<Map<string, HTMLElement>>(new Map())
-
-  const resizeObserverRef = useRef<ResizeObserver | null>(null)
-  const orientationChangeRef = useRef<number | null>(null)
-  const batteryCheckIntervalRef = useRef<number | null>(null)
-
-  // Device detection
-  const detectDevice = useCallback(() => {
-    const userAgent = navigator.userAgent.toLowerCase()
-    const isMobileDevice = /mobile|android|iphone|ipad|phone/i.test(userAgent)
-    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0
-
-    setState(prev => ({
-      ...prev,
-      isMobile: isMobileDevice,
-      isTouchDevice: isTouchDevice
-    }))
-  }, [])
-
-  // Screen size detection
-  const detectScreenSize = useCallback(() => {
-    const width = window.innerWidth
-    let screenSize: 'small' | 'medium' | 'large'
-
-    if (width < 768) {
-      screenSize = 'small'
-    } else if (width < 1024) {
-      screenSize = 'medium'
-    } else {
-      screenSize = 'large'
-    }
-
-    setState(prev => ({
-      ...prev,
-      screenSize
-    }))
-  }, [])
-
-  // Orientation detection
-  const detectOrientation = useCallback(() => {
-    const orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
-
-    setState(prev => ({
-      ...prev,
-      orientation
-    }))
-  }, [])
-
-  // Touch optimization
-  const optimizeTouchTargets = useCallback(() => {
-    if (!enableTouchOptimization || !state.isTouchDevice) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const touchOptimizations = [
-        `Touch targets optimized for ${touchTargetSize}px minimum size`,
-        'Touch feedback animations enabled',
-        'Gesture recognition enhanced',
-        'Touch event optimization applied'
-      ]
-
-      setOptimizations(prev => [...prev, ...touchOptimizations])
-      setIsOptimizing(false)
-
-      touchOptimizations.forEach(optimization => {
-        callbacks.onTouchOptimized?.(optimization)
-      })
-    }, 200)
-  }, [enableTouchOptimization, state.isTouchDevice, touchTargetSize, callbacks])
-
-  // Performance optimization
-  const optimizePerformance = useCallback(() => {
-    if (!enablePerformanceOptimization) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const performanceOptimizations = [
-        'Mobile-specific performance optimizations applied',
-        'Render cycle optimization enabled',
-        'Memory usage optimization applied',
-        'Animation frame rate optimization'
-      ]
-
-      setOptimizations(prev => [...prev, ...performanceOptimizations])
-      setIsOptimizing(false)
-
-      performanceOptimizations.forEach(optimization => {
-        callbacks.onPerformanceOptimized?.(optimization)
-      })
-    }, 300)
-  }, [enablePerformanceOptimization, callbacks])
-
-  // Battery optimization
-  const optimizeBattery = useCallback(() => {
-    if (!enableBatteryOptimization) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const batteryOptimizations = [
-        'Battery-conscious animations enabled',
-        'Background processing minimized',
-        'Power-efficient rendering applied',
-        'Battery level monitoring active'
-      ]
-
-      setOptimizations(prev => [...prev, ...batteryOptimizations])
-      setIsOptimizing(false)
-
-      batteryOptimizations.forEach(optimization => {
-        callbacks.onBatteryOptimized?.(optimization)
-      })
-    }, 250)
-  }, [enableBatteryOptimization, callbacks])
-
-  // Accessibility optimization
-  const optimizeAccessibility = useCallback(() => {
-    if (!enableAccessibilityOptimization) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const accessibilityOptimizations = [
-        'Mobile accessibility features enhanced',
-        'Touch-friendly navigation implemented',
-        'Screen reader compatibility improved',
-        'Focus management optimized for mobile'
-      ]
-
-      setOptimizations(prev => [...prev, ...accessibilityOptimizations])
-      setIsOptimizing(false)
-
-      accessibilityOptimizations.forEach(optimization => {
-        callbacks.onAccessibilityEnhanced?.(optimization)
-      })
-    }, 200)
-  }, [enableAccessibilityOptimization, callbacks])
-
-  // Responsive optimization
-  const optimizeResponsive = useCallback(() => {
-    if (!enableResponsiveOptimization) return
-
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const responsiveOptimizations = [
-        `Responsive design optimized for ${state.screenSize} screens`,
-        `Orientation-specific optimizations for ${state.orientation} mode`,
-        'Mobile-first responsive breakpoints applied',
-        'Touch-friendly responsive layouts implemented'
-      ]
-
-      setOptimizations(prev => [...prev, ...responsiveOptimizations])
-      setIsOptimizing(false)
-
-      responsiveOptimizations.forEach(optimization => {
-        callbacks.onMobileOptimized?.(optimization)
-      })
-    }, 250)
-  }, [enableResponsiveOptimization, state.screenSize, state.orientation, callbacks])
-
-  // Touch target validation
-  const validateTouchTargets = useCallback(() => {
-    if (!enableTouchOptimization) return { isValid: true, issues: [] }
-
-    const issues: string[] = []
-    const targets = Array.from(touchTargets.values())
-
-    targets.forEach((target, index) => {
-      const rect = target.getBoundingClientRect()
-      const minSize = Math.min(rect.width, rect.height)
-
-      if (minSize < touchTargetSize) {
-        issues.push(`Touch target ${index} is too small: ${minSize}px < ${touchTargetSize}px`)
-      }
-    })
-
-    return {
-      isValid: issues.length === 0,
-      issues
-    }
-  }, [enableTouchOptimization, touchTargets, touchTargetSize])
-
-  // Mobile-specific component optimization
-  const optimizeComponentForMobile = useCallback((
-    componentId: string,
-    optimizationType: 'touch' | 'performance' | 'battery' | 'accessibility' | 'responsive'
-  ) => {
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      let optimizations: string[] = []
-
-      switch (optimizationType) {
-        case 'touch':
-          optimizations = [`Touch optimization applied to ${componentId}`]
-          break
-        case 'performance':
-          optimizations = [`Performance optimization applied to ${componentId}`]
-          break
-        case 'battery':
-          optimizations = [`Battery optimization applied to ${componentId}`]
-          break
-        case 'accessibility':
-          optimizations = [`Accessibility optimization applied to ${componentId}`]
-          break
-        case 'responsive':
-          optimizations = [`Responsive optimization applied to ${componentId}`]
-          break
-      }
-
-      setOptimizations(prev => [...prev, ...optimizations])
-      setIsOptimizing(false)
-
-      optimizations.forEach(optimization => {
-        callbacks.onMobileOptimized?.(optimization)
-      })
-    }, 200)
-  }, [callbacks])
-
-  // Mobile optimization analysis
-  const analyzeMobileOptimization = useCallback(() => {
-    const analysis = {
-      isMobileOptimized: state.isMobile && optimizations.length > 0,
-      touchOptimized: optimizations.some(opt => opt.includes('Touch')),
-      performanceOptimized: optimizations.some(opt => opt.includes('Performance')),
-      batteryOptimized: optimizations.some(opt => opt.includes('Battery')),
-      accessibilityOptimized: optimizations.some(opt => opt.includes('Accessibility')),
-      responsiveOptimized: optimizations.some(opt => opt.includes('Responsive')),
-      recommendations: [] as string[]
-    }
-
-    if (!analysis.touchOptimized && state.isTouchDevice) {
-      analysis.recommendations.push('Implement touch optimization for mobile devices')
-    }
-
-    if (!analysis.performanceOptimized) {
-      analysis.recommendations.push('Apply mobile-specific performance optimizations')
-    }
-
-    if (!analysis.batteryOptimized) {
-      analysis.recommendations.push('Implement battery-conscious optimizations')
-    }
-
-    if (!analysis.accessibilityOptimized) {
-      analysis.recommendations.push('Enhance mobile accessibility features')
-    }
-
-    if (!analysis.responsiveOptimized) {
-      analysis.recommendations.push('Optimize responsive design for mobile')
-    }
-
-    return analysis
-  }, [state, optimizations])
-
-  // Initialize mobile optimization
-  useEffect(() => {
-    detectDevice()
-    detectScreenSize()
-    detectOrientation()
-
-    // Set up resize observer
-    if (enableResponsiveOptimization) {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        detectScreenSize()
-        detectOrientation()
-      })
-
-      resizeObserverRef.current.observe(document.body)
-    }
-
-    // Set up orientation change listener
-    if (enableResponsiveOptimization) {
-      orientationChangeRef.current = window.setInterval(detectOrientation, 1000)
-    }
-
-    // Set up battery monitoring
-    if (enableBatteryOptimization && 'getBattery' in navigator) {
-      batteryCheckIntervalRef.current = window.setInterval(async () => {
-        try {
-          const battery = await (navigator as any).getBattery()
-          setState(prev => ({
-            ...prev,
-            batteryLevel: battery.level
-          }))
-        } catch (error) {
-          console.warn('Battery monitoring failed:', error)
-        }
-      }, 10000)
-    }
-
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect()
-      }
-      if (orientationChangeRef.current) {
-        clearInterval(orientationChangeRef.current)
-      }
-      if (batteryCheckIntervalRef.current) {
-        clearInterval(batteryCheckIntervalRef.current)
-      }
-    }
-  }, [enableResponsiveOptimization, enableBatteryOptimization, detectDevice, detectScreenSize, detectOrientation])
-
-  // Auto-optimize when device changes
-  useEffect(() => {
-    if (state.isMobile) {
-      optimizeTouchTargets()
-      optimizePerformance()
-      optimizeBattery()
-      optimizeAccessibility()
-      optimizeResponsive()
-    }
-  }, [state.isMobile, optimizeTouchTargets, optimizePerformance, optimizeBattery, optimizeAccessibility, optimizeResponsive])
-
-  return {
-    // State
-    state,
-    isOptimizing,
-    optimizations,
-
-    // Optimization functions
-    optimizeTouchTargets,
-    optimizePerformance,
-    optimizeBattery,
-    optimizeAccessibility,
-    optimizeResponsive,
-    optimizeComponentForMobile,
-
-    // Analysis
-    validateTouchTargets,
-    analyzeMobileOptimization,
-
-    // Utility functions
-    isMobileOptimized: () => state.isMobile && optimizations.length > 0,
-    getOptimizationLevel: () => {
-      const count = optimizations.length
-      if (count === 0) return 'none'
-      if (count < 3) return 'basic'
-      if (count < 6) return 'intermediate'
-      return 'advanced'
-    },
-    clearOptimizations: () => setOptimizations([])
-  }
-}
-
-export default useMobileOptimization