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

package/dist/hooks/use-touch-friendly-interface.d.ts

@@ -1,329 +1,56 @@
 export interface TouchTargetConfig {
-  minSize?: number
-  spacing?: 'compact' | 'default' | 'generous'
-  feedback?: 'scale' | 'ripple' | 'color' | 'none'
-  performance?: boolean
-  accessibility?: boolean
+    minSize?: number;
+    spacing?: 'compact' | 'default' | 'generous';
+    feedback?: 'scale' | 'ripple' | 'color' | 'none';
+    performance?: boolean;
+    accessibility?: boolean;
 }
-
 export interface TouchTargetState {
-  size: number
-  spacing: string
-  feedback: string
-  isOptimized: boolean
-  isAccessible: boolean
-  performanceScore: number
+    size: number;
+    spacing: string;
+    feedback: string;
+    isOptimized: boolean;
+    isAccessible: boolean;
+    performanceScore: number;
 }
-
 export interface TouchInteractionState {
-  isTouching: boolean
-  touchCount: number
-  touchStartTime: number
-  touchDuration: number
-  touchStartX: number
-  touchStartY: number
-  touchCurrentX: number
-  touchCurrentY: number
-  touchDeltaX: number
-  touchDeltaY: number
-  touchVelocity: number
-  gestureType: 'none' | 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch'
+    isTouching: boolean;
+    touchCount: number;
+    touchStartTime: number;
+    touchDuration: number;
+    touchStartX: number;
+    touchStartY: number;
+    touchCurrentX: number;
+    touchCurrentY: number;
+    touchDeltaX: number;
+    touchDeltaY: number;
+    touchVelocity: number;
+    gestureType: 'none' | 'tap' | 'double-tap' | 'long-press' | 'swipe' | 'pinch';
 }
-
 export interface TouchFriendlyInterfaceCallbacks {
-  onTouchTargetOptimized?: (config: TouchTargetConfig) => void
-  onTouchInteractionDetected?: (interaction: TouchInteractionState) => void
-  onPerformanceOptimized?: (score: number) => void
-  onAccessibilityEnhanced?: (feature: string) => void
+    onTouchTargetOptimized?: (config: TouchTargetConfig) => void;
+    onTouchInteractionDetected?: (interaction: TouchInteractionState) => void;
+    onPerformanceOptimized?: (score: number) => void;
+    onAccessibilityEnhanced?: (feature: string) => void;
 }
