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

package/dist/components/ui/mobile-form-validation.esm.js

@@ -1,451 +1,216 @@
-import React, { useState, useRef, forwardRef } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { Input } from './input'
-import { Label } from './label'
-import { useMobileFormValidation, ValidationRule } from '../../hooks/use-mobile-form-validation'
-import { useFormFeedback } from '../../hooks/use-form-feedback'
-import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout'
-import { useSemanticInput, InputType } from '../../hooks/use-semantic-input'
-import { useFormPerformance } from '../../hooks/use-form-performance'
-
-export interface MobileFormValidationProps {
-  title?: string
-  description?: string
-  fields: Array<{
-    name: string
-    label: string
-    type: InputType
-    placeholder?: string
-    rules: ValidationRule[]
-    initialValue?: any
-  }>
-  onSubmit?: (formData: Record<string, any>) => void
-  onValidationChange?: (isValid: boolean) => void
-  className?: string
-  enableEnhancedFeatures?: boolean
-}
-
-export interface MobileFormValidationRef {
-  submit: () => Promise<{ success: boolean; data: Record<string, any>; errors: string[] }>
-  reset: () => void
-  validate: () => Promise<boolean>
-  getFieldValidation: (fieldName: string) => any
-}
-
-export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFormValidationProps>(
-  ({ 
-    title = 'Mobile Form Validation',
-    description = 'Advanced form validation with mobile optimization',
-    fields,
-    onSubmit,
-    onValidationChange,
-    className = '',
-    enableEnhancedFeatures = true
-  }, ref) => {
-    const [formData, setFormData] = useState<Record<string, any>>({})
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const formRef = useRef<HTMLFormElement>(null)
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, forwardRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+import { Input } from './input';
+import { Label } from './label';
+import { useMobileFormValidation } from '../../hooks/use-mobile-form-validation';
+import { useFormFeedback } from '../../hooks/use-form-feedback';
+import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout';
+import { useSemanticInput } from '../../hooks/use-semantic-input';
+import { useFormPerformance } from '../../hooks/use-form-performance';
+export const MobileFormValidation = forwardRef(({ title = 'Mobile Form Validation', description = 'Advanced form validation with mobile optimization', fields, onSubmit, onValidationChange, className = '', enableEnhancedFeatures = true }, ref) => {
+    const [formData, setFormData] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const formRef = useRef(null);
     // Initialize form data
     React.useEffect(() => {
-      const initialData = fields.reduce((acc, field) => {
-        acc[field.name] = field.initialValue || ''
-        return acc
-      }, {} as Record<string, any>)
-      setFormData(initialData)
-    }, [fields])
-
+        const initialData = fields.reduce((acc, field) => {
+            acc[field.name] = field.initialValue || '';
+            return acc;
+        }, {});
+        setFormData(initialData);
+    }, [fields]);
     // Initialize hooks with configuration based on enhanced features
     const initialFields = fields.reduce((acc, field) => {
-      acc[field.name] = {
-        name: field.name,
-        value: field.initialValue || '',
-        rules: field.rules
-      }
-      return acc
-    }, {} as Record<string, any>)
-
+        acc[field.name] = {
+            name: field.name,
+            value: field.initialValue || '',
+            rules: field.rules
+        };
+        return acc;
+    }, {});
     // Form feedback hook
     const feedback = useFormFeedback({
-      onFeedbackShow: (feedbackState) => {
-        console.log('Feedback shown:', feedbackState)
-      }
+        onFeedbackShow: (feedbackState) => {
+            console.log('Feedback shown:', feedbackState);
+        }
     }, {
-      enableAnimations: true,
-      enableTouchFeedback: true,
-      enableHapticFeedback: enableEnhancedFeatures,
-      enableSoundFeedback: enableEnhancedFeatures,
-      enableAccessibility: true
-    })
-
+        enableAnimations: true,
+        enableTouchFeedback: true,
+        enableHapticFeedback: enableEnhancedFeatures,
+        enableSoundFeedback: enableEnhancedFeatures,
+        enableAccessibility: true
+    });
     // Form validation hook
