funuicss 3.8.9 → 3.8.11

package/ui/form/Form.js

@@ -100,7 +100,6 @@ var Flex_1 = __importDefault(require("../flex/Flex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
-var theme_1 = require("../theme/theme");
 // Helper function to parse JSON input
 var parseJsonInput = function (input, defaultValue) {
     if (input === undefined || input === null) {
@@ -225,7 +224,7 @@ var FormRadio = function (_a) {
             label,
             required && ' *'))));
 };
-// Function to format WhatsApp message (unchanged)
+// Function to format WhatsApp message - UPDATED with proper formatting
 var formatWhatsAppMessage = function (values, fields, header, footer) {
     // Build message lines
     var message = '';
@@ -233,15 +232,25 @@ var formatWhatsAppMessage = function (values, fields, header, footer) {
     if (header) {
         message += "".concat(header, "\n\n");
     }
-    // Add form data
-    var fieldLines = fields
-        .filter(function (field) {
+    // Filter out empty/null/undefined values
+    var nonEmptyFields = fields.filter(function (field) {
         var value = values[field.name];
-        return value !== undefined && value !== null && value !== '' &&
-            !(Array.isArray(value) && value.length === 0) &&
-            !(typeof value === 'boolean' && !value);
-    })
-        .map(function (field) {
+        // Skip if value is undefined, null, or empty string
+        if (value === undefined || value === null || value === '') {
+            return false;
+        }
+        // Skip if array is empty
+        if (Array.isArray(value) && value.length === 0) {
+            return false;
+        }
+        // Skip if checkbox is false
+        if (field.type === 'checkbox' && !field.multiple && value === false) {
+            return false;
+        }
+        return true;
+    });
+    // Format each field
+    var fieldLines = nonEmptyFields.map(function (field) {
         var value = values[field.name];
         var displayValue = value;
         // Format array values (for multiple checkboxes)
@@ -257,71 +266,98 @@ var formatWhatsAppMessage = function (values, fields, header, footer) {
             var option = field.options.find(function (opt) { return opt.value === value; });
             displayValue = option ? option.label : value;
         }
-        return "*".concat(field.label || field.name, ":* ").concat(displayValue);
-    })
-        .join('\n');
-    message += fieldLines;
+        // Ensure displayValue is a string and preserve spaces/newlines
+        displayValue = String(displayValue);
+        // WhatsApp formatting:
+        // - Field label on its own line
+        // - Value on next line wrapped in backticks
+        // - Double newline between fields for readability
+        return "".concat(field.label || field.name, "\n`").concat(displayValue, "`");
+    });
+    // Join with double newline for spacing
+    message += fieldLines.join('\n\n');
     // Add footer if provided
     if (footer) {
         message += "\n\n".concat(footer);
     }
     return encodeURIComponent(message);
 };
-// Main Form Component
-var Form = function (_a) {
-    var fields = _a.fields, onSubmit = _a.onSubmit, _b = _a.defaultValues, defaultValues = _b === void 0 ? {} : _b, _c = _a.submitText, submitText = _c === void 0 ? 'Submit' : _c, _d = _a.submitBg, submitBg = _d === void 0 ? 'primary' : _d, submitPrefix = _a.submitPrefix, submitSuffix = _a.submitSuffix, _e = _a.resetText, resetText = _e === void 0 ? 'Reset' : _e, _f = _a.showReset, showReset = _f === void 0 ? true : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.layout, layout = _j === void 0 ? 'vertical' : _j, _k = _a.gap, gap = _k === void 0 ? '1.5rem' : _k, title = _a.title, titleSize = _a.titleSize, titleColor = _a.titleColor, description = _a.description, descriptionSize = _a.descriptionSize, descriptionColor = _a.descriptionColor, whatsappContact = _a.whatsappContact, width = _a.width, centered = _a.centered, whatsappHeader = _a.whatsappHeader, whatsappFooter = _a.whatsappFooter, _l = _a.fullWidth, fullWidth = _l === void 0 ? true : _l, _m = _a.variant, variant = _m === void 0 ? '' : _m;
-    // Use theme variant
-    var themeVariant = (0, theme_1.useVariant)().variant;
+// Main Form Component - MODIFIED for submit-only validation
+var Form = function (props) {
+    var fieldsProp = props.fields, onSubmitProp = props.onSubmit, _a = props.defaultValues, defaultValuesProp = _a === void 0 ? {} : _a, _b = props.submitText, submitTextProp = _b === void 0 ? 'Submit' : _b, _c = props.submitBg, submitBgProp = _c === void 0 ? 'primary' : _c, submitPrefixProp = props.submitPrefix, submitSuffixProp = props.submitSuffix, _d = props.resetText, resetTextProp = _d === void 0 ? 'Reset' : _d, _e = props.showReset, showResetProp = _e === void 0 ? true : _e, _f = props.isLoading, isLoadingProp = _f === void 0 ? false : _f, _g = props.className, classNameProp = _g === void 0 ? '' : _g, _h = props.layout, layoutProp = _h === void 0 ? 'vertical' : _h, _j = props.gap, gapProp = _j === void 0 ? '1.5rem' : _j, titleProp = props.title, titleSizeProp = props.titleSize, titleColorProp = props.titleColor, descriptionProp = props.description, descriptionSizeProp = props.descriptionSize, descriptionColorProp = props.descriptionColor, whatsappContactProp = props.whatsappContact, widthProp = props.width, centeredProp = props.centered, whatsappHeaderProp = props.whatsappHeader, whatsappFooterProp = props.whatsappFooter, _k = props.fullWidth, fullWidthProp = _k === void 0 ? true : _k, _l = props.variant, variant = _l === void 0 ? '' : _l;
     // Use component configuration with variant
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Form', variant).mergeWithLocal;
-    // Parse JSON inputs
-    var parsedFields = (0, react_1.useMemo)(function () { return parseJsonInput(fields, []); }, [fields]);
-    var parsedDefaultValues = (0, react_1.useMemo)(function () { return parseJsonInput(defaultValues, {}); }, [defaultValues]);
-    // Create local props for configuration
+    // Create local props object
     var localProps = {
-        fields: parsedFields,
-        onSubmit: onSubmit,
-        defaultValues: parsedDefaultValues,
-        submitText: submitText,
-        submitBg: submitBg,
-        submitPrefix: submitPrefix,
-        submitSuffix: submitSuffix,
-        resetText: resetText,
-        showReset: showReset,
-        isLoading: isLoading,
-        className: className,
-        layout: layout,
-        gap: gap,
-        title: title,
-        titleSize: titleSize,
-        titleColor: titleColor,
-        description: description,
-        descriptionSize: descriptionSize,
-        descriptionColor: descriptionColor,
-        whatsappContact: whatsappContact,
-        width: width,
-        centered: centered,
-        whatsappHeader: whatsappHeader,
-        whatsappFooter: whatsappFooter,
-        fullWidth: fullWidth,
+        fields: fieldsProp,
+        onSubmit: onSubmitProp,
+        defaultValues: defaultValuesProp,
+        submitText: submitTextProp,
+        submitBg: submitBgProp,
+        submitPrefix: submitPrefixProp,
+        submitSuffix: submitSuffixProp,
+        resetText: resetTextProp,
+        showReset: showResetProp,
+        isLoading: isLoadingProp,
+        className: classNameProp,
+        layout: layoutProp,
+        gap: gapProp,
+        title: titleProp,
+        titleSize: titleSizeProp,
+        titleColor: titleColorProp,
+        description: descriptionProp,
+        descriptionSize: descriptionSizeProp,
+        descriptionColor: descriptionColorProp,
+        whatsappContact: whatsappContactProp,
+        width: widthProp,
+        centered: centeredProp,
+        whatsappHeader: whatsappHeaderProp,
+        whatsappFooter: whatsappFooterProp,
+        fullWidth: fullWidthProp,
         variant: variant,
     };
     // Merge with theme configuration
     var mergedProps = mergeWithLocal(localProps).props;
-    // Destructure merged props with defaults
-    var _o = mergedProps.fields, finalFields = _o === void 0 ? parsedFields : _o, _p = mergedProps.onSubmit, finalOnSubmit = _p === void 0 ? onSubmit : _p, _q = mergedProps.defaultValues, finalDefaultValues = _q === void 0 ? parsedDefaultValues : _q, _r = mergedProps.submitText, finalSubmitText = _r === void 0 ? submitText : _r, _s = mergedProps.submitBg, finalSubmitBg = _s === void 0 ? submitBg : _s, _t = mergedProps.submitPrefix, finalSubmitPrefix = _t === void 0 ? submitPrefix : _t, _u = mergedProps.submitSuffix, finalSubmitSuffix = _u === void 0 ? submitSuffix : _u, _v = mergedProps.resetText, finalResetText = _v === void 0 ? resetText : _v, _w = mergedProps.showReset, finalShowReset = _w === void 0 ? showReset : _w, _x = mergedProps.isLoading, finalIsLoading = _x === void 0 ? isLoading : _x, _y = mergedProps.className, finalClassName = _y === void 0 ? className : _y, _z = mergedProps.layout, finalLayout = _z === void 0 ? layout : _z, _0 = mergedProps.gap, finalGap = _0 === void 0 ? gap : _0, _1 = mergedProps.title, finalTitle = _1 === void 0 ? title : _1, _2 = mergedProps.titleSize, finalTitleSize = _2 === void 0 ? titleSize : _2, _3 = mergedProps.titleColor, finalTitleColor = _3 === void 0 ? titleColor : _3, _4 = mergedProps.description, finalDescription = _4 === void 0 ? description : _4, _5 = mergedProps.descriptionSize, finalDescriptionSize = _5 === void 0 ? descriptionSize : _5, _6 = mergedProps.descriptionColor, finalDescriptionColor = _6 === void 0 ? descriptionColor : _6, _7 = mergedProps.whatsappContact, finalWhatsappContact = _7 === void 0 ? whatsappContact : _7, _8 = mergedProps.width, finalWidth = _8 === void 0 ? width : _8, _9 = mergedProps.centered, finalCentered = _9 === void 0 ? centered : _9, _10 = mergedProps.whatsappHeader, finalWhatsappHeader = _10 === void 0 ? whatsappHeader : _10, _11 = mergedProps.whatsappFooter, finalWhatsappFooter = _11 === void 0 ? whatsappFooter : _11, _12 = mergedProps.fullWidth, finalFullWidth = _12 === void 0 ? fullWidth : _12;
+    // Destructure with proper priority: local props override config props
+    var fields = fieldsProp !== undefined ? fieldsProp : mergedProps.fields;
+    var onSubmit = onSubmitProp !== undefined ? onSubmitProp : mergedProps.onSubmit;
+    var defaultValues = defaultValuesProp !== undefined ? defaultValuesProp : mergedProps.defaultValues;
+    var submitText = submitTextProp !== undefined ? submitTextProp : mergedProps.submitText;
+    var submitBg = submitBgProp !== undefined ? submitBgProp : mergedProps.submitBg;
+    var submitPrefix = submitPrefixProp !== undefined ? submitPrefixProp : mergedProps.submitPrefix;
+    var submitSuffix = submitSuffixProp !== undefined ? submitSuffixProp : mergedProps.submitSuffix;
+    var resetText = resetTextProp !== undefined ? resetTextProp : mergedProps.resetText;
+    var showReset = showResetProp !== undefined ? showResetProp : mergedProps.showReset;
+    var isLoading = isLoadingProp !== undefined ? isLoadingProp : mergedProps.isLoading;
+    var className = classNameProp !== undefined ? classNameProp : mergedProps.className;
+    var layout = layoutProp !== undefined ? layoutProp : mergedProps.layout;
+    var gap = gapProp !== undefined ? gapProp : mergedProps.gap;
+    var title = titleProp !== undefined ? titleProp : mergedProps.title;
+    var titleSize = titleSizeProp !== undefined ? titleSizeProp : mergedProps.titleSize;
+    var titleColor = titleColorProp !== undefined ? titleColorProp : mergedProps.titleColor;
+    var description = descriptionProp !== undefined ? descriptionProp : mergedProps.description;
+    var descriptionSize = descriptionSizeProp !== undefined ? descriptionSizeProp : mergedProps.descriptionSize;
+    var descriptionColor = descriptionColorProp !== undefined ? descriptionColorProp : mergedProps.descriptionColor;
+    var whatsappContact = whatsappContactProp !== undefined ? whatsappContactProp : mergedProps.whatsappContact;
+    var width = widthProp !== undefined ? widthProp : mergedProps.width;
+    var centered = centeredProp !== undefined ? centeredProp : mergedProps.centered;
+    var whatsappHeader = whatsappHeaderProp !== undefined ? whatsappHeaderProp : mergedProps.whatsappHeader;
+    var whatsappFooter = whatsappFooterProp !== undefined ? whatsappFooterProp : mergedProps.whatsappFooter;
+    var fullWidth = fullWidthProp !== undefined ? fullWidthProp : mergedProps.fullWidth;
+    // Parse JSON inputs
+    var parsedFields = (0, react_1.useMemo)(function () { return parseJsonInput(fields, []); }, [fields]);
+    var parsedDefaultValues = (0, react_1.useMemo)(function () { return parseJsonInput(defaultValues, {}); }, [defaultValues]);
     // State management
-    var _13 = (0, react_1.useState)({}), errors = _13[0], setErrors = _13[1];
-    var _14 = (0, react_1.useState)({}), touched = _14[0], setTouched = _14[1];
-    var _15 = (0, react_1.useState)(function () {
+    var _m = (0, react_1.useState)({}), errors = _m[0], setErrors = _m[1];
+    var _o = (0, react_1.useState)(function () {
         // Initialize form values from defaultValues and field values
         var initialValues = {};
-        finalFields.forEach(function (field) {
+        parsedFields.forEach(function (field) {
             if (field.value !== undefined) {
                 initialValues[field.name] = field.value;
             }
-            else if (finalDefaultValues[field.name] !== undefined) {
-                initialValues[field.name] = finalDefaultValues[field.name];
+            else if (parsedDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = parsedDefaultValues[field.name];
             }
             else {
                 // Set default empty values
@@ -337,15 +373,16 @@ var Form = function (_a) {
             }
         });
         return initialValues;
-    }), formValues = _15[0], setFormValues = _15[1];
-    var _16 = (0, react_1.useState)(false), isSubmitting = _16[0], setIsSubmitting = _16[1];
+    }), formValues = _o[0], setFormValues = _o[1];
+    var _p = (0, react_1.useState)(false), isSubmitting = _p[0], setIsSubmitting = _p[1];
+    var _q = (0, react_1.useState)(false), hasBeenSubmitted = _q[0], setHasBeenSubmitted = _q[1];
     // Update form values when defaultValues prop changes
     (0, react_1.useEffect)(function () {
-        if (Object.keys(finalDefaultValues).length > 0) {
-            setFormValues(function (prev) { return (__assign(__assign({}, prev), finalDefaultValues)); });
+        if (Object.keys(parsedDefaultValues).length > 0) {
+            setFormValues(function (prev) { return (__assign(__assign({}, prev), parsedDefaultValues)); });
         }
-    }, [finalDefaultValues]);
-    // Validate a single field (unchanged)
+    }, [parsedDefaultValues]);
+    // Validate a single field
     var validateField = (0, react_1.useCallback)(function (field, value) {
         var _a, _b, _c, _d, _e;
         // Required validation
@@ -426,11 +463,11 @@ var Form = function (_a) {
         }
         return null;
     }, []);
-    // Validate form (unchanged)
+    // Validate form
     var validateForm = (0, react_1.useCallback)(function () {
         var newErrors = {};
         var hasErrors = false;
-        finalFields.forEach(function (field) {
+        parsedFields.forEach(function (field) {
             var value = formValues[field.name];
             var error = validateField(field, value);
             if (error) {
@@ -439,102 +476,46 @@ var Form = function (_a) {
             }
         });
         setErrors(newErrors);
+        setHasBeenSubmitted(true);
         return !hasErrors;
-    }, [finalFields, validateField, formValues]);
-    // Handle field change for checkboxes and radios (unchanged)
+    }, [parsedFields, validateField, formValues]);
+    // Handle field change for checkboxes and radios
     var handleFieldChange = (0, react_1.useCallback)(function (fieldName, newValue) {
         // Update form values
         setFormValues(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = newValue, _a)));
         });
-        // Update touched state
-        setTouched(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
-        });
-        // Validate the changed field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
-        if (!field)
-            return;
-        var error = validateField(field, newValue);
+        // Clear error for this field when user makes a change
         setErrors(function (prev) {
-            var _a;
-            if (error) {
-                return __assign(__assign({}, prev), (_a = {}, _a[fieldName] = error, _a));
-            }
-            else {
-                var newErrors = __assign({}, prev);
-                delete newErrors[fieldName];
-                return newErrors;
-            }
+            var newErrors = __assign({}, prev);
+            delete newErrors[fieldName];
+            return newErrors;
         });
-    }, [finalFields, validateField]);
-    // Handle input field change (unchanged)
-    var handleInputChange = (0, react_1.useCallback)(function (fieldName, value) {
+    }, []);
+    // Handle input change - NO VALIDATION ON CHANGE
+    var handleInputEventChange = (0, react_1.useCallback)(function (e) {
+        var fieldName = e.target.name;
+        var value = e.target.value;
         // Update form values
         setFormValues(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = value, _a)));
         });
