@visiion/forms-library 1.4.1 → 1.4.2

package/dist/index.js

@@ -102,6 +102,16 @@ function __generator(thisArg, body) {
     }
 }
 
+function __spreadArray(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));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -10200,7 +10210,12 @@ var SelectInput = function (_a) {
 var RadioInput = function (_a) {
     var _b;
     var field = _a.field, value = _a.value, onChange = _a.onChange, error = _a.error;
-    return (jsxRuntime.jsxs(InputWrapper, __assign({}, field, { error: error, children: [jsxRuntime.jsx("div", { className: "space-y-2", children: (_b = field.options) === null || _b === void 0 ? void 0 : _b.map(function (option) { return (jsxRuntime.jsx(RadioOption, { id: "".concat(field.id, "-").concat(option.value), name: field.name, value: option.value, checked: value === option.value, onChange: onChange, label: option.label }, option.value)); }) }), error && jsxRuntime.jsx("span", { className: "text-red-500 text-sm", children: error })] })));
+    var handleSearch = function (e) {
+        var _a;
+        onChange(e);
+        (_a = field === null || field === void 0 ? void 0 : field.onSearch) === null || _a === void 0 ? void 0 : _a.call(field, e.target.value);
+    };
+    return (jsxRuntime.jsxs(InputWrapper, __assign({}, field, { error: error, children: [jsxRuntime.jsx("div", { className: "space-y-2", children: (_b = field.options) === null || _b === void 0 ? void 0 : _b.map(function (option) { return (jsxRuntime.jsx(RadioOption, { id: "".concat(field.id, "-").concat(option.value), name: field.name, value: option.value, checked: value === option.value, onChange: handleSearch, label: option.label }, option.value)); }) }), error && jsxRuntime.jsx("span", { className: "text-red-500 text-sm", children: error })] })));
 };
 
 var TextareaInput = function (_a) {
@@ -10227,7 +10242,7 @@ var TextareaInput = function (_a) {
             }
         }
     };
