@zauru-sdk/components 6.2.28 → 6.3.0

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, 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, autoComplete = "off", } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef(null);
     const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
     const error = errors ? errors[props.name ?? "-1"] : undefined;
     const register = tempRegister
@@ -14,12 +15,21 @@ export const TextField = (props) => {
             required,
         })
         : undefined; // Solo usar register si está disponible
+    const assignRef = (element) => {
+        inputRef.current = element;
+        if (typeof register?.ref === "function") {
+            register.ref(element);
+        }
+    };
     const color = error ? "red" : "gray";
     const isReadOnly = disabled || readOnly;
     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}-200`;
     useEffect(() => {
+        if (inputRef.current && document.activeElement === inputRef.current) {
+            return;
+        }
         if (setOnFormValue) {
             setOnFormValue(name ?? "-1", defaultValue);
         }
@@ -54,14 +64,14 @@ export const TextField = (props) => {
         }
     };
     if (hidden) {
-        return (_jsx("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+        return (_jsx("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), ref: assignRef, name: name, onChange: handleInputChange }));
     }
     const inputComponent = (_jsx("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {
             handleKeyDown(event);
             onKeyDown && onKeyDown(event);
-        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), name: name, autoComplete: autoComplete, onChange: handleInputChange }));
+        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), ref: assignRef, name: name, autoComplete: autoComplete, onChange: handleInputChange }));
     if (!error && !title && !helpText) {
         return _jsx("div", { className: `${className}`, children: inputComponent });
     }

package/dist/esm/Form/index.js

@@ -5,6 +5,7 @@ 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";
@@ -12,3 +13,4 @@ export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
 export * from "./RadioButton/index.js";
+export * from "./RadioButtonGroup/index.js";

package/dist/esm/Labels/SearchFiltersSummary.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SearchFiltersSummary = ({ items, emptyText = "Sin filtros registrados", className = "", }) => {
+    if (!items?.length) {
+        return (_jsx("p", { className: `text-xs text-gray-400 ${className}`, children: emptyText }));
+    }
+    return (_jsx("dl", { className: `flex flex-col gap-1 text-xs text-gray-700 ${className}`, children: items.map((item) => (_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-1", children: [_jsxs("dt", { className: "font-semibold text-gray-500", children: [item.label, ":"] }), _jsx("dd", { className: "text-gray-800", children: item.value })] }, item.key))) }));
+};

package/dist/esm/Labels/index.js

@@ -1 +1,2 @@
 export * from "./InfoLabel/index.js";
+export * from "./SearchFiltersSummary.js";

package/dist/esm/Layouts/errorLayout/index.js

@@ -1,17 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
-import { useState } from "react";
-export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, }) => {
+import { useEffect, useState } from "react";
+export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onError, }) => {
     try {
         const error = useRouteError();
         const [showDetails, setShowDetails] = useState(!!parentError);
+        useEffect(() => {
+            const reportable = error instanceof Error ? error : parentError;
+            if (reportable instanceof Error) {
+                onError?.(reportable, { from });
+            }
+        }, [error, parentError, from, onError]);
         const baseError = (_jsxs("div", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl flex flex-col items-center", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
                                 ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
                                 : error instanceof Error
                                     ? `Error: ${error.message} - NAME: ${error.name} - STACK: ${error.stack?.slice(0, 100)} - CAUSE: ${error.cause}`
                                     : `Ha ocurrido un error inesperado: ${error}` }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: [isRootLevel
                                     ? "(*) Error lanzado desde: "
-                                    : "Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
+                                    : "Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300 cursor-pointer", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
                                         ? parentError.message
                                         : String(parentError) }))] }))] }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500 text-center", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) })] }));
         if (!isRootLevel) {

package/dist/esm/Modal/ItemModal.js

@@ -29,7 +29,8 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
     const filteredList = itemList
         .map((category) => ({
         ...category,
-        items: category.items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
+        items: category.items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            item.code.toLowerCase().includes(searchTerm.toLowerCase())),
     }))
         .filter((category) => category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
         category.items.length > 0);
@@ -74,11 +75,13 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
     };
     return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50", onClick: handleCloseModal, children: _jsxs("div", { 
             //Le ponemos ref para poder scrollear al tope
-            ref: modalContentRef, className: "bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-2xl font-bold", children: selectedItem ? "Confirmar selección" : "Seleccionar un Ítem" }), _jsx("button", { className: "text-gray-500 hover:text-gray-800 text-3xl", onClick: handleCloseModal, children: "\u00D7" })] }), !selectedItem ? (
+            ref: modalContentRef, className: "bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-2xl font-bold", children: selectedItem
+                                ? "Confirmar selección"
+                                : `Seleccionar un Ítem - (${itemList.reduce((acc, category) => acc + category.items.length, 0)} ítems disponibles)` }), _jsx("button", { className: "text-gray-500 hover:text-gray-800 text-3xl cursor-pointer", onClick: handleCloseModal, children: "\u00D7" })] }), !selectedItem ? (
                 /* ==============================
                    PASO 1: SELECCIONAR ÍTEM
                    ============================== */
-                _jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mb-4", children: [_jsx("input", { type: "text", placeholder: "Buscar por nombre o categor\u00EDa...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "p-2 border rounded-lg w-full" }), searchTerm && (_jsx("button", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-800", onClick: () => setSearchTerm(""), children: "\u00D7" }))] }), filteredList.length === 0 ? (_jsx("p", { className: "text-gray-500 text-center", children: "No se encontraron resultados." })) : (filteredList.map((category, index) => {
+                _jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mb-4", children: [_jsx("input", { type: "text", placeholder: "Buscar por nombre, c\u00F3digo o categor\u00EDa...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "p-2 border rounded-lg w-full" }), searchTerm && (_jsx("button", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-800", onClick: () => setSearchTerm(""), children: "\u00D7" }))] }), filteredList.length === 0 ? (_jsx("p", { className: "text-gray-500 text-center", children: "No se encontraron resultados." })) : (filteredList.map((category, index) => {
                             const isExpanded = expandedCategories[category.name];
                             // Estilos condicionales para "text" vs. "card"
                             const categoryContainerClasses = categoryViewMode === "card"
@@ -107,7 +110,7 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
                 /* ==============================
                    PASO 2: CONFIRMAR SELECCIÓN
                    ============================== */
-                _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("img", { src: selectedItem.imageUrl, alt: selectedItem.name, className: "w-40 h-40 object-cover rounded mb-4 shadow-md" }), _jsx("p", { className: "mb-2 text-xl font-bold", children: selectedItem.name }), _jsxs("p", { className: "mb-2 text-base font-semibold text-gray-700", children: ["Stock disponible:", _jsx("span", { className: "ml-1 font-normal text-gray-800", children: selectedItem.stock })] }), !selectedItem.flexiblePrice && (_jsxs("p", { className: "mb-4 text-base font-semibold text-gray-700", children: ["Precio unitario:", _jsxs("span", { className: "ml-1 font-normal text-gray-800", children: [selectedItem.currencyPrefix, selectedItem.priceText] })] })), _jsxs("div", { className: "mb-4 w-full max-w-sm flex flex-col items-center", children: [_jsx("p", { className: "text-base font-semibold text-gray-700 mb-2", children: "Seleccionar cantidad" }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("button", { className: "bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400", onClick: () => setQuantity((prev) => (prev > 1 ? prev - 1 : 1)), children: "-" }), _jsx("input", { className: "w-20 text-center border rounded text-lg", type: "number", min: 1, value: quantity, onChange: (e) => {
+                _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("img", { src: selectedItem.imageUrl, alt: selectedItem.name, className: "w-40 h-40 object-cover rounded mb-4 shadow-md" }), _jsx("p", { className: "mb-2 text-xl font-bold", children: selectedItem.name }), _jsxs("p", { className: "mb-2 text-base font-semibold text-gray-700", children: ["C\u00F3digo:", _jsx("span", { className: "ml-1 font-normal text-gray-800", children: selectedItem.code })] }), _jsxs("p", { className: "mb-2 text-base font-semibold text-gray-700", children: ["Stock disponible:", _jsx("span", { className: "ml-1 font-normal text-gray-800", children: selectedItem.stock })] }), !selectedItem.flexiblePrice && (_jsxs("p", { className: "mb-4 text-base font-semibold text-gray-700", children: ["Precio unitario:", _jsxs("span", { className: "ml-1 font-normal text-gray-800", children: [selectedItem.currencyPrefix, selectedItem.priceText] })] })), _jsxs("div", { className: "mb-4 w-full max-w-sm flex flex-col items-center", children: [_jsx("p", { className: "text-base font-semibold text-gray-700 mb-2", children: "Seleccionar cantidad" }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("button", { className: "bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400", onClick: () => setQuantity((prev) => (prev > 1 ? prev - 1 : 1)), children: "-" }), _jsx("input", { className: "w-20 text-center border rounded text-lg", type: "number", min: 1, value: quantity, onChange: (e) => {
                                                 const val = parseInt(e.target.value, 10);
                                                 setQuantity(isNaN(val) || val < 1 ? 1 : val);
                                             } }), _jsx("button", { className: "bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400", onClick: () => setQuantity((prev) => prev + 1), children: "+" })] })] }), selectedItem.flexiblePrice && (_jsxs("div", { className: "mb-4 w-full max-w-sm flex flex-col items-center", children: [_jsx("p", { className: "text-base font-semibold text-gray-700 mb-2", children: "Seleccionar precio" }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("button", { className: "bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400", onClick: () => setCustomPrice((prev) => {

package/dist/esm/NavBar/NavBar.js

@@ -6,7 +6,7 @@ import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
 const OptionsDropDownButton = ({ color, options, name }) => {
     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 (_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 cursor-pointer 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, selectedColor, childrens = [], reduxNotificationBadge, }) => {
     const location = useLocation();
@@ -30,11 +30,15 @@ const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotific
             // De lo contrario, usamos el color normal (bg700)
             className: `${isActive ? specialColor.bg900 : specialColor.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(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative", to: link, children: [_jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }), notificationBadge !== undefined && (_jsx("span", { className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5", children: notificationBadge }))] }) }) }));
 };
