@zauru-sdk/components 2.0.2 → 2.0.4

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.
 
+## [2.0.4](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.3...v2.0.4) (2024-10-03)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [2.0.3](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.2...v2.0.3) (2024-10-03)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.1...v2.0.2) (2024-10-03)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
 import { GenericDynamicTableColumn, RowDataType, SelectFieldOption } from "@zauru-sdk/types";
+export type FooterColumnConfig = {
+    content: React.ReactNode;
+    className?: string;
+};
 type Props = {
     name?: string;
     className?: string;
     columns: GenericDynamicTableColumn[];
     onChange?: (tableState?: any[]) => void;
     defaultValue?: RowDataType[];
-    footerRow?: RowDataType;
+    footerRow?: FooterColumnConfig[];
     thCSSProperties?: React.CSSProperties;
     thElementsClassName?: string;
     editable?: boolean;
@@ -16,6 +20,58 @@ type Props = {
     defaultItemsPerPage?: number;
     itemsPerPageOptions?: number[];
     withoutBg?: boolean;
+    orientation?: "horizontal" | "vertical";
+    maxRows?: number;
 };
+/**
+ *
+ * @param props
+ * @returns
+ *
+ * @example
+ *<GenericDynamicTable
+    name="invoice_details"
+    withoutBg
+    editable={!show}
+    defaultValue={
+      invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
+    }
+    columns={[
+      {
+        label: "Producto",
+        name: "item_id",
+        type: "selectField",
+        options: productOptions,
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = getProductPrice(value);
+          setTableValue("price", price);
+        },
+        headerClassName: "text-center font-bold",
+        cellClassName: "text-center",
+      },
+      {
+        label: "Cantidad",
+        name: "quantity",
+        type: "textField",
+        textFieldType: "number",
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = rowData["price"] ?? 0;
+          const quantity = Number(value) || 0;
+          setTableValue("total", price * quantity);
+        },
+        headerClassName: "text-right font-semibold",
+        cellClassName: "text-right",
+      }
+    ]}
+    footerRow={[
+      { content: "Total", className: "text-left font-bold" },
+      { content: calculateTotal(), className: "text-center" },
+      { content: "", className: "text-center" }
+    ]}
+    maxRows={2}
+  />
+ */
 export declare const GenericDynamicTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/NavBar/NavBar.types.d.ts

@@ -41,4 +41,5 @@ export type EntityProps = {
     name?: string;
     color: ColorInterface;
     options: any[];
+    specialColor?: ColorInterface;
 };

package/dist/Skeletons/LoadingWindow.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface LoadingItem {
+    name: string;
+    loading: boolean;
+}
+interface LoadingWindowProps {
+    loadingItems?: LoadingItem[];
+    description?: string;
+}
+export declare const LoadingWindow: React.FC<LoadingWindowProps>;
+export default LoadingWindow;

package/dist/Skeletons/index.d.ts

@@ -1 +1,2 @@
 export * from "./LoadingInputSkeleton.js";
+export * from "./LoadingWindow.js";

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -5,18 +5,68 @@ 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";
 import { generateClientUUID } from "@zauru-sdk/common";
 import { LoadingInputSkeleton } from "../Skeletons/index.js";
 import { WithTooltip } from "../WithTooltip/index.js";
 import { TrashSvg } from "@zauru-sdk/icons";
-const GenericDynamicTableErrorComponent = ({ name, formName, }) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[formName ?? "-1"]?.[name ?? "-1"];
-    return error ? (_jsxs("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })) : (_jsx(_Fragment, {}));
+import { useFormContext } from "react-hook-form";
+const GenericDynamicTableErrorComponent = ({ name }) => {
+    const { formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[name ?? "-1"] : undefined;
+    return error ? (_jsxs("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString()] })) : (_jsx(_Fragment, {}));
 };
+/**
+ *
+ * @param props
+ * @returns
+ *
+ * @example
+ *<GenericDynamicTable
+    name="invoice_details"
+    withoutBg
+    editable={!show}
+    defaultValue={
+      invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
+    }
+    columns={[
+      {
+        label: "Producto",
+        name: "item_id",
+        type: "selectField",
+        options: productOptions,
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = getProductPrice(value);
+          setTableValue("price", price);
+        },
+        headerClassName: "text-center font-bold",
+        cellClassName: "text-center",
+      },
+      {
+        label: "Cantidad",
+        name: "quantity",
+        type: "textField",
+        textFieldType: "number",
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = rowData["price"] ?? 0;
+          const quantity = Number(value) || 0;
+          setTableValue("total", price * quantity);
+        },
+        headerClassName: "text-right font-semibold",
+        cellClassName: "text-right",
+      }
+    ]}
+    footerRow={[
+      { content: "Total", className: "text-left font-bold" },
+      { content: calculateTotal(), className: "text-center" },
+      { content: "", className: "text-center" }
+    ]}
+    maxRows={2}
+  />
+ */
 export const GenericDynamicTable = (props) => {
-    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, } = props;
+    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, } = props;
     const [tableData, setTableData] = useState(defaultValue);
     const [deletedData, setDeletedData] = useState([]);
     const [search, setSearch] = useState("");
@@ -38,6 +88,9 @@ export const GenericDynamicTable = (props) => {
         return Math.ceil(filteredTableData.length / itemsPerPage);
     };
     const addRow = () => {
+        if (maxRows && tableData.length >= maxRows) {
+            return;
+        }
         const defs = {};
         columns.forEach((x) => {
             defs[`${x.name}`] =
@@ -64,76 +117,76 @@ export const GenericDynamicTable = (props) => {
         setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
     };
     const handleChange = (name, value, rowId) => {
-        // Encontrar el índice de la fila que está cambiando
-        const rowIndex = tableData.findIndex((x) => x.id === rowId);
-        // Crear una copia del objeto en esa fila
-        const updatedRow = { ...tableData[rowIndex], [name]: value };
-        // Copiar todo el array
-        const updatedData = [...tableData];
-        // Reemplazar el objeto en la fila que cambió
-        updatedData[rowIndex] = updatedRow;
-        // Actualizar el estado con el nuevo array
-        setTableData(updatedData);
-        onChange && onChange(updatedData);
+        setTableData((prevData) => {
+            const updatedData = prevData.map((row) => {
+                if (row.id === rowId) {
+                    return { ...row, [name]: value };
+                }
+                return row;
+            });
+            onChange && onChange(updatedData);
+            return updatedData;
+        });
+    };
+    const renderHeader = () => {
+        if (orientation === "horizontal") {
+            return (_jsxs("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
+                        const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+                        return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, style: { width: `${ancho}%` }, children: column.label }, index));
+                    }), editable && _jsx("th", { style: { width: "4%" } })] }));
+        }
+        else {
+            return null;
+        }
     };
-    const renderHeader = () => (_jsxs("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
-                const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
-                return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName}`, style: { width: `${ancho}%` }, children: column.label }, index));
-            }), editable && _jsx("th", { style: { width: "4%" } })] }));
     const renderRow = (rowData, index) => {
-        return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => {
-                    if (loading) {
-                        return (_jsx("td", { className: "align-middle p-1", children: _jsx(LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
-                    }
-                    const tempVal = rowData[column.name];
-                    const defaultVal = column.type === "selectField"
-                        ? column.options?.find((x) => x.value === tempVal)
-                        : tempVal;
-                    if (column.type === "label") {
-                        return (_jsx("td", { className: "align-middle p-1", children: _jsx("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
-                    }
-                    const FieldComponent = column.type === "textField"
-                        ? TextField
-                        : column.type === "checkbox"
-                            ? CheckBox
-                            : SelectField;
-                    const setTableValue = (columnName, newValue) => {
-                        setTableData((prevState) => {
-                            // Encontrar el índice de la fila que está cambiando
-                            const rowIndex = prevState.findIndex((x) => x.id === rowData.id);
-                            // Crear una copia del objeto en esa fila
-                            const updatedRow = {
-                                ...prevState[rowIndex],
-                                [columnName]: newValue,
-                            };
-                            // Copiar todo el array
-                            const updatedData = [...prevState];
-                            // Reemplazar el objeto en la fila que cambió
-                            updatedData[rowIndex] = updatedRow;
-                            return updatedData;
-                        });
-                    };
-                    return (_jsx("td", { className: "align-middle p-1", children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { 
-                            //name={column.name}
-                            type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
-                                const sendValue = value?.value ?? value;
-                                handleChange(column.name, sendValue, rowData.id);
-                                column.onChange &&
-                                    column.onChange(rowData, sendValue, setTableValue);
-                            }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
-                }), editable && (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                createModal({
-                                    title: "¿Está seguro que quiere eliminar este registro?",
-                                    description: "Una vez eliminada la información no podrá ser recuperada.",
-                                }).then((response) => {
-                                    if (response === "OK") {
-                                        removeRow(rowData.id);
-                                    }
-                                });
-                            }, type: "button", children: _jsx(TrashSvg, {}) }) }) }))] }, rowData.id));
+        if (orientation === "horizontal") {
+            return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => renderCell(rowData, column)), editable && renderDeleteButton(rowData)] }, rowData.id));
+        }
+        else {
+            return columns.map((column) => (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, children: column.label }), renderCell(rowData, column), editable &&
+                        column === columns[columns.length - 1] &&
+                        renderDeleteButton(rowData)] }, `${rowData.id}-${column.name}`)));
+        }
     };
+    const renderCell = (rowData, column) => {
+        if (loading) {
+            return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: _jsx(LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
+        }
+        const tempVal = rowData[column.name];
+        const defaultVal = column.type === "selectField"
+            ? column.options?.find((x) => x.value === tempVal)
+            : tempVal;
+        if (column.type === "label") {
+            return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: _jsx("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
+        }
+        const FieldComponent = column.type === "textField"
+            ? TextField
+            : column.type === "checkbox"
+                ? CheckBox
+                : SelectField;
+        const setTableValue = (columnName, newValue) => {
+            handleChange(columnName, newValue, rowData.id);
+        };
+        return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { name: `${rowData.id}-${column.name}`, type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
+                    const sendValue = value?.value ?? value;
+                    handleChange(column.name, sendValue, rowData.id);
+                    column.onChange &&
+                        column.onChange(rowData, sendValue, setTableValue);
+                }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
+    };
+    const renderDeleteButton = (rowData) => (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    createModal({
+                        title: "¿Está seguro que quiere eliminar este registro?",
+                        description: "Una vez eliminada la información no podrá ser recuperada.",
+                    }).then((response) => {
+                        if (response === "OK") {
+                            removeRow(rowData.id);
+                        }
+                    });
+                }, type: "button", children: _jsx(TrashSvg, {}) }) }) }));
     const renderRows = () => {
         let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
         if (loading) {
@@ -183,13 +236,11 @@ export const GenericDynamicTable = (props) => {
     };
     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));
-                                    }) }) })) : editable ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), editable && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
                                                 event.preventDefault();
                                                 event.stopPropagation();
                                                 addRow();
-                                            }, type: "button", children: "+" }) }) }) })) : (_jsx(_Fragment, {}))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
+                                            }, type: "button", children: "+" })) }) }) })), footerRow && (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsx("tr", { children: footerRow.map((column, index) => (_jsx("td", { colSpan: orientation === "vertical" ? 2 : 1, className: `align-middle ${column.className || ""}`, children: column.content }, index))) }) }))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
                                         setItemsPerPage(Number(e.target.value));
                                         setCurrentPage(1); // resetear la página al cambiar los elementos por página
                                     }, children: itemsPerPageOptions.map((option) => (_jsxs("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));

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

@@ -112,6 +112,11 @@ export const SelectField = (props) => {
                     handleOptionClick(filteredOptions[0]);
                 }
             }
+            else if (isTabPressed) {
+                if (highlightedIndex >= 0) {
+                    handleOptionClick(filteredOptions[highlightedIndex]);
+                }
+            }
             setIsTabPressed(false);
             setIsEnterPressed(false);
             setIsSearching(false);

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

@@ -3,7 +3,7 @@ import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 export const TextField = (props) => {
-    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className, hint, required, } = props;
+    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className = "", hint, required, } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe

package/dist/esm/NavBar/NavBar.js

@@ -3,11 +3,11 @@ import React, { useState, useEffect } from "react";
 import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils.js";
 import { Link, useNavigate } from "@remix-run/react";
-const OptionsDropDownButton = ({ color, options, name }) => {
+const OptionsDropDownButton = ({ color, options, name, specialColor, }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
-    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_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 ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _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, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
+    return (_jsxs("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: [_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 ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _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, index) => (_jsx(React.Fragment, { children: option }, index))) })] }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(Link, { to: x.link, className: "hover:bg-red-100", children: x.name }, index))) })) : (_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: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, specialColor: specialColor, options: childrens.map((x, index) => (_jsx(Link, { to: x.link, className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, children: x.name }, index))) })) : (_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: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
 export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);

package/dist/esm/Skeletons/LoadingWindow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+export const LoadingWindow = ({ loadingItems, description = "Por favor, espere mientras se carga la página.", }) => {
+    return (_jsx("div", { className: "min-h-screen bg-gray-100 flex flex-col justify-center items-center", children: _jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, className: "text-center flex flex-col items-center", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-3xl font-bold text-gray-800 mb-4", children: "Cargando..." }), _jsx("p", { className: "text-gray-600 mb-4", children: description }), loadingItems && (_jsx("ul", { className: "text-left mb-4", children: loadingItems.map((item, index) => (_jsxs("li", { className: "flex items-center mb-2", children: [_jsx("svg", { className: `${item.loading ? "" : "hidden"} w-5 h-5 text-blue-500 mr-2 animate-spin loading-spinner`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), _jsx("svg", { className: `${item.loading ? "hidden" : ""} w-5 h-5 text-green-500 mr-2 check-mark`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), _jsx("span", { children: item.name })] }, index))) })), _jsx(motion.div, { animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" }, className: "mt-8", children: _jsx("svg", { className: "w-12 h-12 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx(motion.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" } }) }) })] }) }));
+};
+export default LoadingWindow;

package/dist/esm/Skeletons/index.js

@@ -1 +1,2 @@
 export * from "./LoadingInputSkeleton.js";
+export * from "./LoadingWindow.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -33,11 +33,11 @@
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.0.2",
-    "@zauru-sdk/hooks": "^2.0.2",
+    "@zauru-sdk/common": "^2.0.4",
+    "@zauru-sdk/hooks": "^2.0.4",
     "@zauru-sdk/icons": "^2.0.0",
-    "@zauru-sdk/types": "^2.0.0",
-    "@zauru-sdk/utils": "^2.0.2",
+    "@zauru-sdk/types": "^2.0.4",
+    "@zauru-sdk/utils": "^2.0.4",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "5caadc022d1be3bbcaf6e73de37524a6b06c806c"
+  "gitHead": "78f1e67e363a88974b8b74b5c0f0637fa3782ef0"
 }

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -9,11 +9,16 @@ import {
   RowDataType,
   SelectFieldOption,
 } from "@zauru-sdk/types";
-import { useAppSelector } from "@zauru-sdk/redux";
 import { generateClientUUID } from "@zauru-sdk/common";
 import { LoadingInputSkeleton } from "../Skeletons/index.js";
 import { WithTooltip } from "../WithTooltip/index.js";
 import { TrashSvg } from "@zauru-sdk/icons";
+import { useFormContext } from "react-hook-form";
+
+export type FooterColumnConfig = {
+  content: React.ReactNode;
+  className?: string;
+};
 
 type Props = {
   name?: string;
@@ -21,7 +26,7 @@ type Props = {
   columns: GenericDynamicTableColumn[];
   onChange?: (tableState?: any[]) => void;
   defaultValue?: RowDataType[];
-  footerRow?: RowDataType;
+  footerRow?: FooterColumnConfig[];
   thCSSProperties?: React.CSSProperties;
   thElementsClassName?: string;
   editable?: boolean;
@@ -31,27 +36,76 @@ type Props = {
   defaultItemsPerPage?: number;
   itemsPerPageOptions?: number[];
   withoutBg?: boolean;
+  orientation?: "horizontal" | "vertical";
+  maxRows?: number;
 };
 
-const GenericDynamicTableErrorComponent = ({
-  name,
-  formName,
-}: {
-  name: string;
-  formName?: string;
-}) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[formName ?? "-1"]?.[name ?? "-1"];
+const GenericDynamicTableErrorComponent = ({ name }: { name: string }) => {
+  const {
+    formState: { errors },
+  } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+  const error = errors ? errors[name ?? "-1"] : undefined;
 
   return error ? (
     <p className={`mt-2 text-sm text-red-600 dark:text-red-500`}>
-      <span className="font-medium">Oops!</span> {error}
+      <span className="font-medium">Oops!</span> {error?.message?.toString()}
     </p>
   ) : (
     <></>
   );
 };
 
+/**
+ *
+ * @param props
+ * @returns
+ *
+ * @example
+ *<GenericDynamicTable
+    name="invoice_details"
+    withoutBg
+    editable={!show}
+    defaultValue={
+      invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
+    }
+    columns={[
+      {
+        label: "Producto",
+        name: "item_id",
+        type: "selectField",
+        options: productOptions,
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = getProductPrice(value);
+          setTableValue("price", price);
+        },
+        headerClassName: "text-center font-bold",
+        cellClassName: "text-center",
+      },
+      {
+        label: "Cantidad",
+        name: "quantity",
+        type: "textField",
+        textFieldType: "number",
+        disabled: show,
+        onChange: (rowData, value, setTableValue) => {
+          const price = rowData["price"] ?? 0;
+          const quantity = Number(value) || 0;
+          setTableValue("total", price * quantity);
+        },
+        headerClassName: "text-right font-semibold",
+        cellClassName: "text-right",
+      }
+    ]}
+    footerRow={[
+      { content: "Total", className: "text-left font-bold" },
+      { content: calculateTotal(), className: "text-center" },
+      { content: "", className: "text-center" }
+    ]}
+    maxRows={2}
+  />
+ */
+
 export const GenericDynamicTable = (props: Props) => {
   const {
     columns,
@@ -69,6 +123,8 @@ export const GenericDynamicTable = (props: Props) => {
     itemsPerPageOptions = [10, 50, 100],
     name,
     withoutBg = false,
+    orientation = "horizontal",
+    maxRows,
   } = props;
 
   const [tableData, setTableData] = useState<RowDataType[]>(defaultValue);
@@ -98,6 +154,9 @@ export const GenericDynamicTable = (props: Props) => {
   };
 
   const addRow = () => {
+    if (maxRows && tableData.length >= maxRows) {
+      return;
+    }
     const defs: { [key: string]: any } = {};
     columns.forEach((x) => {
       defs[`${x.name}`] =
@@ -126,161 +185,176 @@ export const GenericDynamicTable = (props: Props) => {
   };
 
   const handleChange = (name: string, value: any, rowId: string) => {
-    // Encontrar el índice de la fila que está cambiando
-    const rowIndex = tableData.findIndex((x) => x.id === rowId);
-
-    // Crear una copia del objeto en esa fila
-    const updatedRow = { ...tableData[rowIndex], [name]: value };
-
-    // Copiar todo el array
-    const updatedData = [...tableData];
-
-    // Reemplazar el objeto en la fila que cambió
-    updatedData[rowIndex] = updatedRow;
+    setTableData((prevData) => {
+      const updatedData = prevData.map((row) => {
+        if (row.id === rowId) {
+          return { ...row, [name]: value };
+        }
+        return row;
+      });
+      onChange && onChange(updatedData);
+      return updatedData;
+    });
+  };
 
-    // Actualizar el estado con el nuevo array
-    setTableData(updatedData);
-    onChange && onChange(updatedData);
+  const renderHeader = () => {
+    if (orientation === "horizontal") {
+      return (
+        <tr style={{ ...thCSSProperties }}>
+          {columns.map((column, index) => {
+            const ancho =
+              column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+            return (
+              <th
+                key={index}
+                className={`text-left align-middle p-2 ${thElementsClassName} ${
+                  column.headerClassName || ""
+                }`}
+                style={{ width: `${ancho}%` }}
+              >
+                {column.label}
+              </th>
+            );
+          })}
+          {editable && <th style={{ width: "4%" }}></th>}
+        </tr>
+      );
+    } else {
+      return null;
+    }
   };
 
-  const renderHeader = () => (
-    <tr style={{ ...thCSSProperties }}>
-      {columns.map((column, index) => {
-        const ancho =
-          column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
-        return (
+  const renderRow = (rowData: RowDataType, index: number) => {
+    if (orientation === "horizontal") {
+      return (
+        <tr
+          key={rowData.id}
+          className={index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""}
+        >
+          {columns.map((column) => renderCell(rowData, column))}
+          {editable && renderDeleteButton(rowData)}
+        </tr>
+      );
+    } else {
+      return columns.map((column) => (
+        <tr
+          key={`${rowData.id}-${column.name}`}
+          className={index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""}
+        >
           <th
-            key={index}
-            className={`text-left align-middle p-2 ${thElementsClassName}`}
-            style={{ width: `${ancho}%` }}
+            className={`text-left align-middle p-2 ${thElementsClassName} ${
+              column.headerClassName || ""
+            }`}
           >
             {column.label}
           </th>
-        );
-      })}
-      {editable && <th style={{ width: "4%" }}></th>}
-    </tr>
-  );
-
-  const renderRow = (rowData: RowDataType, index: number) => {
-    return (
-      <tr
-        key={rowData.id}
-        className={index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""}
-      >
-        {columns.map((column) => {
-          if (loading) {
-            return (
-              <td
-                key={`${rowData.id}-${column.name}`}
-                className="align-middle p-1"
-              >
-                <LoadingInputSkeleton />
-              </td>
-            );
-          }
-          const tempVal = rowData[column.name as any];
+          {renderCell(rowData, column)}
+          {editable &&
+            column === columns[columns.length - 1] &&
+            renderDeleteButton(rowData)}
+        </tr>
+      ));
+    }
+  };
 
-          const defaultVal =
-            column.type === "selectField"
-              ? column.options?.find((x) => x.value === tempVal)
-              : tempVal;
+  const renderCell = (
+    rowData: RowDataType,
+    column: GenericDynamicTableColumn
+  ) => {
+    if (loading) {
+      return (
+        <td
+          key={`${rowData.id}-${column.name}`}
+          className={`align-middle p-1 ${column.cellClassName || ""}`}
+        >
+          <LoadingInputSkeleton />
+        </td>
+      );
+    }
+    const tempVal = rowData[column.name as any];
 
-          if (column.type === "label") {
-            return (
-              <td
-                key={`${rowData.id}-${column.name}`}
-                className="align-middle p-1"
-              >
-                <div>{defaultVal}</div>
-              </td>
-            );
-          }
+    const defaultVal =
+      column.type === "selectField"
+        ? column.options?.find((x) => x.value === tempVal)
+        : tempVal;
 
-          const FieldComponent =
-            column.type === "textField"
-              ? TextField
-              : column.type === "checkbox"
-              ? CheckBox
-              : SelectField;
+    if (column.type === "label") {
+      return (
+        <td
+          key={`${rowData.id}-${column.name}`}
+          className={`align-middle p-1 ${column.cellClassName || ""}`}
+        >
+          <div>{defaultVal}</div>
+        </td>
+      );
+    }
 
-          const setTableValue = (columnName: string, newValue: any) => {
-            setTableData((prevState) => {
-              // Encontrar el índice de la fila que está cambiando
-              const rowIndex = prevState.findIndex((x) => x.id === rowData.id);
-              // Crear una copia del objeto en esa fila
-              const updatedRow = {
-                ...prevState[rowIndex],
-                [columnName]: newValue,
-              };
-              // Copiar todo el array
-              const updatedData = [...prevState];
+    const FieldComponent =
+      column.type === "textField"
+        ? TextField
+        : column.type === "checkbox"
+        ? CheckBox
+        : SelectField;
 
-              // Reemplazar el objeto en la fila que cambió
-              updatedData[rowIndex] = updatedRow;
-              return updatedData;
-            });
-          };
+    const setTableValue = (columnName: string, newValue: any) => {
+      handleChange(columnName, newValue, rowData.id);
+    };
 
-          return (
-            <td
-              key={`${rowData.id}-${column.name}`}
-              className="align-middle p-1"
-            >
-              {column.loadingOptions ? (
-                <LoadingInputSkeleton />
-              ) : (
-                <FieldComponent
-                  key={`${rowData.id}-${column.name}`}
-                  //name={column.name}
-                  type={column.textFieldType}
-                  integer={!!column.integer}
-                  disabled={column.disabled}
-                  isClearable
-                  onChange={(value: any) => {
-                    const sendValue = value?.value ?? value;
-                    handleChange(column.name, sendValue, rowData.id);
-                    column.onChange &&
-                      column.onChange(rowData, sendValue, setTableValue);
-                  }}
-                  defaultValue={defaultVal}
-                  options={column.options ?? []}
-                />
-              )}
-            </td>
-          );
-        })}
-        {editable && (
-          <td className="align-middle w-16">
-            <WithTooltip text="Eliminar">
-              <button
-                className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
-                onClick={(
-                  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-                ) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  createModal({
-                    title: "¿Está seguro que quiere eliminar este registro?",
-                    description:
-                      "Una vez eliminada la información no podrá ser recuperada.",
-                  }).then((response) => {
-                    if (response === "OK") {
-                      removeRow(rowData.id);
-                    }
-                  });
-                }}
-                type="button"
-              >
-                <TrashSvg />
-              </button>
-            </WithTooltip>
-          </td>
+    return (
+      <td
+        key={`${rowData.id}-${column.name}`}
+        className={`align-middle p-1 ${column.cellClassName || ""}`}
+      >
+        {column.loadingOptions ? (
+          <LoadingInputSkeleton />
+        ) : (
+          <FieldComponent
+            key={`${rowData.id}-${column.name}`}
+            name={`${rowData.id}-${column.name}`}
+            type={column.textFieldType}
+            integer={!!column.integer}
+            disabled={column.disabled}
+            isClearable
+            onChange={(value: any) => {
+              const sendValue = value?.value ?? value;
+              handleChange(column.name, sendValue, rowData.id);
+              column.onChange &&
+                column.onChange(rowData, sendValue, setTableValue);
+            }}
+            defaultValue={defaultVal}
+            options={column.options ?? []}
+          />
         )}
-      </tr>
+      </td>
     );
   };
 
+  const renderDeleteButton = (rowData: RowDataType) => (
+    <td className="align-middle w-16">
+      <WithTooltip text="Eliminar">
+        <button
+          className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
+          onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            event.preventDefault();
+            event.stopPropagation();
+            createModal({
+              title: "¿Está seguro que quiere eliminar este registro?",
+              description:
+                "Una vez eliminada la información no podrá ser recuperada.",
+            }).then((response) => {
+              if (response === "OK") {
+                removeRow(rowData.id);
+              }
+            });
+          }}
+          type="button"
+        >
+          <TrashSvg />
+        </button>
+      </WithTooltip>
+    </td>
+  );
+
   const renderRows = () => {
     let mapeable = filteredTableData.slice(
       (currentPage - 1) * itemsPerPage,
@@ -372,42 +446,50 @@ export const GenericDynamicTable = (props: Props) => {
           </div>
         )}
         <table className="w-full">
-          <thead>{renderHeader()}</thead>
+          {orientation === "horizontal" && <thead>{renderHeader()}</thead>}
           <tbody>{renderRows()}</tbody>
-          {footerRow && !editable ? (
-            <tfoot className="border-t-2 border-black">
+          {editable && (
+            <tfoot>
               <tr>
-                {Object.keys(footerRow ?? {})?.map((x, indx) => {
-                  return (
-                    <td className="align-middle" key={indx}>
-                      {(footerRow as any)[x]}
-                    </td>
-                  );
-                })}
+                <td
+                  colSpan={
+                    orientation === "horizontal" ? columns.length + 1 : 2
+                  }
+                  className="align-middle"
+                >
+                  {(!maxRows || tableData.length < maxRows) && (
+                    <button
+                      className="bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded"
+                      onClick={(
+                        event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                      ) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        addRow();
+                      }}
+                      type="button"
+                    >
+                      +
+                    </button>
+                  )}
+                </td>
               </tr>
             </tfoot>
-          ) : editable ? (
-            <tfoot>
+          )}
+          {footerRow && (
+            <tfoot className="border-t-2 border-black">
               <tr>
-                <td className="align-middle">
-                  <button
-                    className="bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded"
-                    onClick={(
-                      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-                    ) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      addRow();
-                    }}
-                    type="button"
+                {footerRow.map((column, index) => (
+                  <td
+                    key={index}
+                    colSpan={orientation === "vertical" ? 2 : 1}
+                    className={`align-middle ${column.className || ""}`}
                   >
-                    +
-                  </button>
-                </td>
+                    {column.content}
+                  </td>
+                ))}
               </tr>
             </tfoot>
-          ) : (
-            <></>
           )}
         </table>
         {paginated && totalPages() > 1 && (

package/src/Form/SelectField/index.tsx

@@ -178,7 +178,12 @@ export const SelectField = (props: Props) => {
         } else {
           handleOptionClick(filteredOptions[0]);
         }
+      } else if (isTabPressed) {
+        if (highlightedIndex >= 0) {
+          handleOptionClick(filteredOptions[highlightedIndex]);
+        }
       }
+
       setIsTabPressed(false);
       setIsEnterPressed(false);
       setIsSearching(false);

package/src/Form/TextField/index.tsx

@@ -43,7 +43,7 @@ export const TextField = (props: Props) => {
     style,
     title,
     helpText,
-    className,
+    className = "",
     hint,
     required,
   } = props;

package/src/NavBar/NavBar.tsx

@@ -15,30 +15,35 @@ import type {
 } from "./NavBar.types.js";
 import { Link, useNavigate } from "@remix-run/react";
 
-const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
+const OptionsDropDownButton = ({
+  color,
+  options,
+  name,
+  specialColor,
+}: EntityProps) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
 
   return (
-    <div className="nav-item ml-auto">
-      <div className="flex justify-center">
-        <div className="relative inline-block">
-          <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`}
-          >
-            {name ?? <OpcionButtonSvgIcon />}
-            <DropDownArrowSvgIcon />
-          </button>
-          <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)}
-          >
-            {options.map((option, index) => (
-              <React.Fragment key={index}>{option}</React.Fragment>
-            ))}
-          </div>
-        </div>
+    <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`}
+    >
+      <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`}
+      >
+        {name ?? <OpcionButtonSvgIcon />}
+        <DropDownArrowSvgIcon />
+      </button>
+      <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)}
+      >
+        {options.map((option, index) => (
+          <React.Fragment key={index}>{option}</React.Fragment>
+        ))}
       </div>
     </div>
   );
