sigpro-ui/components/toast.js

// components/Toast.js
import { h, mount } from "sigpro";

export const Toast = (message, type = "alert-success", duration = 3500) => {
  let container = document.getElementById("sigpro-toast-container");
  if (!container) {
    container = h("div", {
      id: "sigpro-toast-container",
      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"
    });
    document.body.appendChild(container);
  }

  const toastHost = h("div", { style: "display: contents" });
  container.appendChild(toastHost);

  let timeoutId;
  const close = () => {
    clearTimeout(timeoutId);
    const el = toastHost.firstElementChild;
    if (el && !el.classList.contains("opacity-0")) {
      el.classList.add("translate-x-full", "opacity-0");
      setTimeout(() => {
        instance.destroy();
        toastHost.remove();
        if (!container.hasChildNodes()) container.remove();
      }, 300);
    } else {
      instance.destroy();
      toastHost.remove();
    }
  };

  const ToastComponent = () => {
    const closeIcon = h("span", { class: "icon-[lucide--x]" });
    const closeBtn = h("button", {
      class: "btn btn-xs btn-circle btn-ghost",
      onclick: close
    }, closeIcon);

    const alertDiv = h("div", {
      class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
    }, [
      h("span", {}, typeof message === "function" ? message() : message),
      closeBtn
    ]);

    requestAnimationFrame(() => alertDiv.classList.remove("translate-x-10", "opacity-0"));
    return alertDiv;
  };

  const instance = mount(ToastComponent, toastHost);
  if (duration > 0) timeoutId = setTimeout(close, duration);
  return close;
};