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

package/dist/components/ui/mobile-input.js

@@ -20,11 +20,23 @@ export type MobileInputType =
 
 interface MobileInputConfig {
   /** Semantic input type for better mobile keyboards */
-  semanticType?) */
-  spellCheck?}
+  semanticType?: 'name' | 'username' | 'email' | 'phone' | 'address' | 'city' | 'zipcode' | 'creditcard' | 'amount' | 'age' | 'search' | 'url' | 'newPassword' | 'currentPassword'
+  /** Enable autocomplete suggestions */
+  enableAutocomplete?: boolean
+  /** Custom input mode for mobile keyboards */
+  inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+  /** Enable spell checking (disabled by default for better UX) */
+  spellCheck?: boolean
+  /** Capitalize behavior */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+  /** Auto-correct behavior */
+  autoCorrect?: 'on' | 'off'
+}
 
 export interface MobileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  type?}
+  type?: MobileInputType
+  mobileConfig?: MobileInputConfig
+}
 
 /**
  * Mobile-optimized input component with smart keyboard handling
@@ -44,126 +56,179 @@ export const MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(
     // Get optimized input attributes based on semantic type
     const getInputAttributes = () => {
       const baseAttributes = {
-        spellCheck,
-        autoCapitalize,
-        autoCorrect,
-        autoComplete}
+        spellCheck: spellCheck ?? false,
+        autoCapitalize: autoCapitalize ?? 'none',
+        autoCorrect: autoCorrect ?? 'off',
+        autoComplete: enableAutocomplete ? 'on' : 'off'
+      }
 
       // If explicit type is provided, don't override it with semantic type
       if (type) {
         return {
           ...baseAttributes,
-          type,
-          inputMode)
+          type: type,
+          inputMode: inputMode || getDefaultInputMode(type as MobileInputType)
         }
       }
 
       // Override based on semantic type, but respect custom mobile config
       switch (semanticType) {
-        case 'name',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode}
+        case 'name':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'name' : 'off',
+            autoCapitalize: autoCapitalize || 'words' as const,
+            inputMode: inputMode || 'text' as const
+          }
         
-        case 'username',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode}
-
-        case 'email',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'phone',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'address',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode}
-
-        case 'city',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode}
-
-        case 'zipcode',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'creditcard',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'amount',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'age',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'search',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode}
-
-        case 'url',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'newPassword',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        case 'currentPassword',
-            type,
-            autoComplete,
-            autoCapitalize,
-            inputMode,
-            spellCheck}
-
-        default= inputMode || getDefaultInputMode(type || 'text')
+        case 'username':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'username' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'text' as const
+          }
+
+        case 'email':
+          return {
+            ...baseAttributes,
+            type: 'email' as const,
+            autoComplete: enableAutocomplete ? 'email' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'email' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'phone':
+          return {
+            ...baseAttributes,
+            type: 'tel' as const,
+            autoComplete: enableAutocomplete ? 'tel' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'tel' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'address':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'street-address' : 'off',
+            autoCapitalize: autoCapitalize || 'words' as const,
+            inputMode: inputMode || 'text' as const
+          }
+
+        case 'city':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'address-level2' : 'off',
+            autoCapitalize: autoCapitalize || 'words' as const,
+            inputMode: inputMode || 'text' as const
+          }
+
+        case 'zipcode':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'postal-code' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'numeric' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'creditcard':
           return {
             ...baseAttributes,
-            type,
-            inputMode}
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'cc-number' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'numeric' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'amount':
+          return {
+            ...baseAttributes,
+            type: 'number' as const,
+            autoComplete: 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'decimal' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'age':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'bday-year' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'numeric' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'search':
+          return {
+            ...baseAttributes,
+            type: 'search' as const,
+            autoComplete: 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'search' as const
+          }
+
+        case 'url':
+          return {
+            ...baseAttributes,
+            type: 'url' as const,
+            autoComplete: enableAutocomplete ? 'url' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'url' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'newPassword':
+          return {
+            ...baseAttributes,
+            type: 'password' as const,
+            autoComplete: enableAutocomplete ? 'new-password' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'text' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        case 'currentPassword':
+          return {
+            ...baseAttributes,
+            type: 'password' as const,
+            autoComplete: enableAutocomplete ? 'current-password' : 'off',
+            autoCapitalize: autoCapitalize || 'none' as const,
+            inputMode: inputMode || 'text' as const,
+            spellCheck: spellCheck ?? false
+          }
+
+        default:
+          // Use provided type or fallback settings
+          const finalInputMode = inputMode || getDefaultInputMode(type || 'text')
+          return {
+            ...baseAttributes,
+            type: type || 'text',
+            inputMode: finalInputMode
+          }
       }
     }
 
-    const getDefaultInputMode = (inputType)=> {
+    const getDefaultInputMode = (inputType: MobileInputType): string => {
       switch (inputType) {
-        case 'email'}
+        case 'email': return 'email'
+        case 'tel': return 'tel'
+        case 'url': return 'url'
+        case 'number':
+        case 'decimal': return 'decimal'
+        case 'search': return 'search'
+        default: return 'text'
+      }
     }
 
     const inputAttributes = getInputAttributes()
@@ -195,22 +260,22 @@ export const MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(
 MobileInput.displayName = "MobileInput"
 
 // Utility function to get optimal mobile input props for common scenarios
-export const getMobileInputProps = (semanticType])=> {
-  return { semanticType, enableAutocomplete}
+export const getMobileInputProps = (semanticType: MobileInputConfig['semanticType']): MobileInputConfig => {
+  return { semanticType, enableAutocomplete: true }
 }
 
 // Common mobile input configurations
 export const mobileInputConfigs = {
-  name},
-  email},
-  phone},
-  address},
-  city},
-  zipcode},
-  creditCard},
-  amount},
-  search},
-  url},
-  newPassword},
-  currentPassword}
+  name: { semanticType: 'name' as const },
+  email: { semanticType: 'email' as const },
+  phone: { semanticType: 'phone' as const },
+  address: { semanticType: 'address' as const },
+  city: { semanticType: 'city' as const },
+  zipcode: { semanticType: 'zipcode' as const },
+  creditCard: { semanticType: 'creditcard' as const },
+  amount: { semanticType: 'amount' as const },
+  search: { semanticType: 'search' as const },
+  url: { semanticType: 'url' as const },
+  newPassword: { semanticType: 'newPassword' as const },
+  currentPassword: { semanticType: 'currentPassword' as const }
 } as const