-    return (jsxRuntime.jsx(InputWrapper, { id: finalId || "", label: finalLabel || "", tooltip: finalTooltip, error: error, children: jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx(flowbiteReact.Textarea, { id: finalId, name: finalName, placeholder: finalPlaceholder, value: value, onChange: handleChange, disabled: finalDisabled, required: finalRequired, rows: rows, className: "".concat(className || "", " resize-none bg-white"), color: error ? "failure" : undefined }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx("span", { className: " text-sm text-red-500 font-bold", children: error }), jsxRuntime.jsxs("div", { className: "  justify-end text-gray-400 text-sm", children: [charCount, "/", finalMaxLength] })] })] }) }));
+    return (jsxRuntime.jsx(InputWrapper, { id: finalId || "", label: finalLabel || "", tooltip: finalTooltip, error: error, children: jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx(flowbiteReact.Textarea, { id: finalId, name: finalName, placeholder: finalPlaceholder, value: value || "", onChange: handleChange, disabled: finalDisabled, required: finalRequired, rows: rows, className: "".concat(className || "", " resize-none bg-white"), color: error ? "failure" : undefined }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx("span", { className: " text-sm text-red-500 font-bold", children: error }), jsxRuntime.jsxs("div", { className: "  justify-end text-gray-400 text-sm", children: [charCount, "/", finalMaxLength] })] })] }) }));
 };
 
 var CheckboxInput = function (_a) {
@@ -19672,27 +19687,40 @@ var useMiDt = create(function (set) { return ({
 var Common = /** @class */ (function () {
     function Common() {
     }
+    // Función para limpiar acentos de un texto
+    Common.removeAccents = function (text) {
+        return text
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "")
+            .toLowerCase();
+    };
     // Función para obtener región por nombre
     Common.getRegionByName = function (regionName, regiones) {
+        var _this = this;
+        var _a;
         if (!regiones || !Array.isArray(regiones))
             return null;
+        var cleanRegionName = this.removeAccents(regionName);
         var region = regiones.find(function (r) {
-            var _a, _b;
-            return ((_a = r.nombre) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(regionName.toLowerCase())) ||
-                regionName.toLowerCase().includes((_b = r.nombre) === null || _b === void 0 ? void 0 : _b.toLowerCase());
+            var cleanRegionNombre = _this.removeAccents(r.Nombre || "");
+            return (cleanRegionNombre.includes(cleanRegionName) ||
+                cleanRegionName.includes(cleanRegionNombre));
         });
-        return region ? region.id : null;
+        return (_a = region === null || region === void 0 ? void 0 : region.Codigo) !== null && _a !== void 0 ? _a : null;
     };
     // Función para obtener comuna por nombre
     Common.getComunaByName = function (comunaName, comunas) {
+        var _this = this;
+        var _a;
         if (!comunas || !Array.isArray(comunas))
             return null;
+        var cleanComunaName = this.removeAccents(comunaName);
         var comuna = comunas.find(function (c) {
-            var _a, _b;
-            return ((_a = c.nombre) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(comunaName.toLowerCase())) ||
-                comunaName.toLowerCase().includes((_b = c.nombre) === null || _b === void 0 ? void 0 : _b.toLowerCase());
+            var cleanComunaNombre = _this.removeAccents(c.Nombre || "");
+            return (cleanComunaNombre.includes(cleanComunaName) ||
+                cleanComunaName.includes(cleanComunaNombre));
         });
-        return comuna ? comuna.id : null;
+        return (_a = comuna === null || comuna === void 0 ? void 0 : comuna.Codigo) !== null && _a !== void 0 ? _a : null;
     };
     // Función para obtener región por ID de comuna
     Common.getRegionIdByComunaId = function (comunaId, comunas) {
@@ -19904,7 +19932,7 @@ var GoogleMaps = function (_a) {
 };
 
 var SubtitleInput = function (_a) {
-    var title = _a.title, description = _a.description, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.textClassName, textClassName = _c === void 0 ? "pl-5 text-[24px] text-text text-xl font-bold font-roboto" : _c;
+    var title = _a.title, description = _a.description, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.textClassName, textClassName = _c === void 0 ? "pl-5 pb-2 text-[24px] text-text text-xl font-bold font-roboto" : _c;
     return (jsxRuntime.jsxs("div", { className: "col-span-12 ".concat(className), children: [title && jsxRuntime.jsx("h3", { className: textClassName, children: title }), description && jsxRuntime.jsx("p", { className: "text-gray-600 mb-4", children: description }), jsxRuntime.jsx("hr", { className: "border-gray-300 mb-4" })] }));
 };
 
@@ -20007,8 +20035,148 @@ var Typography = function (_a) {
     return (jsxRuntime.jsx("div", { className: (_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : "text-sm text font-medium", children: label }));
 };
 
+var Checklist = function (_a) {
+    var field = _a.field, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, error = _a.error, props = _a.props;
+    var _c = React.useState(value), selectedOptions = _c[0], setSelectedOptions = _c[1];
+    var _d = React.useState(props.valueOtraMedida), otraMedida = _d[0], setOtraMedida = _d[1];
+    var options = field.options || [];
+    React.useEffect(function () {
+        setSelectedOptions(value);
+    }, [value]);
+    var handleOptionChange = function (optionValue, checked) {
+        var newSelectedOptions;
+        if (checked) {
+            // Validaciones específicas para separación de espacios vs total
+            if (optionValue === "separacion-espacios" &&
+                selectedOptions.includes("separacion-total")) {
+                // Si selecciona separación de espacios, remover separación total
+                newSelectedOptions = selectedOptions.filter(function (opt) { return opt !== "separacion-total"; });
+            }
+            else if (optionValue === "separacion-total" &&
+                selectedOptions.includes("separacion-espacios")) {
+                // Si selecciona separación total, remover separación de espacios
+                newSelectedOptions = selectedOptions.filter(function (opt) { return opt !== "separacion-espacios"; });
+            }
+            else {
+                newSelectedOptions = __spreadArray(__spreadArray([], selectedOptions, true), [optionValue], false);
+            }
+        }
+        else {
+            newSelectedOptions = selectedOptions.filter(function (opt) { return opt !== optionValue; });
+        }
+        setSelectedOptions(newSelectedOptions);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedOptions);
+    };
+    var handleOtraMedidaChange = function (text) {
+        var _a;
+        setOtraMedida(text);
+        // Actualizar el valor con la otra medida
+        var updatedOptions = selectedOptions.filter(function (opt) { return opt !== "otra-medida"; });
+        if (text.trim()) {
+            updatedOptions.push("otra-medida");
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedOptions);
+        (_a = props.onOtraMedidaChange) === null || _a === void 0 ? void 0 : _a.call(props, text);
+    };
+    var isOtraMedidaRequired = selectedOptions.includes("otra-medida");
+    return (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx("div", { className: "space-y-2", children: options.map(function (option) { return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), onChange: function (e) {
+                                return handleOptionChange(option.value, e.target.checked);
+                            }, className: "w-4 h-4 text-orange-600 border-gray-800 rounded focus:ring-orange-500 bg-white border-2" }), jsxRuntime.jsx("label", { className: "font-normal text-text font-roboto font-normal font-weight-400 text-sm leading-4 text-gray-600", children: option.label })] }, option.value)); }) }), isOtraMedidaRequired && (jsxRuntime.jsx("div", { className: "mt-4", children: jsxRuntime.jsx("input", { type: "text", value: otraMedida, onChange: function (e) { return handleOtraMedidaChange(e.target.value); }, placeholder: "-", maxLength: 100, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" }) })), error && jsxRuntime.jsx("div", { className: "text-red-600 text-sm mt-2", children: error })] }));
+};
+
+var Upload = function (_a) {
+    _a.field; var value = _a.value, onChange = _a.onChange, error = _a.error;
+    var _b = React.useState({
+        file: value || null,
+        error: null,
+        isDragOver: false,
+    }), state = _b[0], setState = _b[1];
+    var fileInputRef = React.useRef(null);
+    var dropZoneRef = React.useRef(null);
+    var validateFile = function (file) {
+        // Validar formato PDF
+        if (file.type !== "application/pdf") {
+            return "Formato no es PDF";
+        }
+        // Validar tamaño máximo (5MB = 5 * 1024 * 1024 bytes)
+        var maxSize = 5 * 1024 * 1024;
+        if (file.size > maxSize) {
+            return "Archivo supera los 5MB";
+        }
+        return null;
+    };
+    var handleFileSelect = React.useCallback(function (file) {
+        var validationError = validateFile(file);
+        if (validationError) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { file: null, error: validationError })); });
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            setState(function (prev) { return (__assign(__assign({}, prev), { file: file, error: null })); });
+            onChange === null || onChange === void 0 ? void 0 : onChange(file);
+        }
+    }, [onChange]);
+    var handleFileInputChange = function (event) {
+        var _a;
+        var file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            handleFileSelect(file);
+        }
+    };
+    var handleDrop = React.useCallback(function (event) {
+        event.preventDefault();
+        setState(function (prev) { return (__assign(__assign({}, prev), { isDragOver: false })); });
+        var file = event.dataTransfer.files[0];
+        if (file) {
+            handleFileSelect(file);
+        }
+    }, [handleFileSelect]);
+    var handleDragOver = React.useCallback(function (event) {
+        event.preventDefault();
+        setState(function (prev) { return (__assign(__assign({}, prev), { isDragOver: true })); });
+    }, []);
+    var handleDragLeave = React.useCallback(function (event) {
+        event.preventDefault();
+        setState(function (prev) { return (__assign(__assign({}, prev), { isDragOver: false })); });
+    }, []);
+    var handleRemoveFile = function () {
+        setState(function (prev) { return (__assign(__assign({}, prev), { file: null, error: null })); });
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    var handleUploadClick = function () {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var formatFileSize = function (bytes) {
+        if (bytes === 0)
+            return "0 Bytes";
+        var k = 1024;
+        var sizes = ["Bytes", "KB", "MB", "GB"];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    };
+    var renderUploadZone = function () {
+        var hasError = state.error || error;
+        var isErrorState = hasError && !state.file;
+        return (jsxRuntime.jsxs("div", { ref: dropZoneRef, className: "\n          relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors\n          ".concat(isErrorState
+                ? "border-red-500 bg-red-50"
+                : state.isDragOver
+                    ? "border-blue-500 bg-blue-50"
+                    : "border-gray-300 hover:border-gray-400", "\n        "), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: handleUploadClick, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".pdf", onChange: handleFileInputChange, className: "hidden" }), jsxRuntime.jsx("div", { className: "\n          w-20 h-12 mx-auto mb-4 rounded-lg flex items-center justify-center\n          ".concat(isErrorState ? "bg-red-500" : "bg-blue", "\n        "), children: jsxRuntime.jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M18.5 15.5005V18.5005H6.5V15.5005H4.5V18.5005C4.5 19.6005 5.4 20.5005 6.5 20.5005H18.5C19.6 20.5005 20.5 19.6005 20.5 18.5005V15.5005H18.5ZM7.5 9.50049L8.91 10.9105L11.5 8.33049V16.5005H13.5V8.33049L16.09 10.9105L17.5 9.50049L12.5 4.50049L7.5 9.50049Z", fill: "white" }) }) }), jsxRuntime.jsx("h3", { className: "\n          text-lg font-semibold mb-2\n          ".concat(isErrorState ? "text-red-600" : "text-gray-700", "\n        "), children: isErrorState ? "Error" : "Sube tu archivo" }), jsxRuntime.jsx("p", { className: "\n          text-sm\n          ".concat(isErrorState ? "text-red-500" : "text-gray-500", "\n        "), children: isErrorState ? state.error : "Formato PDF y máximo 5MB" })] }));
+    };
+    var renderFilePreview = function () {
+        if (!state.file)
+            return null;
+        return (jsxRuntime.jsx("div", { className: "bg-white border border-gray-200 rounded-lg p-4 shadow-sm", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center", children: jsxRuntime.jsx("svg", { className: "w-6 h-6 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: state.file.name }), jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: formatFileSize(state.file.size) })] })] }), jsxRuntime.jsxs("button", { onClick: handleRemoveFile, className: "px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors flex items-center space-x-1", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }), jsxRuntime.jsx("span", { children: "Eliminar" })] })] }) }));
+    };
+    return (jsxRuntime.jsxs("div", { className: "space-y-4", children: [state.file ? renderFilePreview() : renderUploadZone(), error && !state.error && jsxRuntime.jsx("p", { className: "text-sm text-red-600", children: error })] }));
+};
+
 var DynamicInput = function (_a) {
-    var field = _a.field, value = _a.value, onChange = _a.onChange, error = _a.error;
+    var field = _a.field, value = _a.value, onChange = _a.onChange, error = _a.error, formData = _a.formData;
     switch (field.type) {
         case "status":
             return (jsxRuntime.jsx(StatusScreen, __assign({}, field, { title: field.props.title, message: field.props.message, type: field.props.type, leftButton: field.props.leftButton, rightButton: field.props.rightButton })));
@@ -20028,6 +20196,39 @@ var DynamicInput = function (_a) {
             return jsxRuntime.jsx(Typography, __assign({}, field));
         case "checkbox":
             return (jsxRuntime.jsx(CheckboxInput, { field: field, value: value, onChange: onChange, error: error }));
+        case "checklist":
+            return (jsxRuntime.jsx(Checklist, { field: field, value: value, onChange: function (newValue) {
+                    // Convertir el array de strings a un evento de cambio
+                    var event = {
+                        target: {
+                            name: field.name,
+                            value: newValue,
+                        },
+                    };
+                    onChange(event);
+                }, error: error, props: {
+                    valueOtraMedida: formData["otraMedida"] || "",
+                    onOtraMedidaChange: function (text) {
+                        var event = {
+                            target: {
+                                name: "otraMedida",
+                                value: text,
+                            },
+                        };
+                        onChange(event);
+                    },
+                } }));
+        case "upload":
+            return (jsxRuntime.jsx(Upload, { field: field, value: value, onChange: function (file) {
+                    // Convertir el archivo a un evento de cambio
+                    var event = {
+                        target: {
+                            name: field.name,
+                            value: file,
+                        },
+                    };
+                    onChange(event);
+                }, error: error }));
         case "rut":
             return (jsxRuntime.jsx(RutInput, { field: field, value: value, onChange: onChange, error: error, onSearch: field.onSearch, disabled: field.disabled, placeholder: field.placeholder, minLength: field.minLength, maxLength: field.maxLength }));
         case "address":
@@ -21428,6 +21629,23 @@ for (const method of ['validate', 'validateSync']) Schema.prototype[`${method}At
 for (const alias of ['equals', 'is']) Schema.prototype[alias] = Schema.prototype.oneOf;
 for (const alias of ['not', 'nope']) Schema.prototype[alias] = Schema.prototype.notOneOf;
 
+const returnsTrue = () => true;
+function create$8(spec) {
+  return new MixedSchema(spec);
+}
+class MixedSchema extends Schema {
+  constructor(spec) {
+    super(typeof spec === 'function' ? {
+      type: 'mixed',
+      check: spec
+    } : Object.assign({
+      type: 'mixed',
+      check: returnsTrue
+    }, spec));
+  }
+}
+create$8.prototype = MixedSchema.prototype;
+
 /**
  * This file is a modified version of the file from the following repository:
  * Date.parse with progressive enhancement for ISO 8601 <https://github.com/csnover/js-iso8601>
@@ -22172,6 +22390,189 @@ class ObjectSchema extends Schema {
 }
 create$3.prototype = ObjectSchema.prototype;
 
+function create$2(type) {
+  return new ArraySchema(type);
+}
+class ArraySchema extends Schema {
+  constructor(type) {
+    super({
+      type: 'array',
+      spec: {
+        types: type
+      },
+      check(v) {
+        return Array.isArray(v);
+      }
+    });
+
+    // `undefined` specifically means uninitialized, as opposed to "no subtype"
+    this.innerType = void 0;
+    this.innerType = type;
+  }
+  _cast(_value, _opts) {
+    const value = super._cast(_value, _opts);
+
+    // should ignore nulls here
+    if (!this._typeCheck(value) || !this.innerType) {
+      return value;
+    }
+    let isChanged = false;
+    const castArray = value.map((v, idx) => {
+      const castElement = this.innerType.cast(v, Object.assign({}, _opts, {
+        path: `${_opts.path || ''}[${idx}]`
+      }));
+      if (castElement !== v) {
+        isChanged = true;
+      }
+      return castElement;
+    });
+    return isChanged ? castArray : value;
+  }
+  _validate(_value, options = {}, panic, next) {
+    var _options$recursive;
+    // let sync = options.sync;
+    // let path = options.path;
+    let innerType = this.innerType;
+    // let endEarly = options.abortEarly ?? this.spec.abortEarly;
+    let recursive = (_options$recursive = options.recursive) != null ? _options$recursive : this.spec.recursive;
+    options.originalValue != null ? options.originalValue : _value;
+    super._validate(_value, options, panic, (arrayErrors, value) => {
+      var _options$originalValu2;
+      if (!recursive || !innerType || !this._typeCheck(value)) {
+        next(arrayErrors, value);
+        return;
+      }
+
+      // #950 Ensure that sparse array empty slots are validated
+      let tests = new Array(value.length);
+      for (let index = 0; index < value.length; index++) {
+        var _options$originalValu;
+        tests[index] = innerType.asNestedTest({
+          options,
+          index,
+          parent: value,
+          parentPath: options.path,
+          originalParent: (_options$originalValu = options.originalValue) != null ? _options$originalValu : _value
+        });
+      }
+      this.runTests({
+        value,
+        tests,
+        originalValue: (_options$originalValu2 = options.originalValue) != null ? _options$originalValu2 : _value,
+        options
+      }, panic, innerTypeErrors => next(innerTypeErrors.concat(arrayErrors), value));
+    });
+  }
+  clone(spec) {
+    const next = super.clone(spec);
+    // @ts-expect-error readonly
+    next.innerType = this.innerType;
+    return next;
+  }
+
+  /** Parse an input JSON string to an object */
+  json() {
+    return this.transform(parseJson);
+  }
+  concat(schema) {
+    let next = super.concat(schema);
+
+    // @ts-expect-error readonly
+    next.innerType = this.innerType;
+    if (schema.innerType)
+      // @ts-expect-error readonly
+      next.innerType = next.innerType ?
+      // @ts-expect-error Lazy doesn't have concat and will break
+      next.innerType.concat(schema.innerType) : schema.innerType;
+    return next;
+  }
+  of(schema) {
+    // FIXME: this should return a new instance of array without the default to be
+    let next = this.clone();
+    if (!isSchema(schema)) throw new TypeError('`array.of()` sub-schema must be a valid yup schema not: ' + printValue(schema));
+
+    // @ts-expect-error readonly
+    next.innerType = schema;
+    next.spec = Object.assign({}, next.spec, {
+      types: schema
+    });
+    return next;
+  }
+  length(length, message = array.length) {
+    return this.test({
+      message,
+      name: 'length',
+      exclusive: true,
+      params: {
+        length
+      },
+      skipAbsent: true,
+      test(value) {
+        return value.length === this.resolve(length);
+      }
+    });
+  }
+  min(min, message) {
+    message = message || array.min;
+    return this.test({
+      message,
+      name: 'min',
+      exclusive: true,
+      params: {
+        min
+      },
+      skipAbsent: true,
+      // FIXME(ts): Array<typeof T>
+      test(value) {
+        return value.length >= this.resolve(min);
+      }
+    });
+  }
+  max(max, message) {
+    message = message || array.max;
+    return this.test({
+      message,
+      name: 'max',
+      exclusive: true,
+      params: {
+        max
+      },
+      skipAbsent: true,
+      test(value) {
+        return value.length <= this.resolve(max);
+      }
+    });
+  }
+  ensure() {
+    return this.default(() => []).transform((val, original) => {
+      // We don't want to return `null` for nullable schema
+      if (this._typeCheck(val)) return val;
+      return original == null ? [] : [].concat(original);
+    });
+  }
+  compact(rejector) {
+    let reject = !rejector ? v => !!v : (v, i, a) => !rejector(v, i, a);
+    return this.transform(values => values != null ? values.filter(reject) : values);
+  }
+  describe(options) {
+    const next = (options ? this.resolve(options) : this).clone();
+    const base = super.describe(options);
+    if (next.innerType) {
+      var _innerOptions;
+      let innerOptions = options;
+      if ((_innerOptions = innerOptions) != null && _innerOptions.value) {
+        innerOptions = Object.assign({}, innerOptions, {
+          parent: innerOptions.value,
+          value: innerOptions.value[0]
+        });
+      }
+      base.innerType = next.innerType.describe(innerOptions);
+    }
+    return base;
+  }
+}
+create$2.prototype = ArraySchema.prototype;
+
 var createValidationSchema = function (fields) {
     var schema = {};
     // Filtrar campos válidos antes de procesarlos
@@ -22189,7 +22590,20 @@ var createValidationSchema = function (fields) {
     });
     validFields.forEach(function (field) {
         if (field.validations && field.validations.length > 0) {
-            var fieldSchema_1 = create$6();
+            // Determinar el tipo de esquema basado en el tipo de campo
+            var fieldSchema_1;
+            switch (field.type) {
+                case "checkbox":
+                case "checklist":
+                    fieldSchema_1 = create$2().of(create$6());
+                    break;
+                case "upload":
+                    fieldSchema_1 = create$8();
+                    break;
+                default:
+                    fieldSchema_1 = create$6();
+                    break;
+            }
             field.validations.forEach(function (validation) {
                 switch (validation.type) {
                     case "required":
@@ -22239,7 +22653,24 @@ var createValidationSchema = function (fields) {
         }
         else if (field.required) {
             // Validación básica de requerido si no hay validaciones específicas
-            schema[field.name] = create$6().required("El campo ".concat(field.label || field.name || "sin nombre", " es requerido"));
+            var requiredSchema = void 0;
+            switch (field.type) {
+                case "checkbox":
+                    requiredSchema = create$2().min(1, "El campo ".concat(field.label || field.name || "sin nombre", " es requerido"));
+                    break;
+                case "checklist":
+                    requiredSchema = create$2()
+                        .of(create$6())
+                        .min(1, "El campo ".concat(field.label || field.name || "sin nombre", " es requerido"));
+                    break;
+                case "upload":
+                    requiredSchema = create$8().required("El campo ".concat(field.label || field.name || "sin nombre", " es requerido"));
+                    break;
+                default:
+                    requiredSchema = create$6().required("El campo ".concat(field.label || field.name || "sin nombre", " es requerido"));
+                    break;
+            }
+            schema[field.name] = requiredSchema;
         }
     });
     return create$3().shape(schema);
@@ -22330,12 +22761,13 @@ var GenericForm = function (_a) {
     var _s = React.useState(getInitialFormData), formData = _s[0], setFormData = _s[1];
     var _t = React.useState({}), errors = _t[0], setErrors = _t[1];
     React.useEffect(function () {
+        var _a, _b;
         if (allData) {
             setMiDtData({
                 allData: {
                     metadata: {
-                        Regiones: allData.metadata.Regiones,
-                        Comunas: allData.metadata.Comunas,
+                        Regiones: (_a = allData === null || allData === void 0 ? void 0 : allData.metadata) === null || _a === void 0 ? void 0 : _a.Regiones,
+                        Comunas: (_b = allData === null || allData === void 0 ? void 0 : allData.metadata) === null || _b === void 0 ? void 0 : _b.Comunas,
                     },
                 },
             });
@@ -22438,7 +22870,7 @@ var GenericForm = function (_a) {
         }
     };
     var renderField = function (field) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         // Prioridad: field.value > formData > getFieldValue
         var fieldValue = (_b = (_a = formData[field.name]) !== null && _a !== void 0 ? _a : field.value) !== null && _b !== void 0 ? _b : getFieldValue(field);
         // Preparar el campo con las funciones de búsqueda si están disponibles
@@ -22448,8 +22880,7 @@ var GenericForm = function (_a) {
                     (_a = config.onSearch) === null || _a === void 0 ? void 0 : _a.call(config, field, value, __assign(__assign({}, stepperData), formData));
                 }
             } });
-        console.log(field, field.className, (_c = field.className) !== null && _c !== void 0 ? _c : "col-span-12 md:col-span-6");
-        return (jsxRuntime.jsx("div", { className: (_d = field.className) !== null && _d !== void 0 ? _d : "col-span-12 md:col-span-6", children: jsxRuntime.jsx(DynamicInput, { field: fieldWithHandlers, value: fieldValue, onChange: handleInputChange, error: errors[field.name] }) }, field.id));
+        return (jsxRuntime.jsx("div", { className: (_c = field.className) !== null && _c !== void 0 ? _c : "col-span-12 md:col-span-6", children: jsxRuntime.jsx(DynamicInput, { field: fieldWithHandlers, value: fieldValue, onChange: handleInputChange, error: errors[field.name], formData: formData }) }, field.id));
     };
     var buttonHandlers = {
         handleBack: handleBack,
@@ -22470,7 +22901,9 @@ var GenericForm = function (_a) {
     if (loading) {
         return (jsxRuntime.jsxs("div", { className: "min-h-[550px] flex flex-col justify-between gap-10 ".concat(className), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [jsxRuntime.jsxs("div", { id: "title", children: [jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse w-3/4 mb-2" }), jsxRuntime.jsx("div", { className: "w-full h-[3px] bg-gray-200 rounded-full animate-pulse" })] }), jsxRuntime.jsxs("div", { className: "text-gray-500 text-lg font-normal flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-6 bg-gray-200 rounded animate-pulse w-1/2 ml-5" }), jsxRuntime.jsx("div", { className: "w-full h-[1px] bg-gray-200 animate-pulse" })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "flex max-w-1xl mx-auto flex-col gap-4", children: jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-4", children: (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.map(function (field) { return (jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-6", children: [jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse w-1/3 mb-2" }), jsxRuntime.jsx("div", { className: "h-10 bg-gray-200 rounded animate-pulse w-full" })] }, field.id)); }) }) }) })] }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "h-10 bg-gray-200 rounded animate-pulse w-20" }), jsxRuntime.jsx("div", { className: "h-10 bg-gray-200 rounded animate-pulse w-20" })] }), jsxRuntime.jsx("div", { className: "h-10 bg-gray-200 rounded animate-pulse w-24" })] })] }));
     }
-    var formContent = (jsxRuntime.jsxs("div", { className: "min-h-[550px] flex flex-col justify-between gap-10 ".concat(className), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [config.title ? (jsxRuntime.jsxs("div", { id: "title", children: [jsxRuntime.jsx("h1", { className: "text-text text-3xl font-bold font-roboto", children: config.title }), jsxRuntime.jsx("div", { className: "w-full h-[3px] bg-orange-500 rounded-full mt-2" })] })) : null, (config === null || config === void 0 ? void 0 : config.steps) && (jsxRuntime.jsx(FormStepper, { steps: (_c = config === null || config === void 0 ? void 0 : config.steps) === null || _c === void 0 ? void 0 : _c.obj, activeStep: (_d = config === null || config === void 0 ? void 0 : config.steps) === null || _d === void 0 ? void 0 : _d.activeStep, completedSteps: (_e = config === null || config === void 0 ? void 0 : config.steps) === null || _e === void 0 ? void 0 : _e.completedSteps, changeActiveStep: (_f = config === null || config === void 0 ? void 0 : config.steps) === null || _f === void 0 ? void 0 : _f.changeActiveStep })), (config === null || config === void 0 ? void 0 : config.subtitle) && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "text-gray-500 text-lg font-normal flex flex-col gap-2", children: [jsxRuntime.jsx("h3", { className: "pl-5 text-[24px] text-text text-xl font-bold font-roboto", children: config.subtitle }), jsxRuntime.jsx("hr", { className: "w-full border-gray-400" })] }) })), config.showInfoAlert && config.infoMessage && (jsxRuntime.jsx(Alert, { type: (_g = config.infoMessage.type) !== null && _g !== void 0 ? _g : "info", text: config.infoMessage.message })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("form", { className: "flex max-w-1xl mx-auto flex-col gap-4", children: jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-4", children: config.fields.map(renderField) }) }) })] }), ((_h = config === null || config === void 0 ? void 0 : config.navigation) === null || _h === void 0 ? void 0 : _h.buttons) && (jsxRuntime.jsx("div", { className: (_k = (_j = config.navigation) === null || _j === void 0 ? void 0 : _j.containerClass) !== null && _k !== void 0 ? _k : "flex justify-between", children: (_m = (_l = config === null || config === void 0 ? void 0 : config.navigation) === null || _l === void 0 ? void 0 : _l.buttons) === null || _m === void 0 ? void 0 : _m.map(function (btn, index) {
+    var formContent = (jsxRuntime.jsxs("div", { className: "min-h-[550px] flex flex-col justify-between gap-10 ".concat(className), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [config.title ? (jsxRuntime.jsxs("div", { id: "title", children: [jsxRuntime.jsx("h1", { className: "text-text text-3xl font-bold font-roboto", children: config.title }), jsxRuntime.jsx("div", { className: config.titleClassName
+                                    ? config.titleClassName
+                                    : "w-full h-[3px] bg-orange-500 rounded-full mt-2" })] })) : null, (config === null || config === void 0 ? void 0 : config.steps) && (jsxRuntime.jsx(FormStepper, { steps: (_c = config === null || config === void 0 ? void 0 : config.steps) === null || _c === void 0 ? void 0 : _c.obj, activeStep: (_d = config === null || config === void 0 ? void 0 : config.steps) === null || _d === void 0 ? void 0 : _d.activeStep, completedSteps: (_e = config === null || config === void 0 ? void 0 : config.steps) === null || _e === void 0 ? void 0 : _e.completedSteps, changeActiveStep: (_f = config === null || config === void 0 ? void 0 : config.steps) === null || _f === void 0 ? void 0 : _f.changeActiveStep })), (config === null || config === void 0 ? void 0 : config.subtitle) && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "text-gray-500 text-lg font-normal flex flex-col gap-2", children: [jsxRuntime.jsx("h3", { className: "pl-5 text-[24px] text-text text-xl font-bold font-roboto", children: config.subtitle }), jsxRuntime.jsx("hr", { className: "w-full border-gray-400" })] }) })), config.showInfoAlert && config.infoMessage && (jsxRuntime.jsx(Alert, { type: (_g = config.infoMessage.type) !== null && _g !== void 0 ? _g : "info", text: config.infoMessage.message })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("form", { className: "flex max-w-1xl mx-auto flex-col gap-4", children: jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-4", children: config.fields.map(renderField) }) }) })] }), ((_h = config === null || config === void 0 ? void 0 : config.navigation) === null || _h === void 0 ? void 0 : _h.buttons) && (jsxRuntime.jsx("div", { className: (_k = (_j = config.navigation) === null || _j === void 0 ? void 0 : _j.containerClass) !== null && _k !== void 0 ? _k : "flex justify-between", children: (_m = (_l = config === null || config === void 0 ? void 0 : config.navigation) === null || _l === void 0 ? void 0 : _l.buttons) === null || _m === void 0 ? void 0 : _m.map(function (btn, index) {
                     var _a;
                     return btn.show ? (jsxRuntime.jsx("div", { className: (_a = btn.className) !== null && _a !== void 0 ? _a : "", children: jsxRuntime.jsx(NavigationButton, { direction: btn.direction, onClick: buttonHandlers[btn.onClick], disabled: isButtonDisabled(btn), label: btn.label }) }, index)) : null;
                 }) }))] }));

package/dist/types/index.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 export interface IFormField {
     id: string;
     name: string;
-    type: "radio" | "text" | "select" | "textarea" | "checkbox" | "rut" | "address" | "subtitle" | "alert" | "date" | "declaration" | "typography" | "status";
+    type: "radio" | "text" | "select" | "textarea" | "checkbox" | "checklist" | "upload" | "rut" | "address" | "subtitle" | "alert" | "date" | "declaration" | "typography" | "status";
     label: string;
-    value?: string | number | null;
+    value?: string | number | any;
     options?: Array<{
         value: string;
         label: string;
@@ -17,7 +17,7 @@ export interface IFormField {
     maxLength?: number;
     className?: string;
     validate?: boolean;
-    onSearch?: (value: string | any) => void;
+    onSearch?: (field: IFormField, value: string | any, formData: any) => void;
     onAddressChange?: (address: any) => void;
     showMap?: boolean;
     mapHeight?: string;
@@ -35,6 +35,7 @@ export interface IFormField {
 export interface IFormConfig {
     id: string;
     title: string;
+    titleClassName?: string | null;
     subtitle?: string;
     description?: string;
     backStep?: string | null;

package/dist/utils/Common.d.ts

@@ -1,15 +1,16 @@
 export interface Region {
     id: number;
-    nombre: string;
-    codigo?: string;
+    Nombre: string;
+    Codigo?: number | null;
 }
 export interface Comuna {
     id: number;
-    nombre: string;
-    codigo?: string;
+    Nombre: string;
+    Codigo?: number | null;
     region_id?: number;
 }
 declare class Common {
+    static removeAccents(text: string): string;
     static getRegionByName(regionName: string, regiones: Region[]): number | null;
     static getComunaByName(comunaName: string, comunas: Comuna[]): number | null;
     static getRegionIdByComunaId(comunaId: number, comunas: Comuna[]): number | null;