funuicss 3.8.7 → 3.8.9

package/ui/form/Form.js

@@ -0,0 +1,724 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Button_1 = __importDefault(require("../button/Button"));
+var Input_1 = __importDefault(require("../input/Input"));
+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) {
+        return defaultValue;
+    }
+    // If it's already the correct type, return as is
+    if (typeof input !== 'string') {
+        return input;
+    }
+    try {
+        // Try to parse as JSON
+        var 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
+            var 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)
+var FormCheckbox = function (_a) {
+    var label = _a.label, checked = _a.checked, onChange = _a.onChange, disabled = _a.disabled, required = _a.required, value = _a.value, id = _a.id;
+    return (react_1.default.createElement("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',
+        } },
+        react_1.default.createElement("input", { type: "checkbox", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: {
+                position: 'absolute',
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: 'none'
+            } }),
+        react_1.default.createElement("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 && (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+                stroke: 'white',
+                strokeWidth: '2',
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+            } },
+            react_1.default.createElement("path", { d: "M3 7L6 10L11 4" })))),
+        label && (react_1.default.createElement("span", { className: "funui_form-checkbox-label", style: {
+                fontSize: '0.875rem',
+                color: disabled ? 'var(--text-muted)' : 'var(--text)',
+                fontWeight: checked ? '500' : '400',
+            } },
+            label,
+            required && ' *'))));
+};
+// Custom Radio Component (unchanged)
+var FormRadio = function (_a) {
+    var label = _a.label, checked = _a.checked, onChange = _a.onChange, disabled = _a.disabled, required = _a.required, value = _a.value, id = _a.id;
+    return (react_1.default.createElement("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',
+        } },
+        react_1.default.createElement("input", { type: "radio", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: {
+                position: 'absolute',
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: 'none'
+            } }),
+        react_1.default.createElement("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 && (react_1.default.createElement("div", { style: {
+                width: '0.75rem',
+                height: '0.75rem',
+                backgroundColor: 'var(--primary)',
+                borderRadius: '50%',
+            } }))),
+        label && (react_1.default.createElement("span", { className: "funui_form-radio-label", style: {
+                fontSize: '0.875rem',
+                color: disabled ? 'var(--text-muted)' : 'var(--text)',
+                fontWeight: checked ? '500' : '400',
+            } },
+            label,
+            required && ' *'))));
+};
+// Function to format WhatsApp message (unchanged)
+var formatWhatsAppMessage = function (values, fields, header, footer) {
+    // Build message lines
+    var message = '';
+    // Add header if provided
+    if (header) {
+        message += "".concat(header, "\n\n");
+    }
+    // Add form data
+    var fieldLines = 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) {
+        var value = values[field.name];
+        var 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) {
+            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;
+    // 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;
+    // 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
+    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,
+        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;
+    // 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 () {
+        // Initialize form values from defaultValues and field values
+        var initialValues = {};
+        finalFields.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 {
+                // 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;
+    }), formValues = _15[0], setFormValues = _15[1];
+    var _16 = (0, react_1.useState)(false), isSubmitting = _16[0], setIsSubmitting = _16[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)); });
+        }
+    }, [finalDefaultValues]);
+    // Validate a single field (unchanged)
+    var validateField = (0, react_1.useCallback)(function (field, value) {
+        var _a, _b, _c, _d, _e;
+        // Required validation
+        if (field.required) {
+            if (value === undefined || value === null || value === '') {
+                return "".concat(field.label || field.name, " is required");
+            }
+            if (field.type === 'checkbox' && field.multiple && Array.isArray(value) && value.length === 0) {
+                return "".concat(field.label || field.name, " is required");
+            }
+            if (field.type === 'checkbox' && !field.multiple && value === false) {
+                return "".concat(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') {
+                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(value)) {
+                    return 'Please enter a valid email address';
+                }
+            }
+            // Number validation
+            if (field.type === 'number') {
+                var numValue = void 0;
+                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';
+                }
+                var min = (_a = field.inputProps) === null || _a === void 0 ? void 0 : _a.min;
+                var max = (_b = field.inputProps) === null || _b === void 0 ? void 0 : _b.max;
+                if (min !== undefined && numValue < parseFloat(min.toString())) {
+                    return "Minimum value is ".concat(min);
+                }
+                if (max !== undefined && numValue > parseFloat(max.toString())) {
+                    return "Maximum value is ".concat(max);
+                }
+            }
+            // Phone validation (basic) - only for strings
+            if (field.type === 'tel' && typeof value === 'string') {
+                var 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') {
+                var minLength = (_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength;
+                var maxLength = (_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength;
+                if (minLength && value.length < minLength) {
+                    return "Minimum ".concat(minLength, " characters required");
+                }
+                if (maxLength && value.length > maxLength) {
+                    return "Maximum ".concat(maxLength, " characters allowed");
+                }
+            }
+            // Pattern validation if provided - only for strings
+            if (((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) && typeof value === 'string') {
+                try {
+                    var 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 (unchanged)
+    var validateForm = (0, react_1.useCallback)(function () {
+        var newErrors = {};
+        var hasErrors = false;
+        finalFields.forEach(function (field) {
+            var value = formValues[field.name];
+            var error = validateField(field, value);
+            if (error) {
+                newErrors[field.name] = error;
+                hasErrors = true;
+            }
+        });
+        setErrors(newErrors);
+        return !hasErrors;
+    }, [finalFields, validateField, formValues]);
+    // Handle field change for checkboxes and radios (unchanged)
+    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);
+        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 input field change (unchanged)
+    var handleInputChange = (0, react_1.useCallback)(function (fieldName, 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);
+        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)));
+        });
+        // 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)
+    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) {
+            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];
+                        if (firstErrorField) {
+                            element = document.getElementById("form-field-".concat(firstErrorField));
+                            element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        }
+                        return [2 /*return*/];
+                    }
+                    // Get form data and submit
+                    setIsSubmitting(true);
+                    _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, '');
+                    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)];
+                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)];
+                case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    error_1 = _a.sent();
+                    console.error('Form submission error:', error_1);
+                    setErrors(function (prev) { return (__assign(__assign({}, prev), { _form: 'There was an error submitting the form. Please try again.' })); });
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsSubmitting(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [finalFields, validateForm, formValues, finalWhatsappContact, finalWhatsappHeader, finalWhatsappFooter, finalOnSubmit, errors]);
+    // Handle form reset (unchanged)
+    var handleReset = (0, react_1.useCallback)(function () {
+        // Reset to initial values
+        var initialValues = {};
+        finalFields.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 (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({});
+    }, [finalFields, finalDefaultValues]);
+    // Get field status for Input component (unchanged)
+    var getFieldStatus = (0, react_1.useCallback)(function (fieldName) {
+        var error = errors[fieldName];
+        var 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 (unchanged)
+    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)
+    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 value = formValues[field.name];
+        // Field wrapper classes
+        var wrapperClass = "col min-w-200 field ".concat(showError ? 'field-error' : '').trim();
+        // Helper text (error takes priority)
+        var helperText = showError ? error : field.helperText;
+        // 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);
+        // 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 ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length) {
+                    // Multiple checkboxes (checkbox group)
+                    var checkedValues_1 = Array.isArray(value) ? value : [];
+                    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) {
+                            var isChecked = checkedValues_1.includes(option.value);
+                            return (react_1.default.createElement(FormCheckbox, { key: "".concat(field.name, "_").concat(index), id: "".concat(inputId, "_").concat(index), label: option.label, checked: isChecked, onChange: function (checked) {
+                                    if (checked) {
+                                        // Add value to array
+                                        var newValues = __spreadArray(__spreadArray([], checkedValues_1, true), [option.value], false);
+                                        handleFieldChange(field.name, newValues);
+                                    }
+                                    else {
+                                        // Remove value from array
+                                        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 }));
+                        }))));
+                }
+                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 })));
+                }
+            case 'radio':
+                if (!((_c = field.options) === null || _c === void 0 ? void 0 : _c.length))
+                    return null;
+                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 })); }))));
+            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))));
+            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))));
+            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))));
+        }
+    }, [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 } }))))),
+        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 })))));
+};
+exports.default = Form;