funuicss 3.8.6 → 3.8.8

package/ui/form/Form.js

@@ -0,0 +1,658 @@
+"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 Div_1 = __importDefault(require("../div/Div"));
+var Text_1 = __importDefault(require("../text/Text"));
+var pi_1 = require("react-icons/pi");
+// Custom Checkbox Component
+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',
+        } },
+        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: { display: '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(--border)',
+                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("div", { style: {
+                width: '0.75rem',
+                height: '0.75rem',
+                backgroundColor: 'white',
+                borderRadius: '0.125rem',
+            } }))),
+        label && (react_1.default.createElement("span", { className: "funui_form-checkbox-label", style: { fontSize: '0.875rem' } },
+            label,
+            required && ' *'))));
+};
+// Custom Radio Component
+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',
+        } },
+        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: { display: '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(--border)',
+                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' } },
+            label,
+            required && ' *'))));
+};
+// Password Toggle
+var PasswordToggle = function (_a) {
+    var isVisible = _a.isVisible, onToggle = _a.onToggle, disabled = _a.disabled;
+    return (react_1.default.createElement("button", { type: "button", onClick: onToggle, disabled: disabled, className: "funui_form-password-toggle", style: {
+            background: 'none',
+            border: 'none',
+            padding: '0.5rem',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, "aria-label": isVisible ? 'Hide password' : 'Show password' }, isVisible ? react_1.default.createElement(pi_1.PiEyeSlash, { size: 18 }) : react_1.default.createElement(pi_1.PiEye, { size: 18 })));
+};
+// WhatsApp Button Component
+var WhatsAppButton = function (_a) {
+    var onClick = _a.onClick, disabled = _a.disabled, _b = _a.text, text = _b === void 0 ? 'Send via WhatsApp' : _b;
+    return (react_1.default.createElement(Button_1.default, { type: "button", text: text, bg: "#25D366", color: "white", raised: true, startIcon: react_1.default.createElement(pi_1.PiWhatsappLogo, null), disabled: disabled, onClick: onClick, funcss: "funui_form-whatsapp-button" }));
+};
+// Function to format WhatsApp message
+var formatWhatsAppMessage = function (values, fields, headerMessage, footerMessage) {
+    var fieldLines = fields
+        .filter(function (field) { return values[field.name] !== undefined && values[field.name] !== null && values[field.name] !== ''; })
+        .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');
+    var message = '';
+    if (headerMessage) {
+        message += "".concat(headerMessage, "\n\n");
+    }
+    message += fieldLines;
+    if (footerMessage) {
+        message += "\n\n".concat(footerMessage);
+    }
+    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.resetText, resetText = _d === void 0 ? 'Reset' : _d, _e = _a.showReset, showReset = _e === void 0 ? true : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.layout, layout = _h === void 0 ? 'vertical' : _h, _j = _a.gap, gap = _j === void 0 ? '1.5rem' : _j, whatsappIntegration = _a.whatsappIntegration;
+    // State management
+    var _k = (0, react_1.useState)({}), formValues = _k[0], setFormValues = _k[1];
+    var _l = (0, react_1.useState)({}), errors = _l[0], setErrors = _l[1];
+    var _m = (0, react_1.useState)({}), touched = _m[0], setTouched = _m[1];
+    var _o = (0, react_1.useState)({}), showPassword = _o[0], setShowPassword = _o[1];
+    var _p = (0, react_1.useState)(false), isSubmitting = _p[0], setIsSubmitting = _p[1];
+    var _q = (0, react_1.useState)(''), whatsappPhone = _q[0], setWhatsappPhone = _q[1];
+    // Initialize form values
+    (0, react_1.useEffect)(function () {
+        var initialValues = {};
+        fields.forEach(function (field) {
+            var _a, _b;
+            // Priority: field.value > defaultValues > default based on type
+            if (field.value !== undefined) {
+                initialValues[field.name] = field.value;
+            }
+            else if (defaultValues[field.name] !== undefined) {
+                initialValues[field.name] = defaultValues[field.name];
+            }
+            else if (field.type === 'checkbox') {
+                initialValues[field.name] = field.multiple ? [] : false;
+            }
+            else if (field.type === 'radio' && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.length)) {
+                initialValues[field.name] = '';
+            }
+            else if (field.type === 'select' && ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length)) {
+                initialValues[field.name] = '';
+            }
+            else {
+                initialValues[field.name] = '';
+            }
+            // Initialize password visibility
+            if (field.type === 'password') {
+                setShowPassword(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[field.name] = false, _a)));
+                });
+            }
+        });
+        setFormValues(initialValues);
+    }, [fields, defaultValues]);
+    // Initialize WhatsApp phone number
+    (0, react_1.useEffect)(function () {
+        if (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.phoneNumber) {
+            // Clean the phone number (remove +, spaces, etc.)
+            var cleanPhone = whatsappIntegration.phoneNumber.replace(/[\s+\-()]/g, '');
+            setWhatsappPhone(cleanPhone);
+        }
+    }, [whatsappIntegration]);
+    // Validate a single field
+    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
+        if (value && value !== '') {
+            // Email validation
+            if (field.type === 'email') {
+                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(value)) {
+                    return 'Please enter a valid email address';
+                }
+            }
+            // Number validation
+            if (field.type === 'number') {
+                var numValue = parseFloat(value);
+                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)
+            if (field.type === 'tel') {
+                var phoneRegex = /^[\+]?[1-9][\d]{0,17}$/;
+                if (!phoneRegex.test(value.replace(/[\s+\-()]/g, ''))) {
+                    return 'Please enter a valid phone number';
+                }
+            }
+            // Length validation
+            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
+            if ((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) {
+                var regex = new RegExp(field.inputProps.pattern);
+                if (!regex.test(value)) {
+                    return 'Invalid format';
+                }
+            }
+        }
+        return null;
+    }, []);
+    // Handle field change
+    var handleFieldChange = (0, react_1.useCallback)(function (fieldName, value) {
+        var field = fields.find(function (f) { return f.name === fieldName; });
+        if (!field)
+            return;
+        setFormValues(function (prev) {
+            var _a;
+            var newValues = __assign(__assign({}, prev), (_a = {}, _a[fieldName] = value, _a));
+            // Validate on change if field has been touched
+            if (touched[fieldName]) {
+                var error_1 = validateField(field, value);
+                setErrors(function (prevErrors) {
+                    var _a;
+                    if (error_1) {
+                        return __assign(__assign({}, prevErrors), (_a = {}, _a[fieldName] = error_1, _a));
+                    }
+                    else {
+                        var newErrors = __assign({}, prevErrors);
+                        delete newErrors[fieldName];
+                        return newErrors;
+                    }
+                });
+            }
+            return newValues;
+        });
+    }, [fields, touched, validateField]);
+    // Handle field blur
+    var handleFieldBlur = (0, react_1.useCallback)(function (fieldName) {
+        var field = fields.find(function (f) { return f.name === fieldName; });
+        if (!field)
+            return;
+        setTouched(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
+        });
+        // Validate on blur
+        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;
+            }
+        });
+    }, [fields, formValues, validateField]);
+    // Toggle password visibility
+    var togglePasswordVisibility = (0, react_1.useCallback)(function (fieldName) {
+        setShowPassword(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = !prev[fieldName], _a)));
+        });
+    }, []);
+    // Handle WhatsApp submission
+    var handleWhatsAppSubmit = (0, react_1.useCallback)(function () {
+        if (!(whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) || !whatsappPhone) {
+            console.error('WhatsApp integration not properly configured');
+            return;
+        }
+        // Validate form before sending
+        var newErrors = {};
+        var hasErrors = false;
+        fields.forEach(function (field) {
+            var value = formValues[field.name];
+            var error = validateField(field, value);
+            if (error) {
+                newErrors[field.name] = error;
+                hasErrors = true;
+            }
+        });
+        setErrors(newErrors);
+        if (hasErrors) {
+            // Mark all fields as touched to show errors
+            var allTouched_1 = {};
+            fields.forEach(function (field) {
+                allTouched_1[field.name] = true;
+            });
+            setTouched(allTouched_1);
+            return;
+        }
+        // Format the message
+        var message = formatWhatsAppMessage(formValues, fields, whatsappIntegration.headerMessage, whatsappIntegration.footerMessage);
+        // Create WhatsApp URL
+        var whatsappUrl = "https://wa.me/".concat(whatsappPhone, "?text=").concat(message);
+        // Open WhatsApp in new tab
+        window.open(whatsappUrl, '_blank');
+    }, [whatsappIntegration, whatsappPhone, fields, formValues, validateField]);
+    // Handle form submission
+    var handleSubmit = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var allTouched, newErrors, hasErrors, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    allTouched = {};
+                    fields.forEach(function (field) {
+                        allTouched[field.name] = true;
+                    });
+                    setTouched(allTouched);
+                    newErrors = {};
+                    hasErrors = false;
+                    fields.forEach(function (field) {
+                        var value = formValues[field.name];
+                        var error = validateField(field, value);
+                        if (error) {
+                            newErrors[field.name] = error;
+                            hasErrors = true;
+                        }
+                    });
+                    setErrors(newErrors);
+                    if (hasErrors)
+                        return [2 /*return*/];
+                    // Submit
+                    setIsSubmitting(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, onSubmit(formValues)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_2 = _a.sent();
+                    console.error('Form submission error:', error_2);
+                    setErrors(function (prev) { return (__assign(__assign({}, prev), { _form: 'There was an error submitting the form. Please try again.' })); });
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsSubmitting(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [fields, formValues, validateField, onSubmit]);
+    // Handle form reset
+    var handleReset = (0, react_1.useCallback)(function () {
+        var resetValues = {};
+        fields.forEach(function (field) {
+            var _a, _b;
+            if (field.type === 'checkbox') {
+                resetValues[field.name] = field.multiple ? [] : false;
+            }
+            else if (field.type === 'radio' && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.length)) {
+                resetValues[field.name] = '';
+            }
+            else if (field.type === 'select' && ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length)) {
+                resetValues[field.name] = '';
+            }
+            else {
+                resetValues[field.name] = '';
+            }
+        });
+        setFormValues(resetValues);
+        setErrors({});
+        setTouched({});
+        setShowPassword({});
+    }, [fields]);
+    // Get field status for Input component
+    var getFieldStatus = (0, react_1.useCallback)(function (fieldName) {
+        var error = errors[fieldName];
+        var isTouched = touched[fieldName];
+        var value = formValues[fieldName];
+        if (error)
+            return 'error';
+        if (isTouched && !error && value && value !== '' && !(Array.isArray(value) && value.length === 0)) {
+            return 'success';
+        }
+        return 'default';
+    }, [errors, touched, formValues]);
+    // Get column class based on layout and column setting
+    var getColumnClass = (0, react_1.useCallback)(function (field) {
+        if (layout === 'grid') {
+            switch (field.column) {
+                case 'half': return 'funui_form-col-half';
+                case 'third': return 'funui_form-col-third';
+                case 'quarter': return 'funui_form-col-quarter';
+                case 'full':
+                default: return 'funui_form-col-full';
+            }
+        }
+        return '';
+    }, [layout]);
+    // Render field based on type
+    var renderField = (0, react_1.useCallback)(function (field) {
+        var _a, _b, _c, _d, _e, _f;
+        var value = (_a = formValues[field.name]) !== null && _a !== void 0 ? _a : '';
+        var status = getFieldStatus(field.name);
+        var error = errors[field.name];
+        var isTouched = touched[field.name];
+        var showError = error && isTouched;
+        // Field wrapper classes
+        var wrapperClass = "funui_form-field ".concat(getColumnClass(field), " ").concat(showError ? 'funui_form-field-error' : '').trim();
+        // Helper text (error takes priority)
+        var helperText = showError ? error : field.helperText;
+        var helperIcon = showError ? react_1.default.createElement(pi_1.PiWarningCircle, null) : status === 'success' ? react_1.default.createElement(pi_1.PiCheckCircle, null) : undefined;
+        // Base props for Input component
+        var baseProps = __assign({ id: ((_b = field.inputProps) === null || _b === void 0 ? void 0 : _b.id) || field.name, name: field.name, label: field.label, placeholder: field.placeholder, helperText: helperText, status: status, disabled: field.disabled || isLoading, fullWidth: true }, field.inputProps);
+        // Render based on field type
+        switch (field.type) {
+            case 'checkbox':
+                if ((_c = field.options) === null || _c === void 0 ? void 0 : _c.length) {
+                    // Multiple checkboxes (checkbox group)
+                    return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
+                        field.label && (react_1.default.createElement("div", { className: "funui_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 = field.multiple
+                                ? Array.isArray(value) && value.includes(option.value)
+                                : value === option.value;
+                            return (react_1.default.createElement(FormCheckbox, { key: "".concat(field.name, "_").concat(index), id: "".concat(field.name, "_").concat(index), label: option.label, checked: !!isChecked, onChange: function (checked) {
+                                    if (field.multiple) {
+                                        var currentValues = Array.isArray(value) ? value : [];
+                                        if (checked) {
+                                            handleFieldChange(field.name, __spreadArray(__spreadArray([], currentValues, true), [option.value], false));
+                                        }
+                                        else {
+                                            handleFieldChange(field.name, currentValues.filter(function (v) { return v !== option.value; }));
+                                        }
+                                    }
+                                    else {
+                                        handleFieldChange(field.name, checked ? option.value : false);
+                                    }
+                                }, disabled: field.disabled || option.disabled || isLoading, required: field.required && index === 0, value: option.value }));
+                        }))));
+                }
+                else {
+                    // Single checkbox (boolean)
+                    return (react_1.default.createElement(Div_1.default, { 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 || isLoading, required: field.required, id: field.name })));
+                }
+            case 'radio':
+                if (!((_d = field.options) === null || _d === void 0 ? void 0 : _d.length))
+                    return null;
+                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
+                    field.label && (react_1.default.createElement("div", { className: "funui_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(field.name, "_").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_1.default, { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, { multiline: true, rows: ((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.rows) || 4, value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
+            case 'select':
+                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, { select: true, options: ((_f = field.options) === null || _f === void 0 ? void 0 : _f.map(function (opt) { return ({ text: opt.label, value: opt.value }); })) || [], value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
+            case 'password':
+                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, { type: showPassword[field.name] ? 'text' : 'password', value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); }, endIcon: react_1.default.createElement(PasswordToggle, { isVisible: !!showPassword[field.name], onToggle: function () { return togglePasswordVisibility(field.name); }, disabled: field.disabled || isLoading }) })));
+            default:
+                // text, email, number, tel, date, file
+                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, { type: field.type, value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
+        }
+    }, [formValues, errors, touched, showPassword, isLoading, getFieldStatus, getColumnClass, handleFieldChange, handleFieldBlur, togglePasswordVisibility]);
+    // Check if form is valid
+    var isFormValid = (0, react_1.useMemo)(function () {
+        return Object.keys(errors).length === 0;
+    }, [errors]);
+    // Check if form has empty required fields
+    var hasEmptyRequiredFields = (0, react_1.useMemo)(function () {
+        return fields.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' && !field.multiple) {
+                return value === false;
+            }
+            return value === undefined || value === null || value === '';
+        });
+    }, [fields, formValues]);
+    // Submit button disabled state
+    var isSubmitDisabled = isSubmitting || isLoading || (!isFormValid && hasEmptyRequiredFields);
+    // WhatsApp button disabled state
+    var isWhatsAppDisabled = isSubmitDisabled || !whatsappPhone;
+    // Layout container
+    var LayoutContainer = (0, react_1.useMemo)(function () {
+        if (layout === 'grid') {
+            return function (_a) {
+                var children = _a.children;
+                return (react_1.default.createElement("div", { className: "funui_form-grid", style: { display: 'grid', gap: gap, gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' } }, children));
+            };
+        }
+        else if (layout === 'horizontal') {
+            return function (_a) {
+                var children = _a.children;
+                return (react_1.default.createElement(Flex_1.default, { gap: gap, wrap: "wrap" }, children));
+            };
+        }
+        else {
+            // vertical layout (default)
+            return function (_a) {
+                var children = _a.children;
+                return (react_1.default.createElement(Flex_1.default, { direction: "column", gap: gap }, children));
+            };
+        }
+    }, [layout, gap]);
+    return (react_1.default.createElement("form", { className: "funui_form ".concat(className), onSubmit: handleSubmit, onReset: handleReset, style: { width: '100%' } },
+        errors._form && (react_1.default.createElement(Div_1.default, { className: "funui_form-error", style: { marginBottom: '1rem' } },
+            react_1.default.createElement(Flex_1.default, { gap: "0.5rem", alignItems: "center" },
+                react_1.default.createElement(pi_1.PiWarningCircle, { className: "text-error", size: 20 }),
+                react_1.default.createElement(Text_1.default, { text: errors._form, size: "sm", color: "error", bold: true })))),
+        (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) && !whatsappPhone && (react_1.default.createElement(Div_1.default, { className: "funui_form-warning", style: { marginBottom: '1rem', padding: '0.75rem', backgroundColor: 'var(--warning-light)', borderRadius: '0.375rem' } },
+            react_1.default.createElement(Flex_1.default, { gap: "0.5rem", alignItems: "center" },
+                react_1.default.createElement(pi_1.PiWarningCircle, { className: "text-warning", size: 20 }),
+                react_1.default.createElement(Text_1.default, { text: "WhatsApp phone number is not configured. Please provide a valid phone number.", size: "sm", color: "warning" })))),
+        react_1.default.createElement(LayoutContainer, null, fields.map(renderField)),
+        react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem' } },
+            react_1.default.createElement(Flex_1.default, { gap: "1rem", alignItems: "center", justify: "space-between", wrap: "wrap" },
+                showReset && (react_1.default.createElement(Button_1.default, { type: "reset", text: resetText, bg: "light", color: "text", disabled: isSubmitting || isLoading, funcss: "funui_form-reset-btn" })),
+                react_1.default.createElement(Button_1.default, { type: "submit", text: submitText, bg: "primary", color: "white", raised: true, startIcon: react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), disabled: isSubmitDisabled, isLoading: isSubmitting || isLoading, funcss: "funui_form-submit-btn" })),
+            (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) && whatsappPhone && (react_1.default.createElement(WhatsAppButton, { onClick: handleWhatsAppSubmit, disabled: isWhatsAppDisabled, text: "Send via WhatsApp" })))));
+};
+exports.default = Form;