-    const {
-      updateField,
-      touchField,
-      validateAllFields,
-      submitForm: submitFormHook,
-      resetForm,
-      getFieldValidation,
-      isFormValid,
-      isFormDirty
-    } = useMobileFormValidation(initialFields, {
-      onFormSubmit: (data, isValid) => {
-        if (isValid && onSubmit) {
-          onSubmit(data)
-        }
-      },
-      onValidationComplete: (fieldName, isValid, errors) => {
-        // Trigger feedback based on validation result
-        if (isValid) {
-          feedback.showSuccess(`${fieldName} is valid`)
-        } else {
-          feedback.showError(`${fieldName}: ${errors.join(', ')}`)
+    const { updateField, touchField, validateAllFields, submitForm: submitFormHook, resetForm, getFieldValidation, isFormValid, isFormDirty } = useMobileFormValidation(initialFields, {
+        onFormSubmit: (data, isValid) => {
+            if (isValid && onSubmit) {
+                onSubmit(data);
+            }
+        },
+        onValidationComplete: (fieldName, isValid, errors) => {
+            // Trigger feedback based on validation result
+            if (isValid) {
+                feedback.showSuccess(`${fieldName} is valid`);
+            }
+            else {
+                feedback.showError(`${fieldName}: ${errors.join(', ')}`);
+            }
         }
-      }
     }, {
-      enableTouchFeedback: true,
-      enableHapticFeedback: enableEnhancedFeatures,
-      enableSoundFeedback: enableEnhancedFeatures,
-      validationDelay: enableEnhancedFeatures ? 300 : 500,
-      enablePerformanceOptimization: enableEnhancedFeatures,
-      maxValidationRetries: enableEnhancedFeatures ? 3 : 1
-    })
-
+        enableTouchFeedback: true,
+        enableHapticFeedback: enableEnhancedFeatures,
+        enableSoundFeedback: enableEnhancedFeatures,
+        validationDelay: enableEnhancedFeatures ? 300 : 500,
+        enablePerformanceOptimization: enableEnhancedFeatures,
+        maxValidationRetries: enableEnhancedFeatures ? 3 : 1
+    });
     // Mobile form layout hook
     const layout = useMobileFormLayout({
-      onLayoutChange: (layoutState) => {
-        console.log('Layout changed:', layoutState)
-      }
+        onLayoutChange: (layoutState) => {
+            console.log('Layout changed:', layoutState);
+        }
     }, {
-      enableTouchOptimization: true,
-      enableKeyboardOptimization: enableEnhancedFeatures,
-      enableResponsiveBehavior: true,
-      enablePerformanceOptimization: enableEnhancedFeatures,
-      enableAutoFocus: enableEnhancedFeatures
-    })
-
+        enableTouchOptimization: true,
+        enableKeyboardOptimization: enableEnhancedFeatures,
+        enableResponsiveBehavior: true,
+        enablePerformanceOptimization: enableEnhancedFeatures,
+        enableAutoFocus: enableEnhancedFeatures
+    });
     // Form performance hook
     const performance = useFormPerformance({
-      onPerformanceWarning: (warning, metrics) => {
-        console.warn('Performance warning:', warning, metrics)
-        feedback.showWarning(warning)
-      },
-      onMemoryWarning: (usage, _threshold) => {
-        feedback.showWarning(`Memory usage high: ${(usage * 100).toFixed(1)}%`)
-      },
-      onBatteryWarning: (level, isLow) => {
-        if (isLow) {
-          feedback.showWarning(`Low battery: ${(level * 100).toFixed(0)}%`)
+        onPerformanceWarning: (warning, metrics) => {
+            console.warn('Performance warning:', warning, metrics);
+            feedback.showWarning(warning);
+        },
+        onMemoryWarning: (usage, _threshold) => {
+            feedback.showWarning(`Memory usage high: ${(usage * 100).toFixed(1)}%`);
+        },
+        onBatteryWarning: (level, isLow) => {
+            if (isLow) {
+                feedback.showWarning(`Low battery: ${(level * 100).toFixed(0)}%`);
+            }
         }
-      }
     }, {
-      enableValidationThrottling: true,
-      enableTouchEventOptimization: enableEnhancedFeatures,
-      enableMemoryManagement: enableEnhancedFeatures,
-      enableBatteryOptimization: enableEnhancedFeatures
-    })
-
+        enableValidationThrottling: true,
+        enableTouchEventOptimization: enableEnhancedFeatures,
+        enableMemoryManagement: enableEnhancedFeatures,
+        enableBatteryOptimization: enableEnhancedFeatures
+    });
     // Semantic input hooks for each field
     const semanticInputs = fields.reduce((acc, field) => {
-      acc[field.name] = useSemanticInput(field.type, {
-        onInputTypeDetected: (inputType) => {
-          console.log(`Input type detected for ${field.name}:`, inputType)
-        },
-        onKeyboardOptimization: (optimized) => {
-          console.log(`Keyboard optimization for ${field.name}:`, optimized)
-        }
-      }, {
-        enableAutoDetection: true,
-        enableKeyboardOptimization: enableEnhancedFeatures,
-        enableAutocomplete: enableEnhancedFeatures,
-        enableTouchOptimization: true,
-        enableAccessibility: true,
-        enablePerformanceMonitoring: enableEnhancedFeatures
-      })
-      return acc
-    }, {} as Record<string, any>)
-
+        acc[field.name] = useSemanticInput(field.type, {
+            onInputTypeDetected: (inputType) => {
+                console.log(`Input type detected for ${field.name}:`, inputType);
+            },
+            onKeyboardOptimization: (optimized) => {
+                console.log(`Keyboard optimization for ${field.name}:`, optimized);
+            }
+        }, {
+            enableAutoDetection: true,
+            enableKeyboardOptimization: enableEnhancedFeatures,
+            enableAutocomplete: enableEnhancedFeatures,
+            enableTouchOptimization: true,
+            enableAccessibility: true,
+            enablePerformanceMonitoring: enableEnhancedFeatures
+        });
+        return acc;
+    }, {});
     // Handle field changes
