@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

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

@@ -0,0 +1,216 @@
+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?) */
+  spellCheck?}
+
+export interface MobileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?}
+
+/**
+ * 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,
+        autoCapitalize,
+        autoCorrect,
+        autoComplete}
+
+      // If explicit type is provided, don't override it with semantic type
+      if (type) {
+        return {
+          ...baseAttributes,
+          type,
+          inputMode)
+        }
+      }
+
+      // Override based on semantic type, but respect custom mobile config
+      switch (semanticType) {
+        case 'name',
+            type,
+            autoComplete,
+            autoCapitalize,
+            inputMode}
+        
+        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')
+          return {
+            ...baseAttributes,
+            type,
+            inputMode}
+      }
+    }
+
+    const getDefaultInputMode = (inputType)=> {
+      switch (inputType) {
+        case 'email'}
+    }
+
+    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])=> {
+  return { semanticType, enableAutocomplete}
+}
+
+// Common mobile input configurations
+export const mobileInputConfigs = {
+  name},
+  email},
+  phone},
+  address},
+  city},
+  zipcode},
+  creditCard},
+  amount},
+  search},
+  url},
+  newPassword},
+  currentPassword}
+} as const

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

@@ -0,0 +1,216 @@
+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?) */
+  spellCheck?}
+
+export interface MobileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?}
+
+/**
+ * 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,
+        autoCapitalize,
+        autoCorrect,
+        autoComplete}
+
+      // If explicit type is provided, don't override it with semantic type
+      if (type) {
+        return {
+          ...baseAttributes,
+          type,
+          inputMode)
+        }
+      }
+
+      // Override based on semantic type, but respect custom mobile config
+      switch (semanticType) {
+        case 'name',
+            type,
+            autoComplete,
+            autoCapitalize,
+            inputMode}
+        
+        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')
+          return {
+            ...baseAttributes,
+            type,
+            inputMode}
+      }
+    }
+
+    const getDefaultInputMode = (inputType)=> {
+      switch (inputType) {
+        case 'email'}
+    }
+
+    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])=> {
+  return { semanticType, enableAutocomplete}
+}
+
+// Common mobile input configurations
+export const mobileInputConfigs = {
+  name},
+  email},
+  phone},
+  address},
+  city},
+  zipcode},
+  creditCard},
+  amount},
+  search},
+  url},
+  newPassword},
+  currentPassword}
+} as const