@zauru-sdk/components 2.0.202 → 2.0.204

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

@@ -1,18 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 export const FileUploadField = (props) => {
-    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", } = props;
+    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", setProcessing, signature = false, } = props;
     const { register: tempRegister, setValue, formState: { errors }, } = useFormContext() || { formState: {} };
     const error = errors ? errors[name] : undefined;
     const register = tempRegister ? tempRegister(name, { required }) : undefined;
     const [showTooltip, setShowTooltip] = useState(false);
     const [previewSrc, setPreviewSrc] = useState(null);
-    const [fileDeleted, setFileDeleted] = useState(false);
     const [uploading, setUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
+    const [openSignatureModal, setOpenSignatureModal] = useState(false);
+    // Estados para la optimización de imagen
+    const [optimizing, setOptimizing] = useState(false);
+    const [optimizationProgress, setOptimizationProgress] = useState(0);
     const fileInputRef = useRef(null);
+    // For signature drawing mode
+    const canvasRef = useRef(null);
+    const isDrawing = useRef(false);
+    const lastX = useRef(0);
+    const lastY = useRef(0);
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        lastX.current = e.clientX - rect.left;
+        lastY.current = e.clientY - rect.top;
+        isDrawing.current = true;
+    };
+    const handlePointerMove = (e) => {
+        e.preventDefault();
+        if (!isDrawing.current)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const currentX = e.clientX - rect.left;
+        const currentY = e.clientY - rect.top;
+        ctx.beginPath();
+        ctx.moveTo(lastX.current, lastY.current);
+        ctx.lineTo(currentX, currentY);
+        ctx.strokeStyle = "black";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        lastX.current = currentX;
+        lastY.current = currentY;
+    };
+    const handlePointerUp = (e) => {
+        e?.preventDefault();
+        isDrawing.current = false;
+    };
+    const clearCanvas = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    };
+    const handleSignatureConfirm = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        canvas.toBlob(async (blob) => {
+            if (blob) {
+                const file = new File([blob], "signature.png", { type: "image/png" });
+                const objectUrl = URL.createObjectURL(file);
+                setPreviewSrc(objectUrl);
+                await processFile(file);
+                setOpenSignatureModal(false);
+            }
+        }, "image/png");
+    };
     useEffect(() => {
         return () => {
             if (previewSrc) {
@@ -29,6 +96,102 @@ export const FileUploadField = (props) => {
     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`;
+    const processFile = async (file, event) => {
+        let processedFile = file;
+        /*
+        if (file && file.type.startsWith("image/") && optimizeImages) {
+          try {
+            setOptimizing(true);
+            setOptimizationProgress(0);
+            const options: Options = {
+              fileType: "image/webp",
+              initialQuality: 0.7,
+              maxSizeMB: 1,
+              maxWidthOrHeight: 1920,
+              useWebWorker: true,
+              onProgress: (progress: number) => {
+                setOptimizationProgress(progress);
+              },
+            };
+            const compressedFile = await imageCompression(file, options);
+            setOptimizing(false);
+            processedFile = new File(
+              [compressedFile],
+              file.name.replace(/\.[^.]+$/, ".webp"),
+              { type: "image/webp" }
+            );
+            const objectUrl = URL.createObjectURL(processedFile);
+            setPreviewSrc(objectUrl);
+          } catch (error) {
+            console.error("Error al convertir la imagen a WebP:", error);
+            setOptimizing(false);
+            const objectUrl = URL.createObjectURL(file);
+            setPreviewSrc(objectUrl);
+          }
+        } else
+        */
+        if (file && file.type.startsWith("image/")) {
+            const objectUrl = URL.createObjectURL(file);
+            setPreviewSrc(objectUrl);
+        }
+        else {
+            setPreviewSrc(null);
+        }
+        if (event && event.target) {
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(processedFile);
+            event.target.files = dataTransfer.files;
+        }
+        // Proceso de subida mediante DirectUpload
+        import("@rails/activestorage")
+            .then(({ DirectUpload }) => {
+            const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
+            setProcessing && setProcessing(true);
+            setUploading(true);
+            setUploadProgress(0);
+            const directUpload = new DirectUpload(processedFile, uploadUrl, {
+                directUploadWillStoreFileWithXHR: (xhr) => {
+                    xhr.upload.addEventListener("progress", (event) => {
+                        if (event.lengthComputable) {
+                            const progress = Math.round((event.loaded / event.total) * 100);
+                            setUploadProgress(progress);
+                        }
+                    });
+                },
+            });
+            directUpload.create((error, blob) => {
+                setUploading(false);
+                setProcessing && setProcessing(false);
+                if (error) {
+                    console.error("Error al subir el archivo:", error);
+                }
+                else {
+                    setValue(name, blob.signed_id);
+                    setValue(`${name}_file_type`, blob.content_type);
+                    const hiddenField = document.createElement("input");
+                    hiddenField.setAttribute("type", "hidden");
+                    hiddenField.setAttribute("value", blob.signed_id);
+                    hiddenField.setAttribute("name", name);
+                    const typeHiddenField = document.createElement("input");
+                    typeHiddenField.setAttribute("type", "hidden");
+                    typeHiddenField.setAttribute("value", blob.content_type);
+                    typeHiddenField.setAttribute("name", `${name}_file_type`);
+                    const formElement = document.querySelector("form");
+                    if (formElement) {
+                        formElement.appendChild(hiddenField);
+                        formElement.appendChild(typeHiddenField);
+                    }
+                    if (fileInputRef.current) {
+                        fileInputRef.current.removeAttribute("name");
+                    }
+                }
+            });
+        })
+            .catch((err) => {
+            setProcessing && setProcessing(false);
+            console.error("Error al cargar DirectUpload:", err);
+        });
+    };
     /**
      * Función que se dispara cuando el usuario selecciona un archivo.
      * Si optimizeImages está activo y se trata de una imagen, la convierte a WebP
@@ -36,100 +199,9 @@ export const FileUploadField = (props) => {
      */
     const handleInputChange = async (event) => {
         if (event.target.files && event.target.files.length > 0) {
-            let file = event.target.files[0];
-            // Si se activa la optimización y es imagen, se convierte a WebP
-            if (file && file.type.startsWith("image/") && optimizeImages) {
-                try {
-                    /*
-                     const options: Options = {
-                       fileType: "image/webp", // Especificamos el formato WebP
-                       initialQuality: 0.7, // Calidad inicial (puedes ajustar este valor)
-                       maxSizeMB: 1, // Tamaño máximo (opcional)
-                       maxWidthOrHeight: 1920, // Dimensión máxima (opcional)
-                       useWebWorker: true,
-                     };
-                    // Después de la compresión, renombramos el archivo:
-                    const compressedFile = await imageCompression(file, options);
-                    const newFile = new File(
-                      [compressedFile],
-                      file.name.replace(/\.[^.]+$/, ".webp"),
-                      {
-                        type: file.type,
-                      }
-                    );
-                    file = newFile;
-                    */
-                    console.log("Archivo convertido:", file.name, file.type);
-                    const objectUrl = URL.createObjectURL(file);
-                    setPreviewSrc(objectUrl);
-                }
-                catch (error) {
-                    console.error("Error al convertir la imagen a WebP:", error);
-                    const objectUrl = URL.createObjectURL(file);
-                    setPreviewSrc(objectUrl);
-                }
-            }
-            else if (file && file.type.startsWith("image/")) {
-                const objectUrl = URL.createObjectURL(file);
-                setPreviewSrc(objectUrl);
-            }
-            else {
-                setPreviewSrc(null);
-            }
-            // Actualizamos el input para que contenga el archivo convertido
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(file);
-            event.target.files = dataTransfer.files;
-            // Importamos dinámicamente DirectUpload solo en el cliente
-            import("@rails/activestorage")
-                .then(({ DirectUpload }) => {
-                const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
-                setUploading(true);
-                setUploadProgress(0);
-                const directUpload = new DirectUpload(file, uploadUrl, {
-                    directUploadWillStoreFileWithXHR: (xhr) => {
-                        xhr.upload.addEventListener("progress", (event) => {
-                            if (event.lengthComputable) {
-                                const progress = Math.round((event.loaded / event.total) * 100);
-                                setUploadProgress(progress);
-                            }
-                        });
-                    },
-                });
-                directUpload.create((error, blob) => {
-                    setUploading(false);
-                    if (error) {
-                        console.error("Error al subir el archivo:", error);
-                    }
-                    else {
-                        setValue(name, blob.signed_id);
-                        setValue(`${name}_file_type`, blob.content_type);
-                        // Input hidden para el signed_id
-                        const hiddenField = document.createElement("input");
-                        hiddenField.setAttribute("type", "hidden");
-                        hiddenField.setAttribute("value", blob.signed_id);
-                        hiddenField.setAttribute("name", name);
-                        // Input hidden para el content_type
-                        const typeHiddenField = document.createElement("input");
-                        typeHiddenField.setAttribute("type", "hidden");
-                        typeHiddenField.setAttribute("value", blob.content_type);
-                        typeHiddenField.setAttribute("name", `${name}_file_type`);
-                        const formElement = document.querySelector("form");
-                        if (formElement) {
-                            formElement.appendChild(hiddenField);
-                            formElement.appendChild(typeHiddenField);
-                        }
-                        // Removemos el atributo "name" del input file para evitar enviar el archivo
-                        if (fileInputRef.current) {
-                            fileInputRef.current.removeAttribute("name");
-                        }
-                    }
-                });
-            })
-                .catch((err) => console.error("Error al cargar DirectUpload:", err));
+            await processFile(event.target.files[0], event);
         }
         onChange && onChange(event);
-        setFileDeleted(false);
     };
     /**
      * Función para eliminar el archivo. Además de limpiar la vista previa,
@@ -137,7 +209,6 @@ export const FileUploadField = (props) => {
      */
     const deleteFile = () => {
         setPreviewSrc(null);
-        setFileDeleted(true);
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
         }
@@ -167,16 +238,39 @@ export const FileUploadField = (props) => {
      *    - Si defaultValue es string, se muestra el preview (descarga/imagen).
      *    - Si no hay defaultValue (o es File), se muestra "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" }))] }));
+    if (signature) {
+        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 firma disponible" }))] }));
+        }
+        else {
+            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: "*" })] })), previewSrc ? (_jsxs("div", { children: [renderPreview(previewSrc), _jsx("button", { type: "button", onClick: () => {
+                                    setPreviewSrc(null);
+                                }, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar firma" })] })) : (_jsx("div", { children: _jsx("button", { type: "button", onClick: () => setOpenSignatureModal(true), className: "px-4 py-2 bg-blue-600 text-white rounded", children: "Firmar" }) })), openSignatureModal && (_jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-white", children: [_jsx("div", { className: "flex-grow flex items-center justify-center", children: _jsx("canvas", { ref: canvasRef, width: 400, height: 200, style: {
+                                        border: "1px solid #ccc",
+                                        backgroundColor: "transparent",
+                                        touchAction: "none",
+                                    }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerUp }) }), _jsxs("div", { className: "p-4 flex justify-center space-x-4", children: [_jsx("button", { type: "button", onClick: clearCanvas, className: "text-blue-600 underline text-sm", children: "Reset" }), _jsx("button", { type: "button", onClick: handleSignatureConfirm, className: "text-blue-600 underline text-sm", children: "Ok" }), _jsx("button", { type: "button", onClick: () => setOpenSignatureModal(false), className: "text-gray-600 underline text-sm", children: "Cancelar" })] })] }))] }));
+        }
     }
     /**
      * 2) Modo editable (readOnly = false):
+     *    - Se muestra siempre el recuadro de vista previa, ya sea con la imagen cargada o con un placeholder.
      *    - Si se ha seleccionado una imagen o existe defaultValue y no se ha eliminado,
-     *      se muestra la vista previa generada junto con un botón para eliminar el archivo.
-     *    - Si se elimina el archivo o no hay ninguno, se muestra el input para cargar uno.
+     *      se muestra la imagen y un botón para eliminar el 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-${color}-700`, children: [title, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), !fileDeleted &&
-                (previewSrc ? (_jsxs("div", { className: "mb-2 flex items-center", children: [renderPreview(previewSrc), _jsx("button", { type: "button", onClick: deleteFile, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar archivo" })] })) : (typeof defaultValue === "string" &&
-                    defaultValue && (_jsxs("div", { className: "mb-2 flex items-center", children: [renderPreview(defaultValue), _jsx("button", { type: "button", onClick: deleteFile, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar archivo" })] })))), _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 ?? {}), ref: fileInputRef, 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 }))] }) }))] }), uploading && (_jsxs("div", { className: "mt-2", children: [_jsx("progress", { value: uploadProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1", children: ["Subiendo archivo: ", uploadProgress, "%"] })] })), error && (_jsxs("p", { className: "mt-2 text-sm text-red-600", children: [_jsx("span", { className: "font-medium", children: "\u00A1Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+    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" }))] }));
+    }
+    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: "*" })] })), _jsxs("div", { className: "mb-2 flex items-center", children: [_jsx("div", { role: "button", tabIndex: 0, onClick: () => {
+                            const srcToOpen = previewSrc || (typeof defaultValue === "string" && defaultValue);
+                            if (srcToOpen)
+                                window.open(srcToOpen, "_blank");
+                        }, onKeyDown: (event) => {
+                            const srcToOpen = previewSrc || (typeof defaultValue === "string" && defaultValue);
+                            if (event.key === "Enter" && srcToOpen)
+                                window.open(srcToOpen, "_blank");
+                        }, className: "cursor-pointer border border-gray-300 h-48 w-48 flex items-center justify-center", children: previewSrc || (typeof defaultValue === "string" && defaultValue) ? (_jsx("img", { src: previewSrc ??
+                                (typeof defaultValue === "string" && defaultValue
+                                    ? defaultValue
+                                    : undefined), alt: name, className: "h-48 w-48", style: { objectFit: "contain" } })) : (_jsx("span", { className: "text-gray-400", children: "No image" })) }), (previewSrc || (typeof defaultValue === "string" && defaultValue)) && (_jsx("button", { type: "button", onClick: deleteFile, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar archivo" }))] }), _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 ?? {}), ref: fileInputRef, 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 }))] }) }))] }), _jsx("div", { className: "mt-2 min-h-[60px] flex items-center justify-center border border-dashed border-gray-200 rounded", children: optimizing || uploading ? (_jsxs(_Fragment, { children: [optimizing && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: optimizationProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Optimizando imagen a webp: ", optimizationProgress, "%"] })] })), uploading && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: uploadProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Subiendo archivo: ", uploadProgress, "%"] })] }))] })) : (_jsx("span", { className: "text-sm text-gray-500", children: "Informaci\u00F3n de progreso" })) }), error && (_jsxs("p", { className: "mt-2 text-sm text-red-600", children: [_jsx("span", { className: "font-medium", children: "\u00A1Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
 };

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

@@ -6,12 +6,10 @@ export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, }) =
         const error = useRouteError();
         const [showDetails, setShowDetails] = useState(!!parentError);
         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 ${error.status}: ${error.statusText}`
                                 : 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.message
+                                    : "Ha ocurrido un error inesperado" }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: ["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
                                         ? 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

@@ -1,6 +1,17 @@
 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 ExpandableText = ({ text, threshold = 30, }) => {
+    const [expanded, setExpanded] = useState(false);
+    const toggleExpanded = (e) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+    };
+    if (text.length <= threshold) {
+        return _jsx("span", { children: text });
+    }
+    return (_jsx("span", { onClick: toggleExpanded, style: { cursor: "pointer" }, children: expanded ? (_jsxs("span", { className: "text-base font-semibold", children: [text, " ", _jsx("span", { className: "ml-1", children: "\u25B2" })] })) : (_jsxs("span", { className: "text-sm font-semibold", children: [text.substring(0, threshold), "...", " ", _jsx("span", { className: "ml-1", children: "\u25BC" })] })) }));
+};
 const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "text", }) => {
     const defaultConfig = {
         itemSize: {
@@ -32,7 +43,7 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
         setSelectedItem(item);
         setQuantity(1);
         // Si el ítem tiene precio flexible, inicializamos el customPrice con su precio actual
-        setCustomPrice(item.flexiblePrice ? item.unitPrice : null);
+        setCustomPrice(item.flexiblePrice ? item.unit_price : 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" });
@@ -43,13 +54,13 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
             // (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
+                    customPrice ?? selectedItem.unit_price
                 : // si NO es flexible, solo usamos el precio que ya tenía
-                    selectedItem.unitPrice;
+                    selectedItem.unit_price;
             onClose({
                 ...selectedItem,
                 quantity,
-                unitPrice: finalPrice,
+                unit_price: finalPrice,
             });
         }
     };
@@ -67,7 +78,7 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
                 /* ==============================
                    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) => {
+                _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) => {
                             const isExpanded = expandedCategories[category.name];
                             // Estilos condicionales para "text" vs. "card"
                             const categoryContainerClasses = categoryViewMode === "card"
@@ -86,23 +97,23 @@ const ItemSelectionModal = ({ itemList, onClose, config, categoryViewMode = "tex
                                                     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-white bg-opacity-80"}`, children: _jsx(ExpandableText, { text: item.name, threshold: 30 }) }), _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));