-    const handleFieldChange = (fieldName: string, value: any) => {
-      setFormData(prev => ({ ...prev, [fieldName]: value }))
-      
-      // Update validation state
-      updateField(fieldName, value)
-      
-      // Update semantic input
-      const semanticInput = semanticInputs[fieldName]
-      if (semanticInput) {
-        semanticInput.handleInputChange(value, fieldName, fields.find(f => f.name === fieldName)?.placeholder)
-      }
-      
-      // Notify validation change
-      if (onValidationChange) {
-        onValidationChange(isFormValid)
-      }
-    }
-
+    const handleFieldChange = (fieldName, value) => {
+        setFormData(prev => ({ ...prev, [fieldName]: value }));
+        // Update validation state
+        updateField(fieldName, value);
+        // Update semantic input
+        const semanticInput = semanticInputs[fieldName];
+        if (semanticInput) {
+            semanticInput.handleInputChange(value, fieldName, fields.find(f => f.name === fieldName)?.placeholder);
+        }
+        // Notify validation change
+        if (onValidationChange) {
+            onValidationChange(isFormValid);
+        }
+    };
     // Handle field blur
-    const handleFieldBlur = (fieldName: string) => {
-      touchField(fieldName)
-    }
-
+    const handleFieldBlur = (fieldName) => {
+        touchField(fieldName);
+    };
     // Handle form submission
