@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/mobile-input.tsx

@@ -0,0 +1,281 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "./input"
+
+// Input type mappings for mobile optimization
+export type MobileInputType = 
+  | 'text'
+  | 'email' 
+  | 'tel'
+  | 'url'
+  | 'number'
+  | 'decimal'
+  | 'search'
+  | 'password'
+  | 'date'
+  | 'time'
+  | 'datetime-local'
+  | 'month'
+  | 'week'
+
+interface MobileInputConfig {
+  /** Semantic input type for better mobile keyboards */
+  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?: MobileInputType
+  mobileConfig?: MobileInputConfig
+}
+
+/**
+ * Mobile-optimized input component with smart keyboard handling
+ * Automatically configures input attributes for the best mobile experience
+ */
+export const MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(
+  ({ className, type, mobileConfig = {}, ...props }, ref) => {
+    const {
+      semanticType,
+      enableAutocomplete = true,
+      inputMode,
+      spellCheck,
+      autoCapitalize,
+      autoCorrect
+    } = mobileConfig
+
+    // Get optimized input attributes based on semantic type
+    const getInputAttributes = () => {
+      const baseAttributes = {
+        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: type,
+          inputMode: inputMode || getDefaultInputMode(type as MobileInputType)
+        }
+      }
+
+      // Override based on semantic type, but respect custom mobile config
+      switch (semanticType) {
+        case 'name':
+          return {
+            ...baseAttributes,
+            type: 'text' as const,
+            autoComplete: enableAutocomplete ? 'name' : 'off',
+            autoCapitalize: autoCapitalize || 'words' as const,
+            inputMode: inputMode || 'text' as const
+          }
+        
+        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: '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: MobileInputType): string => {
+      switch (inputType) {
+        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()
+
+    return (
+      <Input
+        className={cn(
+          "coach-stan-mobile-input",
+          // Add mobile-specific styling
+          "touch-manipulation", // Disable double-tap zoom
+          className
+        )}
+        ref={ref}
+        {...inputAttributes}
+        // Ensure mobile config doesn't override explicit props
+        type={type || inputAttributes.type}
+        inputMode={(props.inputMode || inputAttributes.inputMode) as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}
+        autoComplete={props.autoComplete || inputAttributes.autoComplete}
+        autoCapitalize={props.autoCapitalize || inputAttributes.autoCapitalize}
+        autoCorrect={props.autoCorrect || inputAttributes.autoCorrect}
+        spellCheck={props.spellCheck ?? inputAttributes.spellCheck}
+        {...props}
+        size="md"
+      />
+    )
+  }
+)
+
+MobileInput.displayName = "MobileInput"
+
+// Utility function to get optimal mobile input props for common scenarios
+export const getMobileInputProps = (semanticType: MobileInputConfig['semanticType']): MobileInputConfig => {
+  return { semanticType, enableAutocomplete: true }
+}
+
+// Common mobile input configurations
+export const mobileInputConfigs = {
+  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