@underverse-ui/underverse 0.2.30 → 0.2.32

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,53 +2708,59 @@ 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,
-      className: "bg-success/10 border-success/20 text-foreground",
-      iconClassName: "text-success"
+      containerClassName: "bg-success/5 border-success/30",
+      iconClassName: "text-success",
+      iconBgClassName: "bg-success/15",
+      accentBarClassName: "bg-success"
     },
     error: {
       icon: import_lucide_react7.AlertCircle,
-      className: "bg-destructive/10 border-destructive/20 text-foreground",
-      iconClassName: "text-destructive"
+      containerClassName: "bg-destructive/5 border-destructive/30",
+      iconClassName: "text-destructive",
+      iconBgClassName: "bg-destructive/15",
+      accentBarClassName: "bg-destructive"
     },
     warning: {
       icon: import_lucide_react7.AlertTriangle,
-      className: "bg-warning/10 border-warning/20 text-foreground",
-      iconClassName: "text-warning"
+      containerClassName: "bg-warning/5 border-warning/30",
+      iconClassName: "text-warning",
+      iconBgClassName: "bg-warning/15",
+      accentBarClassName: "bg-warning"
     },
     info: {
       icon: import_lucide_react7.Info,
-      className: "bg-info/10 border-info/20 text-foreground",
-      iconClassName: "text-info"
+      containerClassName: "bg-info/5 border-info/30",
+      iconClassName: "text-info",
+      iconBgClassName: "bg-info/15",
+      accentBarClassName: "bg-info"
     }
   };
   const config = typeConfig[toast.type];
@@ -2768,18 +2769,30 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-lg border backdrop-blur-sm transition-all duration-300 ease-soft pointer-events-auto",
-        "bg-card/95 shadow-lg animate-in slide-in-from-right-full",
-        config.className,
+        "relative w-80 rounded-r-lg border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "bg-card shadow-xl",
+        "animate-in slide-in-from-right-full",
+        config.containerClassName,
         isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
       ),
       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) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", config.accentBarClassName) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3 p-4 pl-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex items-center justify-center w-8 h-8 rounded-full shrink-0", config.iconBgClassName), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: cn("h-4 w-4", config.iconClassName) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 space-y-1", children: [
             toast.title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: toast.message }),