-        // Update touched state
-        setTouched(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
-        });
-        // Validate the changed field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
-        if (!field)
-            return;
-        var error = validateField(field, value);
+        // Clear error for this field when user makes a change
         setErrors(function (prev) {
-            var _a;
-            if (error) {
-                return __assign(__assign({}, prev), (_a = {}, _a[fieldName] = error, _a));
-            }
-            else {
-                var newErrors = __assign({}, prev);
-                delete newErrors[fieldName];
-                return newErrors;
-            }
-        });
-    }, [finalFields, validateField]);
-    // Handle field blur (unchanged)
-    var handleFieldBlur = (0, react_1.useCallback)(function (fieldName) {
-        setTouched(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
+            var newErrors = __assign({}, prev);
+            delete newErrors[fieldName];
+            return newErrors;
         });
-        // Validate the field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
-        if (!field)
-            return;
-        var value = formValues[fieldName];
-        var error = validateField(field, value);
-        setErrors(function (prev) {
-            var _a;
-            if (error) {
-                return __assign(__assign({}, prev), (_a = {}, _a[fieldName] = error, _a));
-            }
-            else {
-                var newErrors = __assign({}, prev);
-                delete newErrors[fieldName];
-                return newErrors;
-            }
-        });
-    }, [finalFields, validateField, formValues]);
-    // Handle form submission (unchanged)
+    }, []);
+    // Handle form submission
     var handleSubmit = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var allTouched, isValid, firstErrorField, element, message, cleanPhone, whatsappUrl, error_1;
