@underverse-ui/underverse 0.2.30 → 0.2.31

package/dist/index.cjs

@@ -2688,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]
   );
@@ -2713,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,
@@ -2775,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) }),