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

package/dist/hooks/use-mobile-touch.esm.js

@@ -1,414 +1,316 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-export interface MobileTouchConfig {
-  enableTouchFeedback: boolean
-  enableGestureHints: boolean
-  enableTouchSounds: boolean
-  enableHapticFeedback: boolean
-  touchFeedbackDelay: number
-  gestureHintTimeout: number
-  maxTouchPoints: number
-}
-
-export interface TouchFeedbackState {
-  isPressed: boolean
-  feedbackType: 'none' | 'scale' | 'ripple' | 'glow'
-  feedbackIntensity: 'light' | 'medium' | 'strong'
-  lastTouchPosition: { x: number; y: number } | null
-}
-
-export interface GestureHint {
-  type: 'swipe' | 'pinch' | 'longPress' | 'doubleTap' | 'tap'
-  message: string
-  position: { x: number; y: number }
-  timeout: number
-}
-
-export interface MobileTouchCallbacks {
-  onTouchFeedback?: (state: TouchFeedbackState) => void
-  onGestureHint?: (hint: GestureHint) => void
-  onTouchStart?: (position: { x: number; y: number }) => void
-  onTouchEnd?: (position: { x: number; y: number }) => void
-  onTouchMove?: (position: { x: number; y: number }) => void
-}
-
-export interface MobileTouchState {
-  isActive: boolean
-  touchCount: number
-  currentFeedback: TouchFeedbackState
-  activeGestureHints: GestureHint[]
-  deviceCapabilities: {
-    supportsTouch: boolean
-    supportsHaptics: boolean
-    supportsAudio: boolean
-    maxTouchPoints: number
-  }
-}
-
-export const useMobileTouch = (
-  elementRef: React.RefObject<HTMLElement>,
-  callbacks: MobileTouchCallbacks = {},
-  config: Partial<MobileTouchConfig> = {}
-) => {
-  const defaultConfig: MobileTouchConfig = {
-    enableTouchFeedback: true,
-    enableGestureHints: true,
-    enableTouchSounds: false,
-    enableHapticFeedback: true,
-    touchFeedbackDelay: 100,
-    gestureHintTimeout: 3000,
-    maxTouchPoints: 5,
-    ...config
-  }
-
-  // Device info available if needed for future enhancements
-  // const device = useDevice()
-  const [mobileTouchState, setMobileTouchState] = useState<MobileTouchState>({
-    isActive: false,
-    touchCount: 0,
-    currentFeedback: {
-      isPressed: false,
-      feedbackType: 'none',
-      feedbackIntensity: 'medium',
-      lastTouchPosition: null
-    },
-    activeGestureHints: [],
-    deviceCapabilities: {
-      supportsTouch: false,
-      supportsHaptics: false,
-      supportsAudio: false,
-      maxTouchPoints: 0
-    }
-  })
-
-  const touchStartTimeRef = useRef<number>(0)
-  const touchFeedbackTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const gestureHintTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map())
-  const audioContextRef = useRef<AudioContext | null>(null)
-
-  // Initialize device capabilities
-  useEffect(() => {
-    const capabilities = {
-      supportsTouch: 'ontouchstart' in window,
-      supportsHaptics: 'vibrate' in navigator,
-      supportsAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
-      maxTouchPoints: navigator.maxTouchPoints || 0
-    }
-
-    setMobileTouchState(prev => ({
-      ...prev,
-      deviceCapabilities: capabilities
-    }))
-
-    // Initialize audio context if supported
-    if (capabilities.supportsAudio) {
-      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
-    }
-  }, [])
-
-  // Trigger haptic feedback
-  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
-    if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics) return
-
-    const vibrationPattern = {
-      light: 20,
-      medium: 50,
-      strong: 100
-    }
-
-    try {
-      navigator.vibrate(vibrationPattern[intensity])
-    } catch (error) {
-      console.warn('Haptic feedback not supported:', error)
-    }
-  }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics])
-
-  // Trigger touch sound
-  const triggerTouchSound = useCallback((type: 'tap' | 'press' | 'release' = 'tap') => {
-    if (!defaultConfig.enableTouchSounds || !audioContextRef.current) return
-
-    try {
-      const audioContext = audioContextRef.current
-      const oscillator = audioContext.createOscillator()
-      const gainNode = audioContext.createGain()
-      
-      oscillator.connect(gainNode)
-      gainNode.connect(audioContext.destination)
-      
-      // Different sounds for different touch types
-      const soundConfig = {
-        tap: { frequency: 800, duration: 0.1, volume: 0.1 },
-        press: { frequency: 600, duration: 0.2, volume: 0.15 },
-        release: { frequency: 1000, duration: 0.08, volume: 0.08 }
-      }
-      
-      const config = soundConfig[type]
-      oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime)
-      gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime)
-      
-      oscillator.start(audioContext.currentTime)
-      oscillator.stop(audioContext.currentTime + config.duration)
-    } catch (error) {
-      console.warn('Touch sound not supported:', error)
-    }
-  }, [defaultConfig.enableTouchSounds])
-
-  // Update touch feedback state
-  const updateTouchFeedback = useCallback((feedback: Partial<TouchFeedbackState>) => {
-    setMobileTouchState(prev => ({
-      ...prev,
-      currentFeedback: { ...prev.currentFeedback, ...feedback }
-    }))
-
-    callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback)
-  }, [callbacks, mobileTouchState.currentFeedback])
-
-  // Add gesture hint
-  const addGestureHint = useCallback((hint: Omit<GestureHint, 'timeout'>) => {
-    if (!defaultConfig.enableGestureHints) return
-
-    const hintWithTimeout = {
-      ...hint,
-      timeout: Date.now() + defaultConfig.gestureHintTimeout
-    }
-
-    setMobileTouchState(prev => ({
-      ...prev,
-      activeGestureHints: [...prev.activeGestureHints, hintWithTimeout]
-    }))
-
-    // Set timer to remove hint
-    const timer = setTimeout(() => {
-      removeGestureHint(hint.type)
-    }, defaultConfig.gestureHintTimeout)
-
-    gestureHintTimersRef.current.set(hint.type, timer)
-    callbacks.onGestureHint?.(hintWithTimeout)
-  }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks])
-
-  // Remove gesture hint
-  const removeGestureHint = useCallback((type: string) => {
-    setMobileTouchState(prev => ({
-      ...prev,
-      activeGestureHints: prev.activeGestureHints.filter(hint => hint.type !== type)
-    }))
-
-    const timer = gestureHintTimersRef.current.get(type)
-    if (timer) {
-      clearTimeout(timer)
-      gestureHintTimersRef.current.delete(type)
-    }
-  }, [])
-
-  // Handle touch start
-  const handleTouchStart = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const position = { x: touch.clientX, y: touch.clientY }
-    
-    touchStartTimeRef.current = Date.now()
-    
-    setMobileTouchState(prev => ({
-      ...prev,
-      isActive: true,
-      touchCount: event.touches.length
-    }))
-
-    // Update feedback state
-    if (defaultConfig.enableTouchFeedback) {
-      updateTouchFeedback({
-        isPressed: true,
-        feedbackType: 'scale',
-        feedbackIntensity: 'medium',
-        lastTouchPosition: position
-      })
-
-      // Set feedback timer
-      touchFeedbackTimerRef.current = setTimeout(() => {
-        updateTouchFeedback({
-          feedbackType: 'ripple',
-          feedbackIntensity: 'strong'
-        })
-      }, defaultConfig.touchFeedbackDelay)
-    }
-
-    // Trigger feedback
-    triggerHapticFeedback('light')
-    triggerTouchSound('press')
-    
-    callbacks.onTouchStart?.(position)
-  }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks])
-
-  // Handle touch move
-  const handleTouchMove = useCallback((event: TouchEvent) => {
-    const touch = event.touches[0]
-    const position = { x: touch.clientX, y: touch.clientY }
-    
-    // Update feedback state
-    if (defaultConfig.enableTouchFeedback) {
-      updateTouchFeedback({
-        lastTouchPosition: position
-      })
-    }
-    
-    callbacks.onTouchMove?.(position)
-  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks])
-
-  // Handle touch end
-  const handleTouchEnd = useCallback((event: TouchEvent) => {
-    const touch = event.changedTouches[0]
-    const position = { x: touch.clientX, y: touch.clientY }
-    const touchDuration = Date.now() - touchStartTimeRef.current
-    
-    // Clear feedback timer
-    if (touchFeedbackTimerRef.current) {
-      clearTimeout(touchFeedbackTimerRef.current)
-      touchFeedbackTimerRef.current = null
-    }
-
-    // Update feedback state
-    if (defaultConfig.enableTouchFeedback) {
-      updateTouchFeedback({
-        isPressed: false,
-        feedbackType: 'none',
-        feedbackIntensity: 'medium'
-      })
-    }
-
-    // Determine touch type and provide appropriate feedback
-    if (touchDuration < 200) {
-      // Quick tap
-      triggerHapticFeedback('light')
-      triggerTouchSound('tap')
-      
-      // Show tap hint
-      addGestureHint({
-        type: 'tap',
-        message: 'Quick tap detected',
-        position
-      })
-    } else if (touchDuration > 500) {
-      // Long press
-      triggerHapticFeedback('strong')
-      triggerTouchSound('release')
-      
-      // Show long press hint
-      addGestureHint({
-        type: 'longPress',
-        message: 'Long press detected',
-        position
-      })
-    } else {
-      // Regular press
-      triggerHapticFeedback('medium')
-      triggerTouchSound('release')
-    }
-
-    setMobileTouchState(prev => ({
-      ...prev,
-      isActive: false,
-      touchCount: Math.max(0, prev.touchCount - 1)
-    }))
-    
-    callbacks.onTouchEnd?.(position)
-  }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, addGestureHint, callbacks])
-
-  // Set up touch event listeners
-  useEffect(() => {
-    const element = elementRef.current
-    if (!element || !mobileTouchState.deviceCapabilities.supportsTouch) return
-
-    element.addEventListener('touchstart', handleTouchStart, { passive: false })
-    element.addEventListener('touchmove', handleTouchMove, { passive: false })
-    element.addEventListener('touchend', handleTouchEnd, { passive: false })
-
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart)
-      element.removeEventListener('touchmove', handleTouchMove)
-      element.removeEventListener('touchend', handleTouchEnd)
-      
-      // Clean up timers
-      if (touchFeedbackTimerRef.current) {
-        clearTimeout(touchFeedbackTimerRef.current)
-      }
-      
-      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
-      gestureHintTimersRef.current.clear()
-    }
-  }, [
-    elementRef, 
-    mobileTouchState.deviceCapabilities.supportsTouch, 
-    handleTouchStart, 
-    handleTouchMove, 
-    handleTouchEnd
-  ])
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (touchFeedbackTimerRef.current) {
-        clearTimeout(touchFeedbackTimerRef.current)
-      }
-      
-      gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
-      gestureHintTimersRef.current.clear()
-    }
-  }, [])
-
-  // Utility functions
-  const clearAllGestureHints = useCallback(() => {
-    gestureHintTimersRef.current.forEach(timer => clearTimeout(timer))
-    gestureHintTimersRef.current.clear()
-    
-    setMobileTouchState(prev => ({
-      ...prev,
-      activeGestureHints: []
-    }))
-  }, [])
-
-  const getTouchFeedbackClasses = useCallback(() => {
-    const { currentFeedback } = mobileTouchState
-    
-    if (!currentFeedback.isPressed) return ''
-    
-    const classes = ['touch-feedback']
-    
-    if (currentFeedback.feedbackType === 'scale') {
-      classes.push('touch-pressed')
-    } else if (currentFeedback.feedbackType === 'ripple') {
-      classes.push('touch-ripple', 'touch-active')
-    }
-    
-    return classes.join(' ')
-  }, [mobileTouchState.currentFeedback])
-
-  return {
-    mobileTouchState,
-    updateTouchFeedback,
-    addGestureHint,
-    removeGestureHint,
-    clearAllGestureHints,
-    getTouchFeedbackClasses,
-    triggerHapticFeedback,
-    triggerTouchSound
-  }
-}
-
+import { useState, useEffect, useCallback, useRef } from 'react';
+export const useMobileTouch = (elementRef, callbacks = {}, config = {}) => {
+    const defaultConfig = {
+        enableTouchFeedback: true,
+        enableGestureHints: true,
+        enableTouchSounds: false,
+        enableHapticFeedback: true,
+        touchFeedbackDelay: 100,
+        gestureHintTimeout: 3000,
+        maxTouchPoints: 5,
+        ...config
+    };
+    // Device info available if needed for future enhancements
+    // const device = useDevice()
+    const [mobileTouchState, setMobileTouchState] = useState({
+        isActive: false,
+        touchCount: 0,
+        currentFeedback: {
+            isPressed: false,
+            feedbackType: 'none',
+            feedbackIntensity: 'medium',
+            lastTouchPosition: null
+        },
+        activeGestureHints: [],
+        deviceCapabilities: {
+            supportsTouch: false,
+            supportsHaptics: false,
+            supportsAudio: false,
+            maxTouchPoints: 0
+        }
+    });
+    const touchStartTimeRef = useRef(0);
+    const touchFeedbackTimerRef = useRef(null);
+    const gestureHintTimersRef = useRef(new Map());
+    const audioContextRef = useRef(null);
+    // Initialize device capabilities
+    useEffect(() => {
+        const capabilities = {
+            supportsTouch: 'ontouchstart' in window,
+            supportsHaptics: 'vibrate' in navigator,
+            supportsAudio: 'AudioContext' in window || 'webkitAudioContext' in window,
+            maxTouchPoints: navigator.maxTouchPoints || 0
+        };
+        setMobileTouchState(prev => ({
+            ...prev,
+            deviceCapabilities: capabilities
+        }));
+        // Initialize audio context if supported
+        if (capabilities.supportsAudio) {
+            audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+        }
+    }, []);
+    // Trigger haptic feedback
+    const triggerHapticFeedback = useCallback((intensity = 'medium') => {
+        if (!defaultConfig.enableHapticFeedback || !mobileTouchState.deviceCapabilities.supportsHaptics)
+            return;
+        const vibrationPattern = {
+            light: 20,
+            medium: 50,
+            strong: 100
+        };
+        try {
+            navigator.vibrate(vibrationPattern[intensity]);
+        }
+        catch (error) {
+            console.warn('Haptic feedback not supported:', error);
+        }
+    }, [defaultConfig.enableHapticFeedback, mobileTouchState.deviceCapabilities.supportsHaptics]);
+    // Trigger touch sound
+    const triggerTouchSound = useCallback((type = 'tap') => {
+        if (!defaultConfig.enableTouchSounds || !audioContextRef.current)
+            return;
+        try {
+            const audioContext = audioContextRef.current;
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            // Different sounds for different touch types
+            const soundConfig = {
+                tap: { frequency: 800, duration: 0.1, volume: 0.1 },
+                press: { frequency: 600, duration: 0.2, volume: 0.15 },
+                release: { frequency: 1000, duration: 0.08, volume: 0.08 }
+            };
+            const config = soundConfig[type];
+            oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime);
+            gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime);
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + config.duration);
+        }
+        catch (error) {
+            console.warn('Touch sound not supported:', error);
+        }
+    }, [defaultConfig.enableTouchSounds]);
+    // Update touch feedback state
+    const updateTouchFeedback = useCallback((feedback) => {
+        setMobileTouchState(prev => ({
+            ...prev,
+            currentFeedback: { ...prev.currentFeedback, ...feedback }
+        }));
+        callbacks.onTouchFeedback?.(mobileTouchState.currentFeedback);
+    }, [callbacks, mobileTouchState.currentFeedback]);
+    // Add gesture hint
+    const addGestureHint = useCallback((hint) => {
+        if (!defaultConfig.enableGestureHints)
+            return;
+        const hintWithTimeout = {
+            ...hint,
+            timeout: Date.now() + defaultConfig.gestureHintTimeout
+        };
+        setMobileTouchState(prev => ({
+            ...prev,
+            activeGestureHints: [...prev.activeGestureHints, hintWithTimeout]
+        }));
+        // Set timer to remove hint
+        const timer = setTimeout(() => {
+            removeGestureHint(hint.type);
+        }, defaultConfig.gestureHintTimeout);
+        gestureHintTimersRef.current.set(hint.type, timer);
+        callbacks.onGestureHint?.(hintWithTimeout);
+    }, [defaultConfig.enableGestureHints, defaultConfig.gestureHintTimeout, callbacks]);
+    // Remove gesture hint
+    const removeGestureHint = useCallback((type) => {
+        setMobileTouchState(prev => ({
+            ...prev,
+            activeGestureHints: prev.activeGestureHints.filter(hint => hint.type !== type)
+        }));
+        const timer = gestureHintTimersRef.current.get(type);
+        if (timer) {
+            clearTimeout(timer);
+            gestureHintTimersRef.current.delete(type);
+        }
+    }, []);
+    // Handle touch start
+    const handleTouchStart = useCallback((event) => {
+        const touch = event.touches[0];
+        const position = { x: touch.clientX, y: touch.clientY };
+        touchStartTimeRef.current = Date.now();
+        setMobileTouchState(prev => ({
+            ...prev,
+            isActive: true,
+            touchCount: event.touches.length
+        }));
+        // Update feedback state
+        if (defaultConfig.enableTouchFeedback) {
+            updateTouchFeedback({
+                isPressed: true,
+                feedbackType: 'scale',
+                feedbackIntensity: 'medium',
+                lastTouchPosition: position
+            });
+            // Set feedback timer
+            touchFeedbackTimerRef.current = setTimeout(() => {
+                updateTouchFeedback({
+                    feedbackType: 'ripple',
+                    feedbackIntensity: 'strong'
+                });
+            }, defaultConfig.touchFeedbackDelay);
+        }
+        // Trigger feedback
+        triggerHapticFeedback('light');
+        triggerTouchSound('press');
+        callbacks.onTouchStart?.(position);
+    }, [defaultConfig.enableTouchFeedback, defaultConfig.touchFeedbackDelay, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, callbacks]);
+    // Handle touch move
+    const handleTouchMove = useCallback((event) => {
+        const touch = event.touches[0];
+        const position = { x: touch.clientX, y: touch.clientY };
+        // Update feedback state
+        if (defaultConfig.enableTouchFeedback) {
+            updateTouchFeedback({
+                lastTouchPosition: position
+            });
+        }
+        callbacks.onTouchMove?.(position);
+    }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, callbacks]);
+    // Handle touch end
+    const handleTouchEnd = useCallback((event) => {
+        const touch = event.changedTouches[0];
+        const position = { x: touch.clientX, y: touch.clientY };
+        const touchDuration = Date.now() - touchStartTimeRef.current;
+        // Clear feedback timer
+        if (touchFeedbackTimerRef.current) {
+            clearTimeout(touchFeedbackTimerRef.current);
+            touchFeedbackTimerRef.current = null;
+        }
+        // Update feedback state
+        if (defaultConfig.enableTouchFeedback) {
+            updateTouchFeedback({
+                isPressed: false,
+                feedbackType: 'none',
+                feedbackIntensity: 'medium'
+            });
+        }
+        // Determine touch type and provide appropriate feedback
+        if (touchDuration < 200) {
+            // Quick tap
+            triggerHapticFeedback('light');
+            triggerTouchSound('tap');
+            // Show tap hint
+            addGestureHint({
+                type: 'tap',
+                message: 'Quick tap detected',
+                position
+            });
+        }
+        else if (touchDuration > 500) {
+            // Long press
+            triggerHapticFeedback('strong');
+            triggerTouchSound('release');
+            // Show long press hint
+            addGestureHint({
+                type: 'longPress',
+                message: 'Long press detected',
+                position
+            });
+        }
+        else {
+            // Regular press
+            triggerHapticFeedback('medium');
+            triggerTouchSound('release');
+        }
+        setMobileTouchState(prev => ({
+            ...prev,
+            isActive: false,
+            touchCount: Math.max(0, prev.touchCount - 1)
+        }));
+        callbacks.onTouchEnd?.(position);
+    }, [defaultConfig.enableTouchFeedback, updateTouchFeedback, triggerHapticFeedback, triggerTouchSound, addGestureHint, callbacks]);
+    // Set up touch event listeners
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element || !mobileTouchState.deviceCapabilities.supportsTouch)
+            return;
+        element.addEventListener('touchstart', handleTouchStart, { passive: false });
+        element.addEventListener('touchmove', handleTouchMove, { passive: false });
+        element.addEventListener('touchend', handleTouchEnd, { passive: false });
+        return () => {
+            element.removeEventListener('touchstart', handleTouchStart);
+            element.removeEventListener('touchmove', handleTouchMove);
+            element.removeEventListener('touchend', handleTouchEnd);
+            // Clean up timers
+            if (touchFeedbackTimerRef.current) {
+                clearTimeout(touchFeedbackTimerRef.current);
+            }
+            gestureHintTimersRef.current.forEach(timer => clearTimeout(timer));
+            gestureHintTimersRef.current.clear();
+        };
+    }, [
+        elementRef,
+        mobileTouchState.deviceCapabilities.supportsTouch,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd
+    ]);
+    // Clean up on unmount
+    useEffect(() => {
+        return () => {
+            if (touchFeedbackTimerRef.current) {
+                clearTimeout(touchFeedbackTimerRef.current);
+            }
+            gestureHintTimersRef.current.forEach(timer => clearTimeout(timer));
+            gestureHintTimersRef.current.clear();
+        };
+    }, []);
+    // Utility functions
+    const clearAllGestureHints = useCallback(() => {
+        gestureHintTimersRef.current.forEach(timer => clearTimeout(timer));
+        gestureHintTimersRef.current.clear();
+        setMobileTouchState(prev => ({
+            ...prev,
+            activeGestureHints: []
+        }));
+    }, []);
+    const getTouchFeedbackClasses = useCallback(() => {
+        const { currentFeedback } = mobileTouchState;
+        if (!currentFeedback.isPressed)
+            return '';
+        const classes = ['touch-feedback'];
+        if (currentFeedback.feedbackType === 'scale') {
+            classes.push('touch-pressed');
+        }
+        else if (currentFeedback.feedbackType === 'ripple') {
+            classes.push('touch-ripple', 'touch-active');
+        }
+        return classes.join(' ');
+    }, [mobileTouchState.currentFeedback]);
+    return {
+        mobileTouchState,
+        updateTouchFeedback,
+        addGestureHint,
+        removeGestureHint,
+        clearAllGestureHints,
+        getTouchFeedbackClasses,
+        triggerHapticFeedback,
+        triggerTouchSound
+    };
+};
 // Convenience hook for basic mobile touch
-export const useBasicMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
-  return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback: true,
-    enableGestureHints: false,
-    enableTouchSounds: false,
-    enableHapticFeedback: true
-  })
-}
-
+export const useBasicMobileTouch = (elementRef) => {
+    return useMobileTouch(elementRef, {}, {
+        enableTouchFeedback: true,
+        enableGestureHints: false,
+        enableTouchSounds: false,
+        enableHapticFeedback: true
+    });
+};
 // Convenience hook for enhanced mobile touch
-export const useEnhancedMobileTouch = (elementRef: React.RefObject<HTMLElement>) => {
-  return useMobileTouch(elementRef, {}, {
-    enableTouchFeedback: true,
-    enableGestureHints: true,
-    enableTouchSounds: true,
-    enableHapticFeedback: true
-  })
-}
+export const useEnhancedMobileTouch = (elementRef) => {
+    return useMobileTouch(elementRef, {}, {
+        enableTouchFeedback: true,
+        enableGestureHints: true,
+        enableTouchSounds: true,
+        enableHapticFeedback: true
+    });
+};