@@ -57,8 +62,13 @@ const NavItem = ({
       <OptionsDropDownButton
         name={name}
         color={color}
+        specialColor={specialColor}
         options={childrens.map((x, index) => (
-          <Link key={index} to={x.link} className="hover:bg-red-100">
+          <Link
+            key={index}
+            to={x.link}
+            className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`}
+          >
             {x.name}
           </Link>
         ))}
@@ -67,7 +77,7 @@ const NavItem = ({
       <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 `}
+        } 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`}
       >
         <Link
           className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75"

package/src/NavBar/NavBar.types.ts

@@ -54,4 +54,5 @@ export type EntityProps = {
   name?: string;
   color: ColorInterface;
   options: any[];
+  specialColor?: ColorInterface;
 };

package/src/Skeletons/LoadingWindow.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface LoadingItem {
+  name: string;
+  loading: boolean;
+}
+
+interface LoadingWindowProps {
+  loadingItems?: LoadingItem[];
+  description?: string;
+}
+
+export const LoadingWindow: React.FC<LoadingWindowProps> = ({
+  loadingItems,
+  description = "Por favor, espere mientras se carga la página.",
+}) => {
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="text-center flex flex-col items-center"
+      >
+        <img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
+        <h1 className="text-3xl font-bold text-gray-800 mb-4">Cargando...</h1>
+        <p className="text-gray-600 mb-4">{description}</p>
+        {loadingItems && (
+          <ul className="text-left mb-4">
+            {loadingItems.map((item, index) => (
+              <li key={index} className="flex items-center mb-2">
+                <svg
+                  className={`${
+                    item.loading ? "" : "hidden"
+                  } w-5 h-5 text-blue-500 mr-2 animate-spin loading-spinner`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
+                </svg>
+                <svg
+                  className={`${
+                    item.loading ? "hidden" : ""
+                  } w-5 h-5 text-green-500 mr-2 check-mark`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+                <span>{item.name}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+          className="mt-8"
+        >
+          <svg
+            className="w-12 h-12 text-blue-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <motion.path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+            />
+          </svg>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default LoadingWindow;

package/src/Skeletons/index.ts

@@ -1 +1,2 @@
 export * from "./LoadingInputSkeleton.js";
+export * from "./LoadingWindow.js";