+        var isValid, firstErrorField, element, message, cleanPhone, whatsappUrl, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     e.preventDefault();
-                    allTouched = {};
-                    finalFields.forEach(function (field) {
-                        allTouched[field.name] = true;
-                    });
-                    setTouched(allTouched);
                     isValid = validateForm();
                     if (!isValid) {
                         firstErrorField = Object.keys(errors)[0];
@@ -549,20 +530,20 @@ var Form = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 7, 8, 9]);
-                    if (!finalWhatsappContact) return [3 /*break*/, 4];
-                    message = formatWhatsAppMessage(formValues, finalFields, finalWhatsappHeader, finalWhatsappFooter);
-                    cleanPhone = finalWhatsappContact.replace(/[\s+\-()]/g, '');
+                    if (!whatsappContact) return [3 /*break*/, 4];
+                    message = formatWhatsAppMessage(formValues, parsedFields, whatsappHeader, whatsappFooter);
+                    cleanPhone = whatsappContact.replace(/[\s+\-()]/g, '');
                     whatsappUrl = "https://wa.me/".concat(cleanPhone, "?text=").concat(message);
                     window.open(whatsappUrl, '_blank');
-                    if (!finalOnSubmit) return [3 /*break*/, 3];
-                    return [4 /*yield*/, finalOnSubmit(formValues, true)];
+                    if (!onSubmit) return [3 /*break*/, 3];
+                    return [4 /*yield*/, onSubmit(formValues, true)];
                 case 2:
                     _a.sent();
                     _a.label = 3;
                 case 3: return [3 /*break*/, 6];
                 case 4:
-                    if (!finalOnSubmit) return [3 /*break*/, 6];
-                    return [4 /*yield*/, finalOnSubmit(formValues, false)];
+                    if (!onSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, onSubmit(formValues, false)];
                 case 5:
                     _a.sent();
                     _a.label = 6;
@@ -578,17 +559,17 @@ var Form = function (_a) {
                 case 9: return [2 /*return*/];
             }
         });
-    }); }, [finalFields, validateForm, formValues, finalWhatsappContact, finalWhatsappHeader, finalWhatsappFooter, finalOnSubmit, errors]);
-    // Handle form reset (unchanged)
+    }); }, [validateForm, formValues, whatsappContact, whatsappHeader, whatsappFooter, onSubmit, errors, parsedFields]);
+    // Handle form reset
     var handleReset = (0, react_1.useCallback)(function () {
         // Reset to initial values
         var initialValues = {};
-        finalFields.forEach(function (field) {
+        parsedFields.forEach(function (field) {
             if (field.value !== undefined) {
                 initialValues[field.name] = field.value;
             }
-            else if (finalDefaultValues[field.name] !== undefined) {
-                initialValues[field.name] = finalDefaultValues[field.name];
+            else if (parsedDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = parsedDefaultValues[field.name];
             }
             else {
                 if (field.type === 'checkbox' && field.multiple) {
@@ -604,49 +585,36 @@ var Form = function (_a) {
         });
         setFormValues(initialValues);
         setErrors({});
-        setTouched({});
-    }, [finalFields, finalDefaultValues]);
-    // Get field status for Input component (unchanged)
+        setHasBeenSubmitted(false);
+    }, [parsedFields, parsedDefaultValues]);
+    // Get field status for Input component
     var getFieldStatus = (0, react_1.useCallback)(function (fieldName) {
         var error = errors[fieldName];
-        var isTouched = touched[fieldName];
-        if (error)
+        // Only show validation status if form has been submitted and there's an error
+        if (hasBeenSubmitted && error) {
             return 'danger';
-        if (isTouched && !error && formValues[fieldName] !== '') {
-            return 'success';
         }
         return undefined;
-    }, [errors, touched, formValues]);
-    // Check if form is valid for submission (unchanged)
+    }, [errors, hasBeenSubmitted]);
+    // Check if form is valid for submission
     var isFormValid = (0, react_1.useMemo)(function () {
-        // Check if any required fields are empty
-        var hasEmptyRequiredFields = finalFields.some(function (field) {
-            if (!field.required)
-                return false;
-            var value = formValues[field.name];
-            if (field.type === 'checkbox' && field.multiple) {
-                return !Array.isArray(value) || value.length === 0;
-            }
-            if (field.type === 'checkbox') {
-                return value === false;
-            }
-            return !value || value === '';
-        });
-        // Check if there are any validation errors
-        var hasValidationErrors = Object.keys(errors).length > 0;
-        return !hasEmptyRequiredFields && !hasValidationErrors;
-    }, [finalFields, formValues, errors]);
-    // Submit button disabled state (unchanged)
-    var isSubmitDisabled = isSubmitting || finalIsLoading || !isFormValid;
-    // Check if WhatsApp is configured (unchanged)
-    var hasWhatsApp = !!finalWhatsappContact;
-    // Render field based on type (unchanged)
+        // Only check validity when form has been submitted
+        if (hasBeenSubmitted) {
+            return Object.keys(errors).length === 0;
+        }
+        // If form hasn't been submitted yet, consider it valid
+        return true;
+    }, [hasBeenSubmitted, errors]);
+    // Submit button disabled state
+    var isSubmitDisabled = isSubmitting || isLoading;
+    // Check if WhatsApp is configured
+    var hasWhatsApp = !!whatsappContact;
+    // Render field based on type
     var renderField = (0, react_1.useCallback)(function (field) {
         var _a, _b, _c, _d, _e;
         var status = getFieldStatus(field.name);
         var error = errors[field.name];
-        var isTouched = touched[field.name];
-        var showError = error && isTouched;
+        var showError = hasBeenSubmitted && error;
         var value = formValues[field.name];
         // Field wrapper classes
         var wrapperClass = "col min-w-200 field ".concat(showError ? 'field-error' : '').trim();
@@ -655,7 +623,7 @@ var Form = function (_a) {
         // Generate unique ID for the input
         var inputId = ((_a = field.inputProps) === null || _a === void 0 ? void 0 : _a.id) || "form-field-".concat(field.name);
         // Base props for Input component
-        var baseProps = __assign({ id: inputId, name: field.name, label: field.label, placeholder: field.placeholder, helperText: helperText, disabled: field.disabled || finalIsLoading, fullWidth: finalFullWidth }, field.inputProps);
+        var baseProps = __assign({ id: inputId, name: field.name, label: field.label, placeholder: field.placeholder, helperText: helperText, disabled: field.disabled || isLoading, fullWidth: fullWidth }, field.inputProps);
         // Only add status if it's not undefined
         if (status !== undefined) {
             baseProps.status = status;
@@ -682,13 +650,13 @@ var Form = function (_a) {
                                         var newValues = checkedValues_1.filter(function (v) { return v !== option.value; });
                                         handleFieldChange(field.name, newValues);
                                     }
-                                }, disabled: field.disabled || option.disabled || finalIsLoading, required: field.required && index === 0, value: option.value }));
+                                }, disabled: field.disabled || option.disabled || isLoading, required: field.required && index === 0, value: option.value }));
                         }))));
                 }
                 else {
                     // Single checkbox (boolean)
                     return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
-                        react_1.default.createElement(FormCheckbox, { label: field.label, checked: !!value, onChange: function (checked) { return handleFieldChange(field.name, checked); }, disabled: field.disabled || finalIsLoading, required: field.required, id: inputId })));
+                        react_1.default.createElement(FormCheckbox, { label: field.label, checked: !!value, onChange: function (checked) { return handleFieldChange(field.name, checked); }, disabled: field.disabled || isLoading, required: field.required, id: inputId })));
                 }
             case 'radio':
                 if (!((_c = field.options) === null || _c === void 0 ? void 0 : _c.length))
