@zauru-sdk/components 1.0.99 → 1.0.101

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.101](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.100...v1.0.101) (2024-09-17)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.100](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.99...v1.0.100) (2024-09-14)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.99](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.98...v1.0.99) (2024-09-13)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Form/Checkbox/index.d.ts

@@ -2,16 +2,14 @@ import React from "react";
 type Props = {
     id?: string;
     name?: string;
-    formName?: string;
     label?: string;
     defaultValue?: boolean;
     onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => {
         stopUIChange: boolean;
     } | void;
     disabled?: boolean;
-    error?: string | undefined;
     borderColor?: string;
+    required?: boolean;
 };
-export declare const CheckboxWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/DatePicker/index.d.ts

@@ -1,7 +1,6 @@
 type Props = {
     id?: string;
     name: string;
-    formName?: string;
     title?: string;
     hint?: string;
     helpText?: string;
@@ -9,10 +8,9 @@ type Props = {
     onChange?: (value: string) => void;
     isClearable?: boolean;
     tabIndex?: number;
-    error?: string;
     disabled?: boolean;
     className?: string;
+    required?: boolean;
 };
-export declare const FormDatePickerWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const FormDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/FileUpload/index.d.ts

@@ -9,13 +9,12 @@ type Props = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     readOnly?: boolean;
-    error?: string | undefined;
     fileTypes?: string[];
     showAvailableTypes?: boolean;
     className?: string;
     defaultValue?: string | File;
     download?: boolean;
+    required?: boolean;
 };
-export declare const FileUploadFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/ReactZodForm/index.d.ts

@@ -0,0 +1,12 @@
+import { FieldValues, SubmitHandler } from "react-hook-form";
+import { ZodSchema } from "zod";
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    schema?: ZodSchema;
+    onSubmit?: SubmitHandler<FieldValues>;
+    id?: string;
+    method?: "post" | "put" | "delete" | "patch";
+};
+export declare const ReactZodForm: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ReactZodForm;

package/dist/Form/SelectField/index.d.ts

@@ -1,19 +1,16 @@
 import { SelectFieldOption } from "@zauru-sdk/types";
