@underverse-ui/underverse 0.2.29 → 0.2.31

package/dist/index.cjs

@@ -2539,6 +2539,8 @@ var Modal = ({
   const [isMounted, setIsMounted] = React10.useState(false);
   const [isVisible, setIsVisible] = React10.useState(false);
   const [isAnimating, setIsAnimating] = React10.useState(true);
+  const mouseDownTarget = React10.useRef(null);
+  const modalContentRef = React10.useRef(null);
   React10.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
@@ -2578,68 +2580,84 @@ var Modal = ({
       document.body.style.overflow = "unset";
     };
   }, [isOpen]);
-  const handleOverlayClick = (event) => {
-    if (closeOnOverlayClick) {
+  const handleOverlayMouseDown = (event) => {
+    mouseDownTarget.current = event.target;
+  };
+  const handleOverlayMouseUp = (event) => {
+    const modalContent2 = modalContentRef.current;
+    const mouseDownOutside = modalContent2 && !modalContent2.contains(mouseDownTarget.current);
+    const mouseUpOutside = modalContent2 && !modalContent2.contains(event.target);
+    if (closeOnOverlayClick && mouseDownOutside && mouseUpOutside) {
       onClose();
     }
+    mouseDownTarget.current = null;
   };
   if (!isMounted || !isOpen && !isVisible) {
     return null;
   }
   const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles3[size];
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
-      {
-        className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "div",
-      {
-        className: cn(
-          "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
-          "transition-all duration-200 ease-out",
-          maxWidthClass,
-          fullWidth && "mx-0",
-          className
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      onMouseDown: handleOverlayMouseDown,
+      onMouseUp: handleOverlayMouseUp,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0
+            }
+          }
         ),
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0,
-          transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
-          // Thêm dòng này để tạo hiệu ứng nảy
-          transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
-          width,
-          height
-        },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1.5", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
-            ] }),
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "button",
-              {
-                onClick: onClose,
-                className: cn(
-                  "rounded-sm opacity-70 ring-offset-background transition-opacity",
-                  "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                  "disabled:pointer-events-none "
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-4 w-4 cursor-pointer" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            ref: modalContentRef,
+            className: cn(
+              "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
+              "transition-all duration-200 ease-out",
+              maxWidthClass,
+              fullWidth && "mx-0",
+              className
+            ),
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0,
+              transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
+              // Thêm dòng này để tạo hiệu ứng nảy
+              transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
+              width,
+              height
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1.5", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: cn(
+                      "rounded-sm opacity-70 ring-offset-background transition-opacity",
+                      "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "disabled:pointer-events-none "
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-4 w-4 cursor-pointer" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
+            ]
+          }
+        )
+      ]
+    }
+  );
   return typeof window !== "undefined" ? (0, import_react_dom.createPortal)(modalContent, document.body) : null;
 };
 var Modal_default = Modal;
@@ -2670,11 +2688,6 @@ var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
         const updated = [newToast, ...prev];
         return updated.slice(0, maxToasts);
       });
-      if (toast.duration !== 0) {
-        setTimeout(() => {
-          removeToast(id);
-        }, toast.duration || 5e3);
-      }
     },
     [maxToasts, removeToast]
   );
@@ -2695,33 +2708,31 @@ var ToastComponent = ({ toast, onRemove }) => {
   const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
   const [progress, setProgress] = (0, import_react8.useState)(100);
   const [paused, setPaused] = (0, import_react8.useState)(false);
-  const [startTs] = (0, import_react8.useState)(() => Date.now());
   const total = toast.duration && toast.duration > 0 ? toast.duration : 5e3;
-  const [remaining, setRemaining] = (0, import_react8.useState)(total);
+  const endTsRef = (0, import_react8.useRef)(Date.now() + total);
+  const remainingRef = (0, import_react8.useRef)(total);
+  const pausedRef = (0, import_react8.useRef)(false);
+  const handleRemove = (0, import_react8.useCallback)(() => {
+    setIsVisible(false);
+    setTimeout(() => onRemove(toast.id), 150);
+  }, [onRemove, toast.id]);
   (0, import_react8.useEffect)(() => {
     setIsVisible(true);
     if (toast.duration === 0) return;
-    let raf;
-    const tick = () => {
-      if (!paused) {
-        const elapsed = Date.now() - startTs;
-        const remain = Math.max(total - elapsed, 0);
-        setRemaining(remain);
+    remainingRef.current = total;
+    endTsRef.current = Date.now() + total;
+    const intervalId = window.setInterval(() => {
+      if (!pausedRef.current) {
+        const remain = Math.max(endTsRef.current - Date.now(), 0);
+        remainingRef.current = remain;
         setProgress(remain / total * 100);
         if (remain === 0) {
           handleRemove();
-          return;
         }
       }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  const handleRemove = () => {
-    setIsVisible(false);
-    setTimeout(() => onRemove(toast.id), 150);
-  };
+    }, 50);
+    return () => window.clearInterval(intervalId);
+  }, [handleRemove, toast.duration, total]);
   const typeConfig = {
     success: {
       icon: import_lucide_react7.CheckCircle,
@@ -2757,8 +2768,18 @@ var ToastComponent = ({ toast, onRemove }) => {
       ),
       role: "status",
       "aria-live": toast.type === "error" ? "assertive" : "polite",
-      onMouseEnter: () => setPaused(true),
-      onMouseLeave: () => setPaused(false),
+      onMouseEnter: () => {
+        if (toast.duration === 0) return;
+        pausedRef.current = true;
+        remainingRef.current = Math.max(endTsRef.current - Date.now(), 0);
+        setPaused(true);
+      },
+      onMouseLeave: () => {
+        if (toast.duration === 0) return;
+        pausedRef.current = false;
+        endTsRef.current = Date.now() + remainingRef.current;
+        setPaused(false);
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3 p-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: cn("h-5 w-5 mt-0.5 shrink-0", config.iconClassName) }),