@sarunyu/system-one 4.7.4 → 4.7.6

package/dist/index.js

@@ -4203,6 +4203,50 @@ 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, 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",
+        "md:right-4 md:w-[360px]",
+        "max-md:left-1/2 max-md:-translate-x-1/2 max-md:w-[calc(100vw-32px)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ToastStack, { items: enriched, renderItem })
+    }
+  );
+}
 const OptionList = forwardRef(
   function OptionList2({
     options,
@@ -5864,6 +5908,7 @@ export {
   TimeInput,
   Toast,
   ToastStack,
+  Toaster,
   Toggle,
   cn,
   useIsMobile