-import type { SingleValue, InputActionMeta } from "react-select";
 type Props = {
     id?: string;
-    formName?: string;
     name?: string;
     title?: string;
-    defaultValue?: SingleValue<SelectFieldOption>;
-    defaultValueMulti?: SingleValue<SelectFieldOption>[];
+    defaultValue?: SelectFieldOption;
+    defaultValueMulti?: SelectFieldOption[];
     helpText?: string;
     options: Array<SelectFieldOption>;
-    onChange?: (value: SingleValue<SelectFieldOption>) => void;
-    onChangeMulti?: (value: Array<SingleValue<SelectFieldOption>>) => void;
-    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    onChange?: (value: SelectFieldOption | null) => void;
+    onChangeMulti?: (value: SelectFieldOption[]) => void;
+    onInputChange?: (newValue: string) => void;
     isClearable?: boolean;
-    error?: string | undefined;
     disabled?: boolean;
     menuIsOpen?: boolean;
     readOnly?: boolean;
@@ -21,7 +18,7 @@ type Props = {
     loading?: boolean;
     hint?: string;
     className?: string;
+    required?: boolean;
 };
-export declare const SelectFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/TextArea/index.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 type Props = {
     id?: string;
     name: string;
-    formName?: string;
     title?: string;
     defaultValue?: string | number;
     hidden?: boolean;
@@ -12,12 +11,11 @@ type Props = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     disabled?: boolean;
     readOnly?: boolean;
-    error?: string | undefined;
     rows?: number;
     cols?: number;
     stopChangeEvents?: boolean;
     className?: string;
+    required?: boolean;
 };
-export declare const TextAreaWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const TextArea: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/TextField/index.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 type Props = {
     id?: string;
     name?: string;
-    formName?: string;
     title?: string;
     defaultValue?: string | number;
     hidden?: boolean;
@@ -13,13 +12,12 @@ type Props = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     disabled?: boolean;
     readOnly?: boolean;
-    error?: string;
     min?: string | number;
     integer?: boolean;
     stopChangeEvents?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    required?: boolean;
 };
-export declare const TextFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const TextField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/TimePicker/index.d.ts

@@ -8,9 +8,8 @@ type Props = {
     defaultValue?: string;
     onChange?: (value: string) => void;
     tabIndex?: number;
-    error?: string;
     disabled?: boolean;
+    required?: boolean;
 };
-export declare const FormTimePickerWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const FormTimePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/YesNo/index.d.ts

@@ -7,6 +7,7 @@ type Props = {
     helpText?: string;
     onChange?: (value: boolean) => void;
     disabled?: boolean;
+    required?: boolean;
 };
 export declare const YesNo: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/index.d.ts

@@ -5,10 +5,9 @@ export * from "./DynamicBaculoForm/index.js";
 export * from "./FieldContainer/index.js";
 export * from "./FileUpload/index.js";
 export * from "./FormButtons/index.js";
-export * from "./FormLayout/index.js";
 export * from "./SelectField/index.js";
 export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
-export * from "./RadioButtonGroup/index.js";
+export * from "./ReactZodForm/index.js";

package/dist/Layouts/homeLayout/index.d.ts

@@ -1,6 +1,8 @@
 type Props = {
     title?: string;
     description?: string;
+    loading?: boolean;
+    color?: "green" | "blue" | "red" | "purple" | "yellow";
 };
-export declare const HomeLayout: ({ title, description }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeLayout: ({ title, description, loading, color, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type ModalOption = "OK" | "CANCEL" | null;
 type ModalParams = {
     title: string;
-    description: React.ReactNode | (() => React.ReactNode);
+    description: React.ReactNode;
     okButtonText?: string;
     showOptions?: boolean;
 };

package/dist/Zendesk/zendesk.config.d.ts

@@ -6,4 +6,4 @@ export declare function zendeskJwt(current_user: {
 }, configuration: {
     zendeskJWTSecret: string;
     zendeskJWTKey: string;
-}): string;
+}): {};

package/dist/cjs/Alerts/StaticAlert.js

@@ -16,12 +16,6 @@ const getConfig = (type) => {
                 buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
                 path: ((0, jsx_runtime_1.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: ((0, jsx_runtime_1.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/cjs/Buttons/Button.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const index_js_1 = require("../index.js");
 const Button = (props) => {
     const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const formContext = (0, react_hook_form_1.useFormContext)();
+    const formHasErrors = formContext ? !formContext.formState.isValid : false;
+    const formErrors = formContext ? formContext.formState.errors : {};
     const COLORS = {
         green: {
             bg900: "bg-green-900",
@@ -40,8 +45,14 @@ const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    return ((0, jsx_runtime_1.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 = ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(index_js_1.WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
 };
 exports.Button = Button;

package/dist/cjs/DynamicTable/DynamicPrintTable.js

@@ -36,11 +36,11 @@ const errorAnimation = {
 const DynamicPrintTable = ({ forwardedRef, ...props }) => {
     const { items, onChange, className } = props;
     const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const createItemSelect = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)(index_js_2.SelectFieldWithoutValidation, { name: "item_select", isClearable: true, onChange: (value) => {
+    const createItemSelect = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)(index_js_2.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) => ((0, jsx_runtime_1.jsx)(index_js_1.TextFieldWithoutValidation, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
+    const createItemQuantity = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)(index_js_1.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) => ((0, jsx_runtime_1.jsx)("div", { children: defaultValue != "" ? defaultValue : "No hay etiqueta" }, rowIndex));

package/dist/cjs/DynamicTable/DynamicTable.js

@@ -173,7 +173,7 @@ const DynamicTable = ({ forwardedRef, ...props }, ref) => {
         return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "align-middle py-2 text-center", style: {
                         ...cellBordered,
                         ...pastelGrayBackground,
-                    }, children: intersectionTitle ?? "" }), cols.map((col) => ((0, jsx_runtime_1.jsx)("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.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 && ((0, jsx_runtime_1.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))), (0, jsx_runtime_1.jsx)("th", { children: (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.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 && ((0, jsx_runtime_1.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))), (0, jsx_runtime_1.jsx)("th", { children: (0, jsx_runtime_1.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();
@@ -183,14 +183,14 @@ const DynamicTable = ({ forwardedRef, ...props }, ref) => {
                         textOverflow: "ellipsis",
                         msTextOverflow: "ellipsis",
                         maxWidth: "200px",
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.TextField, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? ((0, jsx_runtime_1.jsx)(index_js_1.TextAreaWithoutValidation, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : ((0, jsx_runtime_1.jsx)(index_js_3.CheckboxWithoutValidation, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
+                    return ((0, jsx_runtime_1.jsx)("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? ((0, jsx_runtime_1.jsx)(index_js_1.TextArea, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : ((0, jsx_runtime_1.jsx)(index_js_3.CheckBox, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
                                 if (value) {
                                     return handleValidation(cellId, col.id, rowId);
                                 }

package/dist/cjs/DynamicTable/GenericDynamicTable.js

@@ -64,7 +64,6 @@ 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) => {
@@ -97,10 +96,10 @@ const GenericDynamicTable = (props) => {
                         return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle p-1", children: (0, jsx_runtime_1.jsx)("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
                     }
                     const FieldComponent = column.type === "textField"
-                        ? index_js_2.TextFieldWithoutValidation
+                        ? index_js_2.TextField
                         : column.type === "checkbox"
-                            ? index_js_3.CheckboxWithoutValidation
-                            : index_js_1.SelectFieldWithoutValidation;
+                            ? index_js_3.CheckBox
+                            : index_js_1.SelectField;
                     const setTableValue = (columnName, newValue) => {
                         setTableData((prevState) => {
                             // Encontrar el índice de la fila que está cambiando
@@ -185,7 +184,7 @@ const GenericDynamicTable = (props) => {
             setFilteredTableData(tableData);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GenericDynamicTableErrorComponent, { name: name }), (0, jsx_runtime_1.jsx)("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), (0, jsx_runtime_1.jsx)("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), (0, jsx_runtime_1.jsxs)("div", { className: `${className}`, children: [searcheables.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(index_js_2.TextFieldWithoutValidation, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GenericDynamicTableErrorComponent, { name: name }), (0, jsx_runtime_1.jsx)("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), (0, jsx_runtime_1.jsx)("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), (0, jsx_runtime_1.jsxs)("div", { className: `${className}`, children: [searcheables.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(index_js_2.TextField, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
                                 .map((x) => x.label)
                                 .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { children: renderHeader() }), (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }), footerRow && !editable ? ((0, jsx_runtime_1.jsx)("tfoot", { className: "border-t-2 border-black", children: (0, jsx_runtime_1.jsx)("tr", { children: Object.keys(footerRow ?? {})?.map((x, indx) => {
                                         return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle", children: footerRow[x] }, indx));

package/dist/cjs/Footer/Footer.js

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

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

@@ -1,17 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckBox = exports.CheckboxWithoutValidation = void 0;
+exports.CheckBox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const redux_1 = require("@zauru-sdk/redux");
 const react_1 = require("react");
-const CheckboxWithoutValidation = (props) => {
-    const { id, name, defaultValue = false, onChange, disabled = false, error, label, } = props;
+const react_hook_form_1 = require("react-hook-form");
+const CheckBox = (props) => {
+    const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, } = props;
     const [checked, setChecked] = (0, react_1.useState)(defaultValue);
     (0, react_1.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) {
@@ -20,20 +23,17 @@ const CheckboxWithoutValidation = (props) => {
         }
         setChecked(isChecked);
     };
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.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 = ((0, jsx_runtime_1.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 = ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-6 sm:col-span-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: label }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
-};
-exports.CheckboxWithoutValidation = CheckboxWithoutValidation;
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-const CheckBox = (props) => {
-    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return (0, jsx_runtime_1.jsx)(exports.CheckboxWithoutValidation, { ...props });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-6 sm:col-span-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] }))] }));
 };
 exports.CheckBox = CheckBox;

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

@@ -9,6 +9,6 @@ const Checklist = ({ items, onChange }) => {
             onChange(name, value);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { children: items.map((item) => ((0, jsx_runtime_1.jsx)(index_js_1.CheckboxWithoutValidation, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: items.map((item) => ((0, jsx_runtime_1.jsx)(index_js_1.CheckBox, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
 };
 exports.Checklist = Checklist;

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

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormDatePicker = exports.FormDatePickerWithoutValidation = void 0;
+exports.FormDatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@zauru-sdk/icons");
-const redux_1 = require("@zauru-sdk/redux");
-const FormDatePickerWithoutValidation = (props) => {
-    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, className = "", isClearable = false, } = props;
+const react_hook_form_1 = require("react-hook-form");
+const FormDatePicker = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, disabled = false, className = "", isClearable = false, required = false, } = props;
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.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`;
@@ -21,16 +26,12 @@ const FormDatePickerWithoutValidation = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, name: name, tabIndex: tabIndex, type: "date", onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconSVG, {}) }), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: (0, jsx_runtime_1.jsx)(icons_1.CloseSvgIcon, {}) })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
-};
-exports.FormDatePickerWithoutValidation = FormDatePickerWithoutValidation;
-const FormDatePicker = (props) => {
-    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return (0, jsx_runtime_1.jsx)(exports.FormDatePickerWithoutValidation, { ...props });
+                            if (register) {
+                                register.onChange(e);
+                            }
+                        } }), value && isClearable && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: (0, jsx_runtime_1.jsx)(icons_1.CloseSvgIcon, {}) })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };
 exports.FormDatePicker = FormDatePicker;

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

@@ -36,7 +36,7 @@ function DynamicBaculoForm(props) {
                 return ((0, jsx_runtime_1.jsx)(index_js_11.SubContainer, { title: field.name, children: (0, jsx_runtime_1.jsx)(GenericDynamicTable_js_1.GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
             }
             case "zauru_data":
-                return ((0, jsx_runtime_1.jsx)(index_js_1.TextFieldWithoutValidation, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
+                return ((0, jsx_runtime_1.jsx)(index_js_1.TextField, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
             case "hour":
                 return ((0, jsx_runtime_1.jsx)(index_js_9.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/cjs/Form/FileUpload/index.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadField = exports.FileUploadFieldWithoutValidation = void 0;
+exports.FileUploadField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@zauru-sdk/icons");
-const redux_1 = require("@zauru-sdk/redux");
 const react_1 = require("react");
-const FileUploadFieldWithoutValidation = (props) => {
-    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, error, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, } = props;
+const react_hook_form_1 = require("react-hook-form");
+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 }, } = (0, react_hook_form_1.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] = (0, react_1.useState)(false);
     if (typeof defaultValue == "string") {
         if (download) {
@@ -19,11 +24,25 @@ const FileUploadFieldWithoutValidation = (props) => {
                     }
                 }, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", (0, jsx_runtime_1.jsx)(icons_1.DownloadIconSVG, {})] }));
         }
-        return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", (0, jsx_runtime_1.jsx)("div", { role: "button", tabIndex: 0, onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), " ", (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("img", { src: defaultValue, alt: name, className: `h-48 w-48 inline mr-1 pb-1`, style: {
@@ -47,13 +66,6 @@ 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 ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hintMessage && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
-};
-exports.FileUploadFieldWithoutValidation = FileUploadFieldWithoutValidation;
-const FileUploadField = (props) => {
-    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return (0, jsx_runtime_1.jsx)(exports.FileUploadFieldWithoutValidation, { ...props });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
 };
 exports.FileUploadField = FileUploadField;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactZodForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("@hookform/resolvers/zod");
+const react_1 = require("@remix-run/react");
+const react_hook_form_1 = require("react-hook-form");
+const zod_2 = require("zod");
+const emptySchema = zod_2.z.any();
+const ReactZodForm = (props) => {
+    const { children, method = "post", schema = emptySchema, onSubmit, id, } = props;
+    const submit = (0, react_1.useSubmit)();
+    const methods = (0, react_hook_form_1.useForm)({
+        resolver: (0, zod_1.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 ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
+            //onSubmit={methods.handleSubmit(handleSubmit)}
+            method: method, id: id, children: children }) }));
+};
+exports.ReactZodForm = ReactZodForm;
+exports.default = exports.ReactZodForm;