funuicss 3.8.9 → 3.8.10

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) {
@@ -165,7 +164,7 @@ var FormCheckbox = function (_a) {
                 alignItems: 'center',
                 justifyContent: 'center',
                 flexShrink: 0,
-            } }, checked && (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+            } }, checked && (react_1.default.createElement("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',
@@ -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,99 @@ 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 - FIXED
+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)({}), touched = _o[0], setTouched = _o[1];
+    var _p = (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 +374,15 @@ 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 = _p[0], setFormValues = _p[1];
+    var _q = (0, react_1.useState)(false), isSubmitting = _q[0], setIsSubmitting = _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) {
@@ -440,8 +477,8 @@ var Form = function (_a) {
         });
         setErrors(newErrors);
         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) {
@@ -454,7 +491,7 @@ var Form = function (_a) {
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
         });
         // Validate the changed field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
+        var field = parsedFields.find(function (f) { return f.name === fieldName; });
         if (!field)
             return;
         var error = validateField(field, newValue);
@@ -469,10 +506,12 @@ var Form = function (_a) {
                 return newErrors;
             }
         });
-    }, [finalFields, validateField]);
-    // Handle input field change (unchanged)
-    var handleInputChange = (0, react_1.useCallback)(function (fieldName, value) {
-        // Update form values
+    }, [parsedFields, validateField]);
+    // FIXED: Handle input change - pass event directly to Input component
+    var handleInputEventChange = (0, react_1.useCallback)(function (e) {
+        var fieldName = e.target.name;
+        var value = e.target.value;
+        // Update form values - PASS VALUE AS-IS (preserves spaces)
         setFormValues(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = value, _a)));
@@ -483,7 +522,7 @@ var Form = function (_a) {
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
         });
         // Validate the changed field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
+        var field = parsedFields.find(function (f) { return f.name === fieldName; });
         if (!field)
             return;
         var error = validateField(field, value);
@@ -498,15 +537,16 @@ var Form = function (_a) {
                 return newErrors;
             }
         });
-    }, [finalFields, validateField]);
-    // Handle field blur (unchanged)
-    var handleFieldBlur = (0, react_1.useCallback)(function (fieldName) {
+    }, [parsedFields, validateField]);
+    // FIXED: Handle blur event - pass event directly to Input component
+    var handleInputEventBlur = (0, react_1.useCallback)(function (e) {
+        var fieldName = e.target.name;
         setTouched(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
         });
         // Validate the field
-        var field = finalFields.find(function (f) { return f.name === fieldName; });
+        var field = parsedFields.find(function (f) { return f.name === fieldName; });
         if (!field)
             return;
         var value = formValues[fieldName];
@@ -522,8 +562,8 @@ var Form = function (_a) {
                 return newErrors;
             }
         });
-    }, [finalFields, validateField, formValues]);
-    // Handle form submission (unchanged)
+    }, [parsedFields, validateField, formValues]);
+    // 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;
         return __generator(this, function (_a) {
@@ -531,7 +571,7 @@ var Form = function (_a) {
                 case 0:
                     e.preventDefault();
                     allTouched = {};
-                    finalFields.forEach(function (field) {
+                    parsedFields.forEach(function (field) {
                         allTouched[field.name] = true;
                     });
                     setTouched(allTouched);
@@ -549,20 +589,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 +618,17 @@ var Form = function (_a) {
                 case 9: return [2 /*return*/];
             }
         });
-    }); }, [finalFields, validateForm, formValues, finalWhatsappContact, finalWhatsappHeader, finalWhatsappFooter, finalOnSubmit, errors]);
-    // Handle form reset (unchanged)
+    }); }, [parsedFields, validateForm, formValues, whatsappContact, whatsappHeader, whatsappFooter, onSubmit, errors]);
+    // 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) {
@@ -605,8 +645,8 @@ var Form = function (_a) {
         setFormValues(initialValues);
         setErrors({});
         setTouched({});
-    }, [finalFields, finalDefaultValues]);
-    // Get field status for Input component (unchanged)
+    }, [parsedFields, parsedDefaultValues]);
+    // Get field status for Input component
     var getFieldStatus = (0, react_1.useCallback)(function (fieldName) {
         var error = errors[fieldName];
         var isTouched = touched[fieldName];
@@ -617,10 +657,10 @@ var Form = function (_a) {
         }
         return undefined;
     }, [errors, touched, formValues]);
-    // Check if form is valid for submission (unchanged)
+    // 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) {
+        var hasEmptyRequiredFields = parsedFields.some(function (field) {
             if (!field.required)
                 return false;
             var value = formValues[field.name];
@@ -635,12 +675,12 @@ var Form = function (_a) {
         // 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)
+    }, [parsedFields, formValues, errors]);
+    // Submit button disabled state
+    var isSubmitDisabled = isSubmitting || isLoading || !isFormValid;
+    // Check if WhatsApp is configured
+    var hasWhatsApp = !!whatsappContact;
+    // Render field based on type - FIXED
     var renderField = (0, react_1.useCallback)(function (field) {
         var _a, _b, _c, _d, _e;
         var status = getFieldStatus(field.name);
@@ -655,7 +695,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 +722,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 +736,32 @@ 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, onBlur: handleInputEventBlur }, 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, onBlur: handleInputEventBlur }, 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, onBlur: handleInputEventBlur }, 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, 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 (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;