@zauru-sdk/components 2.0.119 → 2.0.120

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

@@ -3,65 +3,72 @@ import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 export const FileUploadField = (props) => {
-    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, required = false, } = props;
-    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
-    const error = errors ? errors[props.name ?? "-1"] : undefined;
-    const register = tempRegister
-        ? tempRegister(props.name ?? "-1", { required })
-        : undefined; // Solo usar register si está disponible
+    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, } = props;
+    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} };
+    const error = errors ? errors[name] : undefined;
+    const register = tempRegister ? tempRegister(name, { required }) : undefined;
     const [showTooltip, setShowTooltip] = useState(false);
-    if (typeof defaultValue == "string") {
+    // Para mostrar en el hint los tipos de archivo permitidos (opcional)
+    let hintMessage = hint;
+    if (showAvailableTypes && fileTypes.length > 0) {
+        hintMessage = `${hint || ""} Archivos permitidos: ${fileTypes.join(", ")}`;
+    }
+    // Clases de estilo basadas en si hay error (color rojo) o no (gris),
+    // pero ahora ignoramos el "disabled" y nos centramos en "readOnly".
+    const color = error ? "red" : "gray";
+    const isReadOnly = readOnly;
+    // En modo readOnly, puedes poner un fondo distinto, o dejarlo en blanco
+    const bgColor = isReadOnly ? "bg-gray-100" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-700" : `text-${color}-900`;
+    const borderColor = error ? "border-red-500" : `border-${color}-500`;
+    /**
+     * onChange normal del input.
+     * Sólo se llama cuando readOnly es false (porque si es true ni renderizamos el input).
+     */
+    const handleInputChange = (event) => {
+        onChange && onChange(event);
+        // Si usas register, la parte interna de react-hook-form también se encargará
+        // del cambio, no necesitas llamarlo manualmente.
+    };
+    /**
+     * Para el "preview" cuando `defaultValue` es string:
+     * - Si `download` es true, mostramos un icono de descarga.
+     * - Si `download` es false, mostramos la imagen en miniatura.
+     * El click abre la URL en nueva ventana.
+     */
+    function renderPreview(defaultValue) {
         if (download) {
-            return (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => {
-                    window.open(defaultValue, "_blank");
-                }, onKeyDown: (event) => {
-                    // Permite que el evento se active con la tecla Enter
+            // Botón de descarga
+            return (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => window.open(defaultValue, "_blank"), onKeyDown: (event) => {
                     if (event.key === "Enter") {
                         window.open(defaultValue, "_blank");
                     }
-                }, children: [title && (_jsx("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", _jsx(DownloadIconSVG, {})] }));
+                }, className: "inline-flex items-center cursor-pointer", children: [_jsx(DownloadIconSVG, {}), _jsx("span", { className: "ml-1 text-blue-600 underline", children: "Descargar archivo" })] }));
         }
-        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), " ", _jsx("div", { role: "button", tabIndex: 0, onClick: () => {
-                        if (register) {
-                            register.onChange({
-                                target: {
-                                    value: defaultValue,
-                                },
-                            });
-                        }
+        else {
+            // Vista previa como imagen
+            return (_jsx("div", { role: "button", tabIndex: 0, onClick: () => window.open(defaultValue, "_blank"), onKeyDown: (event) => {
+                    if (event.key === "Enter") {
                         window.open(defaultValue, "_blank");
-                    }, onKeyDown: (event) => {
-                        // Permite que el evento se active con la tecla Enter
-                        if (event.key === "Enter") {
-                            if (register) {
-                                register.onChange({
-                                    target: {
-                                        value: defaultValue,
-                                    },
-                                });
-                            }
-                            window.open(defaultValue, "_blank");
-                        }
-                    }, children: _jsx("img", { src: defaultValue, alt: name, className: `h-48 w-48 inline mr-1 pb-1`, style: {
-                            stroke: "currentColor",
-                            strokeWidth: 2,
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            fill: "none",
-                            backgroundColor: "transparent",
-                        } }) })] }));
+                    }
+                }, className: "inline-block cursor-pointer", children: _jsx("img", { src: defaultValue, alt: name, className: "h-48 w-48 inline mr-1 pb-1", style: {
+                        objectFit: "contain",
+                        backgroundColor: "transparent",
+                    } }) }));
+        }
     }
