@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useRef, forwardRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import { useMobileFormValidation } from '../../hooks/use-mobile-form-validation.js';
+import { useFormFeedback } from '../../hooks/use-form-feedback.js';
+import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout.js';
+import { useSemanticInput } from '../../hooks/use-semantic-input.js';
+import { useFormPerformance } from '../../hooks/use-form-performance.js';
+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;
+        }, {});
+        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;
+    }, {});
+    // Form feedback hook
+    const feedback = useFormFeedback({
+        onFeedbackShow: (feedbackState) => {
+            console.log('Feedback shown:', feedbackState);
+        }
+    }, {
+        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(', ')}`);
+            }
+        }
+    }, {
+        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);
+        }
+    }, {
+        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)}%`);
+            }
+        }
+    }, {
+        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;
+    }, {});
+    // Handle field changes
+    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) => {
+        touchField(fieldName);
+    };
+    // Handle form submission
+    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);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    // Handle form reset
+    const handleReset = () => {
+        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
+    }));
+    // Apply performance optimizations
+    React.useEffect(() => {
+        performance.applyOptimizations();
+    }, [performance]);
+    // Auto-focus first input on mobile
+    React.useEffect(() => {
+        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;

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

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useRef, forwardRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import { useMobileFormValidation } from '../../hooks/use-mobile-form-validation.js';
+import { useFormFeedback } from '../../hooks/use-form-feedback.js';
+import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout.js';
+import { useSemanticInput } from '../../hooks/use-semantic-input.js';
+import { useFormPerformance } from '../../hooks/use-form-performance.js';
+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;
+        }, {});
+        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;
+    }, {});
+    // Form feedback hook
+    const feedback = useFormFeedback({
+        onFeedbackShow: (feedbackState) => {
+            console.log('Feedback shown:', feedbackState);
+        }
+    }, {
+        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(', ')}`);
+            }
+        }
+    }, {
+        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);
+        }
+    }, {
+        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)}%`);
+            }
+        }
+    }, {
+        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;
+    }, {});
+    // Handle field changes
+    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) => {
+        touchField(fieldName);
+    };
+    // Handle form submission
+    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);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    // Handle form reset
+    const handleReset = () => {
+        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
+    }));
+    // Apply performance optimizations
+    React.useEffect(() => {
+        performance.applyOptimizations();
+    }, [performance]);
+    // Auto-focus first input on mobile
+    React.useEffect(() => {
+        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;

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const MobileInputDemo: React.FC;
+//# sourceMappingURL=mobile-input-demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-input-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/mobile-input-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAoMnC,CAAC"}

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

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

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

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

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+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 declare const MobileInput: React.ForwardRefExoticComponent<MobileInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const getMobileInputProps: (semanticType: MobileInputConfig["semanticType"]) => MobileInputConfig;
+export declare const mobileInputConfigs: {
+    readonly name: {
+        readonly semanticType: "name";
+    };
+    readonly email: {
+        readonly semanticType: "email";
+    };
+    readonly phone: {
+        readonly semanticType: "phone";
+    };
+    readonly address: {
+        readonly semanticType: "address";
+    };
+    readonly city: {
+        readonly semanticType: "city";
+    };
+    readonly zipcode: {
+        readonly semanticType: "zipcode";
+    };
+    readonly creditCard: {
+        readonly semanticType: "creditcard";
+    };
+    readonly amount: {
+        readonly semanticType: "amount";
+    };
+    readonly search: {
+        readonly semanticType: "search";
+    };
+    readonly url: {
+        readonly semanticType: "url";
+    };
+    readonly newPassword: {
+        readonly semanticType: "newPassword";
+    };
+    readonly currentPassword: {
+        readonly semanticType: "currentPassword";
+    };
+};
+export {};
+//# sourceMappingURL=mobile-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/mobile-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,OAAO,GACP,KAAK,GACL,KAAK,GACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,CAAA;AAEV,UAAU,iBAAiB;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,iBAAiB,CAAA;IAChL,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;IAC/E,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0BAA0B;IAC1B,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAA;IAC9D,4BAA4B;IAC5B,WAAW,CAAC,EAAE,IAAI,GAAG,KAAK,CAAA;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnF,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,YAAY,CAAC,EAAE,iBAAiB,CAAA;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,2FAqNvB,CAAA;AAKD,eAAO,MAAM,mBAAmB,GAAI,cAAc,iBAAiB,CAAC,cAAc,CAAC,KAAG,iBAErF,CAAA;AAGD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAA"}