@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

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

@@ -1,281 +1,198 @@
-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
-}
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Input } from "./input";
 /**
  * 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
-
+export const MobileInput = React.forwardRef(({ 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)
+        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)
+            };
         }
-      }
-
-      // 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}
+        // Override based on semantic type, but respect custom mobile config
+        switch (semanticType) {
+            case 'name':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'name' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'username':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'username' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text'
+                };
+            case 'email':
+                return {
+                    ...baseAttributes,
+                    type: 'email',
+                    autoComplete: enableAutocomplete ? 'email' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'email',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'phone':
+                return {
+                    ...baseAttributes,
+                    type: 'tel',
+                    autoComplete: enableAutocomplete ? 'tel' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'tel',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'address':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'street-address' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'city':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'address-level2' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'zipcode':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'postal-code' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'creditcard':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'cc-number' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'amount':
+                return {
+                    ...baseAttributes,
+                    type: 'number',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'decimal',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'age':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'bday-year' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'search':
+                return {
+                    ...baseAttributes,
+                    type: 'search',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'search'
+                };
+            case 'url':
+                return {
+                    ...baseAttributes,
+                    type: 'url',
+                    autoComplete: enableAutocomplete ? 'url' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'url',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'newPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'new-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'currentPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'current-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    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) => {
+        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 (_jsx(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"
-
+        type: type || inputAttributes.type, inputMode: (props.inputMode || inputAttributes.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 }
-}
-
+export const getMobileInputProps = (semanticType) => {
+    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
+    name: { semanticType: 'name' },
+    email: { semanticType: 'email' },
+    phone: { semanticType: 'phone' },
+    address: { semanticType: 'address' },
+    city: { semanticType: 'city' },
+    zipcode: { semanticType: 'zipcode' },
+    creditCard: { semanticType: 'creditcard' },
+    amount: { semanticType: 'amount' },
+    search: { semanticType: 'search' },
+    url: { semanticType: 'url' },
+    newPassword: { semanticType: 'newPassword' },
+    currentPassword: { semanticType: 'currentPassword' }
+};