@votodigital-onpeui/react 0.1.29 → 0.1.31

package/dist/components.js

@@ -443,6 +443,9 @@ var Modal = ({
   existTabIndex = true,
   zIndexLevel = 100,
   onCloseComplete,
+  alignTop = false,
+  animated = true,
+  preventBodyScroll = true,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overlayColor reservado para uso futuro
   overlayColor: _overlayColor = "blue",
   ...props
@@ -476,6 +479,7 @@ var Modal = ({
     }
   }, [isOpen, onCloseComplete]);
   react.useEffect(() => {
+    if (!preventBodyScroll) return;
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -484,7 +488,7 @@ var Modal = ({
     return () => {
       document.body.style.overflow = "";
     };
-  }, [isOpen]);
+  }, [isOpen, preventBodyScroll]);
   react.useEffect(() => {
     if (!isOpen) return;
     const resetScroll = () => {
@@ -696,8 +700,9 @@ var Modal = ({
       {
         style: { zIndex: zIndexLevel },
         className: [
-          "fixed inset-0 bg-onpe-blue transition-opacity duration-200",
-          visible ? "opacity-80" : "opacity-0"
+          "fixed inset-0 bg-onpe-blue",
+          animated ? "transition-opacity duration-200" : "",
+          animated ? visible ? "opacity-80" : "opacity-0" : "opacity-80"
         ].join(" "),
         onClick: onClose
       }
@@ -707,9 +712,10 @@ var Modal = ({
       {
         style: { zIndex: zIndexLevel + 10 },
         className: [
-          "fixed top-0 w-full h-screen grid place-items-center",
-          "transition-all duration-200",
-          visible ? "opacity-100 scale-100 translate-y-0" : "opacity-[0.2] scale-95 -translate-y-5"
+          "fixed top-0 w-full h-screen grid",
+          alignTop ? "place-items-start pt-8" : "place-items-center",
+          animated ? "transition-all duration-200" : "",
+          animated ? visible ? "opacity-100 scale-100 translate-y-0" : "opacity-[0.2] scale-95 -translate-y-5" : "opacity-100 scale-100 translate-y-0"
         ].join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative grid place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1183,17 +1189,25 @@ var ModalConfirm = ({
   },
   onCancel = () => {
   },
-  textButtonConfirm = "Confirmar",
-  textButtonCancel = "Cancelar",
+  textButtonConfirm,
+  textButtonCancel,
   className = "",
   zIndexLevel = 100,
-  disableFocus = false
+  disableFocus = false,
+  closeButton = false,
+  alignJustify = false,
+  alignTop = false,
+  animated = true,
+  preventBodyScroll = true
 }) => {
   const titleId = "modal-confirm-title";
   const messageId = "modal-confirm-message";
   const effectiveMessage = message ?? content;
   const effectiveColorClass = color ? colorOverrideMap[color] ?? "text-onpe-skyblue" : "text-onpe-skyblue";
-  const showTwoButtons = buttonMode === "double";
+  const isConfirmMode = buttonMode === "confirm";
+  const showTwoButtons = buttonMode === "double" || isConfirmMode;
+  const confirmLabel = textButtonConfirm ?? (isConfirmMode ? "S\xED" : "Confirmar");
+  const cancelLabel = textButtonCancel ?? (isConfirmMode ? "No" : "Cancelar");
   const handleConfirm = async () => {
     try {
       await onConfirm();
@@ -1213,12 +1227,15 @@ var ModalConfirm = ({
       isOpen,
       onClose,
       className: `max-w-[719px]! pt-[30px]! pb-[30px]! px-[30px]! ${className}`,
-      closeButton: false,
+      closeButton,
       closeDisabled,
       zIndexLevel,
       "aria-labelledby": titleId,
       "aria-describedby": messageId,
       disableFocus,
+      alignTop,
+      animated,
+      preventBodyScroll,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: renderIcon(type, effectiveColorClass) }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1236,7 +1253,7 @@ var ModalConfirm = ({
           "div",
           {
             id: messageId,
-            className: "mt-7 text-sm md:text-lg text-center max-w-full text-black",
+            className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
             children: effectiveMessage
           }
         ),
@@ -1246,7 +1263,7 @@ var ModalConfirm = ({
             {
               className: "w-full max-w-[200px]",
               color: "red",
-              title: textButtonConfirm,
+              title: confirmLabel,
               onClick: handleConfirm,
               disabled: disabledConfirmButton
             }
@@ -1256,7 +1273,7 @@ var ModalConfirm = ({
             {
               className: "w-full max-w-[200px]",
               color: "skyblue",
-              title: textButtonCancel,
+              title: cancelLabel,
               onClick: handleCancel
             }
           )
@@ -1267,7 +1284,7 @@ var ModalConfirm = ({
             {
               className: "w-[200px]",
               color: "skyblue",
-              title: textButtonCancel,
+              title: cancelLabel,
               onClick: handleCancel
             }
           ),
@@ -1276,7 +1293,7 @@ var ModalConfirm = ({
             {
               className: "w-[200px]",
               color: "red",
-              title: textButtonConfirm,
+              title: confirmLabel,
               onClick: handleConfirm,
               disabled: disabledConfirmButton
             }
@@ -1292,7 +1309,10 @@ var ModalLoading = ({
   },
   message = "Cargando...",
   className = "",
-  zIndexLevel = 100
+  zIndexLevel = 100,
+  animated = true,
+  preventBodyScroll = true,
+  spinner
 }) => {
   const [announceMessage, setAnnounceMessage] = react.useState("");
   react.useEffect(() => {
@@ -1318,22 +1338,26 @@ var ModalLoading = ({
       className,
       closeDisabled: true,
       whitoutBackground: true,
+      animated,
+      preventBodyScroll,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: announceMessage }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconSpinnerDesktop,
-          {
-            className: "hidden md:block text-white animate-spin",
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconSpinnerMobile,
-          {
-            className: "block md:hidden text-white animate-spin",
-            "aria-hidden": "true"
-          }
-        ),
+        spinner ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconSpinnerDesktop,
+            {
+              className: "hidden md:block text-white animate-spin",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconSpinnerMobile,
+            {
+              className: "block md:hidden text-white animate-spin",
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })
       ]
     }