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

package/dist/hooks/use-semantic-input.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
+  })
 }

package/dist/hooks/use-tablet-layout.esm.js

@@ -1,25 +1,47 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface TabletLayoutState {
-  orientation}
-  performanceMetrics}
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  isSplitView: boolean
+  isKeyboardVisible: boolean
+  safeAreaInsets: {
+    top: number
+    bottom: number
+    left: number
+    right: number
+  }
+  performanceMetrics: {
+    renderTime: number
+    memoryUsage: number
+    touchResponsiveness: number
+    orientationScore: number
+  }
 }
 
 export interface TabletLayoutConfig {
-  enableOrientationOptimization?}
+  enableOrientationOptimization?: boolean
+  enableSplitViewSupport?: boolean
+  enableKeyboardOptimization?: boolean
+  enableSafeAreaOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableTouchOptimization?: boolean
+  orientationChangeThreshold?: number
+  splitViewBreakpoint?: number
+}
 
 export interface TabletLayoutCallbacks {
-  onOrientationChange?) => void
-  onSplitViewChange?) => void
-  onKeyboardChange?) => void
-  onSafeAreaChange?) => void
-  onPerformanceChange?) => void
-  onTouchOptimization?) => void
+  onOrientationChange?: (orientation: 'portrait' | 'landscape') => void
+  onSplitViewChange?: (isSplitView: boolean) => void
+  onKeyboardChange?: (isVisible: boolean) => void
+  onSafeAreaChange?: (insets: any) => void
+  onPerformanceChange?: (metrics: any) => void
+  onTouchOptimization?: (optimization: string) => void
 }
 
 export const useTabletLayout = (
-  config= {},
-  callbacks= {}
+  config: TabletLayoutConfig = {},
+  callbacks: TabletLayoutCallbacks = {}
 ) => {
   const {
     enableOrientationOptimization = true,
@@ -33,15 +55,17 @@ export const useTabletLayout = (
   } = config
 
   const [state, setState] = useState<TabletLayoutState>({
-    orientation,
-    screenSize,
-    isSplitView,
-    isKeyboardVisible,
-    safeAreaInsets, bottom, left, right},
-    performanceMetrics,
-      memoryUsage,
-      touchResponsiveness,
-      orientationScore}
+    orientation: 'landscape',
+    screenSize: 'medium',
+    isSplitView: false,
+    isKeyboardVisible: false,
+    safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+    performanceMetrics: {
+      renderTime: 0,
+      memoryUsage: 0,
+      touchResponsiveness: 0,
+      orientationScore: 100
+    }
   })
 
   const [optimizations, setOptimizations] = useState<string[]>([])
@@ -57,8 +81,10 @@ export const useTabletLayout = (
 
     const width = window.innerWidth
     const height = window.innerHeight
-    const newOrientation = width > height ? 'landscape' == state.orientation) {
-      setState(prev => ({ ...prev, orientation}))
+    const newOrientation = width > height ? 'landscape' : 'portrait'
+    
+    if (newOrientation !== state.orientation) {
+      setState(prev => ({ ...prev, orientation: newOrientation }))
       callbacks.onOrientationChange?.(newOrientation)
       
       // Optimize for new orientation
@@ -66,11 +92,11 @@ export const useTabletLayout = (
     }
   }, [enableOrientationOptimization, state.orientation, callbacks])
 
-  const optimizeForOrientation = useCallback((orientation) => {
+  const optimizeForOrientation = useCallback((orientation: 'portrait' | 'landscape') => {
     setIsOptimizing(true)
     
     setTimeout(() => {
-      const newOptimizations] = []
+      const newOptimizations: string[] = []
       
       if (orientation === 'portrait') {
         newOptimizations.push('Portrait layout optimized - vertical navigation enabled')
@@ -156,10 +182,10 @@ export const useTabletLayout = (
     if (!enableSafeAreaOptimization) return
 
     const safeAreaInsets = {
-      top).getPropertyValue('--sat') || '0'),
-      bottom).getPropertyValue('--sab') || '0'),
-      left).getPropertyValue('--sal') || '0'),
-      right).getPropertyValue('--sar') || '0')
+      top: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sat') || '0'),
+      bottom: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sab') || '0'),
+      left: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sal') || '0'),
+      right: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sar') || '0')
     }
 
     setState(prev => ({ ...prev, safeAreaInsets }))
@@ -169,12 +195,12 @@ export const useTabletLayout = (
     optimizeForSafeArea(safeAreaInsets)
   }, [enableSafeAreaOptimization, callbacks])
 
-  const optimizeForSafeArea = useCallback((insets) => {
+  const optimizeForSafeArea = useCallback((insets: any) => {
     setIsOptimizing(true)
     
     setTimeout(() => {
       const optimizations = [
-        `Safe area insets applied}px top, ${insets.bottom}px bottom`,
+        `Safe area insets applied: ${insets.top}px top, ${insets.bottom}px bottom`,
         'Layout adjusted for device-specific safe areas',
         'Touch targets positioned within safe areas'
       ]
@@ -195,10 +221,12 @@ export const useTabletLayout = (
       const renderTime = endTime - startTime
       
       // Calculate orientation-specific performance score
-      const orientationScore = state.orientation === 'landscape' ? 95 = {
+      const orientationScore = state.orientation === 'landscape' ? 95 : 90
+      
+      const performanceMetrics = {
         renderTime,
-        memoryUsage) * 100,
-        touchResponsiveness) * 15,
+        memoryUsage: Math.random() * 100,
+        touchResponsiveness: 85 + Math.random() * 15,
         orientationScore
       }
       
@@ -345,11 +373,12 @@ export const useTabletLayout = (
     optimizeTouchInteractions,
     
     // Computed values
-    isPortrait=== 'portrait',
-    isLandscape=== 'landscape',
-    hasSafeArea).some(value => value > 0),
-    performanceScore,
-    optimizationCount}
+    isPortrait: state.orientation === 'portrait',
+    isLandscape: state.orientation === 'landscape',
+    hasSafeArea: Object.values(state.safeAreaInsets).some(value => value > 0),
+    performanceScore: state.performanceMetrics.orientationScore,
+    optimizationCount: optimizations.length
+  }
 }
 
 export default useTabletLayout