@divetocode/toast/dist/index.cjs

A lightweight toast notification system for React/Next.js

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  ToastRoot: () => ToastRoot_default,
  showToast: () => showToast
});
module.exports = __toCommonJS(index_exports);

// src/Toast.tsx
var listener = null;
var showToast = (message, options) => {
  listener?.(message, options);
};
var _internalSetToastListener = (fn) => {
  listener = fn;
};

// src/ToastRoot.tsx
var import_react = require("react");
var import_react_dom = require("react-dom");
var import_jsx_runtime = require("react/jsx-runtime");
var toastId = 0;
var ToastRoot = () => {
  const [toasts, setToasts] = (0, import_react.useState)([]);
  const [mounted, setMounted] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    setMounted(true);
    _internalSetToastListener((message, options) => {
      const id = toastId++;
      const type = options?.type || "success";
      setToasts((prev) => [...prev, { id, message, type }]);
      setTimeout(() => {
        setToasts((prev) => prev.filter((t) => t.id !== id));
      }, 5e3);
    });
  }, []);
  if (!mounted) return null;
  return (0, import_react_dom.createPortal)(
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
          @keyframes slide-in {
            0% {
              opacity: 0;
              transform: translateX(100%);
            }
            100% {
              opacity: 1;
              transform: translateX(0);
            }
          }

          .toast-container {
            position: fixed;
            top: 1.5rem; /* top-6 */
            right: 1.5rem; /* right-6 */
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem; /* space-y-2 */
            pointer-events: none;
          }

          .toast-base {
            position: relative;
            width: 100%;
            max-width: 20rem; /* max-w-xs */
            padding: 0.5rem 1rem; /* px-4 py-2 */
            margin-top: 0.5rem; /* mt-2 */
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                        0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            transition: all 0.5s; /* transition-all duration-500 */
            transform: translateX(0); /* transform */
            animation: slide-in 0.3s ease-out; /* animate-slide-in */
          }

          .toast-success {
            background-color: #d1fae5; /* bg-green-100 */
            color: #065f46; /* text-green-900 */
            border: 1px solid #a7f3d0; /* border-green-300 */
          }

          .toast-error {
            background-color: #fee2e2; /* bg-red-100 */
            color: #991b1b; /* text-red-900 */
            border: 1px solid #fca5a5; /* border-red-300 */
          }
        ` }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "toast-container", children: toasts.map((t) => {
        const typeClass = t.type === "error" ? "toast-error" : "toast-success";
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `toast-base ${typeClass}`, children: t.message }, t.id);
      }) })
    ] }),
    document.body
  );
};
var ToastRoot_default = ToastRoot;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ToastRoot,
  showToast
});
//# sourceMappingURL=index.cjs.map