@sarunyu/system-one 4.7.5 → 4.7.6

package/dist/index.js

@@ -4203,20 +4203,47 @@ function ToastStack({ items, className, renderItem }) {
     (item) => renderItem ? /* @__PURE__ */ jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsx(Toast, { ...item }, item.id)
   ) });
 }
-function Toaster({ items, renderItem, className }) {
+function Toaster({ items, renderItem, className, duration = 4e3, onRemove }) {
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!onRemove || duration === 0) return;
+    items.forEach((item) => {
+      if (!timers.current.has(item.id)) {
+        const t = setTimeout(() => {
+          onRemove(item.id);
+          timers.current.delete(item.id);
+        }, duration);
+        timers.current.set(item.id, t);
+      }
+    });
+    const live = new Set(items.map((i) => i.id));
+    timers.current.forEach((t, id) => {
+      if (!live.has(id)) {
+        clearTimeout(t);
+        timers.current.delete(id);
+      }
+    });
+  });
+  useEffect(() => {
+    return () => {
+      timers.current.forEach(clearTimeout);
+    };
+  }, []);
   if (items.length === 0) return null;
+  const enriched = items.map((item) => ({
+    ...item,
+    onClose: onRemove ? () => onRemove(item.id) : item.onClose
+  }));
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "fixed z-50 top-4",
-        // desktop: top-right, fixed width
         "md:right-4 md:w-[360px]",
-        // tablet & mobile: horizontally centered, full width minus padding
         "max-md:left-1/2 max-md:-translate-x-1/2 max-md:w-[calc(100vw-32px)]",
         className
       ),
-      children: /* @__PURE__ */ jsx(ToastStack, { items, renderItem })
+      children: /* @__PURE__ */ jsx(ToastStack, { items: enriched, renderItem })
     }
   );
 }