@@ -696,29 +664,999 @@ var Form = function (_a) {
                 return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
                     field.label && (react_1.default.createElement("div", { className: "form-label", style: { marginBottom: '0.5rem' } },
                         react_1.default.createElement(Text_1.default, { text: field.label + (field.required ? ' *' : ''), size: "sm", color: "text", bold: true }))),
-                    react_1.default.createElement(Flex_1.default, { direction: "column", gap: "0.5rem" }, field.options.map(function (option, index) { return (react_1.default.createElement(FormRadio, { key: "".concat(field.name, "_").concat(index), id: "".concat(inputId, "_").concat(index), label: option.label, checked: value === option.value, onChange: function () { return handleFieldChange(field.name, option.value); }, disabled: field.disabled || option.disabled || finalIsLoading, required: field.required && index === 0, value: option.value })); }))));
+                    react_1.default.createElement(Flex_1.default, { direction: "column", gap: "0.5rem" }, field.options.map(function (option, index) { return (react_1.default.createElement(FormRadio, { key: "".concat(field.name, "_").concat(index), id: "".concat(inputId, "_").concat(index), label: option.label, checked: value === option.value, onChange: function () { return handleFieldChange(field.name, option.value); }, disabled: field.disabled || option.disabled || isLoading, required: field.required && index === 0, value: option.value })); }))));
             case 'textarea':
                 return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, __assign({ multiline: true, rows: ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.rows) || 4, value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
+                    react_1.default.createElement(Input_1.default, __assign({ multiline: true, rows: ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.rows) || 4, value: value || '', onChange: handleInputEventChange }, baseProps))));
             case 'select':
                 return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, __assign({ select: true, options: ((_e = field.options) === null || _e === void 0 ? void 0 : _e.map(function (opt) { return ({ text: opt.label, value: opt.value }); })) || [], value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
+                    react_1.default.createElement(Input_1.default, __assign({ select: true, options: ((_e = field.options) === null || _e === void 0 ? void 0 : _e.map(function (opt) { return ({ text: opt.label, value: opt.value }); })) || [], value: value || '', onChange: handleInputEventChange }, baseProps))));
             default:
                 // text, email, number, tel, date, file, password
                 return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, __assign({ type: field.type, value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
+                    react_1.default.createElement(Input_1.default, __assign({ type: field.type, value: value || '', onChange: handleInputEventChange }, baseProps))));
         }
-    }, [errors, touched, formValues, finalIsLoading, getFieldStatus, handleFieldChange, handleInputChange, handleFieldBlur, finalFullWidth]);
-    return (react_1.default.createElement("div", { className: "form-wrapper ".concat(finalCentered ? 'center' : '', " ").concat(finalClassName), style: { width: "100%", maxWidth: finalWidth || "450px" } },
-        finalTitle && (react_1.default.createElement("div", { className: "form-header", style: { marginBottom: '2rem' } },
-            react_1.default.createElement(Text_1.default, { text: finalTitle, size: finalTitleSize || "3xl", color: finalTitleColor || "", block: true }),
-            finalDescription && (react_1.default.createElement(Text_1.default, { article: true, size: finalDescriptionSize || "sm", color: finalDescriptionColor || "" },
-                react_1.default.createElement("div", { className: "article text-sm", dangerouslySetInnerHTML: { __html: finalDescription } }))))),
+    }, [errors, hasBeenSubmitted, formValues, isLoading, getFieldStatus, handleFieldChange, handleInputEventChange, fullWidth]);
+    // Don't render if no fields are configured
+    if (parsedFields.length === 0) {
+        console.warn('Form: No fields configured. Please provide fields prop or configure via theme.');
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "form-wrapper ".concat(centered ? 'center' : '', " ").concat(className), style: { width: "100%", maxWidth: width || "450px" } },
+        title && (react_1.default.createElement("div", { className: "form-header", style: { marginBottom: '2rem' } },
+            react_1.default.createElement(Text_1.default, { text: title, size: titleSize || "3xl", color: titleColor || "", block: true }),
+            description && (react_1.default.createElement(Text_1.default, { article: true, size: descriptionSize || "sm", color: descriptionColor || "" },
+                react_1.default.createElement("div", { className: "article text-sm", dangerouslySetInnerHTML: { __html: description } }))))),
         react_1.default.createElement("form", { className: "form", onSubmit: handleSubmit, style: { width: '100%' } },
-            react_1.default.createElement(Flex_1.default, { direction: finalLayout === 'horizontal' ? 'row' : 'column', gap: finalGap, width: '100%' }, finalFields.map(renderField)),
-            react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem', width: finalFullWidth ? '100%' : undefined } },
-                react_1.default.createElement(Button_1.default, { type: "submit", text: hasWhatsApp ? "Send via WhatsApp" : finalSubmitText, bg: finalSubmitBg || "primary", raised: true, prefix: finalSubmitPrefix || hasWhatsApp ? react_1.default.createElement(pi_1.PiWhatsappLogo, null) : react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), suffix: finalSubmitSuffix, 
-                    // startIcon={hasWhatsApp ? <PiWhatsappLogo /> : <PiPaperPlaneTilt />}
-                    disabled: isSubmitDisabled, isLoading: isSubmitting || finalIsLoading, fullWidth: finalFullWidth })))));
+            react_1.default.createElement(Flex_1.default, { direction: layout === 'horizontal' ? 'row' : 'column', gap: gap, width: '100%' }, parsedFields.map(renderField)),
+            react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem', width: fullWidth ? '100%' : undefined } },
+                react_1.default.createElement(Button_1.default, { type: "submit", text: hasWhatsApp ? "Send via WhatsApp" : submitText, bg: submitBg || "primary", raised: true, prefix: submitPrefix || hasWhatsApp ? react_1.default.createElement(pi_1.PiWhatsappLogo, null) : react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), suffix: submitSuffix, disabled: isSubmitDisabled, isLoading: isSubmitting || isLoading, fullWidth: fullWidth })))));
 };
 exports.default = Form;
