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

package/dist/hooks/use-semantic-input.js

@@ -1,565 +1,462 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-export interface InputType {
-  type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week'
-  pattern?: RegExp
-  autocomplete?: string
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
-  keyboardType?: 'default' | 'email' | 'numeric' | 'phone' | 'url'
-}
-
-export interface SemanticConfig {
-  enableAutoDetection: boolean
-  enableKeyboardOptimization: boolean
-  enableAutocomplete: boolean
-  enableTouchOptimization: boolean
-  enableAccessibility: boolean
-  enablePerformanceMonitoring: boolean
-}
-
-export interface SemanticCallbacks {
-  onInputTypeDetected?: (inputType: InputType) => void
-  onKeyboardOptimization?: (optimized: boolean) => void
-  onAutocompleteEnhanced?: (enhanced: boolean) => void
-  onTouchOptimized?: (optimized: boolean) => void
-}
-
-export interface SemanticInputState {
-  detectedType: InputType | null
-  isOptimized: boolean
-  keyboardOptimized: boolean
-  autocompleteEnhanced: boolean
-  touchOptimized: boolean
-  performanceMetrics: {
-    detectionTime: number
-    optimizationTime: number
-    lastOptimization: number
-  }
-}
-
-export const useSemanticInput = (
-  initialType: InputType,
-  callbacks: SemanticCallbacks = {},
-  config: Partial<SemanticConfig> = {}
-) => {
-  const defaultConfig: SemanticConfig = {
-    enableAutoDetection: true,
-    enableKeyboardOptimization: true,
-    enableAutocomplete: true,
-    enableTouchOptimization: true,
-    enableAccessibility: true,
-    enablePerformanceMonitoring: true,
-    ...config
-  }
-
-  const [semanticState, setSemanticState] = useState<SemanticInputState>({
-    detectedType: null,
-    isOptimized: false,
-    keyboardOptimized: false,
-    autocompleteEnhanced: false,
-    touchOptimized: false,
-    performanceMetrics: {
-      detectionTime: 0,
-      optimizationTime: 0,
-      lastOptimization: 0
-    }
-  })
-
-  const inputRef = useRef<HTMLInputElement | null>(null)
-  const optimizationTimerRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Detect input type based on content and context
-  const detectInputType = useCallback((value: string, name: string, placeholder?: string): InputType => {
-    const startTime = performance.now()
-    
-    let detectedType: InputType = { ...initialType }
-
-    // Auto-detect based on field name
-    if (defaultConfig.enableAutoDetection) {
-      const fieldName = name.toLowerCase()
-      const fieldValue = value.toLowerCase()
-
-      // Email detection
-      if (fieldName.includes('email') || fieldName.includes('mail') || fieldValue.includes('@')) {
-        detectedType = {
-          type: 'email',
-          autocomplete: 'email',
-          inputMode: 'email',
-          keyboardType: 'email'
+import { useState, useEffect, useCallback, useRef } from 'react';
+export const useSemanticInput = (initialType, callbacks = {}, config = {}) => {
+    const defaultConfig = {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: true,
+        enableAutocomplete: true,
+        enableTouchOptimization: true,
+        enableAccessibility: true,
+        enablePerformanceMonitoring: true,
+        ...config
+    };
+    const [semanticState, setSemanticState] = useState({
+        detectedType: null,
+        isOptimized: false,
+        keyboardOptimized: false,
+        autocompleteEnhanced: false,
+        touchOptimized: false,
+        performanceMetrics: {
+            detectionTime: 0,
+            optimizationTime: 0,
+            lastOptimization: 0
         }
-      }
-      // Phone detection
-      else if (fieldName.includes('phone') || fieldName.includes('tel') || fieldName.includes('mobile')) {
-        detectedType = {
-          type: 'tel',
-          autocomplete: 'tel',
-          inputMode: 'tel',
-          keyboardType: 'phone'
+    });
+    const inputRef = useRef(null);
+    const optimizationTimerRef = useRef(null);
+    // Detect input type based on content and context
+    const detectInputType = useCallback((value, name, placeholder) => {
+        const startTime = performance.now();
+        let detectedType = { ...initialType };
+        // Auto-detect based on field name
+        if (defaultConfig.enableAutoDetection) {
+            const fieldName = name.toLowerCase();
+            const fieldValue = value.toLowerCase();
+            // Email detection
+            if (fieldName.includes('email') || fieldName.includes('mail') || fieldValue.includes('@')) {
+                detectedType = {
+                    type: 'email',
+                    autocomplete: 'email',
+                    inputMode: 'email',
+                    keyboardType: 'email'
+                };
+            }
+            // Phone detection
+            else if (fieldName.includes('phone') || fieldName.includes('tel') || fieldName.includes('mobile')) {
+                detectedType = {
+                    type: 'tel',
+                    autocomplete: 'tel',
+                    inputMode: 'tel',
+                    keyboardType: 'phone'
+                };
+            }
+            // URL detection
+            else if (fieldName.includes('url') || fieldName.includes('website') || fieldName.includes('link')) {
+                detectedType = {
+                    type: 'url',
+                    autocomplete: 'url',
+                    inputMode: 'url',
+                    keyboardType: 'url'
+                };
+            }
+            // Search detection
+            else if (fieldName.includes('search') || fieldName.includes('query')) {
+                detectedType = {
+                    type: 'search',
+                    autocomplete: 'off',
+                    inputMode: 'search',
+                    keyboardType: 'default'
+                };
+            }
+            // Number detection
+            else if (fieldName.includes('number') || fieldName.includes('amount') || fieldName.includes('price') || fieldName.includes('quantity')) {
+                detectedType = {
+                    type: 'number',
+                    autocomplete: 'off',
+                    inputMode: 'numeric',
+                    keyboardType: 'numeric'
+                };
+            }
+            // Date detection
+            else if (fieldName.includes('date') || fieldName.includes('birth') || fieldName.includes('anniversary')) {
+                detectedType = {
+                    type: 'date',
+                    autocomplete: 'bday',
+                    inputMode: 'none',
+                    keyboardType: 'default'
+                };
+            }
+            // Password detection
+            else if (fieldName.includes('password') || fieldName.includes('pass') || fieldName.includes('secret')) {
+                detectedType = {
+                    type: 'password',
+                    autocomplete: 'current-password',
+                    inputMode: 'text',
+                    keyboardType: 'default'
+                };
+            }
         }
-      }
-      // URL detection
-      else if (fieldName.includes('url') || fieldName.includes('website') || fieldName.includes('link')) {
-        detectedType = {
-          type: 'url',
-          autocomplete: 'url',
-          inputMode: 'url',
-          keyboardType: 'url'
+        // Auto-detect based on placeholder text
+        if (placeholder && defaultConfig.enableAutoDetection) {
+            const placeholderLower = placeholder.toLowerCase();
+            if (placeholderLower.includes('@') || placeholderLower.includes('email')) {
+                detectedType = {
+                    type: 'email',
+                    autocomplete: 'email',
+                    inputMode: 'email',
+                    keyboardType: 'email'
+                };
+            }
+            else if (placeholderLower.includes('http') || placeholderLower.includes('www')) {
+                detectedType = {
+                    type: 'url',
+                    autocomplete: 'url',
+                    inputMode: 'url',
+                    keyboardType: 'url'
+                };
+            }
+            else if (placeholderLower.includes('search') || placeholderLower.includes('find')) {
+                detectedType = {
+                    type: 'search',
+                    autocomplete: 'off',
+                    inputMode: 'search',
+                    keyboardType: 'default'
+                };
+            }
         }
-      }
-      // Search detection
-      else if (fieldName.includes('search') || fieldName.includes('query')) {
-        detectedType = {
-          type: 'search',
-          autocomplete: 'off',
-          inputMode: 'search',
-          keyboardType: 'default'
+        // Auto-detect based on value pattern
+        if (value && defaultConfig.enableAutoDetection) {
+            // Email pattern
+            if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                detectedType = {
+                    type: 'email',
+                    autocomplete: 'email',
+                    inputMode: 'email',
+                    keyboardType: 'email'
+                };
+            }
+            // Phone pattern
+            else if (/^[\+]?[0-9\s\-\(\)]{7,}$/.test(value)) {
+                detectedType = {
+                    type: 'tel',
+                    autocomplete: 'tel',
+                    inputMode: 'tel',
+                    keyboardType: 'phone'
+                };
+            }
+            // URL pattern
+            else if (/^https?:\/\/.+/.test(value)) {
+                detectedType = {
+                    type: 'url',
+                    autocomplete: 'url',
+                    inputMode: 'url',
+                    keyboardType: 'url'
+                };
+            }
+            // Number pattern
+            else if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
+                detectedType = {
+                    type: 'number',
+                    autocomplete: 'off',
+                    inputMode: 'numeric',
+                    keyboardType: 'numeric'
+                };
+            }
         }
-      }
-      // Number detection
-      else if (fieldName.includes('number') || fieldName.includes('amount') || fieldName.includes('price') || fieldName.includes('quantity')) {
-        detectedType = {
-          type: 'number',
-          autocomplete: 'off',
-          inputMode: 'numeric',
-          keyboardType: 'numeric'
+        const endTime = performance.now();
+        const detectionTime = endTime - startTime;
+        setSemanticState(prev => ({
+            ...prev,
+            detectedType,
+            performanceMetrics: {
+                ...prev.performanceMetrics,
+                detectionTime
+            }
+        }));
+        callbacks.onInputTypeDetected?.(detectedType);
+        return detectedType;
+    }, [initialType, defaultConfig.enableAutoDetection, callbacks]);
+    // Optimize keyboard for mobile devices
+    const optimizeKeyboard = useCallback((inputType) => {
+        if (!defaultConfig.enableKeyboardOptimization)
+            return false;
+        const startTime = performance.now();
+        let optimized = false;
+        if (inputRef.current) {
+            const input = inputRef.current;
+            // Set input mode for better mobile keyboard
+            if (inputType.inputMode) {
+                input.setAttribute('inputmode', inputType.inputMode);
+                optimized = true;
+            }
+            // Set autocomplete for better UX
+            if (inputType.autocomplete && defaultConfig.enableAutocomplete) {
+                input.setAttribute('autocomplete', inputType.autocomplete);
+                optimized = true;
+            }
+            // Set pattern for validation
+            if (inputType.pattern) {
+                input.setAttribute('pattern', inputType.pattern.source);
+                optimized = true;
+            }
+            // Add mobile-specific attributes
+            if (inputType.type === 'tel') {
+                input.setAttribute('data-mobile-keyboard', 'phone');
+                optimized = true;
+            }
+            else if (inputType.type === 'email') {
+                input.setAttribute('data-mobile-keyboard', 'email');
+                optimized = true;
+            }
+            else if (inputType.type === 'number') {
+                input.setAttribute('data-mobile-keyboard', 'numeric');
+                optimized = true;
+            }
+            else if (inputType.type === 'url') {
+                input.setAttribute('data-mobile-keyboard', 'url');
+                optimized = true;
+            }
         }
-      }
-      // Date detection
-      else if (fieldName.includes('date') || fieldName.includes('birth') || fieldName.includes('anniversary')) {
-        detectedType = {
-          type: 'date',
-          autocomplete: 'bday',
-          inputMode: 'none',
-          keyboardType: 'default'
+        const endTime = performance.now();
+        const optimizationTime = endTime - startTime;
+        setSemanticState(prev => ({
+            ...prev,
+            keyboardOptimized: optimized,
+            performanceMetrics: {
+                ...prev.performanceMetrics,
+                optimizationTime,
+                lastOptimization: Date.now()
+            }
+        }));
+        callbacks.onKeyboardOptimization?.(optimized);
+        return optimized;
+    }, [defaultConfig.enableKeyboardOptimization, defaultConfig.enableAutocomplete, callbacks]);
+    // Enhance autocomplete functionality
+    const enhanceAutocomplete = useCallback((inputType) => {
+        if (!defaultConfig.enableAutocomplete)
+            return false;
+        let enhanced = false;
+        if (inputRef.current) {
+            const input = inputRef.current;
+            // Set appropriate autocomplete values
+            switch (inputType.type) {
+                case 'email':
+                    input.setAttribute('autocomplete', 'email');
+                    enhanced = true;
+                    break;
+                case 'tel':
+                    input.setAttribute('autocomplete', 'tel');
+                    enhanced = true;
+                    break;
+                case 'url':
+                    input.setAttribute('autocomplete', 'url');
+                    enhanced = true;
+                    break;
+                case 'password':
+                    input.setAttribute('autocomplete', 'current-password');
+                    enhanced = true;
+                    break;
+                case 'date':
+                    input.setAttribute('autocomplete', 'bday');
+                    enhanced = true;
+                    break;
+                case 'search':
+                    input.setAttribute('autocomplete', 'off');
+                    enhanced = true;
+                    break;
+                case 'number':
+                    input.setAttribute('autocomplete', 'off');
+                    enhanced = true;
+                    break;
+            }
+            // Add data attributes for custom autocomplete
+            if (inputType.type === 'email') {
+                input.setAttribute('data-autocomplete-type', 'email');
+                input.setAttribute('data-suggestions', 'email-domains');
+            }
+            else if (inputType.type === 'tel') {
+                input.setAttribute('data-autocomplete-type', 'phone');
+                input.setAttribute('data-suggestions', 'phone-formats');
+            }
+            else if (inputType.type === 'url') {
+                input.setAttribute('data-autocomplete-type', 'url');
+                input.setAttribute('data-suggestions', 'common-urls');
+            }
         }
-      }
-      // Password detection
-      else if (fieldName.includes('password') || fieldName.includes('pass') || fieldName.includes('secret')) {
-        detectedType = {
-          type: 'password',
-          autocomplete: 'current-password',
-          inputMode: 'text',
-          keyboardType: 'default'
+        setSemanticState(prev => ({
+            ...prev,
+            autocompleteEnhanced: enhanced
+        }));
+        callbacks.onAutocompleteEnhanced?.(enhanced);
+        return enhanced;
+    }, [defaultConfig.enableAutocomplete, callbacks]);
+    // Optimize touch interactions
+    const optimizeTouch = useCallback((inputType) => {
+        if (!defaultConfig.enableTouchOptimization)
+            return false;
+        let optimized = false;
+        if (inputRef.current) {
+            const input = inputRef.current;
+            // Add touch-friendly attributes
+            input.setAttribute('data-touch-optimized', 'true');
+            // Set appropriate touch action
+            if (inputType.type === 'search') {
+                input.style.touchAction = 'manipulation';
+                optimized = true;
+            }
+            else if (inputType.type === 'number') {
+                input.style.touchAction = 'manipulation';
+                optimized = true;
+            }
+            else {
+                input.style.touchAction = 'auto';
+                optimized = true;
+            }
+            // Add touch feedback classes
+            input.classList.add('touch-input');
+            input.classList.add('touch-target');
+            // Set minimum touch target size
+            input.style.minHeight = '44px';
+            input.style.minWidth = '44px';
+            optimized = true;
         }
-      }
-    }
-
-    // Auto-detect based on placeholder text
-    if (placeholder && defaultConfig.enableAutoDetection) {
-      const placeholderLower = placeholder.toLowerCase()
-      
-      if (placeholderLower.includes('@') || placeholderLower.includes('email')) {
-        detectedType = {
-          type: 'email',
-          autocomplete: 'email',
-          inputMode: 'email',
-          keyboardType: 'email'
+        setSemanticState(prev => ({
+            ...prev,
+            touchOptimized: optimized
+        }));
+        callbacks.onTouchOptimized?.(optimized);
+        return optimized;
+    }, [defaultConfig.enableTouchOptimization, callbacks]);
+    // Apply all optimizations
+    const applyOptimizations = useCallback((inputType) => {
+        const keyboardOptimized = optimizeKeyboard(inputType);
+        const autocompleteEnhanced = enhanceAutocomplete(inputType);
+        const touchOptimized = optimizeTouch(inputType);
+        const isOptimized = keyboardOptimized || autocompleteEnhanced || touchOptimized;
+        setSemanticState(prev => ({
+            ...prev,
+            isOptimized
+        }));
+        return isOptimized;
+    }, [optimizeKeyboard, enhanceAutocomplete, optimizeTouch]);
+    // Handle input changes with optimization
+    const handleInputChange = useCallback((value, name, placeholder) => {
+        const detectedType = detectInputType(value, name, placeholder);
+        // Apply optimizations with debouncing
+        if (optimizationTimerRef.current) {
+            clearTimeout(optimizationTimerRef.current);
         }
-      } else if (placeholderLower.includes('http') || placeholderLower.includes('www')) {
-        detectedType = {
-          type: 'url',
-          autocomplete: 'url',
-          inputMode: 'url',
-          keyboardType: 'url'
+        optimizationTimerRef.current = setTimeout(() => {
+            applyOptimizations(detectedType);
+        }, 100);
+    }, [detectInputType, applyOptimizations]);
+    // Get optimized input attributes
+    const getOptimizedAttributes = useCallback((inputType) => {
+        const attributes = {
+            type: inputType.type,
+            'data-semantic-optimized': 'true'
+        };
+        if (inputType.inputMode) {
+            attributes.inputmode = inputType.inputMode;
         }
-      } else if (placeholderLower.includes('search') || placeholderLower.includes('find')) {
-        detectedType = {
-          type: 'search',
-          autocomplete: 'off',
-          inputMode: 'search',
-          keyboardType: 'default'
+        if (inputType.autocomplete) {
+            attributes.autocomplete = inputType.autocomplete;
         }
-      }
-    }
-
-    // Auto-detect based on value pattern
-    if (value && defaultConfig.enableAutoDetection) {
-      // Email pattern
-      if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-        detectedType = {
-          type: 'email',
-          autocomplete: 'email',
-          inputMode: 'email',
-          keyboardType: 'email'
+        if (inputType.pattern) {
+            attributes.pattern = inputType.pattern.source;
         }
-      }
-      // Phone pattern
-      else if (/^[\+]?[0-9\s\-\(\)]{7,}$/.test(value)) {
-        detectedType = {
-          type: 'tel',
-          autocomplete: 'tel',
-          inputMode: 'tel',
-          keyboardType: 'phone'
+        // Add mobile-specific attributes
+        if (inputType.keyboardType) {
+            attributes['data-mobile-keyboard'] = inputType.keyboardType;
         }
-      }
-      // URL pattern
-      else if (/^https?:\/\/.+/.test(value)) {
-        detectedType = {
-          type: 'url',
-          autocomplete: 'url',
-          inputMode: 'url',
-          keyboardType: 'url'
+        return attributes;
+    }, []);
+    // Get CSS classes for semantic optimization
+    const getSemanticClasses = useCallback(() => {
+        const { detectedType, isOptimized, keyboardOptimized, autocompleteEnhanced, touchOptimized } = semanticState;
+        const classes = ['semantic-input'];
+        if (detectedType) {
+            classes.push(`input-type-${detectedType.type}`);
         }
-      }
-      // Number pattern
-      else if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
-        detectedType = {
-          type: 'number',
-          autocomplete: 'off',
-          inputMode: 'numeric',
-          keyboardType: 'numeric'
+        if (isOptimized) {
+            classes.push('input-optimized');
         }
-      }
-    }
-
-    const endTime = performance.now()
-    const detectionTime = endTime - startTime
-
-    setSemanticState(prev => ({
-      ...prev,
-      detectedType,
-      performanceMetrics: {
-        ...prev.performanceMetrics,
-        detectionTime
-      }
-    }))
-
-    callbacks.onInputTypeDetected?.(detectedType)
-    return detectedType
-  }, [initialType, defaultConfig.enableAutoDetection, callbacks])
-
-  // Optimize keyboard for mobile devices
-  const optimizeKeyboard = useCallback((inputType: InputType) => {
-    if (!defaultConfig.enableKeyboardOptimization) return false
-
-    const startTime = performance.now()
-    let optimized = false
-
-    if (inputRef.current) {
-      const input = inputRef.current
-
-      // Set input mode for better mobile keyboard
-      if (inputType.inputMode) {
-        input.setAttribute('inputmode', inputType.inputMode)
-        optimized = true
-      }
-
-      // Set autocomplete for better UX
-      if (inputType.autocomplete && defaultConfig.enableAutocomplete) {
-        input.setAttribute('autocomplete', inputType.autocomplete)
-        optimized = true
-      }
-
-      // Set pattern for validation
-      if (inputType.pattern) {
-        input.setAttribute('pattern', inputType.pattern.source)
-        optimized = true
-      }
-
-      // Add mobile-specific attributes
-      if (inputType.type === 'tel') {
-        input.setAttribute('data-mobile-keyboard', 'phone')
-        optimized = true
-      } else if (inputType.type === 'email') {
-        input.setAttribute('data-mobile-keyboard', 'email')
-        optimized = true
-      } else if (inputType.type === 'number') {
-        input.setAttribute('data-mobile-keyboard', 'numeric')
-        optimized = true
-      } else if (inputType.type === 'url') {
-        input.setAttribute('data-mobile-keyboard', 'url')
-        optimized = true
-      }
-    }
-
-    const endTime = performance.now()
-    const optimizationTime = endTime - startTime
-
-    setSemanticState(prev => ({
-      ...prev,
-      keyboardOptimized: optimized,
-      performanceMetrics: {
-        ...prev.performanceMetrics,
-        optimizationTime,
-        lastOptimization: Date.now()
-      }
-    }))
-
-    callbacks.onKeyboardOptimization?.(optimized)
-    return optimized
-  }, [defaultConfig.enableKeyboardOptimization, defaultConfig.enableAutocomplete, callbacks])
-
-  // Enhance autocomplete functionality
-  const enhanceAutocomplete = useCallback((inputType: InputType) => {
-    if (!defaultConfig.enableAutocomplete) return false
-
-    let enhanced = false
-
-    if (inputRef.current) {
-      const input = inputRef.current
-
-      // Set appropriate autocomplete values
-      switch (inputType.type) {
-        case 'email':
-          input.setAttribute('autocomplete', 'email')
-          enhanced = true
-          break
-        case 'tel':
-          input.setAttribute('autocomplete', 'tel')
-          enhanced = true
-          break
-        case 'url':
-          input.setAttribute('autocomplete', 'url')
-          enhanced = true
-          break
-        case 'password':
-          input.setAttribute('autocomplete', 'current-password')
-          enhanced = true
-          break
-        case 'date':
-          input.setAttribute('autocomplete', 'bday')
-          enhanced = true
-          break
-        case 'search':
-          input.setAttribute('autocomplete', 'off')
-          enhanced = true
-          break
-        case 'number':
-          input.setAttribute('autocomplete', 'off')
-          enhanced = true
-          break
-      }
-
-      // Add data attributes for custom autocomplete
-      if (inputType.type === 'email') {
-        input.setAttribute('data-autocomplete-type', 'email')
-        input.setAttribute('data-suggestions', 'email-domains')
-      } else if (inputType.type === 'tel') {
-        input.setAttribute('data-autocomplete-type', 'phone')
-        input.setAttribute('data-suggestions', 'phone-formats')
-      } else if (inputType.type === 'url') {
-        input.setAttribute('data-autocomplete-type', 'url')
-        input.setAttribute('data-suggestions', 'common-urls')
-      }
-    }
-
-    setSemanticState(prev => ({
-      ...prev,
-      autocompleteEnhanced: enhanced
-    }))
-
-    callbacks.onAutocompleteEnhanced?.(enhanced)
-    return enhanced
-  }, [defaultConfig.enableAutocomplete, callbacks])
-
-  // Optimize touch interactions
-  const optimizeTouch = useCallback((inputType: InputType) => {
-    if (!defaultConfig.enableTouchOptimization) return false
-
-    let optimized = false
-
-    if (inputRef.current) {
-      const input = inputRef.current
-
-      // Add touch-friendly attributes
-      input.setAttribute('data-touch-optimized', 'true')
-      
-      // Set appropriate touch action
-      if (inputType.type === 'search') {
-        input.style.touchAction = 'manipulation'
-        optimized = true
-      } else if (inputType.type === 'number') {
-        input.style.touchAction = 'manipulation'
-        optimized = true
-      } else {
-        input.style.touchAction = 'auto'
-        optimized = true
-      }
-
-      // Add touch feedback classes
-      input.classList.add('touch-input')
-      input.classList.add('touch-target')
-
-      // Set minimum touch target size
-      input.style.minHeight = '44px'
-      input.style.minWidth = '44px'
-
-      optimized = true
-    }
-
-    setSemanticState(prev => ({
-      ...prev,
-      touchOptimized: optimized
-    }))
-
-    callbacks.onTouchOptimized?.(optimized)
-    return optimized
-  }, [defaultConfig.enableTouchOptimization, callbacks])
-
-  // Apply all optimizations
-  const applyOptimizations = useCallback((inputType: InputType) => {
-    const keyboardOptimized = optimizeKeyboard(inputType)
-    const autocompleteEnhanced = enhanceAutocomplete(inputType)
-    const touchOptimized = optimizeTouch(inputType)
-
-    const isOptimized = keyboardOptimized || autocompleteEnhanced || touchOptimized
-
-    setSemanticState(prev => ({
-      ...prev,
-      isOptimized
-    }))
-
-    return isOptimized
-  }, [optimizeKeyboard, enhanceAutocomplete, optimizeTouch])
-
-  // Handle input changes with optimization
-  const handleInputChange = useCallback((
-    value: string,
-    name: string,
-    placeholder?: string
-  ) => {
-    const detectedType = detectInputType(value, name, placeholder)
-    
-    // Apply optimizations with debouncing
-    if (optimizationTimerRef.current) {
-      clearTimeout(optimizationTimerRef.current)
-    }
-
-    optimizationTimerRef.current = setTimeout(() => {
-      applyOptimizations(detectedType)
-    }, 100)
-  }, [detectInputType, applyOptimizations])
-
-  // Get optimized input attributes
-  const getOptimizedAttributes = useCallback((inputType: InputType) => {
-    const attributes: Record<string, string> = {
-      type: inputType.type,
-      'data-semantic-optimized': 'true'
-    }
-
-    if (inputType.inputMode) {
-      attributes.inputmode = inputType.inputMode
-    }
-
-    if (inputType.autocomplete) {
-      attributes.autocomplete = inputType.autocomplete
-    }
-
-    if (inputType.pattern) {
-      attributes.pattern = inputType.pattern.source
-    }
-
-    // Add mobile-specific attributes
-    if (inputType.keyboardType) {
-      attributes['data-mobile-keyboard'] = inputType.keyboardType
-    }
-
-    return attributes
-  }, [])
-
-  // Get CSS classes for semantic optimization
-  const getSemanticClasses = useCallback(() => {
-    const { detectedType, isOptimized, keyboardOptimized, autocompleteEnhanced, touchOptimized } = semanticState
-    
-    const classes = ['semantic-input']
-
-    if (detectedType) {
-      classes.push(`input-type-${detectedType.type}`)
-    }
-
-    if (isOptimized) {
-      classes.push('input-optimized')
-    }
-
-    if (keyboardOptimized) {
-      classes.push('keyboard-optimized')
-    }
-
-    if (autocompleteEnhanced) {
-      classes.push('autocomplete-enhanced')
-    }
-
-    if (touchOptimized) {
-      classes.push('touch-optimized')
-    }
-
-    return classes.join(' ')
-  }, [semanticState])
-
-  // Reset optimizations
-  const resetOptimizations = useCallback(() => {
-    if (inputRef.current) {
-      const input = inputRef.current
-      
-      // Remove custom attributes
-      input.removeAttribute('data-mobile-keyboard')
-      input.removeAttribute('data-autocomplete-type')
-      input.removeAttribute('data-suggestions')
-      input.removeAttribute('data-touch-optimized')
-      input.removeAttribute('data-semantic-optimized')
-      
-      // Remove custom styles
-      input.style.touchAction = ''
-      input.style.minHeight = ''
-      input.style.minWidth = ''
-      
-      // Remove custom classes
-      input.classList.remove('touch-input', 'touch-target')
-    }
-
-    setSemanticState(prev => ({
-      ...prev,
-      isOptimized: false,
-      keyboardOptimized: false,
-      autocompleteEnhanced: false,
-      touchOptimized: false
-    }))
-  }, [])
-
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (optimizationTimerRef.current) {
-        clearTimeout(optimizationTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    semanticState,
-    detectInputType,
-    optimizeKeyboard,
-    enhanceAutocomplete,
-    optimizeTouch,
-    applyOptimizations,
-    handleInputChange,
-    getOptimizedAttributes,
-    getSemanticClasses,
-    resetOptimizations,
-    inputRef
-  }
-}
-
+        if (keyboardOptimized) {
+            classes.push('keyboard-optimized');
+        }
+        if (autocompleteEnhanced) {
+            classes.push('autocomplete-enhanced');
+        }
+        if (touchOptimized) {
+            classes.push('touch-optimized');
+        }
+        return classes.join(' ');
+    }, [semanticState]);
+    // Reset optimizations
+    const resetOptimizations = useCallback(() => {
+        if (inputRef.current) {
+            const input = inputRef.current;
+            // Remove custom attributes
+            input.removeAttribute('data-mobile-keyboard');
+            input.removeAttribute('data-autocomplete-type');
+            input.removeAttribute('data-suggestions');
+            input.removeAttribute('data-touch-optimized');
+            input.removeAttribute('data-semantic-optimized');
+            // Remove custom styles
+            input.style.touchAction = '';
+            input.style.minHeight = '';
+            input.style.minWidth = '';
+            // Remove custom classes
+            input.classList.remove('touch-input', 'touch-target');
+        }
+        setSemanticState(prev => ({
+            ...prev,
+            isOptimized: false,
+            keyboardOptimized: false,
+            autocompleteEnhanced: false,
+            touchOptimized: false
+        }));
+    }, []);
+    // Clean up timer on unmount
+    useEffect(() => {
+        return () => {
+            if (optimizationTimerRef.current) {
+                clearTimeout(optimizationTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        semanticState,
+        detectInputType,
+        optimizeKeyboard,
+        enhanceAutocomplete,
+        optimizeTouch,
+        applyOptimizations,
+        handleInputChange,
+        getOptimizedAttributes,
+        getSemanticClasses,
+        resetOptimizations,
+        inputRef
+    };
+};
 // Convenience hook for basic semantic input
-export const useBasicSemanticInput = (initialType: InputType) => {
-  return useSemanticInput(initialType, {}, {
-    enableAutoDetection: true,
-    enableKeyboardOptimization: false,
-    enableAutocomplete: false,
-    enableTouchOptimization: false,
-    enableAccessibility: true,
-    enablePerformanceMonitoring: false
-  })
-}
-
+export const useBasicSemanticInput = (initialType) => {
+    return useSemanticInput(initialType, {}, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: false,
+        enableAutocomplete: false,
+        enableTouchOptimization: false,
+        enableAccessibility: true,
+        enablePerformanceMonitoring: false
+    });
+};
 // Convenience hook for enhanced semantic input
-export const useEnhancedSemanticInput = (initialType: InputType) => {
-  return useSemanticInput(initialType, {}, {
-    enableAutoDetection: true,
-    enableKeyboardOptimization: true,
-    enableAutocomplete: true,
-    enableTouchOptimization: true,
-    enableAccessibility: true,
-    enablePerformanceMonitoring: true
-  })
-}
+export const useEnhancedSemanticInput = (initialType) => {
+    return useSemanticInput(initialType, {}, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: true,
+        enableAutocomplete: true,
+        enableTouchOptimization: true,
+        enableAccessibility: true,
+        enablePerformanceMonitoring: true
+    });
+};