@visiion/forms-library 1.4.2 → 1.4.4

package/dist/components/Inputs/AddressInput.d.ts

@@ -12,7 +12,9 @@ interface AddressInputProps {
         };
     }) => void;
     error?: string;
-    onSearch?: (value: string | any) => void;
+    onSearch?: ({ value }: {
+        value: string | any;
+    }) => void;
     showMap?: boolean;
     mapHeight?: string;
 }

package/dist/components/Inputs/StatusScreen.d.ts

@@ -11,6 +11,9 @@ interface StatusScreenProps {
         label: string;
         onClick: () => void;
     };
+    onSearch?: ({ value }: {
+        value: any;
+    }) => void;
 }
 declare const StatusScreen: React.FC<StatusScreenProps>;
 export default StatusScreen;

package/dist/index.esm.js

@@ -10194,7 +10194,7 @@ var RadioInput = function (_a) {
     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);
+        (_a = field === null || field === void 0 ? void 0 : field.onSearch) === null || _a === void 0 ? void 0 : _a.call(field, { value: e.target.value });
     };
     return (jsxs(InputWrapper, __assign({}, field, { error: error, children: [jsx("div", { className: "space-y-2", children: (_b = field.options) === null || _b === void 0 ? void 0 : _b.map(function (option) { return (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 && jsx("span", { className: "text-red-500 text-sm", children: error })] })));
 };
@@ -10345,14 +10345,14 @@ var RutInput = function (_a) {
     // Manejar búsqueda
     var handleSearch = function () {
         if (onSearch && value && isValidRut) {
-            onSearch(clean(displayValue));
+            onSearch({ value: clean(displayValue) });
         }
     };
     // Manejar tecla Enter para búsqueda
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && onSearch && value && isValidRut) {
             e.preventDefault();
-            onSearch(clean(displayValue));
+            onSearch({ value: clean(displayValue) });
         }
     };
     return (jsxs("div", { className: "flex flex-col gap-1", children: [jsx("label", { htmlFor: field.id, className: "font-medium text-gray-700", children: field.label }), jsxs("div", { className: "flex", children: [jsx("input", { ref: inputRef, id: field.id, name: field.name, type: "text", value: displayValue || "", onChange: handleRutChange, onKeyDown: handleKeyDown, placeholder: placeholder, minLength: minLength, maxLength: maxLength, disabled: disabled, className: "flex-1 px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-orange-500 h-10 ".concat(error ? "border-red-500" : "border-gray-300", " ").concat(disabled ? "bg-gray-100 cursor-not-allowed" : "") }), onSearch && (jsx(Button, { type: "button", color: "blue", className: "flex items-center justify-center w-10 h-10 rounded-none rounded-tr-md rounded-br-md border-l-0", onClick: handleSearch, disabled: !isValidRut || disabled, children: jsx(IoMdSearch, { className: "w-5 h-5" }) }))] }), error && jsx("span", { className: "text-red-500 text-sm", children: error }), displayValue && !error && (jsx("span", { className: "text-sm ".concat(isValidRut ? "text-green-600" : "text-orange-600"), children: isValidRut ? "✓ RUT válido" : "⚠ Verificar formato del RUT" }))] }));
@@ -19751,7 +19751,9 @@ var AddressInput = function (_a) {
                 localStorage.setItem("lastLocation", JSON.stringify(newLocation));
                 var addressComponents = extractAddressComponents(place, newLocation);
                 if (onSearch) {
-                    onSearch(__assign(__assign({}, addressComponents), { address: place.formatted_address }));
+                    onSearch({
+                        value: __assign(__assign({}, addressComponents), { address: place.formatted_address }),
+                    });
                 }
             }
         }
@@ -19789,7 +19791,9 @@ var AddressInput = function (_a) {
                     if (address) {
                         addressComponents = extractAddressComponents(address, newLocation);
                         if (onSearch) {
-                            onSearch(__assign(__assign({}, addressComponents), { address: address.formatted_address }));
+                            onSearch({
+                                value: __assign(__assign({}, addressComponents), { address: address.formatted_address }),
+                            });
                         }
                     }
                     return [3 /*break*/, 4];
@@ -19826,7 +19830,9 @@ var AddressInput = function (_a) {
                     if (response.results[0]) {
                         addressComponents = extractAddressComponents(response.results[0], newLocation);
                         if (onSearch) {
-                            onSearch(__assign(__assign({}, addressComponents), { address: response.results[0].formatted_address }));
+                            onSearch({
+                                value: __assign(__assign({}, addressComponents), { address: response.results[0].formatted_address }),
+                            });
                         }
                     }
                     return [3 /*break*/, 4];
@@ -19982,7 +19988,7 @@ var SwornDeclaration = function (_a) {
 };
 
 var StatusScreen = function (_a) {
-    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? "info" : _b, leftButton = _a.leftButton, rightButton = _a.rightButton;
+    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? "info" : _b, leftButton = _a.leftButton, rightButton = _a.rightButton, onSearch = _a.onSearch;
     var getStatusStyles = function () {
         switch (type) {
             case "success":
@@ -20007,7 +20013,11 @@ var StatusScreen = function (_a) {
                 return (jsx("svg", { className: "w-28 h-28 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
         }
     };
-    return (jsx("div", { className: "col-span-12", children: jsxs("div", { className: "flex flex-col items-center p-8  ".concat(getStatusStyles()), children: [jsx("div", { className: "mb-4", children: getIcon() }), title && (jsx("h2", { className: "text-2xl font-bold text-center mb-4", children: title })), message && jsx("p", { className: "text-center mb-6 max-w-md", children: message }), (leftButton || rightButton) && (jsxs("div", { className: "flex space-x-4", children: [leftButton && (jsx("button", { onClick: leftButton.onClick, className: "px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500", children: leftButton.label })), rightButton && (jsx("button", { onClick: rightButton.onClick, className: "px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", children: rightButton.label }))] }))] }) }));
+    return (jsx("div", { className: "col-span-12", children: jsxs("div", { className: "flex flex-col items-center p-8  ".concat(getStatusStyles()), children: [jsx("div", { className: "mb-4", children: getIcon() }), title && (jsx("h2", { className: "text-2xl font-bold text-center mb-4", children: title })), message && jsx("p", { className: "text-center mb-6 max-w-md", children: message }), (leftButton || rightButton) && (jsxs("div", { className: "flex space-x-4", children: [leftButton && (jsx("button", { onClick: function () {
+                                onSearch === null || onSearch === void 0 ? void 0 : onSearch({ value: "LEFT" });
+                            }, className: "px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500", children: leftButton.label })), rightButton && (jsx("button", { onClick: function () {
+                                onSearch === null || onSearch === void 0 ? void 0 : onSearch({ value: "RIGHT" });
+                            }, className: "px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", children: rightButton.label }))] }))] }) }));
 };
 
 var Typography = function (_a) {
@@ -22855,10 +22865,13 @@ var GenericForm = function (_a) {
         // 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
-        var fieldWithHandlers = __assign(__assign({}, field), { onSearch: function (value) {
-                var _a;
+        var fieldWithHandlers = __assign(__assign({}, field), { 
+            // ... existing code ...
+            onSearch: function (_a) {
+                var _b;
+                _a.field; var value = _a.value; _a.formData;
                 if (field.onSearch) {
-                    (_a = config.onSearch) === null || _a === void 0 ? void 0 : _a.call(config, field, value, __assign(__assign({}, stepperData), formData));
+                    (_b = config === null || config === void 0 ? void 0 : config.onSearch) === null || _b === void 0 ? void 0 : _b.call(config, field, value !== null && value !== void 0 ? value : "", __assign(__assign({}, stepperData), formData));
                 }
             } });
         return (jsx("div", { className: (_c = field.className) !== null && _c !== void 0 ? _c : "col-span-12 md:col-span-6", children: jsx(DynamicInput, { field: fieldWithHandlers, value: fieldValue, onChange: handleInputChange, error: errors[field.name], formData: formData }) }, field.id));

package/dist/index.js

@@ -10213,7 +10213,7 @@ var RadioInput = function (_a) {
     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);
+        (_a = field === null || field === void 0 ? void 0 : field.onSearch) === null || _a === void 0 ? void 0 : _a.call(field, { value: 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 })] })));
 };
@@ -10364,14 +10364,14 @@ var RutInput = function (_a) {
     // Manejar búsqueda
     var handleSearch = function () {
         if (onSearch && value && isValidRut) {
-            onSearch(clean(displayValue));
+            onSearch({ value: clean(displayValue) });
         }
     };
     // Manejar tecla Enter para búsqueda
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && onSearch && value && isValidRut) {
             e.preventDefault();
-            onSearch(clean(displayValue));
+            onSearch({ value: clean(displayValue) });
         }
     };
     return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("label", { htmlFor: field.id, className: "font-medium text-gray-700", children: field.label }), jsxRuntime.jsxs("div", { className: "flex", children: [jsxRuntime.jsx("input", { ref: inputRef, id: field.id, name: field.name, type: "text", value: displayValue || "", onChange: handleRutChange, onKeyDown: handleKeyDown, placeholder: placeholder, minLength: minLength, maxLength: maxLength, disabled: disabled, className: "flex-1 px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-orange-500 h-10 ".concat(error ? "border-red-500" : "border-gray-300", " ").concat(disabled ? "bg-gray-100 cursor-not-allowed" : "") }), onSearch && (jsxRuntime.jsx(flowbiteReact.Button, { type: "button", color: "blue", className: "flex items-center justify-center w-10 h-10 rounded-none rounded-tr-md rounded-br-md border-l-0", onClick: handleSearch, disabled: !isValidRut || disabled, children: jsxRuntime.jsx(IoMdSearch, { className: "w-5 h-5" }) }))] }), error && jsxRuntime.jsx("span", { className: "text-red-500 text-sm", children: error }), displayValue && !error && (jsxRuntime.jsx("span", { className: "text-sm ".concat(isValidRut ? "text-green-600" : "text-orange-600"), children: isValidRut ? "✓ RUT válido" : "⚠ Verificar formato del RUT" }))] }));
@@ -19770,7 +19770,9 @@ var AddressInput = function (_a) {
                 localStorage.setItem("lastLocation", JSON.stringify(newLocation));
                 var addressComponents = extractAddressComponents(place, newLocation);
                 if (onSearch) {
-                    onSearch(__assign(__assign({}, addressComponents), { address: place.formatted_address }));
+                    onSearch({
+                        value: __assign(__assign({}, addressComponents), { address: place.formatted_address }),
+                    });
                 }
             }
         }
@@ -19808,7 +19810,9 @@ var AddressInput = function (_a) {
                     if (address) {
                         addressComponents = extractAddressComponents(address, newLocation);
                         if (onSearch) {
-                            onSearch(__assign(__assign({}, addressComponents), { address: address.formatted_address }));
+                            onSearch({
+                                value: __assign(__assign({}, addressComponents), { address: address.formatted_address }),
+                            });
                         }
                     }
                     return [3 /*break*/, 4];
@@ -19845,7 +19849,9 @@ var AddressInput = function (_a) {
                     if (response.results[0]) {
                         addressComponents = extractAddressComponents(response.results[0], newLocation);
                         if (onSearch) {
-                            onSearch(__assign(__assign({}, addressComponents), { address: response.results[0].formatted_address }));
+                            onSearch({
+                                value: __assign(__assign({}, addressComponents), { address: response.results[0].formatted_address }),
+                            });
                         }
                     }
                     return [3 /*break*/, 4];
@@ -20001,7 +20007,7 @@ var SwornDeclaration = function (_a) {
 };
 
 var StatusScreen = function (_a) {
-    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? "info" : _b, leftButton = _a.leftButton, rightButton = _a.rightButton;
+    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? "info" : _b, leftButton = _a.leftButton, rightButton = _a.rightButton, onSearch = _a.onSearch;
     var getStatusStyles = function () {
         switch (type) {
             case "success":
@@ -20026,7 +20032,11 @@ var StatusScreen = function (_a) {
                 return (jsxRuntime.jsx("svg", { className: "w-28 h-28 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
         }
     };
-    return (jsxRuntime.jsx("div", { className: "col-span-12", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center p-8  ".concat(getStatusStyles()), children: [jsxRuntime.jsx("div", { className: "mb-4", children: getIcon() }), title && (jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-center mb-4", children: title })), message && jsxRuntime.jsx("p", { className: "text-center mb-6 max-w-md", children: message }), (leftButton || rightButton) && (jsxRuntime.jsxs("div", { className: "flex space-x-4", children: [leftButton && (jsxRuntime.jsx("button", { onClick: leftButton.onClick, className: "px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500", children: leftButton.label })), rightButton && (jsxRuntime.jsx("button", { onClick: rightButton.onClick, className: "px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", children: rightButton.label }))] }))] }) }));
+    return (jsxRuntime.jsx("div", { className: "col-span-12", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center p-8  ".concat(getStatusStyles()), children: [jsxRuntime.jsx("div", { className: "mb-4", children: getIcon() }), title && (jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-center mb-4", children: title })), message && jsxRuntime.jsx("p", { className: "text-center mb-6 max-w-md", children: message }), (leftButton || rightButton) && (jsxRuntime.jsxs("div", { className: "flex space-x-4", children: [leftButton && (jsxRuntime.jsx("button", { onClick: function () {
+                                onSearch === null || onSearch === void 0 ? void 0 : onSearch({ value: "LEFT" });
+                            }, className: "px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500", children: leftButton.label })), rightButton && (jsxRuntime.jsx("button", { onClick: function () {
+                                onSearch === null || onSearch === void 0 ? void 0 : onSearch({ value: "RIGHT" });
+                            }, className: "px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", children: rightButton.label }))] }))] }) }));
 };
 
 var Typography = function (_a) {
@@ -22874,10 +22884,13 @@ var GenericForm = function (_a) {
         // 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
-        var fieldWithHandlers = __assign(__assign({}, field), { onSearch: function (value) {
-                var _a;
+        var fieldWithHandlers = __assign(__assign({}, field), { 
+            // ... existing code ...
+            onSearch: function (_a) {
+                var _b;
+                _a.field; var value = _a.value; _a.formData;
                 if (field.onSearch) {
-                    (_a = config.onSearch) === null || _a === void 0 ? void 0 : _a.call(config, field, value, __assign(__assign({}, stepperData), formData));
+                    (_b = config === null || config === void 0 ? void 0 : config.onSearch) === null || _b === void 0 ? void 0 : _b.call(config, field, value !== null && value !== void 0 ? value : "", __assign(__assign({}, stepperData), formData));
                 }
             } });
         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));

package/dist/types/index.d.ts

@@ -17,7 +17,11 @@ export interface IFormField {
     maxLength?: number;
     className?: string;
     validate?: boolean;
-    onSearch?: (field: IFormField, value: string | any, formData: any) => void;
+    onSearch?: ({ field, value, formData, }: {
+        field?: IFormField;
+        value?: string | any;
+        formData?: any;
+    }) => void;
     onAddressChange?: (address: any) => void;
     showMap?: boolean;
     mapHeight?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visiion/forms-library",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Librería de componentes de formularios reutilizables",
   "type": "module",
   "main": "dist/index.js",
@@ -38,6 +38,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@react-google-maps/api": "^2.19.3",
     "@react-pdf/renderer": "^4.3.0",
+    "classnames": "^2.5.1",
+    "debounce": "^2.2.0",
     "flowbite-react": "0.10.1",
     "framer-motion": "^11.3.8",
     "react-icons": "^5.5.0",
@@ -73,4 +75,4 @@
     "url": "https://github.com/Kuantaz/forms-library/issues"
   },
   "homepage": "https://github.com/Kuantaz/forms-library#readme"
-}
+}