+// 'use client';
+// import React, { useState, useEffect, useCallback, useMemo } from 'react';
+// import Button from '../button/Button';
+// import Input from '../input/Input';
+// import Flex from '../flex/Flex';
+// import Text from '../text/Text';
+// import { PiPaperPlaneTilt, PiWarningCircle, PiWhatsappLogo } from 'react-icons/pi';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import { useVariant } from '../theme/theme';
+// // Field types supported
+// export type InputType = 
+//   | 'text'
+//   | 'email'
+//   | 'number'
+//   | 'tel'
+//   | 'textarea'
+//   | 'password'
+//   | 'date'
+//   | 'select'
+//   | 'checkbox'
+//   | 'radio'
+//   | 'file';
+// // Field option
+// export interface FieldOption {
+//   label: string;
+//   value: string;
+//   disabled?: boolean;
+// }
+// // Simplified field configuration
+// export interface FormField {
+//   name: string;
+//   label?: string;
+//   type: InputType;
+//   required?: boolean;
+//   placeholder?: string;
+//   options?: FieldOption[];
+//   multiple?: boolean; // For checkboxes
+//   value?: any; // Initial value
+//   disabled?: boolean;
+//   helperText?: string;
+//   // Input component props (passed directly to Input)
+//   inputProps?: {
+//     startIcon?: React.ReactNode;
+//     endIcon?: React.ReactNode;
+//     prefix?: React.ReactNode;
+//     suffix?: React.ReactNode;
+//     stringPrefix?: string;
+//     stringSuffix?: string;
+//     iconicBg?: string;
+//     funcss?: string;
+//     bg?: string;
+//     flat?: boolean;
+//     bordered?: boolean;
+//     borderless?: boolean;
+//     rounded?: boolean;
+//     leftRounded?: boolean;
+//     rightRounded?: boolean;
+//     rows?: number;
+//     noBorder?: boolean;
+//     variant?: string;
+//     // Standard HTML attributes
+//     id?: string;
+//     autocomplete?: string;
+//     pattern?: string;
+//     min?: string | number;
+//     max?: string | number;
+//     minLength?: number;
+//     maxLength?: number;
+//     step?: string | number;
+//   };
+// }
+// // Form props
+// export interface FormProps {
+//   fields?: FormField[] | string; // Allow string (JSON) or array
+//   onSubmit?: (values: Record<string, any>, viaWhatsApp?: boolean) => void;
+//   defaultValues?: Record<string, any> | string; // Allow string (JSON) or object
+//   submitText?: string;
+//   submitBg?: string;
+//   submitPrefix?: React.ReactNode | string;
+//   submitSuffix?: React.ReactNode | string;
+//   resetText?: string;
+//   showReset?: boolean;
+//   isLoading?: boolean;
+//   className?: string;
+//   layout?: 'vertical' | 'horizontal';
+//   gap?: number | string;
+//   title?: string;
+//   titleSize?: string;
+//   titleColor?: string;
+//   description?: string;
+//   descriptionSize?: string;
+//   descriptionColor?: string;
+//   // WhatsApp props (simple, not object)
+//   whatsappContact?: string;
+//   whatsappHeader?: string;
+//   whatsappFooter?: string;
+//   // New props for fullWidth
+//   fullWidth?: boolean;
+//   width?: string;
+//   centered?: boolean;
+//   // Variant support
+//   variant?: string;
+// }
+// // Helper function to parse JSON input
+// const parseJsonInput = <T,>(input: T | string | undefined, defaultValue: T): T => {
+//   if (input === undefined || input === null) {
+//     return defaultValue;
+//   }
+//   // If it's already the correct type, return as is
+//   if (typeof input !== 'string') {
+//     return input;
+//   }
+//   try {
+//     // Try to parse as JSON
+//     const parsed = JSON.parse(input);
+//     return parsed;
+//   } catch (error) {
+//     console.warn('Failed to parse JSON input:', input, error);
+//     // If parsing fails, try to interpret as a string that might be valid
+//     try {
+//       // Try to handle common cases like arrays or objects without quotes
+//       const trimmed = input.trim();
+//       if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+//         return JSON.parse(trimmed);
+//       } else if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+//         return JSON.parse(trimmed);
+//       }
+//     } catch (e) {
+//       // If still fails, return default
+//     }
+//     return defaultValue;
+//   }
+// };
+// // Custom Checkbox Component (unchanged)
+// const FormCheckbox: React.FC<{
+//   label?: string;
+//   checked: boolean;
+//   onChange: (checked: boolean) => void;
+//   disabled?: boolean;
+//   required?: boolean;
+//   value?: string;
+//   id?: string;
+// }> = ({ label, checked, onChange, disabled, required, value, id }) => {
+//   return (
+//     <label 
+//       className="funui_form-checkbox"
+//       style={{
+//         display: 'flex',
+//         alignItems: 'center',
+//         gap: '0.5rem',
+//         cursor: disabled ? 'not-allowed' : 'pointer',
+//         userSelect: 'none',
+//         width: 'fit-content',
+//         padding: '0.25rem 0',
+//       }}
+//     >
+//       <input
+//         type="checkbox"
+//         id={id}
+//         checked={checked}
+//         onChange={(e) => !disabled && onChange(e.target.checked)}
+//         disabled={disabled}
+//         required={required}
+//         value={value}
+//         style={{ 
+//           position: 'absolute',
+//           opacity: 0,
+//           width: 0,
+//           height: 0,
+//           pointerEvents: 'none'
+//         }}
+//       />
+//       <div 
+//         className="funui_form-checkbox-box"
+//         style={{
+//           width: '1.25rem',
+//           height: '1.25rem',
+//           border: checked ? '2px solid var(--primary)' : '2px solid var(--borderColor)',
+//           borderRadius: '0.25rem',
+//           backgroundColor: checked ? 'var(--primary)' : 'transparent',
+//           position: 'relative',
+//           transition: 'all 0.2s ease',
+//           display: 'flex',
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           flexShrink: 0,
+//         }}
+//       >
+//         {checked && (
+//           <svg
+//             width="14"
+//             height="14"
+//             viewBox="0 0 14 14"
+//             fill="none"
+//             xmlns="http://www.w3.org2000/svg"
+//             style={{
+//               stroke: 'white',
+//               strokeWidth: '2',
+//               strokeLinecap: 'round',
+//               strokeLinejoin: 'round',
+//             }}
+//           >
+//             <path d="M3 7L6 10L11 4" />
+//           </svg>
+//         )}
+//       </div>
+//       {label && (
+//         <span 
+//           className="funui_form-checkbox-label" 
+//           style={{ 
+//             fontSize: '0.875rem',
+//             color: disabled ? 'var(--text-muted)' : 'var(--text)',
+//             fontWeight: checked ? '500' : '400',
+//           }}
+//         >
+//           {label}{required && ' *'}
+//         </span>
+//       )}
+//     </label>
+//   );
+// };
+// // Custom Radio Component (unchanged)
+// const FormRadio: React.FC<{
+//   label?: string;
+//   checked: boolean;
+//   onChange: (checked: boolean) => void;
+//   disabled?: boolean;
+//   required?: boolean;
+//   value?: string;
+//   id?: string;
+// }> = ({ label, checked, onChange, disabled, required, value, id }) => {
+//   return (
+//     <label 
+//       className="funui_form-radio"
+//       style={{
+//         display: 'flex',
+//         alignItems: 'center',
+//         gap: '0.5rem',
+//         cursor: disabled ? 'not-allowed' : 'pointer',
+//         userSelect: 'none',
+//         width: 'fit-content',
+//         padding: '0.25rem 0',
+//       }}
+//     >
+//       <input
+//         type="radio"
+//         id={id}
+//         checked={checked}
+//         onChange={(e) => !disabled && onChange(e.target.checked)}
+//         disabled={disabled}
+//         required={required}
+//         value={value}
+//         style={{ 
+//           position: 'absolute',
+//           opacity: 0,
+//           width: 0,
+//           height: 0,
+//           pointerEvents: 'none'
+//         }}
+//       />
+//       <div 
+//         className="funui_form-radio-circle"
+//         style={{
+//           width: '1.25rem',
+//           height: '1.25rem',
+//           border: checked ? '2px solid var(--primary)' : '2px solid var(--borderColor)',
+//           borderRadius: '50%',
+//           backgroundColor: 'transparent',
+//           position: 'relative',
+//           transition: 'all 0.2s ease',
+//           display: 'flex',
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           flexShrink: 0,
+//         }}
+//       >
+//         {checked && (
+//           <div
+//             style={{
+//               width: '0.75rem',
+//               height: '0.75rem',
+//               backgroundColor: 'var(--primary)',
+//               borderRadius: '50%',
+//             }}
+//           />
+//         )}
+//       </div>
+//       {label && (
+//         <span 
+//           className="funui_form-radio-label" 
+//           style={{ 
+//             fontSize: '0.875rem',
+//             color: disabled ? 'var(--text-muted)' : 'var(--text)',
+//             fontWeight: checked ? '500' : '400',
+//           }}
+//         >
+//           {label}{required && ' *'}
+//         </span>
+//       )}
+//     </label>
+//   );
+// };
+// // Function to format WhatsApp message - UPDATED with proper formatting
+// const formatWhatsAppMessage = (
+//   values: Record<string, any>,
+//   fields: FormField[],
+//   header?: string,
+//   footer?: string
+// ): string => {
+//   // Build message lines
+//   let message = '';
+//   // Add header if provided
+//   if (header) {
+//     message += `${header}\n\n`;
+//   }
+//   // Filter out empty/null/undefined values
+//   const nonEmptyFields = fields.filter(field => {
+//     const value = values[field.name];
+//     // Skip if value is undefined, null, or empty string
+//     if (value === undefined || value === null || value === '') {
+//       return false;
+//     }
+//     // Skip if array is empty
+//     if (Array.isArray(value) && value.length === 0) {
+//       return false;
+//     }
+//     // Skip if checkbox is false
+//     if (field.type === 'checkbox' && !field.multiple && value === false) {
+//       return false;
+//     }
+//     return true;
+//   });
+//   // Format each field
+//   const fieldLines = nonEmptyFields.map(field => {
+//     const value = values[field.name];
+//     let displayValue = value;
+//     // Format array values (for multiple checkboxes)
+//     if (Array.isArray(value)) {
+//       displayValue = value.join(', ');
+//     }
+//     // Format checkbox values
+//     if (field.type === 'checkbox' && !field.multiple) {
+//       displayValue = value ? 'Yes' : 'No';
+//     }
+//     // Format select/radio values
+//     if ((field.type === 'select' || field.type === 'radio') && field.options) {
+//       const option = field.options.find(opt => opt.value === value);
+//       displayValue = option ? option.label : value;
+//     }
+//     // Ensure displayValue is a string and preserve spaces/newlines
+//     displayValue = String(displayValue);
+//     // WhatsApp formatting:
+//     // - Field label on its own line
+//     // - Value on next line wrapped in backticks
+//     // - Double newline between fields for readability
+//     return `${field.label || field.name}\n\`${displayValue}\``;
+//   });
+//   // Join with double newline for spacing
+//   message += fieldLines.join('\n\n');
+//   // Add footer if provided
+//   if (footer) {
+//     message += `\n\n${footer}`;
+//   }
+//   return encodeURIComponent(message);
+// };
+// // Main Form Component - FIXED
+// const Form: React.FC<FormProps> = (props) => {
+//   const {
+//     fields: fieldsProp,
+//     onSubmit: onSubmitProp,
+//     defaultValues: defaultValuesProp = {},
+//     submitText: submitTextProp = 'Submit',
+//     submitBg: submitBgProp = 'primary',
+//     submitPrefix: submitPrefixProp,
+//     submitSuffix: submitSuffixProp,
+//     resetText: resetTextProp = 'Reset',
+//     showReset: showResetProp = true,
+//     isLoading: isLoadingProp = false,
+//     className: classNameProp = '',
+//     layout: layoutProp = 'vertical',
+//     gap: gapProp = '1.5rem',
+//     title: titleProp,
+//     titleSize: titleSizeProp,
+//     titleColor: titleColorProp,
+//     description: descriptionProp,
+//     descriptionSize: descriptionSizeProp,
+//     descriptionColor: descriptionColorProp,
+//     whatsappContact: whatsappContactProp,
+//     width: widthProp,
+//     centered: centeredProp,
+//     whatsappHeader: whatsappHeaderProp,
+//     whatsappFooter: whatsappFooterProp,
+//     fullWidth: fullWidthProp = true,
+//     variant = '',
+//   } = props;
+//   // Use component configuration with variant
+//   const { mergeWithLocal } = useComponentConfiguration('Form', variant);
+//   // Create local props object
+//   const localProps = {
+//     fields: fieldsProp,
+//     onSubmit: onSubmitProp,
+//     defaultValues: defaultValuesProp,
+//     submitText: submitTextProp,
+//     submitBg: submitBgProp,
+//     submitPrefix: submitPrefixProp,
+//     submitSuffix: submitSuffixProp,
+//     resetText: resetTextProp,
+//     showReset: showResetProp,
+//     isLoading: isLoadingProp,
+//     className: classNameProp,
+//     layout: layoutProp,
+//     gap: gapProp,
+//     title: titleProp,
+//     titleSize: titleSizeProp,
+//     titleColor: titleColorProp,
+//     description: descriptionProp,
+//     descriptionSize: descriptionSizeProp,
+//     descriptionColor: descriptionColorProp,
+//     whatsappContact: whatsappContactProp,
+//     width: widthProp,
+//     centered: centeredProp,
+//     whatsappHeader: whatsappHeaderProp,
+//     whatsappFooter: whatsappFooterProp,
+//     fullWidth: fullWidthProp,
+//     variant,
+//   };
+//   // Merge with theme configuration
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   // Destructure with proper priority: local props override config props
+//   const fields = fieldsProp !== undefined ? fieldsProp : mergedProps.fields;
+//   const onSubmit = onSubmitProp !== undefined ? onSubmitProp : mergedProps.onSubmit;
+//   const defaultValues = defaultValuesProp !== undefined ? defaultValuesProp : mergedProps.defaultValues;
+//   const submitText = submitTextProp !== undefined ? submitTextProp : mergedProps.submitText;
+//   const submitBg = submitBgProp !== undefined ? submitBgProp : mergedProps.submitBg;
+//   const submitPrefix = submitPrefixProp !== undefined ? submitPrefixProp : mergedProps.submitPrefix;
+//   const submitSuffix = submitSuffixProp !== undefined ? submitSuffixProp : mergedProps.submitSuffix;
+//   const resetText = resetTextProp !== undefined ? resetTextProp : mergedProps.resetText;
+//   const showReset = showResetProp !== undefined ? showResetProp : mergedProps.showReset;
+//   const isLoading = isLoadingProp !== undefined ? isLoadingProp : mergedProps.isLoading;
+//   const className = classNameProp !== undefined ? classNameProp : mergedProps.className;
+//   const layout = layoutProp !== undefined ? layoutProp : mergedProps.layout;
+//   const gap = gapProp !== undefined ? gapProp : mergedProps.gap;
+//   const title = titleProp !== undefined ? titleProp : mergedProps.title;
+//   const titleSize = titleSizeProp !== undefined ? titleSizeProp : mergedProps.titleSize;
+//   const titleColor = titleColorProp !== undefined ? titleColorProp : mergedProps.titleColor;
+//   const description = descriptionProp !== undefined ? descriptionProp : mergedProps.description;
+//   const descriptionSize = descriptionSizeProp !== undefined ? descriptionSizeProp : mergedProps.descriptionSize;
+//   const descriptionColor = descriptionColorProp !== undefined ? descriptionColorProp : mergedProps.descriptionColor;
+//   const whatsappContact = whatsappContactProp !== undefined ? whatsappContactProp : mergedProps.whatsappContact;
+//   const width = widthProp !== undefined ? widthProp : mergedProps.width;
+//   const centered = centeredProp !== undefined ? centeredProp : mergedProps.centered;
+//   const whatsappHeader = whatsappHeaderProp !== undefined ? whatsappHeaderProp : mergedProps.whatsappHeader;
+//   const whatsappFooter = whatsappFooterProp !== undefined ? whatsappFooterProp : mergedProps.whatsappFooter;
+//   const fullWidth = fullWidthProp !== undefined ? fullWidthProp : mergedProps.fullWidth;
+//   // Parse JSON inputs
+//   const parsedFields = useMemo(() => parseJsonInput(fields, [] as FormField[]), [fields]);
+//   const parsedDefaultValues = useMemo(() => parseJsonInput(defaultValues, {} as Record<string, any>), [defaultValues]);
+//   // State management
+//   const [errors, setErrors] = useState<Record<string, string>>({});
+//   const [touched, setTouched] = useState<Record<string, boolean>>({});
+//   const [formValues, setFormValues] = useState<Record<string, any>>(() => {
+//     // Initialize form values from defaultValues and field values
+//     const initialValues: Record<string, any> = {};
+//     parsedFields.forEach((field: any) => {
+//       if (field.value !== undefined) {
+//         initialValues[field.name] = field.value;
+//       } else if (parsedDefaultValues[field.name] !== undefined) {
+//         initialValues[field.name] = parsedDefaultValues[field.name];
+//       } else {
+//         // Set default empty values
+//         if (field.type === 'checkbox' && field.multiple) {
+//           initialValues[field.name] = [];
+//         } else if (field.type === 'checkbox') {
+//           initialValues[field.name] = false;
+//         } else {
+//           initialValues[field.name] = '';
+//         }
+//       }
+//     });
+//     return initialValues;
+//   });
+//   const [isSubmitting, setIsSubmitting] = useState(false);
+//   // Update form values when defaultValues prop changes
+//   useEffect(() => {
+//     if (Object.keys(parsedDefaultValues).length > 0) {
+//       setFormValues(prev => ({
+//         ...prev,
+//         ...parsedDefaultValues
+//       }));
+//     }
+//   }, [parsedDefaultValues]);
+//   // Validate a single field
+//   const validateField = useCallback((field: FormField, value: any): string | null => {
+//     // Required validation
+//     if (field.required) {
+//       if (value === undefined || value === null || value === '') {
+//         return `${field.label || field.name} is required`;
+//       }
+//       if (field.type === 'checkbox' && field.multiple && Array.isArray(value) && value.length === 0) {
+//         return `${field.label || field.name} is required`;
+//       }
+//       if (field.type === 'checkbox' && !field.multiple && value === false) {
+//         return `${field.label || field.name} is required`;
+//       }
+//     }
+//     // Type-specific validations (only for non-empty values)
+//     if (value && (typeof value !== 'string' || value !== '')) {
+//       // Email validation
+//       if (field.type === 'email' && typeof value === 'string') {
+//         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+//         if (!emailRegex.test(value)) {
+//           return 'Please enter a valid email address';
+//         }
+//       }
+//       // Number validation
+//       if (field.type === 'number') {
+//         let numValue: number;
+//         if (typeof value === 'string') {
+//           numValue = parseFloat(value);
+//         } else if (typeof value === 'number') {
+//           numValue = value;
+//         } else {
+//           return 'Please enter a valid number';
+//         }
+//         if (isNaN(numValue)) {
+//           return 'Please enter a valid number';
+//         }
+//         const min = field.inputProps?.min;
+//         const max = field.inputProps?.max;
+//         if (min !== undefined && numValue < parseFloat(min.toString())) {
+//           return `Minimum value is ${min}`;
+//         }
+//         if (max !== undefined && numValue > parseFloat(max.toString())) {
+//           return `Maximum value is ${max}`;
+//         }
+//       }
+//       // Phone validation (basic) - only for strings
+//       if (field.type === 'tel' && typeof value === 'string') {
+//         const phoneRegex = /^[\+]?[1-9][\d]{0,17}$/;
+//         if (!phoneRegex.test(value.replace(/[\s+\-()]/g, ''))) {
+//           return 'Please enter a valid phone number';
+//         }
+//       }
+//       // Length validation for strings
+//       if (typeof value === 'string') {
+//         const minLength = field.inputProps?.minLength;
+//         const maxLength = field.inputProps?.maxLength;
+//         if (minLength && value.length < minLength) {
+//           return `Minimum ${minLength} characters required`;
+//         }
+//         if (maxLength && value.length > maxLength) {
+//           return `Maximum ${maxLength} characters allowed`;
+//         }
+//       }
+//       // Pattern validation if provided - only for strings
+//       if (field.inputProps?.pattern && typeof value === 'string') {
+//         try {
+//           const regex = new RegExp(field.inputProps.pattern);
+//           if (!regex.test(value)) {
+//             return 'Invalid format';
+//           }
+//         } catch (error) {
+//           console.warn('Invalid regex pattern:', field.inputProps.pattern);
+//         }
+//       }
+//     }
+//     return null;
+//   }, []);
+//   // Validate form
+//   const validateForm = useCallback((): boolean => {
+//     const newErrors: Record<string, string> = {};
+//     let hasErrors = false;
+//     parsedFields.forEach((field: any) => {
+//       const value = formValues[field.name];
+//       const error = validateField(field, value);
+//       if (error) {
+//         newErrors[field.name] = error;
+//         hasErrors = true;
+//       }
+//     });
+//     setErrors(newErrors);
+//     return !hasErrors;
+//   }, [parsedFields, validateField, formValues]);
+//   // Handle field change for checkboxes and radios
+//   const handleFieldChange = useCallback((fieldName: string, newValue: any) => {
+//     // Update form values
+//     setFormValues(prev => ({
+//       ...prev,
+//       [fieldName]: newValue
+//     }));
+//     // Update touched state
+//     setTouched(prev => ({ ...prev, [fieldName]: true }));
+//     // Validate the changed field
+//     const field = parsedFields.find((f: any) => f.name === fieldName);
+//     if (!field) return;
+//     const error = validateField(field, newValue);
+//     setErrors(prev => {
+//       if (error) {
+//         return { ...prev, [fieldName]: error };
+//       } else {
+//         const newErrors = { ...prev };
+//         delete newErrors[fieldName];
+//         return newErrors;
+//       }
+//     });
+//   }, [parsedFields, validateField]);
+//   // FIXED: Handle input change - pass event directly to Input component
+//   const handleInputEventChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+//     const fieldName = e.target.name;
+//     const value = e.target.value;
+//     // Update form values - PASS VALUE AS-IS (preserves spaces)
+//     setFormValues(prev => ({
+//       ...prev,
+//       [fieldName]: value
+//     }));
+//     // Update touched state
+//     setTouched(prev => ({ ...prev, [fieldName]: true }));
+//     // Validate the changed field
+//     const field = parsedFields.find((f: any) => f.name === fieldName);
+//     if (!field) return;
+//     const error = validateField(field, value);
+//     setErrors(prev => {
+//       if (error) {
+//         return { ...prev, [fieldName]: error };
+//       } else {
+//         const newErrors = { ...prev };
+//         delete newErrors[fieldName];
+//         return newErrors;
+//       }
+//     });
+//   }, [parsedFields, validateField]);
+//   // FIXED: Handle blur event - pass event directly to Input component
+//   const handleInputEventBlur = useCallback((e: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+//     const fieldName = e.target.name;
+//     setTouched(prev => ({ ...prev, [fieldName]: true }));
+//     // Validate the field
+//     const field = parsedFields.find((f: any) => f.name === fieldName);
+//     if (!field) return;
+//     const value = formValues[fieldName];
+//     const error = validateField(field, value);
+//     setErrors(prev => {
+//       if (error) {
+//         return { ...prev, [fieldName]: error };
+//       } else {
+//         const newErrors = { ...prev };
+//         delete newErrors[fieldName];
+//         return newErrors;
+//       }
+//     });
+//   }, [parsedFields, validateField, formValues]);
+//   // Handle form submission
+//   const handleSubmit = useCallback(async (e: React.FormEvent) => {
+//     e.preventDefault();
+//     // Mark all fields as touched
+//     const allTouched: Record<string, boolean> = {};
+//     parsedFields.forEach((field: any) => {
+//       allTouched[field.name] = true;
+//     });
+//     setTouched(allTouched);
+//     // Validate form
+//     const isValid = validateForm();
+//     if (!isValid) {
+//       // Scroll to first error
+//       const firstErrorField = Object.keys(errors)[0];
+//       if (firstErrorField) {
+//         const element = document.getElementById(`form-field-${firstErrorField}`);
+//         element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+//       }
+//       return;
+//     }
+//     // Get form data and submit
+//     setIsSubmitting(true);
+//     try {
+//       if (whatsappContact) {
+//         // Submit via WhatsApp
+//         const message = formatWhatsAppMessage(formValues, parsedFields, whatsappHeader, whatsappFooter);
+//         const cleanPhone = whatsappContact.replace(/[\s+\-()]/g, '');
+//         const whatsappUrl = `https://wa.me/${cleanPhone}?text=${message}`;
+//         window.open(whatsappUrl, '_blank');
+//         // Still call onSubmit if provided
+//         if (onSubmit) {
+//           await onSubmit(formValues, true);
+//         }
+//       } else {
+//         // Regular submission
+//         if (onSubmit) {
+//           await onSubmit(formValues, false);
+//         }
+//       }
+//     } catch (error) {
+//       console.error('Form submission error:', error);
+//       setErrors(prev => ({
+//         ...prev,
+//         _form: 'There was an error submitting the form. Please try again.'
+//       }));
+//     } finally {
+//       setIsSubmitting(false);
+//     }
+//   }, [parsedFields, validateForm, formValues, whatsappContact, whatsappHeader, whatsappFooter, onSubmit, errors]);
+//   // Handle form reset
+//   const handleReset = useCallback(() => {
+//     // Reset to initial values
+//     const initialValues: Record<string, any> = {};
+//     parsedFields.forEach((field: any) => {
+//       if (field.value !== undefined) {
+//         initialValues[field.name] = field.value;
+//       } else if (parsedDefaultValues[field.name] !== undefined) {
+//         initialValues[field.name] = parsedDefaultValues[field.name];
+//       } else {
+//         if (field.type === 'checkbox' && field.multiple) {
+//           initialValues[field.name] = [];
+//         } else if (field.type === 'checkbox') {
+//           initialValues[field.name] = false;
+//         } else {
+//           initialValues[field.name] = '';
+//         }
+//       }
+//     });
+//     setFormValues(initialValues);
+//     setErrors({});
+//     setTouched({});
+//   }, [parsedFields, parsedDefaultValues]);
+//   // Get field status for Input component
+//   const getFieldStatus = useCallback((fieldName: string): 'success' | 'warning' | 'danger' | 'info' | undefined => {
+//     const error = errors[fieldName];
+//     const isTouched = touched[fieldName];
+//     if (error) return 'danger';
+//     if (isTouched && !error && formValues[fieldName] !== '') {
+//       return 'success';
+//     }
+//     return undefined;
+//   }, [errors, touched, formValues]);
+//   // Check if form is valid for submission
+//   const isFormValid = useMemo(() => {
+//     // Check if any required fields are empty
+//     const hasEmptyRequiredFields = parsedFields.some((field: any) => {
+//       if (!field.required) return false;
+//       const value = formValues[field.name];
+//       if (field.type === 'checkbox' && field.multiple) {
+//         return !Array.isArray(value) || value.length === 0;
+//       }
+//       if (field.type === 'checkbox') {
+//         return value === false;
+//       }
+//       return !value || value === '';
+//     });
+//     // Check if there are any validation errors
+//     const hasValidationErrors = Object.keys(errors).length > 0;
+//     return !hasEmptyRequiredFields && !hasValidationErrors;
+//   }, [parsedFields, formValues, errors]);
+//   // Submit button disabled state
+//   const isSubmitDisabled = isSubmitting || isLoading || !isFormValid;
+//   // Check if WhatsApp is configured
+//   const hasWhatsApp = !!whatsappContact;
+//   // Render field based on type - FIXED
+//   const renderField = useCallback((field: FormField) => {
+//     const status = getFieldStatus(field.name);
+//     const error = errors[field.name];
+//     const isTouched = touched[field.name];
+//     const showError = error && isTouched;
+//     const value = formValues[field.name];
+//     // Field wrapper classes
+//     const wrapperClass = `col min-w-200 field ${showError ? 'field-error' : ''}`.trim();
+//     // Helper text (error takes priority)
+//     const helperText = showError ? error : field.helperText;
+//     // Generate unique ID for the input
+//     const inputId = field.inputProps?.id || `form-field-${field.name}`;
+//     // Base props for Input component
+//     const baseProps: any = {
+//       id: inputId,
+//       name: field.name, // IMPORTANT: Make sure name is passed
+//       label: field.label,
+//       placeholder: field.placeholder,
+//       helperText: helperText,
+//       disabled: field.disabled || isLoading,
+//       fullWidth: fullWidth,
+//       ...field.inputProps,
+//     };
+//     // Only add status if it's not undefined
+//     if (status !== undefined) {
+//       baseProps.status = status;
+//     }
+//     // Render based on field type
+//     switch (field.type) {
+//       case 'checkbox':
+//         if (field.options?.length) {
+//           // Multiple checkboxes (checkbox group)
+//           const checkedValues = Array.isArray(value) ? value : [];
+//           return (
+//             <div key={field.name} className={wrapperClass}>
+//               {field.label && (
+//                 <div className="form-label" style={{ marginBottom: '0.5rem' }}>
+//                   <Text text={field.label + (field.required ? ' *' : '')} size="sm" color="text" bold />
+//                 </div>
+//               )}
+//               <Flex direction="column" gap="0.5rem">
+//                 {field.options.map((option, index) => {
+//                   const isChecked = checkedValues.includes(option.value);
+//                   return (
+//                     <FormCheckbox
+//                       key={`${field.name}_${index}`}
+//                       id={`${inputId}_${index}`}
+//                       label={option.label}
+//                       checked={isChecked}
+//                       onChange={(checked) => {
+//                         if (checked) {
+//                           // Add value to array
+//                           const newValues = [...checkedValues, option.value];
+//                           handleFieldChange(field.name, newValues);
+//                         } else {
+//                           // Remove value from array
+//                           const newValues = checkedValues.filter(v => v !== option.value);
+//                           handleFieldChange(field.name, newValues);
+//                         }
+//                       }}
+//                       disabled={field.disabled || option.disabled || isLoading}
+//                       required={field.required && index === 0}
+//                       value={option.value}
+//                     />
+//                   );
+//                 })}
+//               </Flex>
+//             </div>
+//           );
+//         } else {
+//           // Single checkbox (boolean)
+//           return (
+//             <div key={field.name} className={wrapperClass}>
+//               <FormCheckbox
+//                 label={field.label}
+//                 checked={!!value}
+//                 onChange={(checked) => handleFieldChange(field.name, checked)}
+//                 disabled={field.disabled || isLoading}
+//                 required={field.required}
+//                 id={inputId}
+//               />
+//             </div>
+//           );
+//         }
+//       case 'radio':
+//         if (!field.options?.length) return null;
+//         return (
+//           <div key={field.name} className={wrapperClass}>
+//             {field.label && (
+//               <div className="form-label" style={{ marginBottom: '0.5rem' }}>
+//                 <Text text={field.label + (field.required ? ' *' : '')} size="sm" color="text" bold />
+//               </div>
+//             )}
+//             <Flex direction="column" gap="0.5rem">
+//               {field.options.map((option, index) => (
+//                 <FormRadio
+//                   key={`${field.name}_${index}`}
+//                   id={`${inputId}_${index}`}
+//                   label={option.label}
+//                   checked={value === option.value}
+//                   onChange={() => handleFieldChange(field.name, option.value)}
+//                   disabled={field.disabled || option.disabled || isLoading}
+//                   required={field.required && index === 0}
+//                   value={option.value}
+//                 />
+//               ))}
+//             </Flex>
+//           </div>
+//         );
+//       case 'textarea':
+//         return (
+//           <div key={field.name} className={wrapperClass}>
+//             <Input
+//               multiline
+//               rows={field.inputProps?.rows || 4}
+//               value={value || ''}
+//               onChange={handleInputEventChange} // FIXED: Pass event handler directly
+//               onBlur={handleInputEventBlur} // FIXED: Pass event handler directly
+//               {...baseProps}
+//             />
+//           </div>
+//         );
+//       case 'select':
+//         return (
+//           <div key={field.name} className={wrapperClass}>
+//             <Input
+//               select
+//               options={field.options?.map(opt => ({ text: opt.label, value: opt.value })) || []}
+//               value={value || ''}
+//               onChange={handleInputEventChange} // FIXED: Pass event handler directly
+//               onBlur={handleInputEventBlur} // FIXED: Pass event handler directly
+//               {...baseProps}
+//             />
+//           </div>
+//         );
+//       default:
+//         // text, email, number, tel, date, file, password
+//         return (
+//           <div key={field.name} className={wrapperClass}>
+//             <Input
+//               type={field.type}
+//               value={value || ''}
+//               onChange={handleInputEventChange} // FIXED: Pass event handler directly
+//               onBlur={handleInputEventBlur} // FIXED: Pass event handler directly
+//               {...baseProps}
+//             />
+//           </div>
+//         );
+//     }
+//   }, [errors, touched, formValues, isLoading, getFieldStatus, handleFieldChange, handleInputEventChange, handleInputEventBlur, fullWidth]);
+//   // Don't render if no fields are configured
+//   if (parsedFields.length === 0) {
+//     console.warn('Form: No fields configured. Please provide fields prop or configure via theme.');
+//     return null;
+//   }
+//   return (
+//     <div className={`form-wrapper ${centered ? 'center' : ''} ${className}`} style={{ width: "100%", maxWidth: width || "450px"  }}>
+//       {/* Title Section */}
+//       {title && (
+//         <div className="form-header" style={{ marginBottom: '2rem' }}>
+//           <Text 
+//             text={title} 
+//             size={titleSize || "3xl"}
+//             color={titleColor || ""}
+//             block
+//           />
+//           {description && (
+//           <Text article 
+//           size={descriptionSize || "sm"}
+//           color={descriptionColor || ""}
+//           >
+//               <div 
+//               className="article text-sm"
+//               dangerouslySetInnerHTML={{ __html: description }}
+//             />
+//           </Text>
+//           )}
+//         </div>
+//       )}
+//       <form 
+//         className="form"
+//         onSubmit={handleSubmit}
+//         style={{ width: '100%' }}
+//       >
+//         {/* Form fields wrapped in Flex */}
+//         <Flex 
+//           direction={layout === 'horizontal' ? 'row' : 'column'}
+//           gap={gap}
+//           width='100%'
+//         >
+//           {parsedFields.map(renderField)}
+//         </Flex>
+//         {/* Form actions - SINGLE BUTTON */}
+//         <Flex direction="column" gap="1rem" style={{ marginTop: '2rem', width: fullWidth ? '100%' : undefined }}>
+//           {/* Single submit button */}
+//           <Button
+//             type="submit"
+//             text={hasWhatsApp ? `Send via WhatsApp` : submitText}
+//             bg={submitBg || "primary"}
+//             raised
+//             prefix={submitPrefix || hasWhatsApp ? <PiWhatsappLogo /> : <PiPaperPlaneTilt />}  
+//             suffix={submitSuffix}
+//             disabled={isSubmitDisabled}
+//             isLoading={isSubmitting || isLoading}
+//             fullWidth={fullWidth}
+//           />
+//         </Flex>
+//       </form>
+//     </div>
+//   );
+// };
+// export default Form;