-export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, }) => {
+export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, showDarkModeToggle = false, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
     const [currentVersion, setCurrentVersion] = useState(version);
+    const [isDarkMode, setIsDarkMode] = useState(false);
     const navigate = useNavigate();
+    useEffect(() => {
+        document.documentElement.classList.toggle("dark", isDarkMode);
+    }, [isDarkMode]);
     useEffect(() => {
         if (version !== currentVersion) {
             setCurrentVersion(version);
@@ -54,8 +58,9 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
                         .filter((item) => item.loggedIn === loggedIn)
                         .filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
                             reloadCatalogsOption && (_jsx(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`, to: "/reload-catalogs", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: `h-5 w-5 mr-1`, width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M20.5 8c-1.392-3.179-4.823-5-8.522-5C7.299 3 3.453 6.552 3 11.1" }), _jsx("path", { d: "M16.489 8.4h3.97A.54.54 0 0 0 21 7.86V3.9M3.5 16c1.392 3.179 4.823 5 8.522 5 4.679 0 8.525-3.552 8.978-8.1" }), _jsx("path", { d: "M7.511 15.6h-3.97a.54.54 0 0 0-.541.54v3.96" })] }), _jsx("span", { children: "Recargar cat\u00E1logos" })] }) }, "recargar-catalogos")),
+                            showDarkModeToggle && (_jsx("button", { type: "button", className: "block w-full cursor-pointer text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white", onClick: () => setIsDarkMode((value) => !value), children: _jsx("div", { className: "mx-auto pt-2", children: _jsx("span", { children: isDarkMode ? "Modo claro" : "Modo oscuro" }) }) }, "dark-mode-toggle")),
                             _jsx(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`, to: "/logout", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }, "cerrar-sesion"),
                         ] })) })] }));
