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

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

@@ -1,56 +1,78 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface InputType {
-  type}
+  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}
+  enableAutoDetection: boolean
+  enableKeyboardOptimization: boolean
+  enableAutocomplete: boolean
+  enableTouchOptimization: boolean
+  enableAccessibility: boolean
+  enablePerformanceMonitoring: boolean
+}
 
 export interface SemanticCallbacks {
-  onInputTypeDetected?) => void
-  onKeyboardOptimization?) => void
-  onAutocompleteEnhanced?) => void
-  onTouchOptimized?) => void
+  onInputTypeDetected?: (inputType: InputType) => void
+  onKeyboardOptimization?: (optimized: boolean) => void
+  onAutocompleteEnhanced?: (enhanced: boolean) => void
+  onTouchOptimized?: (optimized: boolean) => void
 }
 
 export interface SemanticInputState {
-  detectedType}
+  detectedType: InputType | null
+  isOptimized: boolean
+  keyboardOptimized: boolean
+  autocompleteEnhanced: boolean
+  touchOptimized: boolean
+  performanceMetrics: {
+    detectionTime: number
+    optimizationTime: number
+    lastOptimization: number
+  }
 }
 
 export const useSemanticInput = (
-  initialType,
-  callbacks= {},
-  config= {}
+  initialType: InputType,
+  callbacks: SemanticCallbacks = {},
+  config: Partial<SemanticConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableAutoDetection,
-    enableKeyboardOptimization,
-    enableAutocomplete,
-    enableTouchOptimization,
-    enableAccessibility,
-    enablePerformanceMonitoring,
+  const defaultConfig: SemanticConfig = {
+    enableAutoDetection: true,
+    enableKeyboardOptimization: true,
+    enableAutocomplete: true,
+    enableTouchOptimization: true,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: true,
     ...config
   }
 
   const [semanticState, setSemanticState] = useState<SemanticInputState>({
-    detectedType,
-    isOptimized,
-    keyboardOptimized,
-    autocompleteEnhanced,
-    touchOptimized,
-    performanceMetrics,
-      optimizationTime,
-      lastOptimization}
+    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, name, placeholder?)=> {
+  const detectInputType = useCallback((value: string, name: string, placeholder?: string): InputType => {
     const startTime = performance.now()
     
-    let detectedType= { ...initialType }
+    let detectedType: InputType = { ...initialType }
 
     // Auto-detect based on field name
     if (defaultConfig.enableAutoDetection) {
@@ -60,58 +82,65 @@ export const useSemanticInput = (
       // Email detection
       if (fieldName.includes('email') || fieldName.includes('mail') || fieldValue.includes('@')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
       }
       // Phone detection
       else if (fieldName.includes('phone') || fieldName.includes('tel') || fieldName.includes('mobile')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'tel',
+          autocomplete: 'tel',
+          inputMode: 'tel',
+          keyboardType: 'phone'
+        }
       }
       // URL detection
       else if (fieldName.includes('url') || fieldName.includes('website') || fieldName.includes('link')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
       }
       // Search detection
       else if (fieldName.includes('search') || fieldName.includes('query')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          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,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'number',
+          autocomplete: 'off',
+          inputMode: 'numeric',
+          keyboardType: 'numeric'
+        }
       }
       // Date detection
       else if (fieldName.includes('date') || fieldName.includes('birth') || fieldName.includes('anniversary')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'date',
+          autocomplete: 'bday',
+          inputMode: 'none',
+          keyboardType: 'default'
+        }
       }
       // Password detection
       else if (fieldName.includes('password') || fieldName.includes('pass') || fieldName.includes('secret')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'password',
+          autocomplete: 'current-password',
+          inputMode: 'text',
+          keyboardType: 'default'
+        }
       }
     }
 
@@ -121,22 +150,25 @@ export const useSemanticInput = (
       
       if (placeholderLower.includes('@') || placeholderLower.includes('email')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
       } else if (placeholderLower.includes('http') || placeholderLower.includes('www')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
       } else if (placeholderLower.includes('search') || placeholderLower.includes('find')) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'search',
+          autocomplete: 'off',
+          inputMode: 'search',
+          keyboardType: 'default'
+        }
       }
     }
 