+                                                            : "bg-white bg-opacity-80"}`, children: _jsxs("span", { className: "text-xs font-normal", children: [item.currencyPrefix, item.priceText] }) })] }, item.item_id));
+                                        }) }))] }, index));
                         }))] })) : (
                 /* ==============================
                    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) => {
+                _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) => {
                                                 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) => {
+                                            }), children: "-" }), _jsx("input", { className: "w-24 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" })] })] }))] }) }));

package/dist/esm/Skeletons/LoadingWindow.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 export const LoadingWindow = ({ loadingItems = [], description = "Por favor, espere mientras se carga la página.", }) => {
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+    if (!hasMounted) {
+        return null;
+    }
     return (_jsx("div", { className: "min-h-screen bg-gray-200 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.202",
+  "version": "2.0.204",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -35,11 +35,11 @@
     "@rails/activestorage": "^8.0.200",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.0.198",
-    "@zauru-sdk/hooks": "^2.0.198",
+    "@zauru-sdk/common": "^2.0.204",
+    "@zauru-sdk/hooks": "^2.0.204",
     "@zauru-sdk/icons": "^2.0.188",
-    "@zauru-sdk/types": "^2.0.197",
-    "@zauru-sdk/utils": "^2.0.202",
+    "@zauru-sdk/types": "^2.0.204",
+    "@zauru-sdk/utils": "^2.0.204",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "02024107088737551a72e04666cfd3d297547c95"
+  "gitHead": "1d4f8ef72286e9f7575109be154b09f53c3107f4"
 }

package/src/BlockUI/BlockUI.tsx

@@ -16,12 +16,11 @@ export const BlockUI = (props: Props) => {
   return (
     <div>
       <div className="relative">
-        <div className="absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center">
+        <div className="absolute bg-gray-100 bg-opacity-80 z-10 h-full w-full flex items-center justify-center">
           <div className="flex items-center">
             <span className="text-3xl mr-4">{loadingText}</span>
-            {/* <!-- loading icon --> */}
             <svg
-              className="animate-spin h-5 w-5 text-gray-600"
+              className="animate-spin h-36 w-36 text-gray-600"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -40,7 +39,6 @@ export const BlockUI = (props: Props) => {
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            {/* <!-- end loading icon --> */}
           </div>
         </div>
         {children}

package/src/Buttons/Button.tsx

@@ -78,8 +78,6 @@ export const Button = (props: Props) => {
 
   const color: ColorInterface = COLORS[selectedColor];
 
-  const inside = children ?? title;
-
   const errorMessage = formHasErrors
     ? Object.values(formErrors)
         .map((error) => error?.message?.toString())
@@ -87,36 +85,34 @@ export const Button = (props: Props) => {
     : "";
 
   const buttonContent = (
-    <>
-      <button
-        type={type}
-        name={"action"}
-        value={name}
-        disabled={
-          loading || disabled || (enableFormErrorsValidation && formHasErrors)
-        }
-        onClick={onClickSave}
-        className={`ml-2 ${
-          loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""
-        } ${
-          loading
-            ? " cursor-progress"
-            : `${
-                disabled || (enableFormErrorsValidation && formHasErrors)
-                  ? ""
-                  : `hover:${color.bg700}`
-              }`
-        } inline-flex justify-center rounded-md border border-transparent ${
-          color.bg600
-        } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
-          color.ring500
-        } focus:ring-offset-2 ${className}`}
-      >
-        {loading ? loadingText : inside}
-      </button>
-    </>
+    <button
+      type={type}
+      name={"action"}
+      value={name}
+      disabled={
+        loading || disabled || (enableFormErrorsValidation && formHasErrors)
+      }
+      onClick={onClickSave}
+      className={`${
+        loading || disabled || (enableFormErrorsValidation && formHasErrors)
+          ? " bg-opacity-25 "
+          : ""
+      } ${
+        loading
+          ? " cursor-progress"
+          : `${
+              disabled || (enableFormErrorsValidation && formHasErrors)
+                ? ""
+                : `hover:${color.bg700}`
+            }`
+      } inline-flex justify-center rounded-md border border-transparent ${
+        color.bg600
+      } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
+        color.ring500
+      } focus:ring-offset-2 ${className}`}
+    >
+      {loading ? children ?? loadingText : children ?? title}
+    </button>
   );
 
   return (