-    }, [items, loggedIn, hiddenItemsChange]);
+    }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
     return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsxs(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Table/ZauruTable.js

@@ -5,16 +5,65 @@ import { createTheme } from "react-data-table-component";
 import { SearchSVG } from "@zauru-sdk/icons";
 import * as ReactDataTableComponent from "react-data-table-component";
 const DataTable = ReactDataTableComponent.default;
+const headerTextWrapStyle = {
+    whiteSpace: "normal",
+    overflow: "visible",
+    textOverflow: "clip",
+    overflowWrap: "break-word",
+    wordBreak: "break-word",
+    lineHeight: "1.25",
+};
 const customStyles = {
+    table: {
+        style: {
+            minWidth: 0,
+        },
+    },
+    tableWrapper: {
+        style: {
+            display: "block",
+            width: "100%",
+            maxWidth: "100%",
+            minWidth: 0,
+            overflowX: "auto",
+        },
+    },
+    responsiveWrapper: {
+        style: {
+            width: "100%",
+            maxWidth: "100%",
+            minWidth: 0,
+            overflowX: "auto",
+        },
+    },
+    headRow: {
+        style: {
+            minHeight: "40px",
+            height: "auto",
+            alignItems: "stretch",
+        },
+        denseStyle: {
+            minHeight: "36px",
+            height: "auto",
+        },
+    },
     headCells: {
         style: {
             color: "#202124",
             fontSize: "14px",
             justifyContent: "left",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            maxWidth: "250px",
-            padding: "4px", // Add some padding
+            alignItems: "flex-start",
+            paddingTop: "8px",
+            paddingBottom: "8px",
+            ...headerTextWrapStyle,
+            ".rdt_TableCol_Sortable": {
+                height: "auto",
+                minHeight: "100%",
+                overflow: "visible",
+                whiteSpace: "normal",
+                alignItems: "flex-start",
+            },
+            ".rdt_TableCol_Sortable > div": headerTextWrapStyle,
         },
     },
     cells: {
@@ -23,6 +72,16 @@ const customStyles = {
             wordBreak: "break-word",
         },
     },
+    expanderRow: {
+        style: {
+            minWidth: 0,
+            width: "100%",
+            maxWidth: "100%",
+            overflowX: "auto",
+            display: "grid",
+            gridTemplateColumns: "minmax(0, 1fr)",
+        },
+    },
     rows: {
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
@@ -86,7 +145,7 @@ createTheme("subTable", {
 });
 //Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
 export const ZauruTable = (props) => {
-    const { columns, conditionalRowStyles, data, loading = false, pagination, search, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
+    const { columns, conditionalRowStyles, data, loading = false, pagination, search, expandable, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
     const [, setSearchParams] = useSearchParams({
         page: "1",
         perPage: "10",
@@ -152,7 +211,7 @@ export const ZauruTable = (props) => {
     };
     const loadSubHeader = !!(search || offlineSearch.length > 0);
     const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-    return (_jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
-            ? pagination.rowsPerPageOptions
-            : [10, 50, 100], ...others }));
+    return (_jsx("div", { className: "w-full min-w-0 max-w-full overflow-x-auto", children: _jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandOnRowClicked: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
+                ? pagination.rowsPerPageOptions
+                : [10, 50, 100], ...others }) }));
 };

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export const Tooltip = ({ children, text }) => {
+    const [show, setShow] = useState(false);
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("div", { onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: children }), show && (_jsxs("div", { className: "absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2", style: { whiteSpace: "nowrap", height: "2rem" }, children: [text, _jsx("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2", style: {
+                            width: "0",
+                            height: "0",
+                            borderTop: "6px solid transparent",
+                            borderLeft: "6px solid transparent",
+                            borderRight: "6px solid transparent",
+                            borderBottom: "6px solid gray",
+                        } })] }))] }));
+};

