@zauru-sdk/components 1.0.99 → 1.0.100

package/dist/cjs/NavBar/NavBar.js

@@ -11,26 +11,21 @@ const OptionsDropDownButton = ({ color, options, name }) => {
     const [showOptionsMenu, setShowOptionsMenu] = (0, react_1.useState)(true);
     return ((0, jsx_runtime_1.jsx)("div", { className: "nav-item ml-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? (0, jsx_runtime_1.jsx)(icons_1.OpcionButtonSvgIcon, {}), (0, jsx_runtime_1.jsx)(icons_1.DropDownArrowSvgIcon, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option) => option) })] }) }) }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: childrens.length > 0 ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => ((0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : ((0, jsx_runtime_1.jsx)("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-56 sm:w-auto h-10 text-sm py-1 uppercase rounded shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: (0, jsx_runtime_1.jsx)(react_2.Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: name })] }) }) })) }));
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: childrens.length > 0 ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => ((0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : ((0, jsx_runtime_1.jsx)("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: (0, jsx_runtime_1.jsx)(react_2.Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: name })] }) }) })) }));
 const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
     const color = NavBar_utils_js_1.COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = (0, react_1.useState)(false);
-    const options = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ul", { children: loggedIn && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col sm:flex-row ", children: items
-                        .filter((item) => item.loggedIn)
-                        .map((item, index) => {
-                        const specialColor = item.color
-                            ? NavBar_utils_js_1.COLORS[item.color]
-                            : undefined;
-                        return ((0, jsx_runtime_1.jsx)(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
-                                return { ...x };
-                            }) }, index));
-                    }) })) }), (0, jsx_runtime_1.jsx)("ul", { className: "sm:flex sm:flex-col ml-auto lg:flex-row", children: loggedIn ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { color: color, options: [
+    const renderNavItems = (items) => ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col lg:flex-row w-full", children: items.map((item, index) => {
+            const specialColor = item.color
+                ? NavBar_utils_js_1.COLORS[item.color]
+                : undefined;
+            return ((0, jsx_runtime_1.jsx)(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
+                    return { ...x };
+                }) }, index));
+        }) }));
+    const options = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), (0, jsx_runtime_1.jsx)("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { color: color, options: [
                         (0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: (0, jsx_runtime_1.jsx)(icons_1.LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
-                    ] })) : (items
-                    .filter((item) => !item.loggedIn)
-                    .map((item, index) => {
-                    return ((0, jsx_runtime_1.jsx)(NavItem, { name: item.name, link: item.link, icon: item.icon, color: color }, index));
-                })) })] }));
-    return ((0, jsx_runtime_1.jsx)("nav", { className: `py-3 ${color.bg600}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between ml-5 mr-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full lg:w-auto", children: [(0, jsx_runtime_1.jsx)(react_2.Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block mr-2 mb-2 align-middle", children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), (0, jsx_runtime_1.jsx)("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: (0, jsx_runtime_1.jsx)(icons_1.MenuAlt4Svg, { open: NavBarOpen }) })] }), (0, jsx_runtime_1.jsx)("div", { className: `lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`, children: options }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
+                    ] })) })] }));
+    return ((0, jsx_runtime_1.jsx)("nav", { className: `py-3 ${color.bg600}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between ml-5 mr-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full lg:w-auto", children: [(0, jsx_runtime_1.jsx)(react_2.Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block mr-2 mb-2 align-middle", children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), (0, jsx_runtime_1.jsx)("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: (0, jsx_runtime_1.jsx)(icons_1.MenuAlt4Svg, { open: NavBarOpen }) })] }), (0, jsx_runtime_1.jsx)("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: options }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };
 exports.NavBar = NavBar;

package/dist/cjs/Table/ZauruTable.js

@@ -36,10 +36,17 @@ const customStyles = {
         style: {
             color: "#202124",
             fontSize: "14px",
-            justifyContent: "left", // Alinea el texto a la izquierda
-            whiteSpace: "normal", // Permite el ajuste de texto
-            wordBreak: "break-word", // Asegura que las palabras se rompan correctamente para evitar desbordamientos
-            maxWidth: "150px", // Establece un ancho máximo para las celdas del encabezado
+            justifyContent: "left",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            maxWidth: "250px",
+            padding: "4px", // Add some padding
+        },
+    },
+    cells: {
+        style: {
+            whiteSpace: "normal", // Allow wrapping for cell content
+            wordBreak: "break-word",
         },
     },
     rows: {

package/dist/cjs/WithTooltip/WithTooltip.js

@@ -4,6 +4,6 @@ exports.WithTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const WithTooltip = (props) => {
     const { children, text } = props;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "group relative", children: [children, (0, jsx_runtime_1.jsx)("span", { className: "pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-white opacity-0 transition z-50 before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-[''] group-hover:opacity-100 before:z-50", children: text })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "group relative inline-block", children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40", children: [text, (0, jsx_runtime_1.jsx)("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black" })] }) })] }));
 };
 exports.WithTooltip = WithTooltip;

package/dist/cjs/Zendesk/zendesk.config.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+//import jwt from "jsonwebtoken";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.zendeskJwt = void 0;
-const jsonwebtoken_1 = __importDefault(require("jsonwebtoken"));
 function zendeskJwt(current_user, configuration) {
     // get the INFO
     const jwtSecret = configuration.zendeskJWTSecret;
@@ -22,10 +19,11 @@ function zendeskJwt(current_user, configuration) {
         scope: "user",
         exp: expiresIn,
     };
-    const jwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
-    return jsonwebtoken_1.default.sign(payload, jwtSecret, {
-        algorithm: "HS256",
-        header: jwtHeader,
-    });
+    // const jwtHeader: jwt.JwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+    // return jwt.sign(payload, jwtSecret, {
+    //   algorithm: "HS256",
+    //   header: jwtHeader,
+    // });
+    return {};
 }
 exports.zendeskJwt = zendeskJwt;

package/dist/esm/Alerts/StaticAlert.js

@@ -13,12 +13,6 @@ const getConfig = (type) => {
                 buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
                 path: (_jsx("path", { d: "M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z" })),
             };
-        case "warning":
-            return {
-                containerClassName: "text-yellow-900 bg-yellow-100 border border-yellow-200 rounded-md",
-                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500",
-                path: (_jsx("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1z" })),
-            };
         default:
             return {
                 containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",

package/dist/esm/Buttons/Button.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+import { WithTooltip } from "../index.js";
 export const Button = (props) => {
     const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const formContext = useFormContext();
+    const formHasErrors = formContext ? !formContext.formState.isValid : false;
+    const formErrors = formContext ? formContext.formState.errors : {};
     const COLORS = {
         green: {
             bg900: "bg-green-900",
@@ -37,7 +42,13 @@ export const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    return (_jsx("button", { type: type, name: "action", disabled: loading || disabled, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${loading
+    const errorMessage = formHasErrors
+        ? Object.values(formErrors)
+            .map((error) => error?.message?.toString())
+            .join(", ")
+        : "";
+    const buttonContent = (_jsx("button", { type: type, name: "action", disabled: loading || disabled || formHasErrors, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || formHasErrors ? " bg-opacity-25 " : ""} ${loading
             ? " cursor-progress"
-            : `${disabled ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+            : `${disabled || formHasErrors ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    return formHasErrors ? (_jsx(WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
 };

package/dist/esm/DynamicTable/DynamicPrintTable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useCallback, useState } from "react";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
 import { useAppSelector } from "@zauru-sdk/redux";
 const errorAnimation = {
     hidden: { opacity: 0, y: -10 },
@@ -10,11 +10,11 @@ const errorAnimation = {
 export const DynamicPrintTable = ({ forwardedRef, ...props }) => {
     const { items, onChange, className } = props;
     const { formValidations } = useAppSelector((state) => state.formValidation);
-    const createItemSelect = (rowIndex, defaultValue) => (_jsx(SelectFieldWithoutValidation, { name: "item_select", isClearable: true, onChange: (value) => {
+    const createItemSelect = (rowIndex, defaultValue) => (_jsx(SelectField, { name: "item_select", isClearable: true, onChange: (value) => {
             const selectedItem = items?.find((x) => x.value === value?.value);
             updateRow(rowIndex, selectedItem);
         }, options: items, defaultValue: defaultValue }, rowIndex));
-    const createItemQuantity = (rowIndex, defaultValue) => (_jsx(TextFieldWithoutValidation, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
+    const createItemQuantity = (rowIndex, defaultValue) => (_jsx(TextField, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
             updateRow(rowIndex, undefined, Number(value));
         } }, rowIndex));
     const createTemplateName = (rowIndex, defaultValue) => (_jsx("div", { children: defaultValue != "" ? defaultValue : "No hay etiqueta" }, rowIndex));

package/dist/esm/DynamicTable/DynamicTable.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from "react";
-import { TextAreaWithoutValidation } from "../Form/TextArea/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
+import { TextArea } from "../Form/TextArea/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { CheckBox } from "../Form/Checkbox/index.js";
 export const DynamicTable = ({ forwardedRef, ...props }, ref) => {
     const [tableData, setTableData] = useState({});
     const { cellInputs, intersectionTitle, className, onChange, defaultValue, margins, } = props;
@@ -147,7 +147,7 @@ export const DynamicTable = ({ forwardedRef, ...props }, ref) => {
         return (_jsxs("tr", { children: [_jsx("th", { className: "align-middle py-2 text-center", style: {
                         ...cellBordered,
                         ...pastelGrayBackground,
-                    }, children: intersectionTitle ?? "" }), cols.map((col) => (_jsx("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `column${col.id}`, defaultValue: tableData[`column${col.id}`] || 1, type: "number", onChange: (value) => handleInputChange(`column${col.id}`, value) }), col.id > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => removeCol(col.id), children: "x" }))] }) }, col.id))), _jsx("th", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addCol, children: "+" }) })] }));
+                    }, children: intersectionTitle ?? "" }), cols.map((col) => (_jsx("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextField, { style: { maxWidth: "45%", minWidth: "45%" }, name: `column${col.id}`, defaultValue: tableData[`column${col.id}`] || 1, type: "number", onChange: (value) => handleInputChange(`column${col.id}`, value) }), col.id > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => removeCol(col.id), children: "x" }))] }) }, col.id))), _jsx("th", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addCol, children: "+" }) })] }));
     };
     const renderRow = (rowId) => {
         const cols = getCols();
@@ -157,14 +157,14 @@ export const DynamicTable = ({ forwardedRef, ...props }, ref) => {
                         textOverflow: "ellipsis",
                         msTextOverflow: "ellipsis",
                         maxWidth: "200px",
-                    }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
+                    }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextField, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
                                     removeRow(rowId);
                                 }, children: "x" }))] }) }), cols.map((col) => {
                     const cellId = `cell-${rowId}-${col.id}`;
                     const cellValidation = tableData[cellId] === true;
                     if (!cellInputs)
                         tableData[cellId] = cellValidation;
-                    return (_jsx("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? (_jsx(TextAreaWithoutValidation, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : (_jsx(CheckboxWithoutValidation, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
+                    return (_jsx("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? (_jsx(TextArea, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : (_jsx(CheckBox, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
                                 if (value) {
                                     return handleValidation(cellId, col.id, rowId);
                                 }

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { CheckBox } from "../Form/Checkbox/index.js";
 import { createModal } from "../Modal/index.js";
 import { Button } from "../Buttons/index.js";
 import { useAppSelector } from "@zauru-sdk/redux";
@@ -61,7 +61,6 @@ export const GenericDynamicTable = (props) => {
             newDeletedData.push(deletedItem);
         }
         setDeletedData(newDeletedData);
-        onChange && onChange(tableData?.filter((x) => x.id !== rowId));
         setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
     };
     const handleChange = (name, value, rowId) => {
@@ -94,10 +93,10 @@ export const GenericDynamicTable = (props) => {
                         return (_jsx("td", { className: "align-middle p-1", children: _jsx("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
                     }
                     const FieldComponent = column.type === "textField"
-                        ? TextFieldWithoutValidation
+                        ? TextField
                         : column.type === "checkbox"
-                            ? CheckboxWithoutValidation
-                            : SelectFieldWithoutValidation;
+                            ? CheckBox
+                            : SelectField;
                     const setTableValue = (columnName, newValue) => {
                         setTableData((prevState) => {
                             // Encontrar el índice de la fila que está cambiando
@@ -182,7 +181,7 @@ export const GenericDynamicTable = (props) => {
             setFilteredTableData(tableData);
         }
     };
-    return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextFieldWithoutValidation, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
+    return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextField, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
                                 .map((x) => x.label)
                                 .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), footerRow && !editable ? (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsx("tr", { children: Object.keys(footerRow ?? {})?.map((x, indx) => {
                                         return (_jsx("td", { className: "align-middle", children: footerRow[x] }, indx));

package/dist/esm/Footer/Footer.js

@@ -12,5 +12,5 @@ const COLORS = {
 };
 export const Footer = ({ href, selectedColor, showConnection = false, }) => {
     const color = COLORS[selectedColor];
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.2.0.0`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
 };

package/dist/esm/Form/Checkbox/index.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAppSelector } from "@zauru-sdk/redux";
 import { useEffect, useState } from "react";
-export const CheckboxWithoutValidation = (props) => {
-    const { id, name, defaultValue = false, onChange, disabled = false, error, label, } = props;
+import { useFormContext } from "react-hook-form";
+export const CheckBox = (props) => {
+    const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, } = props;
     const [checked, setChecked] = useState(defaultValue);
     useEffect(() => {
         setChecked(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {
         const isChecked = event.target.checked;
+        if (register) {
+            register.onChange(event);
+        }
         if (onChange) {
             const result = onChange(isChecked, event);
             if (result?.stopUIChange) {
@@ -17,18 +20,16 @@ export const CheckboxWithoutValidation = (props) => {
         }
         setChecked(isChecked);
     };
+    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
-    const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, name: name, checked: checked, onChange: handleInputChange, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled }));
+    const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
     if (!error && !label) {
         return inputComponent;
     }
-    return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsx("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: label }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
-};
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-export const CheckBox = (props) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return _jsx(CheckboxWithoutValidation, { ...props });
+    return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
 };

package/dist/esm/Form/Checklist/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckboxWithoutValidation } from "../Checkbox/index.js";
+import { CheckBox } from "../Checkbox/index.js";
 export const Checklist = ({ items, onChange }) => {
     const handleCheckboxChange = (name, value) => {
         if (onChange) {
             onChange(name, value);
         }
     };
-    return (_jsx("div", { children: items.map((item) => (_jsx(CheckboxWithoutValidation, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
+    return (_jsx("div", { children: items.map((item) => (_jsx(CheckBox, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
 };

package/dist/esm/Form/DatePicker/index.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
-export const FormDatePickerWithoutValidation = (props) => {
-    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, className = "", isClearable = false, } = props;
+import { useFormContext } from "react-hook-form";
+export const FormDatePicker = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, disabled = false, className = "", isClearable = false, required = false, } = props;
     const [value, setValue] = useState(defaultValue);
     const [showTooltip, setShowTooltip] = useState(false);
+    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -18,14 +23,11 @@ export const FormDatePickerWithoutValidation = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, name: name, tabIndex: tabIndex, type: "date", onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\d{2}-\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: (e) => {
                             setValue(e.target.value);
                             onChange && onChange(e.target.value);
-                        }, value: value ?? "", pattern: "\\d{4}-\\d{2}-\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5` }), value && isClearable && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
-};
-export const FormDatePicker = (props) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return _jsx(FormDatePickerWithoutValidation, { ...props });
+                            if (register) {
+                                register.onChange(e);
+                            }
+                        } }), value && isClearable && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

package/dist/esm/Form/DynamicBaculoForm/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, TextFieldWithoutValidation } from "../TextField/index.js";
+import { TextField } from "../TextField/index.js";
 import { TripleFieldContainer } from "../FieldContainer/index.js";
 import { DoubleFieldContainer } from "../FieldContainer/index.js";
 import { YesNo } from "../YesNo/index.js";
@@ -33,7 +33,7 @@ export function DynamicBaculoForm(props) {
                 return (_jsx(SubContainer, { title: field.name, children: _jsx(GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
             }
             case "zauru_data":
-                return (_jsx(TextFieldWithoutValidation, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
+                return (_jsx(TextField, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
             case "hour":
                 return (_jsx(FormTimePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
             case "date":

package/dist/esm/Form/FileUpload/index.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
 import { useState } from "react";
-export const FileUploadFieldWithoutValidation = (props) => {
-    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, error, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, } = props;
+import { useFormContext } from "react-hook-form";
+export const FileUploadField = (props) => {
+    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, required = false, } = props;
+    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const [showTooltip, setShowTooltip] = useState(false);
     if (typeof defaultValue == "string") {
         if (download) {
@@ -16,11 +21,25 @@ export const FileUploadFieldWithoutValidation = (props) => {
                     }
                 }, children: [title && (_jsx("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", _jsx(DownloadIconSVG, {})] }));
         }
-        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", _jsx("div", { role: "button", tabIndex: 0, onClick: () => {
+        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), " ", _jsx("div", { role: "button", tabIndex: 0, onClick: () => {
+                        if (register) {
+                            register.onChange({
+                                target: {
+                                    value: defaultValue,
+                                },
+                            });
+                        }
                         window.open(defaultValue, "_blank");
                     }, onKeyDown: (event) => {
                         // Permite que el evento se active con la tecla Enter
                         if (event.key === "Enter") {
+                            if (register) {
+                                register.onChange({
+                                    target: {
+                                        value: defaultValue,
+                                    },
+                                });
+                            }
                             window.open(defaultValue, "_blank");
                         }
                     }, children: _jsx("img", { src: defaultValue, alt: name, className: `h-48 w-48 inline mr-1 pb-1`, style: {
@@ -44,11 +63,5 @@ export const FileUploadFieldWithoutValidation = (props) => {
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
     const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
-    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", name: name, id: id ?? name, disabled: disabled, readOnly: readOnly, accept: fileTypes.map((ft) => `.${ft}`).join(", "), onChange: handleInputChange, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
-};
-export const FileUploadField = (props) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return _jsx(FileUploadFieldWithoutValidation, { ...props });
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", name: name, id: id ?? name, disabled: disabled, readOnly: readOnly, accept: fileTypes.map((ft) => `.${ft}`).join(", "), onChange: handleInputChange, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
 };

package/dist/esm/Form/ReactZodForm/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, useSubmit } from "@remix-run/react";
+import { FormProvider, useForm, } from "react-hook-form";
+import { z } from "zod";
+const emptySchema = z.any();
+export const ReactZodForm = (props) => {
+    const { children, method = "post", schema = emptySchema, onSubmit, id, } = props;
+    const submit = useSubmit();
+    const methods = useForm({
+        resolver: zodResolver(schema),
+        mode: "onSubmit",
+    });
+    const handleSubmit = (data, event) => {
+        if (onSubmit) {
+            onSubmit(data, event);
+        }
+        else {
+            // If no onSubmit is provided, use Remix's submit function
+            submit(event?.target, { method });
+        }
+    };
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
+            //onSubmit={methods.handleSubmit(handleSubmit)}
+            method: method, id: id, children: children }) }));
+};
+export default ReactZodForm;