-    const handleInputChange = (event) => {
-        onChange && onChange(event);
-    };
-    let hintMessage = hint;
-    if (showAvailableTypes && fileTypes.length > 0) {
-        hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
+    /**
+     * 1) Si readOnly = true:
+     *    - Si defaultValue es string -> Sólo mostramos el preview (descarga/imagen).
+     *    - Si no hay defaultValue (o es File) -> mostramos "nada" o un texto de "Sin archivo".
+     */
+    if (readOnly) {
+        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), typeof defaultValue === "string" && defaultValue ? (renderPreview(defaultValue)) : (_jsx("div", { className: "text-sm italic text-gray-400", children: "No hay archivo disponible" }))] }));
     }
-    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}-500`;
-    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", name: name, id: id ?? name, disabled: disabled, readOnly: readOnly, accept: fileTypes.map((ft) => `.${ft}`).join(", "), onChange: handleInputChange, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+    /**
+     * 2) readOnly = false:
+     *    - Si hay defaultValue y es string, mostramos la vista previa + el input
+     *    - Si no hay defaultValue (o no es string) mostramos solo el input
+     */
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: [title, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), typeof defaultValue === "string" && defaultValue && (_jsx("div", { className: "mb-2", children: renderPreview(defaultValue) })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", id: id ?? name, accept: fileTypes.map((ft) => `.${ft}`).join(", "), 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, onChange: handleInputChange }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-red-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
 };

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

@@ -14,11 +14,19 @@ export const ReactZodForm = (props) => {
     const handleSubmit = (data, event) => {
         if (onSubmit) {
             onSubmit(data, event);
+            return;
         }
-        else {
-            // If no onSubmit is provided, use Remix's submit function
-            submit(event?.target, { method });
+        const form = event?.target;
+        const nativeEvent = event?.nativeEvent;
+        // Armamos el FormData a partir del propio <form>
+        const formData = new FormData(form);
+        // Detectamos el botón que disparó el submit (submitter),
+        // en caso de que tenga un name/value, lo agregamos al formData
+        const submitter = nativeEvent.submitter;
+        if (submitter instanceof HTMLButtonElement && submitter.name) {
+            formData.append(submitter.name, submitter.value);
         }
+        submit(formData, { method, encType });
     };
     return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, className: className, encType: encType, children: children }) }));
 };

package/dist/esm/Modal/ItemModal.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { createRoot } from "react-dom/client";
-const ItemSelectionModal = ({ itemList, onClose, config, }) => {
+const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "text", }) => {
     const defaultConfig = {
         itemSize: {
             width: config?.itemSize?.width || "150px",
@@ -10,6 +10,18 @@ const ItemSelectionModal = ({ itemList, onClose, config, }) => {
     };
     const [searchTerm, setSearchTerm] = useState("");
     const [expandedCategories, setExpandedCategories] = useState({});
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [quantity, setQuantity] = useState(1);
+    const [customPrice, setCustomPrice] = useState(null);
+    // Ref para forzar el scroll al tope cuando seleccionamos un ítem
+    const modalContentRef = useRef(null);
+    const filteredList = itemList
+        .map((category) => ({
+        ...category,
+        items: category.items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
+    }))
+        .filter((category) => category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        category.items.length > 0);
     const toggleCategory = (categoryName) => {
         setExpandedCategories((prev) => ({
             ...prev,
@@ -17,27 +29,86 @@ const ItemSelectionModal = ({ itemList, onClose, config, }) => {
         }));
     };
     const handleItemClick = (item) => {
-        onClose(item);
+        setSelectedItem(item);
+        setQuantity(1);
+        // Si el ítem tiene precio flexible, inicializamos el customPrice con su precio actual
+        setCustomPrice(item.flexiblePrice ? item.unitPrice : null);
+        // Forzar scroll a la parte superior del contenido, ya que antes se iniciaba el scroll desde donde se había quedado.
+        if (modalContentRef.current) {
+            modalContentRef.current.scrollTo({ top: 0, behavior: "smooth" });
+        }
     };
-    const filteredList = itemList
-        .map((category) => ({
-        ...category,
-        items: category.items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
-    }))
-        .filter((category) => category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        category.items.length > 0);
-    return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50", children: _jsxs("div", { className: "bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col mb-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-2xl font-bold", children: "Seleccionar un \u00CDtem" }), _jsx("button", { className: "text-gray-500 hover:text-gray-800", onClick: () => onClose(null), children: "\u00D7" })] }), _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" })] }), filteredList.length === 0 ? (_jsx("p", { className: "text-gray-500 text-center", children: "No se encontraron resultados." })) : (filteredList.map((category) => (_jsxs("div", { className: "mb-4", children: [_jsxs("h3", { className: "text-lg font-semibold mb-2 cursor-pointer flex justify-between items-center hover:text-blue-600", onClick: () => toggleCategory(category.name), children: [_jsxs("span", { children: [category.name, " ", _jsxs("span", { className: "text-gray-500", children: ["(", category.items.length, ")"] })] }), _jsx("span", { className: `transform transition-transform duration-200 ${expandedCategories[category.name] ? "rotate-90" : ""}`, children: "\u25B6" })] }), expandedCategories[category.name] && (_jsx("div", { className: "grid gap-5", style: {
-                                gridTemplateColumns: `repeat(auto-fit, minmax(${defaultConfig.itemSize.width}, 1fr))`,
-                            }, children: category.items.map((item) => (_jsxs("div", { className: "border rounded-lg shadow-lg hover:shadow-xl cursor-pointer relative", onClick: () => handleItemClick(item), style: {
-                                    backgroundImage: `url(${item.imageUrl})`,
-                                    backgroundSize: "cover",
-                                    backgroundPosition: "center",
-                                    width: defaultConfig.itemSize.width,
-                                    height: defaultConfig.itemSize.height,
-                                }, children: [_jsx("div", { className: "bg-white bg-opacity-80 p-2 rounded absolute top-0 left-0 right-0", children: _jsx("h4", { className: "font-bold text-sm text-center", children: item.name }) }), _jsx("div", { className: "absolute bottom-0 left-0 bg-white bg-opacity-80 p-2 rounded", children: _jsxs("span", { className: "text-xs", children: ["Stock: ", item.stock] }) }), _jsx("div", { className: "absolute bottom-0 right-0 bg-white bg-opacity-80 p-2 rounded", children: _jsxs("span", { className: "text-xs", children: [item.currencyPrefix, item.unitPrice] }) })] }, item.code))) }))] }, category.name))))] }) }));
+    const handleConfirmQuantity = () => {
+        if (selectedItem) {
+            // (5) Devolver el precio correcto
+            const finalPrice = selectedItem.flexiblePrice
+                ? // si el precio es flexible, tomar lo que el usuario haya ingresado (o fallback al precio original)
+                    customPrice ?? selectedItem.unitPrice
+                : // si NO es flexible, solo usamos el precio que ya tenía
+                    selectedItem.unitPrice;
+            onClose({
+                ...selectedItem,
+                quantity,
+                unitPrice: finalPrice,
+            });
+        }
+    };
+    const handleCancelQuantity = () => {
+        setSelectedItem(null);
+        setQuantity(1);
+        setCustomPrice(null);
+    };
+    const handleCloseModal = () => {
+        onClose(null);
+    };
+    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 ? (
+                /* ==============================
+                   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) => {
+                            const isExpanded = expandedCategories[category.name];
+                            // Estilos condicionales para "text" vs. "card"
+                            const categoryContainerClasses = categoryViewMode === "card"
+                                ? "w-full mb-2 px-4 py-3 bg-blue-50 rounded-md flex justify-between items-center cursor-pointer hover:bg-blue-100"
+                                : "text-lg font-semibold mb-2 cursor-pointer flex justify-between items-center hover:text-blue-600";
+                            return (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: categoryContainerClasses, onClick: () => toggleCategory(category.name), children: [_jsxs("span", { children: [category.name, " ", _jsxs("span", { className: "text-gray-500", children: ["(", category.items.length, ")"] })] }), _jsx("span", { className: `transform transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`, children: "\u25B6" })] }), isExpanded && (_jsx("div", { className: "grid gap-5", style: {
+                                            gridTemplateColumns: `repeat(auto-fit, minmax(${defaultConfig.itemSize.width}, 1fr))`,
+                                        }, children: category.items.map((item) => {
+                                            // Verificamos si es un "paquete" usando item_id
+                                            const isPackage = item.item_id.startsWith("b");
+                                            return (_jsxs("div", { onClick: () => handleItemClick(item), className: `border rounded-lg shadow-lg hover:shadow-xl cursor-pointer relative ${isPackage ? "bg-yellow-50" : ""}`, style: {
+                                                    backgroundImage: `url(${item.imageUrl})`,
+                                                    backgroundSize: "cover",
+                                                    backgroundPosition: "center",
+                                                    width: defaultConfig.itemSize.width,
+                                                    height: defaultConfig.itemSize.height,
+                                                }, children: [_jsx("div", { className: `p-2 rounded absolute top-0 left-0 right-0 ${isPackage
+                                                            ? "bg-yellow-300 text-black"
+                                                            : "bg-white bg-opacity-80"}`, children: _jsx("h4", { className: "font-semibold text-sm text-center", children: item.name }) }), _jsx("div", { className: `absolute bottom-0 left-0 p-2 rounded ${isPackage
+                                                            ? "bg-yellow-300"
+                                                            : "bg-white bg-opacity-80"}`, children: _jsxs("span", { className: "text-xs font-normal", children: ["Stock: ", item.stock] }) }), _jsx("div", { className: `absolute bottom-0 right-0 p-2 rounded ${isPackage
+                                                            ? "bg-yellow-300"
+                                                            : "bg-white bg-opacity-80"}`, children: _jsxs("span", { className: "text-xs font-normal", children: [item.currencyPrefix, item.priceText] }) })] }, item.code));
+                                        }) }))] }, category.name));
+                        }))] })) : (
+                /* ==============================
+                   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-16 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) => {
+                                                const newVal = (prev ?? 0) - 1;
+                                                return newVal < 0 ? 0 : newVal;
+                                            }), children: "-" }), _jsx("input", { className: "w-16 text-center border rounded text-lg", type: "number", min: 0, value: customPrice ?? 0, onChange: (e) => {
+                                                const val = parseInt(e.target.value, 10);
+                                                setCustomPrice(isNaN(val) || val < 0 ? 0 : 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: () => setCustomPrice((prev) => (prev == null ? 1 : prev + 1)), children: "+" })] })] })), _jsxs("div", { className: "flex space-x-4 mt-6", children: [_jsx("button", { className: "bg-gray-300 px-4 py-2 rounded hover:bg-gray-400", onClick: handleCancelQuantity, children: "Volver" }), _jsx("button", { className: "bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700", onClick: handleConfirmQuantity, children: "Confirmar" })] })] }))] }) }));
 };
 // Función para crear el modal
-export const createItemModal = (itemList, config) => {
+export const createItemModal = (itemList, config, categoryViewMode) => {
     return new Promise((resolve) => {
         const handleClose = (selectedItem) => {
             resolve(selectedItem);
@@ -49,6 +120,6 @@ export const createItemModal = (itemList, config) => {
         const modalWrapper = document.createElement("div");
         document.body.appendChild(modalWrapper);
         const root = createRoot(modalWrapper);
-        root.render(_jsx(ItemSelectionModal, { itemList: itemList, onClose: handleClose, config: config }));
+        root.render(_jsx(ItemSelectionModal, { itemList: itemList, onClose: handleClose, config: config, categoryViewMode: categoryViewMode }));
     });
 };

package/dist/esm/NavBar/NavBar.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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";
+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))) })] }) }) }));
 };
 const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotificationBadge, }) => {
+    const location = useLocation();
+    const isActive = location.pathname === link;
     const specialColor = selectedColor
         ? COLORS[selectedColor]
         : COLORS["slate"];
@@ -18,7 +20,15 @@ const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotific
     useEffect(() => {
         setNotificationBadge(relevantState);
     }, [relevantState]);
-    return (_jsx("li", { className: "nav-item relative", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: 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.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 }))] }) })) }));
+    // Si este NavItem tiene elementos hijos, renderiza el botón desplegable:
+    if (childrens.length > 0) {
+        return (_jsx(OptionsDropDownButton, { name: name, color: 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))) }));
+    }
+    // Si NO tiene elementos hijos, se renderiza como un ítem simple:
+    return (_jsx("li", { className: "nav-item relative", children: _jsx("div", { 
+            // Si está activo, usamos color de fondo más oscuro (bg900)
+            // 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, }) => {
     const color = COLORS[selectedColor];
@@ -39,7 +49,7 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
                 }) }, index));
         }) }));
     const options = (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
-                        _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" })] }) }),
+                        _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"),
                     ] })) })] }));
-    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: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", children: _jsxs(_Fragment, { 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 })] }) }));
+    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/NavBar/NavBar.utils.js

@@ -4,6 +4,7 @@ export const COLORS = {
         bg700: "bg-sky-700",
         bg600: "bg-sky-600",
         bg500: "bg-sky-500",
+        bg200: "bg-sky-200",
         ring600: "ring-sky-600",
         ring500: "ring-sky-500",
     },
@@ -12,6 +13,7 @@ export const COLORS = {
         bg700: "bg-purple-700",
         bg600: "bg-purple-600",
         bg500: "bg-purple-500",
+        bg200: "bg-purple-200",
         ring600: "ring-purple-600",
         ring500: "ring-purple-500",
     },
@@ -20,6 +22,7 @@ export const COLORS = {
         bg700: "bg-pink-700",
         bg600: "bg-pink-600",
         bg500: "bg-pink-500",
+        bg200: "bg-pink-200",
         ring600: "ring-pink-600",
         ring500: "ring-pink-500",
     },
@@ -28,6 +31,7 @@ export const COLORS = {
         bg700: "bg-slate-700",
         bg600: "bg-slate-600",
         bg500: "bg-slate-500",
+        bg200: "bg-slate-200",
         ring600: "ring-slate-600",
         ring500: "ring-slate-500",
     },
@@ -36,6 +40,7 @@ export const COLORS = {
         bg700: "bg-green-700",
         bg600: "bg-green-600",
         bg500: "bg-green-500",
+        bg200: "bg-green-200",
         ring600: "ring-green-600",
         ring500: "ring-green-500",
     },
@@ -44,6 +49,7 @@ export const COLORS = {
         bg700: "bg-yellow-700",
         bg600: "bg-yellow-600",
         bg500: "bg-yellow-500",
+        bg200: "bg-yellow-200",
         ring600: "ring-yellow-600",
         ring500: "ring-yellow-500",
     },
@@ -52,6 +58,7 @@ export const COLORS = {
         bg700: "bg-red-700",
         bg600: "bg-red-600",
         bg500: "bg-red-500",
+        bg200: "bg-red-200",
         ring600: "ring-red-600",
         ring500: "ring-red-500",
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.119",
+  "version": "2.0.120",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -34,7 +34,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^2.0.118",
-    "@zauru-sdk/hooks": "^2.0.118",
+    "@zauru-sdk/hooks": "^2.0.120",
     "@zauru-sdk/icons": "^2.0.99",
     "@zauru-sdk/types": "^2.0.109",
     "@zauru-sdk/utils": "^2.0.119",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "56d56910cd5f8e311239d379369fd608dd697aea"
+  "gitHead": "05212e4cb104943ac0c6050ada75859622537c6a"
 }

package/src/Buttons/Button.tsx

@@ -43,6 +43,7 @@ export const Button = (props: Props) => {
       bg700: "bg-green-700",
       bg600: "bg-green-600",
       bg500: "bg-green-500",
+      bg200: "bg-green-200",
       ring600: "ring-green-600",
       ring500: "ring-green-500",
     },
@@ -51,6 +52,7 @@ export const Button = (props: Props) => {
       bg700: "bg-indigo-700",
       bg600: "bg-indigo-600",
       bg500: "bg-indigo-500",
+      bg200: "bg-indigo-200",
       ring600: "ring-indigo-600",
       ring500: "ring-indigo-500",
     },
@@ -59,6 +61,7 @@ export const Button = (props: Props) => {
       bg700: "bg-red-700",
       bg600: "bg-red-600",
       bg500: "bg-red-500",
+      bg200: "bg-red-200",
       ring600: "ring-red-600",
       ring500: "ring-red-500",
     },
@@ -67,6 +70,7 @@ export const Button = (props: Props) => {
       bg700: "bg-yellow-700",
       bg600: "bg-yellow-600",
       bg500: "bg-yellow-500",
+      bg200: "bg-yellow-200",
       ring600: "ring-yellow-600",
       ring500: "ring-yellow-500",
     },
@@ -84,9 +88,10 @@ export const Button = (props: Props) => {
 
   const buttonContent = (
     <>
-      <input type="hidden" name="action" value={name} />
       <button
         type={type}
+        name={"action"}
+        value={name}
         disabled={
           loading || disabled || (enableFormErrorsValidation && formHasErrors)
         }