package/dist/esm/Tooltip/index.js

@@ -0,0 +1 @@
+export * from "./Tooltip.js";

package/dist/esm/WithTooltip/WithTooltip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const WithTooltip = (props) => {
+    const { children, text } = props;
+    return (_jsxs("div", { className: "group relative inline-block", children: [children, _jsx("div", { className: "pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: _jsxs("div", { className: "relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40", children: [text, _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black" })] }) })] }));
+};

package/dist/esm/WithTooltip/index.js

@@ -0,0 +1 @@
+export * from "./WithTooltip.js";

package/dist/esm/index.js

@@ -19,6 +19,8 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
+export * from "./Tooltip/index.js";
+export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
+export * from "./Tooltip/index.js";
+export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.2.28",
+  "version": "6.3.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -13,6 +13,8 @@
   "scripts": {
     "build": "npm run build:esm",
     "build:esm": "tsc -p tsconfig.esm.json",
+    "play": "ladle serve --port 61000",
+    "play:build": "ladle build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": {
@@ -21,15 +23,20 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@ladle/react": "^5.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/rails__activestorage": "^7.1.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/styled-components": "^5.1.34",
+    "autoprefixer": "^10.6.0",
     "postcss": "^8.4.35",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "6.26.2",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^8.3.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -55,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "9e840d01a540f2ab49233dda2cb2b0c916ffba0b"
+  "gitHead": "27363fa3e10c6b9f3ca319b0529fae01da836f87"
 }

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/Alerts/StaticAlert.tsx

@@ -7,7 +7,7 @@ type Props = {
   description: any;
   showCloseButton?: boolean;
   onClose?: () => void;
-  type?: "success" | "info";
+  type?: "success" | "info" | "warning";
   loading?: boolean;
 };
 
@@ -33,6 +33,16 @@ const getConfig = (type: string) => {
           <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"></path>
         ),
       };