@@ -145,34 +177,38 @@ export const useSemanticInput = (
       // Email pattern
       if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'email',
+          autocomplete: 'email',
+          inputMode: 'email',
+          keyboardType: 'email'
+        }
       }
       // Phone pattern
       else if (/^[\+]?[0-9\s\-\(\)]{7,}$/.test(value)) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'tel',
+          autocomplete: 'tel',
+          inputMode: 'tel',
+          keyboardType: 'phone'
+        }
       }
       // URL pattern
-      else if (/^https?)) {
+      else if (/^https?:\/\/.+/.test(value)) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'url',
+          autocomplete: 'url',
+          inputMode: 'url',
+          keyboardType: 'url'
+        }
       }
       // Number pattern
       else if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
         detectedType = {
-          type,
-          autocomplete,
-          inputMode,
-          keyboardType}
+          type: 'number',
+          autocomplete: 'off',
+          inputMode: 'numeric',
+          keyboardType: 'numeric'
+        }
       }
     }
 
@@ -182,7 +218,8 @@ export const useSemanticInput = (
     setSemanticState(prev => ({
       ...prev,
       detectedType,
-      performanceMetrics,
+      performanceMetrics: {
+        ...prev.performanceMetrics,
         detectionTime
       }
     }))
@@ -192,7 +229,7 @@ export const useSemanticInput = (
   }, [initialType, defaultConfig.enableAutoDetection, callbacks])
 
   // Optimize keyboard for mobile devices
-  const optimizeKeyboard = useCallback((inputType) => {
+  const optimizeKeyboard = useCallback((inputType: InputType) => {
     if (!defaultConfig.enableKeyboardOptimization) return false
 
     const startTime = performance.now()
@@ -240,10 +277,11 @@ export const useSemanticInput = (
 
     setSemanticState(prev => ({
       ...prev,
-      keyboardOptimized,
-      performanceMetrics,
+      keyboardOptimized: optimized,
+      performanceMetrics: {
+        ...prev.performanceMetrics,
         optimizationTime,
-        lastOptimization)
+        lastOptimization: Date.now()
       }
     }))
 
@@ -252,7 +290,7 @@ export const useSemanticInput = (
   }, [defaultConfig.enableKeyboardOptimization, defaultConfig.enableAutocomplete, callbacks])
 
   // Enhance autocomplete functionality
-  const enhanceAutocomplete = useCallback((inputType) => {
+  const enhanceAutocomplete = useCallback((inputType: InputType) => {
     if (!defaultConfig.enableAutocomplete) return false
 
     let enhanced = false
@@ -262,25 +300,32 @@ export const useSemanticInput = (
 
       // Set appropriate autocomplete values
       switch (inputType.type) {
-        case 'email', 'email')
+        case 'email':
+          input.setAttribute('autocomplete', 'email')
           enhanced = true
           break
-        case 'tel', 'tel')
+        case 'tel':
+          input.setAttribute('autocomplete', 'tel')
           enhanced = true
           break
-        case 'url', 'url')
+        case 'url':
+          input.setAttribute('autocomplete', 'url')
           enhanced = true
           break
-        case 'password', 'current-password')
+        case 'password':
+          input.setAttribute('autocomplete', 'current-password')
           enhanced = true
           break
-        case 'date', 'bday')
+        case 'date':
+          input.setAttribute('autocomplete', 'bday')
           enhanced = true
           break
-        case 'search', 'off')
+        case 'search':
+          input.setAttribute('autocomplete', 'off')
           enhanced = true
           break
-        case 'number', 'off')
+        case 'number':
+          input.setAttribute('autocomplete', 'off')
           enhanced = true
           break
       }
@@ -300,14 +345,15 @@ export const useSemanticInput = (
 
     setSemanticState(prev => ({
       ...prev,
-      autocompleteEnhanced}))
+      autocompleteEnhanced: enhanced
+    }))
 
     callbacks.onAutocompleteEnhanced?.(enhanced)
     return enhanced
   }, [defaultConfig.enableAutocomplete, callbacks])
 
   // Optimize touch interactions