-    const handleSubmit = async (e: React.FormEvent) => {
-      e.preventDefault()
-      setIsSubmitting(true)
-
-      try {
-        const result = await submitFormHook()
-        
-        if (result.success) {
-          feedback.showSuccess('Form submitted successfully!')
-          if (onSubmit) {
-            onSubmit(result.data)
-          }
-        } else {
-          feedback.showError(`Form submission failed: ${result.errors.join(', ')}`)
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            const result = await submitFormHook();
+            if (result.success) {
+                feedback.showSuccess('Form submitted successfully!');
+                if (onSubmit) {
+                    onSubmit(result.data);
+                }
+            }
+            else {
+                feedback.showError(`Form submission failed: ${result.errors.join(', ')}`);
+            }
+        }
+        catch (error) {
+            feedback.showError('An unexpected error occurred');
+            console.error('Form submission error:', error);
         }
-      } catch (error) {
-        feedback.showError('An unexpected error occurred')
-        console.error('Form submission error:', error)
-      } finally {
-        setIsSubmitting(false)
-      }
-    }
-
+        finally {
+            setIsSubmitting(false);
+        }
+    };
     // Handle form reset
     const handleReset = () => {
-      resetForm()
-      setFormData(fields.reduce((acc, field) => {
-        acc[field.name] = field.initialValue || ''
-        return acc
-      }, {} as Record<string, any>))
-      
-      // Reset semantic inputs
-      Object.values(semanticInputs).forEach((semanticInput: any) => {
-        semanticInput.resetOptimizations()
-      })
-      
-      // Reset performance
-      performance.resetPerformance()
-      
-      // Clear feedback
-      feedback.clearFeedback()
-      
-      feedback.showInfo('Form has been reset')
-    }
-
+        resetForm();
+        setFormData(fields.reduce((acc, field) => {
+            acc[field.name] = field.initialValue || '';
+            return acc;
+        }, {}));
+        // Reset semantic inputs
+        Object.values(semanticInputs).forEach((semanticInput) => {
+            semanticInput.resetOptimizations();
+        });
+        // Reset performance
+        performance.resetPerformance();
+        // Clear feedback
+        feedback.clearFeedback();
+        feedback.showInfo('Form has been reset');
+    };
     // Expose methods via ref
     React.useImperativeHandle(ref, () => ({
-      submit: submitFormHook,
-      reset: handleReset,
-      validate: validateAllFields,
-      getFieldValidation
-    }))
-
+        submit: submitFormHook,
+        reset: handleReset,
+        validate: validateAllFields,
+        getFieldValidation
+    }));
     // Apply performance optimizations
     React.useEffect(() => {
-      performance.applyOptimizations()
-    }, [performance])
-
+        performance.applyOptimizations();
+    }, [performance]);
     // Auto-focus first input on mobile
     React.useEffect(() => {
-      if (layout.isMobile && layout.autoFocusFirstInput) {
-        layout.autoFocusFirstInput()
-      }
-    }, [layout.isMobile, layout.autoFocusFirstInput])
-
-    return (
-      <div className={`mobile-form-validation ${className}`}>
-        {/* Performance Status */}
-        {enableEnhancedFeatures && (
-          <div className="mb-4 p-3 bg-gray-50 rounded-lg">
-            <div className="flex items-center justify-between text-sm">
-              <div className="flex items-center gap-2">
-                <span>Performance:</span>
-                <Badge variant={performance.performanceState.isOptimized ? 'default' : 'secondary'}>
-                  {performance.performanceState.isOptimized ? 'Optimized' : 'Not Optimized'}
-                </Badge>
-              </div>
-              <div className="flex items-center gap-2">
-                <span>Layout:</span>
-                <Badge variant={layout.isOptimized ? 'default' : 'secondary'}>
-                  {layout.isOptimized ? 'Optimized' : 'Not Optimized'}
-                </Badge>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Form Feedback Display */}
-        {feedback.isFeedbackVisible() && (
-          <div className={`mb-4 p-3 rounded-lg ${feedback.getFeedbackClasses()}`}>
-            <div className="flex items-center gap-2">
-              <span>{feedback.getFeedbackIcon(feedback.getCurrentFeedbackType())}</span>
-              <span>{feedback.feedbackState.currentFeedback.message}</span>
-            </div>
-          </div>
-        )}
-
-        {/* Form */}
-        <form 
-          ref={formRef}
-          onSubmit={handleSubmit}
-          className={`space-y-4 ${layout.getLayoutClasses()}`}
-          style={layout.getLayoutCSSVariables() as React.CSSProperties}
-        >
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                {title}
-                <Badge variant="outline">Story 6 Implementation</Badge>
-              </CardTitle>
-              <CardDescription>{description}</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {/* Form Fields */}
-              {fields.map((field) => {
-                const fieldValidation = getFieldValidation(field.name)
-                const semanticInput = semanticInputs[field.name]
-                const isFieldValid = fieldValidation.isValid
-                const fieldErrors = fieldValidation.errors
-                const isFieldTouched = fieldValidation.isTouched
-
-                return (
-                  <div key={field.name} className="space-y-2">
-                    <Label htmlFor={field.name} className="text-sm font-medium">
-                      {field.label}
-                      {field.rules.some(rule => rule.type === 'required') && (
-                        <span className="text-red-500 ml-1">*</span>
-                      )}
-                    </Label>
-                    
-                    <div className="relative">
-                      <Input
-                        id={field.name}
-                        ref={semanticInput?.inputRef}
-                        type={field.type.type}
-                        placeholder={field.placeholder}
-                        value={formData[field.name] || ''}
-                        onChange={(e) => handleFieldChange(field.name, e.target.value)}
-                        onBlur={() => handleFieldBlur(field.name)}
-                        className={`w-full transition-all duration-200 ${
-                          isFieldTouched && !isFieldValid
-                            ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
-                            : isFieldTouched && isFieldValid
-                            ? 'border-green-500 focus:border-green-500 focus:ring-green-500'
-                            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
-                        } ${semanticInput?.getSemanticClasses() || ''}`}
-                        style={{
-                          minHeight: layout.currentSpacing,
-                          width: layout.currentFieldWidth
-                        }}
-                        {...semanticInput?.getOptimizedAttributes(field.type)}
-                      />
-                      
-                      {/* Field Status Indicators */}
-                      {isFieldTouched && (
-                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                          {isFieldValid ? (
-                            <span className="text-green-500 text-lg">✓</span>
-                          ) : (
-                            <span className="text-red-500 text-lg">✗</span>
-                          )}
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Field Errors */}
-                    {isFieldTouched && !isFieldValid && fieldErrors.length > 0 && (
-                      <div className="text-red-500 text-sm space-y-1">
-                        {fieldErrors.map((error: string, index: number) => (
-                          <div key={index} className="flex items-center gap-1">
-                            <span>•</span>
-                            <span>{error}</span>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-
-                    {/* Semantic Input Status */}
-                    {enableEnhancedFeatures && semanticInput && (
-                      <div className="text-xs text-gray-500 space-y-1">
-                        <div className="flex items-center gap-2">
-                          <span>Type:</span>
-                          <Badge variant="outline" className="text-xs">
-                            {semanticInput.semanticState.detectedType?.type || field.type.type}
-                          </Badge>
-                        </div>
-                        {semanticInput.semanticState.isOptimized && (
-                          <div className="flex items-center gap-2">
-                            <span>Optimized:</span>
-                            <Badge variant="default" className="text-xs">Yes</Badge>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                )
-              })}
-
-              {/* Form Actions */}
-              <div className="flex flex-col sm:flex-row gap-3 pt-4">
-                <Button
-                  type="submit"
-                  disabled={!isFormValid || isSubmitting}
-                  className="flex-1 touch-button"
-                  style={{ minHeight: layout.currentSpacing }}
-                >
-                  {isSubmitting ? 'Submitting...' : 'Submit'}
-                </Button>
-                
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleReset}
-                  className="flex-1 touch-button"
-                  style={{ minHeight: layout.currentSpacing }}
-                >
-                  Reset
-                </Button>
-              </div>
-
-              {/* Form Status */}
-              <div className="text-sm text-gray-500 space-y-1">
-                <div className="flex items-center gap-2">
-                  <span>Form Status:</span>
-                  <Badge variant={isFormValid ? 'default' : 'secondary'}>
-                    {isFormValid ? 'Valid' : 'Invalid'}
-                  </Badge>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span>Dirty:</span>
-                  <Badge variant={isFormDirty ? 'default' : 'secondary'}>
-                    {isFormDirty ? 'Yes' : 'No'}
-                  </Badge>
-                </div>
-                {enableEnhancedFeatures && (
-                  <div className="flex items-center gap-2">
-                    <span>Performance Score:</span>
-                    <Badge variant={
-                      performance.performanceState.performanceMetrics.optimizationScore >= 0.8 ? 'default' :
-                      performance.performanceState.performanceMetrics.optimizationScore >= 0.6 ? 'secondary' : 'destructive'
-                    }>
-                      {(performance.performanceState.performanceMetrics.optimizationScore * 100).toFixed(0)}%
-                    </Badge>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </form>
-      </div>
-    )
-  }
-)
-
-MobileFormValidation.displayName = 'MobileFormValidation'
-
-export default MobileFormValidation
+        if (layout.isMobile && layout.autoFocusFirstInput) {
+            layout.autoFocusFirstInput();
+        }
+    }, [layout.isMobile, layout.autoFocusFirstInput]);
+    return (_jsxs("div", { className: `mobile-form-validation ${className}`, children: [enableEnhancedFeatures && (_jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Performance:" }), _jsx(Badge, { variant: performance.performanceState.isOptimized ? 'default' : 'secondary', children: performance.performanceState.isOptimized ? 'Optimized' : 'Not Optimized' })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Layout:" }), _jsx(Badge, { variant: layout.isOptimized ? 'default' : 'secondary', children: layout.isOptimized ? 'Optimized' : 'Not Optimized' })] })] }) })), feedback.isFeedbackVisible() && (_jsx("div", { className: `mb-4 p-3 rounded-lg ${feedback.getFeedbackClasses()}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: feedback.getFeedbackIcon(feedback.getCurrentFeedbackType()) }), _jsx("span", { children: feedback.feedbackState.currentFeedback.message })] }) })), _jsx("form", { ref: formRef, onSubmit: handleSubmit, className: `space-y-4 ${layout.getLayoutClasses()}`, style: layout.getLayoutCSSVariables(), children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [title, _jsx(Badge, { variant: "outline", children: "Story 6 Implementation" })] }), _jsx(CardDescription, { children: description })] }), _jsxs(CardContent, { className: "space-y-4", children: [fields.map((field) => {
+                                    const fieldValidation = getFieldValidation(field.name);
+                                    const semanticInput = semanticInputs[field.name];
+                                    const isFieldValid = fieldValidation.isValid;
+                                    const fieldErrors = fieldValidation.errors;
+                                    const isFieldTouched = fieldValidation.isTouched;
+                                    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: field.name, className: "text-sm font-medium", children: [field.label, field.rules.some(rule => rule.type === 'required') && (_jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: field.name, ref: semanticInput?.inputRef, type: field.type.type, placeholder: field.placeholder, value: formData[field.name] || '', onChange: (e) => handleFieldChange(field.name, e.target.value), onBlur: () => handleFieldBlur(field.name), className: `w-full transition-all duration-200 ${isFieldTouched && !isFieldValid
+                                                            ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                                                            : isFieldTouched && isFieldValid
+                                                                ? 'border-green-500 focus:border-green-500 focus:ring-green-500'
+                                                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'} ${semanticInput?.getSemanticClasses() || ''}`, style: {
+                                                            minHeight: layout.currentSpacing,
+                                                            width: layout.currentFieldWidth
+                                                        }, ...semanticInput?.getOptimizedAttributes(field.type) }), isFieldTouched && (_jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: isFieldValid ? (_jsx("span", { className: "text-green-500 text-lg", children: "\u2713" })) : (_jsx("span", { className: "text-red-500 text-lg", children: "\u2717" })) }))] }), isFieldTouched && !isFieldValid && fieldErrors.length > 0 && (_jsx("div", { className: "text-red-500 text-sm space-y-1", children: fieldErrors.map((error, index) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { children: "\u2022" }), _jsx("span", { children: error })] }, index))) })), enableEnhancedFeatures && semanticInput && (_jsxs("div", { className: "text-xs text-gray-500 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Type:" }), _jsx(Badge, { variant: "outline", className: "text-xs", children: semanticInput.semanticState.detectedType?.type || field.type.type })] }), semanticInput.semanticState.isOptimized && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Optimized:" }), _jsx(Badge, { variant: "default", className: "text-xs", children: "Yes" })] }))] }))] }, field.name));
+                                }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: [_jsx(Button, { type: "submit", disabled: !isFormValid || isSubmitting, className: "flex-1 touch-button", style: { minHeight: layout.currentSpacing }, children: isSubmitting ? 'Submitting...' : 'Submit' }), _jsx(Button, { type: "button", variant: "outline", onClick: handleReset, className: "flex-1 touch-button", style: { minHeight: layout.currentSpacing }, children: "Reset" })] }), _jsxs("div", { className: "text-sm text-gray-500 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Form Status:" }), _jsx(Badge, { variant: isFormValid ? 'default' : 'secondary', children: isFormValid ? 'Valid' : 'Invalid' })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Dirty:" }), _jsx(Badge, { variant: isFormDirty ? 'default' : 'secondary', children: isFormDirty ? 'Yes' : 'No' })] }), enableEnhancedFeatures && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Performance Score:" }), _jsxs(Badge, { variant: performance.performanceState.performanceMetrics.optimizationScore >= 0.8 ? 'default' :
+                                                        performance.performanceState.performanceMetrics.optimizationScore >= 0.6 ? 'secondary' : 'destructive', children: [(performance.performanceState.performanceMetrics.optimizationScore * 100).toFixed(0), "%"] })] }))] })] })] }) })] }));
+});
+MobileFormValidation.displayName = 'MobileFormValidation';
+export default MobileFormValidation;