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

package/dist/hooks/use-semantic-input.d.ts

@@ -1,563 +0,0 @@
-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 declare 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'
-        }
-      }
-      // 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'
-        }
-      }
-    }
-
-    // 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'
-        }
-      }
-    }
-
-    // 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'
-        }
-      }
-    }
-
-    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
-  }
-}
-
-// Convenience hook for basic semantic input
-export declare const useBasicSemanticInput: (initialType: InputType) => {
-  return useSemanticInput(initialType, {}, {
-    enableAutoDetection: true,
-    enableKeyboardOptimization: false,
-    enableAutocomplete: false,
-    enableTouchOptimization: false,
-    enableAccessibility: true,
-    enablePerformanceMonitoring: false
-  })
-}
-
-// Convenience hook for enhanced semantic input
-export declare const useEnhancedSemanticInput: (initialType: InputType) => {
-  return useSemanticInput(initialType, {}, {
-    enableAutoDetection: true,
-    enableKeyboardOptimization: true,
-    enableAutocomplete: true,
-    enableTouchOptimization: true,
-    enableAccessibility: true,
-    enablePerformanceMonitoring: true
-  })
-}