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

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import { Card } from './card';
+import { MobileInput, mobileInputConfigs } from './mobile-input';
+
+export const MobileInputDemo= () => {
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
+          Mobile Input System Recovery
+        </h2>
+        <p className="text-cs-text-secondary">
+          Semantic Input Excellence - Recovered from original project
+        </p>
+      </div>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Semantic Input Types
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Name Input</label>
+            <MobileInput
+              placeholder="Enter your full name"
+              mobileConfig={mobileInputConfigs.name}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Auto-capitalizes words, suggests name autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Email Input</label>
+            <MobileInput
+              placeholder="Enter your email"
+              mobileConfig={mobileInputConfigs.email}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email keyboard, no spell check, email autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Phone Input</label>
+            <MobileInput
+              placeholder="Enter phone number"
+              mobileConfig={mobileInputConfigs.phone}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Numeric keyboard, phone autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Password Input</label>
+            <MobileInput
+              placeholder="Enter new password"
+              mobileConfig={mobileInputConfigs.newPassword}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Password keyboard, new-password autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Search Input</label>
+            <MobileInput
+              placeholder="Search..."
+              mobileConfig={mobileInputConfigs.search}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Search keyboard, no autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Amount Input</label>
+            <MobileInput
+              placeholder="Enter amount"
+              mobileConfig={mobileInputConfigs.amount}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Decimal keyboard, no autocomplete
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Custom Mobile Configurations
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Input Mode</label>
+            <MobileInput
+              placeholder="Custom input mode"
+              mobileConfig={{
+                semanticType,
+                inputMode,
+                spellCheck,
+                autoCapitalize}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email type with tel input mode, spell check enabled
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Disabled Autocomplete</label>
+            <MobileInput
+              placeholder="No autocomplete"
+              mobileConfig={{
+                semanticType,
+                enableAutocomplete}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Name input with autocomplete disabled
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Props Override Behavior
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Explicit Type Override</label>
+            <MobileInput
+              type="password"
+              placeholder="Password type overrides semantic"
+              mobileConfig={{ semanticType}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Explicit password type overrides email semantic type
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
+            <MobileInput
+              placeholder="Custom attributes"
+              mobileConfig={{ semanticType}}
+              autoComplete="off"
+              spellCheck={true}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Custom autoComplete and spellCheck override mobile config
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Mobile Optimization Features
+        </h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 md="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">📱</div>
+              <h4 className="font-medium text-cs-text-primary">Touch Optimized</h4>
+              <p className="text-sm text-cs-text-secondary">
+                44px touch targets, touch-manipulation CSS
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">⌨️</div>
+              <h4 className="font-medium text-cs-text-primary">Smart Keyboards</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Semantic input modes for optimal mobile keyboards
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">🔍</div>
+              <h4 className="font-medium text-cs-text-primary">Autocomplete</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Intelligent autocomplete suggestions for better UX
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import { Card } from './card';
+import { MobileInput, mobileInputConfigs } from './mobile-input';
+
+export const MobileInputDemo= () => {
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
+          Mobile Input System Recovery
+        </h2>
+        <p className="text-cs-text-secondary">
+          Semantic Input Excellence - Recovered from original project
+        </p>
+      </div>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Semantic Input Types
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Name Input</label>
+            <MobileInput
+              placeholder="Enter your full name"
+              mobileConfig={mobileInputConfigs.name}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Auto-capitalizes words, suggests name autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Email Input</label>
+            <MobileInput
+              placeholder="Enter your email"
+              mobileConfig={mobileInputConfigs.email}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email keyboard, no spell check, email autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Phone Input</label>
+            <MobileInput
+              placeholder="Enter phone number"
+              mobileConfig={mobileInputConfigs.phone}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Numeric keyboard, phone autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Password Input</label>
+            <MobileInput
+              placeholder="Enter new password"
+              mobileConfig={mobileInputConfigs.newPassword}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Password keyboard, new-password autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Search Input</label>
+            <MobileInput
+              placeholder="Search..."
+              mobileConfig={mobileInputConfigs.search}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Search keyboard, no autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Amount Input</label>
+            <MobileInput
+              placeholder="Enter amount"
+              mobileConfig={mobileInputConfigs.amount}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Decimal keyboard, no autocomplete
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Custom Mobile Configurations
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Input Mode</label>
+            <MobileInput
+              placeholder="Custom input mode"
+              mobileConfig={{
+                semanticType,
+                inputMode,
+                spellCheck,
+                autoCapitalize}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email type with tel input mode, spell check enabled
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Disabled Autocomplete</label>
+            <MobileInput
+              placeholder="No autocomplete"
+              mobileConfig={{
+                semanticType,
+                enableAutocomplete}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Name input with autocomplete disabled
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Props Override Behavior
+        </h3>
+        <div className="grid grid-cols-1 md="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Explicit Type Override</label>
+            <MobileInput
+              type="password"
+              placeholder="Password type overrides semantic"
+              mobileConfig={{ semanticType}}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Explicit password type overrides email semantic type
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
+            <MobileInput
+              placeholder="Custom attributes"
+              mobileConfig={{ semanticType}}
+              autoComplete="off"
+              spellCheck={true}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Custom autoComplete and spellCheck override mobile config
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Mobile Optimization Features
+        </h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 md="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">📱</div>
+              <h4 className="font-medium text-cs-text-primary">Touch Optimized</h4>
+              <p className="text-sm text-cs-text-secondary">
+                44px touch targets, touch-manipulation CSS
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">⌨️</div>
+              <h4 className="font-medium text-cs-text-primary">Smart Keyboards</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Semantic input modes for optimal mobile keyboards
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">🔍</div>
+              <h4 className="font-medium text-cs-text-primary">Autocomplete</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Intelligent autocomplete suggestions for better UX
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};

package/dist/components/ui/mobile-input.d.ts

@@ -0,0 +1,273 @@
+// 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 {
+
+  semanticType?: 'name' | 'username' | 'email' | 'phone' | 'address' | 'city' | 'zipcode' | 'creditcard' | 'amount' | 'age' | 'search' | 'url' | 'newPassword' | 'currentPassword'
+
+  enableAutocomplete?: boolean
+
+  inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+
+  spellCheck?: boolean
+
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+
+  autoCorrect?: 'on' | 'off'
+}
+
+export interface MobileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?: MobileInputType
+  mobileConfig?: MobileInputConfig
+}
+
+export declare 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 declare const getMobileInputProps: (semanticType: MobileInputConfig['semanticType']): MobileInputConfig => {
+  return { semanticType, enableAutocomplete: true }
+}
+
+// Common mobile input configurations
+export declare 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