-  const optimizeTouch = useCallback((inputType) => {
+  const optimizeTouch = useCallback((inputType: InputType) => {
     if (!defaultConfig.enableTouchOptimization) return false
 
     let optimized = false
@@ -343,14 +389,15 @@ export const useSemanticInput = (
 
     setSemanticState(prev => ({
       ...prev,
-      touchOptimized}))
+      touchOptimized: optimized
+    }))
 
     callbacks.onTouchOptimized?.(optimized)
     return optimized
   }, [defaultConfig.enableTouchOptimization, callbacks])
 
   // Apply all optimizations
-  const applyOptimizations = useCallback((inputType) => {
+  const applyOptimizations = useCallback((inputType: InputType) => {
     const keyboardOptimized = optimizeKeyboard(inputType)
     const autocompleteEnhanced = enhanceAutocomplete(inputType)
     const touchOptimized = optimizeTouch(inputType)
@@ -367,9 +414,10 @@ export const useSemanticInput = (
 
   // Handle input changes with optimization
   const handleInputChange = useCallback((
-    value,
-    name,
-    placeholder?) => {
+    value: string,
+    name: string,
+    placeholder?: string
+  ) => {
     const detectedType = detectInputType(value, name, placeholder)
     
     // Apply optimizations with debouncing
@@ -383,10 +431,11 @@ export const useSemanticInput = (
   }, [detectInputType, applyOptimizations])
 
   // Get optimized input attributes
-  const getOptimizedAttributes = useCallback((inputType) => {
-    const attributes, string> = {
-      type,
-      'data-semantic-optimized'}
+  const getOptimizedAttributes = useCallback((inputType: InputType) => {
+    const attributes: Record<string, string> = {
+      type: inputType.type,
+      'data-semantic-optimized': 'true'
+    }
 
     if (inputType.inputMode) {
       attributes.inputmode = inputType.inputMode
@@ -460,10 +509,11 @@ export const useSemanticInput = (
 
     setSemanticState(prev => ({
       ...prev,
-      isOptimized,
-      keyboardOptimized,
-      autocompleteEnhanced,
-      touchOptimized}))
+      isOptimized: false,
+      keyboardOptimized: false,
+      autocompleteEnhanced: false,
+      touchOptimized: false
+    }))
   }, [])
 
   // Clean up timer on unmount
@@ -491,23 +541,25 @@ export const useSemanticInput = (
 }
 
 // Convenience hook for basic semantic input
-export const useBasicSemanticInput = (initialType) => {
+export const useBasicSemanticInput = (initialType: InputType) => {
   return useSemanticInput(initialType, {}, {
-    enableAutoDetection,
-    enableKeyboardOptimization,
-    enableAutocomplete,
-    enableTouchOptimization,
-    enableAccessibility,
-    enablePerformanceMonitoring})
+    enableAutoDetection: true,
+    enableKeyboardOptimization: false,
+    enableAutocomplete: false,
+    enableTouchOptimization: false,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: false
+  })
 }
 
 // Convenience hook for enhanced semantic input
-export const useEnhancedSemanticInput = (initialType) => {
+export const useEnhancedSemanticInput = (initialType: InputType) => {
   return useSemanticInput(initialType, {}, {
-    enableAutoDetection,
-    enableKeyboardOptimization,
-    enableAutocomplete,
-    enableTouchOptimization,
-    enableAccessibility,
-    enablePerformanceMonitoring})
+    enableAutoDetection: true,
+    enableKeyboardOptimization: true,
+    enableAutocomplete: true,
+    enableTouchOptimization: true,
+    enableAccessibility: true,
+    enablePerformanceMonitoring: true
+  })
 }