+    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: (
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm.93 14.93h-1.86c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.86c.41 0 .75.34.75.75s-.34.75-.75.75zm.57-4.42l-.57 2.36h-1.86l-.57-2.36c-.13-.54.21-1.08.76-1.08h1.48c.55 0 .88.54.76 1.08zm0-2.36h-2.58c-.55 0-.88-.54-.76-1.08l.57-2.36h1.86l.57 2.36c.12.54-.21 1.08-.76 1.08z"></path>
+        ),
+      };
     default:
       return {
         containerClassName:

package/src/BlockUI/BlockUI.tsx

@@ -20,7 +20,7 @@ export const BlockUI = (props: Props) => {
           <div className="flex items-center">
             <span className="text-3xl mr-4">{loadingText}</span>
             <svg
-              className="animate-spin h-36 w-36 text-gray-600"
+              className="animate-spin h-5 w-5 text-gray-600"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"

package/src/Buttons/ActionList.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+export type ActionListItem = {
+  key: string;
+  label: string;
+  loadingLabel?: string;
+  loading?: boolean;
+  badge?: string;
+  badgeClassName?: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+type ActionListProps = {
+  items: ActionListItem[];
+  disabled?: boolean;
+  className?: string;
+};
+
+export const ActionList = ({
+  items,
+  disabled = false,
+  className = "",
+}: ActionListProps) => {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      {items.map((item) => {
+        const itemBusy = Boolean(item.loading);
+        const itemDisabled = disabled || item.disabled || itemBusy;
+
+        return (
+          <button
+            key={item.key}
+            type="button"
+            disabled={itemDisabled}
+            onClick={item.onClick}
+            className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:cursor-progress disabled:opacity-60"
+          >
+            {item.badge ? (
+              <span
+                className={`inline-flex min-w-[2.25rem] justify-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
+                  item.badgeClassName ?? "bg-gray-100 text-gray-700"
+                }`}
+              >
+                {item.badge}
+              </span>
+            ) : null}
+            <span>
+              {itemBusy ? (item.loadingLabel ?? item.label) : item.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/src/Buttons/Button.tsx

@@ -2,7 +2,7 @@ import type { ColorInterface } from "../NavBar/NavBar.types.js";
 import { useFormContext } from "react-hook-form";
 import { useState, useRef, useEffect } from "react";
 
-type DropdownOption = {
+export type DropdownOption = {
   label: string;
   value: string;
   onClick: () => void;
@@ -141,7 +141,7 @@ export const Button = (props: Props) => {
         className={`${isButtonDisabled ? " bg-opacity-25 " : ""} ${
           loading
             ? " cursor-progress"
-            : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`
+            : `${isButtonDisabled ? " cursor-not-allowed" : `cursor-pointer 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:${
@@ -174,11 +174,13 @@ export const Button = (props: Props) => {
         <button
           type="button"
           disabled={isButtonDisabled}
+          aria-haspopup="menu"
+          aria-expanded={isDropdownOpen}
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           className={`${isButtonDisabled ? " bg-opacity-25 " : ""} ${
             loading
               ? " cursor-progress"
-              : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`
+              : `${isButtonDisabled ? " cursor-not-allowed" : `cursor-pointer hover:${color.bg700}`}`
           } inline-flex justify-center items-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:${
@@ -205,25 +207,29 @@ export const Button = (props: Props) => {
         </button>
       </div>
 
-      {isDropdownOpen && (
-        <div className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+      {isDropdownOpen && !isButtonDisabled ? (
+        <div
+          role="menu"
+          className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
           <div className="py-1">
-            {dropdownOptions.map((option, index) => (
+            {dropdownOptions.map((option) => (
               <button
-                key={index}
+                key={option.value}
                 type="button"
+                role="menuitem"
                 onClick={() => {
                   option.onClick();
                   setIsDropdownOpen(false);
                 }}
-                className="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left"
+                className="block w-full cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left"
               >
                 {option.label}
               </button>
             ))}
           </div>
         </div>
-      )}
+      ) : null}
     </div>
   );
 

package/src/Buttons/index.ts

@@ -1 +1,2 @@
 export * from "./Button.js";
+export * from "./ActionList.js";

package/src/Containers/ButtonSectionContainer.tsx

@@ -3,14 +3,16 @@ import React from "react";
 type Props = {
   children: React.ReactNode;
   className?: string;
+  /** Fondo gris de pie de formulario. El nombre `whitBg` se conserva por compatibilidad con las webapps. */
+  whitBg?: boolean;
 };
 
 export const ButtonSectionContainer = (props: Props) => {
-  const { children, className } = props;
+  const { children, className, whitBg = false } = props;
 
   return (
     <div
-      className={`mt-5 flex flex-col md:flex-row md:justify-end md:items-center space-x-0 space-y-4 md:space-y-0 md:space-x-4 ${className}`}
+      className={`${whitBg ? "bg-gray-50 px-4 py-3 sm:px-6" : ""} mt-5 flex flex-col md:flex-row md:justify-end md:items-center space-x-0 space-y-4 md:space-y-0 md:space-x-4 ${className}`}
     >
       {children}
     </div>