-
-export declare const useTouchFriendlyInterface: (
-  config: TouchTargetConfig = {},
-  callbacks: TouchFriendlyInterfaceCallbacks = {}
-) => {
-  const {
-    minSize = 44,
-    spacing = 'default',
-    feedback = 'scale',
-    performance: enablePerformance = true,
-    accessibility = true
-  } = config
-
-  const [touchTargetState, setTouchTargetState] = useState<TouchTargetState>({
-    size: minSize,
-    spacing,
-    feedback,
-    isOptimized: false,
-    isAccessible: false,
-    performanceScore: 0
-  })
-
-  const [touchInteractionState, setTouchInteractionState] = useState<TouchInteractionState>({
-    isTouching: false,
-    touchCount: 0,
-    touchStartTime: 0,
-    touchDuration: 0,
-    touchStartX: 0,
-    touchStartY: 0,
-    touchCurrentX: 0,
-    touchCurrentY: 0,
-    touchDeltaX: 0,
-    touchDeltaY: 0,
-    touchVelocity: 0,
-    gestureType: 'none'
-  })
-
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-
-  const touchStartTimeRef = useRef(0)
-  const lastTouchTimeRef = useRef(0)
-  const touchCountRef = useRef(0)
-  const performanceTimerRef = useRef<number | null>(null)
-
-  // Optimize touch targets for 44px compliance
-  const optimizeTouchTargets = useCallback(() => {
-    setIsOptimizing(true)
-
-    setTimeout(() => {
-      const newOptimizations: string[] = []
-
-      // Check and optimize touch target size
-      if (touchTargetState.size < 44) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          size: 44,
-          isOptimized: true
-        }))
-        newOptimizations.push('Touch target size optimized to 44px minimum')
-      }
-
-      // Optimize spacing based on device
-      const deviceSpacing = window.innerWidth <= 768 ? 'generous' : 'default'
-      if (touchTargetState.spacing !== deviceSpacing) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          spacing: deviceSpacing
-        }))
-        newOptimizations.push(`Touch spacing optimized for ${deviceSpacing} layout`)
-      }
-
-      // Performance optimization
-      if (enablePerformance) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          performanceScore: 95
-        }))
-        newOptimizations.push('Touch performance optimized with hardware acceleration')
-      }
-
-      // Accessibility optimization
-      if (accessibility) {
-        setTouchTargetState(prev => ({
-          ...prev,
-          isAccessible: true
-        }))
-        newOptimizations.push('Touch accessibility enhanced with ARIA support')
-      }
-
-      setOptimizations(prev => [...prev, ...newOptimizations])
-      setIsOptimizing(false)
-
-      newOptimizations.forEach(() => {
-        callbacks.onTouchTargetOptimized?.(config)
-      })
-    }, 200)
-  }, [touchTargetState.size, touchTargetState.spacing, performance, accessibility, config, callbacks])
-
-  // Handle touch start events
-  const handleTouchStart = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const currentTime = performance.now()
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      isTouching: true,
-      touchCount: event.touches.length,
-      touchStartTime: currentTime,
-      touchStartX: touch.clientX,
-      touchStartY: touch.clientY,
-      touchCurrentX: touch.clientX,
-      touchCurrentY: touch.clientY,
-      touchDeltaX: 0,
-      touchDeltaY: 0
-    }))
-
-    touchStartTimeRef.current = currentTime
-    touchCountRef.current = event.touches.length
-  }, [])
-
-  // Handle touch move events
-  const handleTouchMove = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const currentTime = performance.now()
-    const deltaX = touch.clientX - touchInteractionState.touchStartX
-    const deltaY = touch.clientY - touchInteractionState.touchStartY
-    const duration = currentTime - touchInteractionState.touchStartTime
-    const velocity = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / duration
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      touchCurrentX: touch.clientX,
-      touchCurrentY: touch.clientY,
-      touchDeltaX: deltaX,
-      touchDeltaY: deltaY,
-      touchDuration: duration,
-      touchVelocity: velocity
-    }))
-  }, [touchInteractionState.touchStartX, touchInteractionState.touchStartY])
-
-  // Handle touch end events
-  const handleTouchEnd = useCallback(() => {
-    const currentTime = performance.now()
-    const duration = currentTime - touchInteractionState.touchStartTime
-    const distance = Math.sqrt(
-      touchInteractionState.touchDeltaX * touchInteractionState.touchDeltaX +
-      touchInteractionState.touchDeltaY * touchInteractionState.touchDeltaY
-    )
-
-    // Detect gesture type
-    let gestureType: TouchInteractionState['gestureType'] = 'none'
-
-    if (duration < 200 && distance < 10) {
-      // Tap detection
-      const timeSinceLastTouch = currentTime - lastTouchTimeRef.current
-      if (timeSinceLastTouch < 300) {
-        gestureType = 'double-tap'
-        touchCountRef.current++
-      } else {
-        gestureType = 'tap'
-        touchCountRef.current = 1
-      }
-    } else if (duration > 500 && distance < 10) {
-      gestureType = 'long-press'
-    } else if (distance > 50) {
-      gestureType = 'swipe'
-    }
-
-    setTouchInteractionState(prev => ({
-      ...prev,
-      isTouching: false,
-      gestureType
-    }))
-
-    lastTouchTimeRef.current = currentTime
-
-    // Trigger callback
-    callbacks.onTouchInteractionDetected?.({
-      ...touchInteractionState,
-      isTouching: false,
-      gestureType
-    })
-  }, [touchInteractionState, callbacks])
-
-  // Performance monitoring
-  const startPerformanceMonitoring = useCallback(() => {
-    if (!enablePerformance) return () => {}
-
-    const measurePerformance = () => {
-      const frameRate = 60 // Simplified for demo
-      const memoryUsage = 0 // Simplified for demo
-
-      const score = Math.max(0, 100 - Math.abs(frameRate - 60) - memoryUsage)
-
-      setTouchTargetState(prev => ({
-        ...prev,
-        performanceScore: Math.round(score)
-      }))
-
-      callbacks.onPerformanceOptimized?.(score)
-
-      performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-    }
-
-    performanceTimerRef.current = requestAnimationFrame(measurePerformance)
-
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [performance, callbacks])
-
-  // Accessibility enhancement
-  const enhanceAccessibility = useCallback(() => {
-    if (!accessibility) return
-
-    const enhancements = [
-      'ARIA labels for touch targets',
-      'Focus management for touch interactions',
-      'Screen reader support for touch gestures',
-      'Keyboard navigation for touch elements'
-    ]
-
-    enhancements.forEach(enhancement => {
-      callbacks.onAccessibilityEnhanced?.(enhancement)
-    })
-  }, [accessibility, callbacks])
-
-  // Initialize touch event listeners
-  useEffect(() => {
-    document.addEventListener('touchstart', handleTouchStart, { passive: false })
-    document.addEventListener('touchmove', handleTouchMove, { passive: false })
-    document.addEventListener('touchend', handleTouchEnd, { passive: false })
-
-    return () => {
-      document.removeEventListener('touchstart', handleTouchStart)
-      document.removeEventListener('touchmove', handleTouchMove)
-      document.removeEventListener('touchend', handleTouchEnd)
-    }
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd])
-
-  // Start performance monitoring
-  useEffect(() => {
-    const stopPerformanceMonitoring = startPerformanceMonitoring()
-    return stopPerformanceMonitoring
-  }, [startPerformanceMonitoring])
-
-  // Auto-optimize on mount
-  useEffect(() => {
-    optimizeTouchTargets()
-    enhanceAccessibility()
-  }, [optimizeTouchTargets, enhanceAccessibility])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (performanceTimerRef.current) {
-        cancelAnimationFrame(performanceTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    touchTargetState,
-    touchInteractionState,
-    isOptimizing,
-    optimizations,
-
-    // Functions
-    optimizeTouchTargets,
-    enhanceAccessibility,
-    startPerformanceMonitoring,
-
-    // Utility functions
-    getTouchTargetSize: () => touchTargetState.size,
-    isTouchTargetCompliant: () => touchTargetState.size >= 44,
-    getTouchSpacing: () => touchTargetState.spacing,
-    getTouchFeedback: () => touchTargetState.feedback,
-    getPerformanceScore: () => touchTargetState.performanceScore,
-    isPerformanceOptimal: () => touchTargetState.performanceScore >= 80,
-    isAccessibilityCompliant: () => touchTargetState.isAccessible,
-    getTouchGestureType: () => touchInteractionState.gestureType,
-    getTouchVelocity: () => touchInteractionState.touchVelocity,
-    clearOptimizations: () => setOptimizations([])
-  }
-}
-
-export default useTouchFriendlyInterface
+export declare const useTouchFriendlyInterface: (config?: TouchTargetConfig, callbacks?: TouchFriendlyInterfaceCallbacks) => {
+    touchTargetState: TouchTargetState;
+    touchInteractionState: TouchInteractionState;
+    isOptimizing: boolean;
+    optimizations: string[];
+    optimizeTouchTargets: () => void;
+    enhanceAccessibility: () => void;
+    startPerformanceMonitoring: () => () => void;
+    getTouchTargetSize: () => number;
+    isTouchTargetCompliant: () => boolean;
+    getTouchSpacing: () => string;
+    getTouchFeedback: () => string;
+    getPerformanceScore: () => number;
+    isPerformanceOptimal: () => boolean;
+    isAccessibilityCompliant: () => boolean;
+    getTouchGestureType: () => "none" | "swipe" | "pinch" | "tap" | "double-tap" | "long-press";
+    getTouchVelocity: () => number;
+    clearOptimizations: () => void;
+};
+export default useTouchFriendlyInterface;
+//# sourceMappingURL=use-touch-friendly-interface.d.ts.map

package/dist/hooks/use-touch-friendly-interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-touch-friendly-interface.d.ts","sourceRoot":"","sources":["../../src/hooks/use-touch-friendly-interface.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IAChD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,EAAE,OAAO,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAA;CAC9E;AAED,MAAM,WAAW,+BAA+B;IAC9C,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5D,0BAA0B,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACzE,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,uBAAuB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAED,eAAO,MAAM,yBAAyB,GACpC,SAAQ,iBAAsB,EAC9B,YAAW,+BAAoC;;;;;;;;;;;;;;;;;;CA6RhD,CAAA;AAED,eAAe,yBAAyB,CAAA"}