@sarunyu/system-one 4.7.4 → 4.7.6

package/dist/index.cjs

@@ -4222,6 +4222,50 @@ function ToastStack({ items, className, renderItem }) {
     (item) => renderItem ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...item }, item.id)
   ) });
 }
+function Toaster({ items, renderItem, className, duration = 4e3, onRemove }) {
+  const timers = React.useRef(/* @__PURE__ */ new Map());
+  React.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);
+      }
+    });
+  });
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToastStack, { items: enriched, renderItem })
+    }
+  );
+}
 const OptionList = React.forwardRef(
   function OptionList2({
     options,
@@ -5882,6 +5926,7 @@ exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
 exports.Toast = Toast;
 exports.ToastStack = ToastStack;
+exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.cn = cn;
 exports.useIsMobile = useIsMobile;