@react-opener/toast 0.0.1-alpha.1

package/dist/Renderer.d.ts

@@ -0,0 +1,7 @@
+import type { Options, createToastStore } from "./store";
+export declare const ReactToastOpener: ({ store, style, className, options, }: {
+    store: ReturnType<typeof createToastStore>;
+    style?: React.CSSProperties;
+    className?: string;
+    options?: Options;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ToastBar.d.ts

@@ -0,0 +1,11 @@
+import type { Toast, ToastPositionType } from "../store";
+export declare const ToastBar: React.FC<{
+    isOpen: boolean;
+    toast: Toast & {
+        id: string;
+    };
+    delay: number;
+    position: ToastPositionType;
+    close: (id: string) => void;
+    unmount: (id: string) => void;
+}>;

package/dist/components/ToastIcon.d.ts

@@ -0,0 +1,5 @@
+import { type ToastIconType } from "../store";
+export declare const ToastIcon: React.FC<{
+    className?: string;
+    icon: ToastIconType;
+}>;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { createToastStore } from "./store";
+import { ReactToastOpener as _ReactToastOpener } from "./Renderer";
+import { useToast } from "./useToast";
+type CompoundedComponent = typeof _ReactToastOpener & {
+    createStore: typeof createToastStore;
+    useToast: typeof useToast;
+};
+declare const ReactToastOpener: CompoundedComponent;
+export { ReactToastOpener };

package/dist/index.js

@@ -0,0 +1,413 @@
+'use strict';
+
+var reactOpener = require('react-opener');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+var e = {
+    data: ""
+  },
+  t = function t(_t) {
+    if ("object" == (typeof window === "undefined" ? "undefined" : _typeof(window))) {
+      var _e = (_t ? _t.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
+        innerHTML: " ",
+        id: "_goober"
+      });
+      return _e.nonce = window.__nonce__, _e.parentNode || (_t || document.head).appendChild(_e), _e.firstChild;
+    }
+    return _t || e;
+  },
+  l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,
+  a = /\/\*[^]*?\*\/|  +/g,
+  n = /\n+/g,
+  _o = function o(e, t) {
+    var r = "",
+      l = "",
+      a = "";
+    var _loop = function _loop(_n) {
+      var c = e[_n];
+      "@" == _n[0] ? "i" == _n[1] ? r = _n + " " + c + ";" : l += "f" == _n[1] ? _o(c, _n) : _n + "{" + _o(c, "k" == _n[1] ? "" : t) + "}" : "object" == _typeof(c) ? l += _o(c, t ? t.replace(/([^,])+/g, function (e) {
+        return _n.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, function (t) {
+          return /&/.test(t) ? t.replace(/&/g, e) : e ? e + " " + t : t;
+        });
+      }) : _n) : null != c && (_n = /^--/.test(_n) ? _n : _n.replace(/[A-Z]/g, "-$&").toLowerCase(), a += _o.p ? _o.p(_n, c) : _n + ":" + c + ";");
+    };
+    for (var _n in e) {
+      _loop(_n);
+    }
+    return r + (t && a ? t + "{" + a + "}" : a) + l;
+  },
+  c = {},
+  _s = function s(e) {
+    if ("object" == _typeof(e)) {
+      var _t2 = "";
+      for (var _r in e) _t2 += _r + _s(e[_r]);
+      return _t2;
+    }
+    return e;
+  },
+  i = function i(e, t, r, _i, p) {
+    var u = _s(e),
+      d = c[u] || (c[u] = function (e) {
+        var t = 0,
+          r = 11;
+        for (; t < e.length;) r = 101 * r + e.charCodeAt(t++) >>> 0;
+        return "go" + r;
+      }(u));
+    if (!c[d]) {
+      var _t3 = u !== e ? e : function (e) {
+        var t,
+          r,
+          o = [{}];
+        for (; t = l.exec(e.replace(a, ""));) t[4] ? o.shift() : t[3] ? (r = t[3].replace(n, " ").trim(), o.unshift(o[0][r] = o[0][r] || {})) : o[0][t[1]] = t[2].replace(n, " ").trim();
+        return o[0];
+      }(e);
+      c[d] = _o(p ? _defineProperty({}, "@keyframes " + d, _t3) : _t3, r ? "" : "." + d);
+    }
+    var f = r && c.g ? c.g : null;
+    return r && (c.g = c[d]), function (e, t, r, l) {
+      l ? t.data = t.data.replace(l, e) : -1 === t.data.indexOf(e) && (t.data = r ? e + t.data : t.data + e);
+    }(c[d], t, _i, f), d;
+  },
+  p = function p(e, t, r) {
+    return e.reduce(function (e, l, a) {
+      var n = t[a];
+      if (n && n.call) {
+        var _e2 = n(r),
+          _t4 = _e2 && _e2.props && _e2.props.className || /^go/.test(_e2) && _e2;
+        n = _t4 ? "." + _t4 : _e2 && "object" == _typeof(_e2) ? _e2.props ? "" : _o(_e2, "") : false === _e2 ? "" : _e2;
+      }
+      return e + l + (null == n ? "" : n);
+    }, "");
+  };
+function u(e) {
+  var r = this || {},
+    l = e.call ? e(r.p) : e;
+  return i(l.unshift ? l.raw ? p(l, [].slice.call(arguments, 1), r.p) : l.reduce(function (e, t) {
+    return Object.assign(e, t && t.call ? t(r.p) : t);
+  }, {}) : l, t(r.target), r.g, r.o, r.k);
+}
+var d,
+  f,
+  g;
+  u.bind({
+    g: 1
+  });
+  var h = u.bind({
+    k: 1
+  });
+function m(e, t, r, l) {
+  _o.p = t, d = e, f = r, g = l;
+}
+function w(e, t) {
+  var r = this || {};
+  return function () {
+    var l = arguments;
+    function a(n, o) {
+      var c = Object.assign({}, n),
+        s = c.className || a.className;
+      r.p = Object.assign({
+        theme: f && f()
+      }, c), r.o = / *go\d+/.test(s), c.className = u.apply(r, l) + (s ? " " + s : "");
+      var i = e;
+      return e[0] && (i = c.as || e, delete c.as), g && i[0] && g(c), d(i, c);
+    }
+    return t ? t(a) : a;
+  };
+}
+
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1;
+var WarningMark = w("i")(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid currentColor;\n  color: #faad14;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    border-radius: 3px;\n    width: 2px;\n    background: currentColor;\n    left: 7px;\n  }\n  &::after {\n    top: 2px;\n    height: 8px;\n  }\n  &::before {\n    height: 2px;\n    bottom: 2px;\n  }\n"])));
+var InfoMark = w("i")(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid currentColor;\n  color: #1677ff;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    border-radius: 3px;\n    width: 2px;\n    background: currentColor;\n    left: 7px;\n  }\n  &::after {\n    bottom: 2px;\n    height: 8px;\n  }\n  &::before {\n    height: 2px;\n    top: 2px;\n  }\n"])));
+var SuccessMark = w("i")(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 22px;\n  height: 22px;\n  border: 2px solid currentColor;\n  color: #52c41a;\n  border-radius: 100px;\n  &::after {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    left: 3px;\n    top: -1px;\n    width: 6px;\n    height: 10px;\n    border-color: currentColor;\n    border-width: 0 2px 2px 0;\n    border-style: solid;\n    transform-origin: bottom left;\n    transform: rotate(45deg);\n  }\n"])));
+var ErrorMark = w("i")(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 22px;\n  height: 22px;\n  border: 2px solid currentColor;\n  color: #ff4d4f;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    width: 12px;\n    height: 2px;\n    background: currentColor;\n    transform: rotate(45deg);\n    border-radius: 5px;\n    top: 8px;\n    left: 3px;\n  }\n  &::after {\n    transform: rotate(-45deg);\n  }\n"])));
+var ToastIcon = function ToastIcon(_ref) {
+  var className = _ref.className,
+    icon = _ref.icon;
+  switch (icon) {
+    case "error":
+      return /*#__PURE__*/jsxRuntime.jsx(ErrorMark, {
+        className: className
+      });
+    case "success":
+      return /*#__PURE__*/jsxRuntime.jsx(SuccessMark, {
+        className: className
+      });
+    case "info":
+      return /*#__PURE__*/jsxRuntime.jsx(InfoMark, {
+        className: className
+      });
+    case "warning":
+      return /*#__PURE__*/jsxRuntime.jsx(WarningMark, {
+        className: className
+      });
+    default:
+      return icon;
+  }
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var enterAnimation = function enterAnimation(factor) {
+  return h(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0,", "px,0) scale(.8);\n    opacity:.5;\n  }\n  100% {\n    transform: translate3d(0,0,0) scale(1);\n    opacity:1;\n  }\n"])), factor * -150);
+};
+var exitAnimation = function exitAnimation(factor) {
+  return h(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0,0,-1px) scale(1);\n    opacity:1;\n  }\n  100% {\n    transform: translate3d(0,", "px,-1px) scale(.8);\n    opacity:0;\n  }\n"])), factor * -100);
+};
+var Component = w("div")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: #fff;\n  color: #363636;\n  line-height: 1.3;\n  will-change: transform;\n  box-shadow:\n    0 3px 10px rgba(0, 0, 0, 0.1),\n    0 3px 3px rgba(0, 0, 0, 0.05);\n  max-width: 400px;\n  pointer-events: auto;\n  padding: 8px;\n  border-radius: 8px;\n"])));
+var Message = w("div")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  color: inherit;\n  flex: 1;\n  white-space: pre-line;\n"])));
+var getAnimationStyle = function getAnimationStyle(position, visible) {
+  var factor = position.includes("top") ? 1 : -1;
+  return {
+    animation: visible ? "".concat(enterAnimation(factor), " 0.35s cubic-bezier(.21,1.02,.73,1) forwards") : "".concat(exitAnimation(factor), " 0.6s forwards cubic-bezier(.06,.71,.55,1)")
+  };
+};
+var ToastBar = /*#__PURE__*/react.memo(function (_ref) {
+  var isOpen = _ref.isOpen,
+    toast = _ref.toast,
+    position = _ref.position,
+    delay = _ref.delay,
+    close = _ref.close,
+    unmount = _ref.unmount;
+  var animationStyle = getAnimationStyle(position, isOpen);
+  var icon = toast.icon && /*#__PURE__*/jsxRuntime.jsx(ToastIcon, {
+    className: "ro-toast-icon",
+    icon: toast.icon
+  });
+  var message = /*#__PURE__*/jsxRuntime.jsx(Message, {
+    className: "ro-toast-message",
+    children: toast.message
+  });
+  react.useEffect(function () {
+    var timeout = setTimeout(function () {
+      close(toast.id);
+    }, delay);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs(Component, {
+    className: "ro-toast-bar",
+    style: animationStyle,
+    onAnimationEnd: function onAnimationEnd() {
+      if (!isOpen) {
+        unmount(toast.id);
+      }
+    },
+    children: [icon, message]
+  });
+});
+
+var createToastStore = function createToastStore() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$delay = options.delay,
+    delay = _options$delay === void 0 ? 1000 : _options$delay,
+    _options$position = options.position,
+    position = _options$position === void 0 ? "top-center" : _options$position;
+  var store = reactOpener.createStore(function (_, state) {
+    return _objectSpread2(_objectSpread2({}, state), {}, {
+      position: position,
+      delay: delay
+    });
+  });
+  var openToast = function openToast(item) {
+    var element = function element(_ref) {
+      var _state$delay;
+      var close = _ref.close,
+        id = _ref.id,
+        isOpen = _ref.isOpen,
+        state = _ref.state,
+        unmount = _ref.unmount;
+      return /*#__PURE__*/jsxRuntime.jsx(ToastBar, {
+        isOpen: isOpen,
+        toast: _objectSpread2(_objectSpread2({}, state), {}, {
+          id: id
+        }),
+        close: close,
+        unmount: unmount,
+        position: position,
+        delay: (_state$delay = state.delay) !== null && _state$delay !== void 0 ? _state$delay : delay
+      }, id);
+    };
+    store.getState().open(element, typeof item === "string" ? {
+      message: item
+    } : item);
+  };
+  return _objectSpread2(_objectSpread2({}, store), {}, {
+    custom: function custom(item) {
+      openToast(item);
+    },
+    success: function success(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "success"
+      }));
+    },
+    error: function error(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "error"
+      }));
+    },
+    info: function info(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "info"
+      }));
+    },
+    warn: function warn(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "warning"
+      }));
+    }
+  });
+};
+
+var getStyle = function getStyle(position) {
+  return u(_objectSpread2(_objectSpread2({
+    position: "fixed",
+    left: 0,
+    right: 0
+  }, position.includes("top") ? {
+    top: 0
+  } : {
+    bottom: 0
+  }), {}, {
+    zIndex: 9999,
+    padding: "".concat(16, "px"),
+    pointerEvents: "none",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: position.includes("center") ? "center" : position.includes("left") ? "flex-start" : "flex-end",
+    gap: "".concat(16, "px")
+  }));
+};
+var ReactToastOpener$1 = function ReactToastOpener(_ref) {
+  var _options$position;
+  var store = _ref.store,
+    style = _ref.style,
+    className = _ref.className,
+    options = _ref.options;
+  var _useSyncExternalStore = react.useSyncExternalStore(store.subscribe, store.getState, store.getInitialState),
+    items = _useSyncExternalStore.items,
+    _close = _useSyncExternalStore.close,
+    _unmount = _useSyncExternalStore.unmount,
+    unmountAll = _useSyncExternalStore.unmountAll,
+    _position = _useSyncExternalStore.position;
+  var position = (_options$position = options === null || options === void 0 ? void 0 : options.position) !== null && _options$position !== void 0 ? _options$position : _position;
+  react.useEffect(function () {
+    return function () {
+      unmountAll();
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: style,
+    className: "".concat(getStyle(position), " ").concat(className !== null && className !== void 0 ? className : ""),
+    children: items.map(function (item) {
+      return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+        children: typeof item.element === "function" ? item.element(_objectSpread2(_objectSpread2({}, item), {}, {
+          close: function close() {
+            return _close(item.id);
+          },
+          unmount: function unmount() {
+            return _unmount(item.id);
+          }
+        })) : item.element
+      }, item.id);
+    })
+  });
+};
+
+function useToast() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = react.useRef();
+  if (!ref.current) {
+    ref.current = createToastStore(options);
+  }
+  return [{
+    close: ref.current.getState().close,
+    closeAll: ref.current.getState().closeAll,
+    custom: ref.current.custom,
+    success: ref.current.success,
+    error: ref.current.error,
+    info: ref.current.info,
+    warn: ref.current.warn
+  }, /*#__PURE__*/jsxRuntime.jsx(ReactToastOpener$1, {
+    store: ref.current
+  })];
+}
+
+m(react.createElement);
+var ReactToastOpener = ReactToastOpener$1;
+ReactToastOpener.createStore = createToastStore;
+ReactToastOpener.useToast = useToast;
+
+exports.ReactToastOpener = ReactToastOpener;

package/dist/store.d.ts

@@ -0,0 +1,49 @@
+export type Toast = {
+    icon?: ToastIconType;
+    delay?: number;
+    message: React.ReactNode;
+};
+export type ToastIconType = "error" | "success" | "info" | "warning" | React.ReactNode;
+export type ToastPositionType = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface Options {
+    delay?: number;
+    position?: ToastPositionType;
+}
+export declare const createToastStore: (options?: Options) => {
+    custom: (item: Toast | string) => void;
+    success: (item: Omit<Toast, "icon"> | string) => void;
+    error: (item: Omit<Toast, "icon"> | string) => void;
+    info: (item: Omit<Toast, "icon"> | string) => void;
+    warn: (item: Omit<Toast, "icon"> | string) => void;
+    setState: (partial: (import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }) | Partial<import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }> | ((state: import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }) => (import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }) | Partial<import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }>)) => void;
+    getState: () => import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    };
+    subscribe: (listener: (state: import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }, prevState: import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    }) => void) => () => void;
+    getInitialState: () => import("react-opener").StoreState<Toast> & {
+        position: ToastPositionType;
+        delay: number;
+    };
+};

package/dist/useToast.d.ts

@@ -0,0 +1,10 @@
+import { Options } from "./store";
+export declare function useToast(options?: Options): readonly [{
+    readonly close: (id: string) => void;
+    readonly closeAll: () => void;
+    readonly custom: (item: import("./store").Toast | string) => void;
+    readonly success: (item: Omit<import("./store").Toast, "icon"> | string) => void;
+    readonly error: (item: Omit<import("./store").Toast, "icon"> | string) => void;
+    readonly info: (item: Omit<import("./store").Toast, "icon"> | string) => void;
+    readonly warn: (item: Omit<import("./store").Toast, "icon"> | string) => void;
+}, import("react/jsx-runtime").JSX.Element];

package/esm/Renderer.mjs

@@ -0,0 +1,61 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { useSyncExternalStore, useEffect, Fragment } from 'react';
+import { css as u } from './node_modules/.pnpm/goober@2.1.18_csstype@3.2.3/node_modules/goober/dist/goober.modern.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var getStyle = function getStyle(position) {
+  return u(_objectSpread2(_objectSpread2({
+    position: "fixed",
+    left: 0,
+    right: 0
+  }, position.includes("top") ? {
+    top: 0
+  } : {
+    bottom: 0
+  }), {}, {
+    zIndex: 9999,
+    padding: "".concat(16, "px"),
+    pointerEvents: "none",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: position.includes("center") ? "center" : position.includes("left") ? "flex-start" : "flex-end",
+    gap: "".concat(16, "px")
+  }));
+};
+var ReactToastOpener = function ReactToastOpener(_ref) {
+  var _options$position;
+  var store = _ref.store,
+    style = _ref.style,
+    className = _ref.className,
+    options = _ref.options;
+  var _useSyncExternalStore = useSyncExternalStore(store.subscribe, store.getState, store.getInitialState),
+    items = _useSyncExternalStore.items,
+    _close = _useSyncExternalStore.close,
+    _unmount = _useSyncExternalStore.unmount,
+    unmountAll = _useSyncExternalStore.unmountAll,
+    _position = _useSyncExternalStore.position;
+  var position = (_options$position = options === null || options === void 0 ? void 0 : options.position) !== null && _options$position !== void 0 ? _options$position : _position;
+  useEffect(function () {
+    return function () {
+      unmountAll();
+    };
+  }, []);
+  return /*#__PURE__*/jsx("div", {
+    style: style,
+    className: "".concat(getStyle(position), " ").concat(className !== null && className !== void 0 ? className : ""),
+    children: items.map(function (item) {
+      return /*#__PURE__*/jsx(Fragment, {
+        children: typeof item.element === "function" ? item.element(_objectSpread2(_objectSpread2({}, item), {}, {
+          close: function close() {
+            return _close(item.id);
+          },
+          unmount: function unmount() {
+            return _unmount(item.id);
+          }
+        })) : item.element
+      }, item.id);
+    })
+  });
+};
+
+export { ReactToastOpener };

package/esm/_virtual/_rollupPluginBabelHelpers.mjs

@@ -0,0 +1,61 @@
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _typeof as typeof };

package/esm/components/ToastBar.mjs

@@ -0,0 +1,58 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.mjs';
+import { memo, useEffect } from 'react';
+import { styled as w, keyframes as h } from '../node_modules/.pnpm/goober@2.1.18_csstype@3.2.3/node_modules/goober/dist/goober.modern.mjs';
+import { ToastIcon } from './ToastIcon.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var enterAnimation = function enterAnimation(factor) {
+  return h(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0,", "px,0) scale(.8);\n    opacity:.5;\n  }\n  100% {\n    transform: translate3d(0,0,0) scale(1);\n    opacity:1;\n  }\n"])), factor * -150);
+};
+var exitAnimation = function exitAnimation(factor) {
+  return h(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0,0,-1px) scale(1);\n    opacity:1;\n  }\n  100% {\n    transform: translate3d(0,", "px,-1px) scale(.8);\n    opacity:0;\n  }\n"])), factor * -100);
+};
+var Component = w("div")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: #fff;\n  color: #363636;\n  line-height: 1.3;\n  will-change: transform;\n  box-shadow:\n    0 3px 10px rgba(0, 0, 0, 0.1),\n    0 3px 3px rgba(0, 0, 0, 0.05);\n  max-width: 400px;\n  pointer-events: auto;\n  padding: 8px;\n  border-radius: 8px;\n"])));
+var Message = w("div")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  color: inherit;\n  flex: 1;\n  white-space: pre-line;\n"])));
+var getAnimationStyle = function getAnimationStyle(position, visible) {
+  var factor = position.includes("top") ? 1 : -1;
+  return {
+    animation: visible ? "".concat(enterAnimation(factor), " 0.35s cubic-bezier(.21,1.02,.73,1) forwards") : "".concat(exitAnimation(factor), " 0.6s forwards cubic-bezier(.06,.71,.55,1)")
+  };
+};
+var ToastBar = /*#__PURE__*/memo(function (_ref) {
+  var isOpen = _ref.isOpen,
+    toast = _ref.toast,
+    position = _ref.position,
+    delay = _ref.delay,
+    close = _ref.close,
+    unmount = _ref.unmount;
+  var animationStyle = getAnimationStyle(position, isOpen);
+  var icon = toast.icon && /*#__PURE__*/jsx(ToastIcon, {
+    className: "ro-toast-icon",
+    icon: toast.icon
+  });
+  var message = /*#__PURE__*/jsx(Message, {
+    className: "ro-toast-message",
+    children: toast.message
+  });
+  useEffect(function () {
+    var timeout = setTimeout(function () {
+      close(toast.id);
+    }, delay);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, []);
+  return /*#__PURE__*/jsxs(Component, {
+    className: "ro-toast-bar",
+    style: animationStyle,
+    onAnimationEnd: function onAnimationEnd() {
+      if (!isOpen) {
+        unmount(toast.id);
+      }
+    },
+    children: [icon, message]
+  });
+});
+
+export { ToastBar };

package/esm/components/ToastIcon.mjs

@@ -0,0 +1,35 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.mjs';
+import { styled as w } from '../node_modules/.pnpm/goober@2.1.18_csstype@3.2.3/node_modules/goober/dist/goober.modern.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var WarningMark = w("i")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid currentColor;\n  color: #faad14;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    border-radius: 3px;\n    width: 2px;\n    background: currentColor;\n    left: 7px;\n  }\n  &::after {\n    top: 2px;\n    height: 8px;\n  }\n  &::before {\n    height: 2px;\n    bottom: 2px;\n  }\n"])));
+var InfoMark = w("i")(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid currentColor;\n  color: #1677ff;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    border-radius: 3px;\n    width: 2px;\n    background: currentColor;\n    left: 7px;\n  }\n  &::after {\n    bottom: 2px;\n    height: 8px;\n  }\n  &::before {\n    height: 2px;\n    top: 2px;\n  }\n"])));
+var SuccessMark = w("i")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 22px;\n  height: 22px;\n  border: 2px solid currentColor;\n  color: #52c41a;\n  border-radius: 100px;\n  &::after {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    left: 3px;\n    top: -1px;\n    width: 6px;\n    height: 10px;\n    border-color: currentColor;\n    border-width: 0 2px 2px 0;\n    border-style: solid;\n    transform-origin: bottom left;\n    transform: rotate(45deg);\n  }\n"])));
+var ErrorMark = w("i")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 22px;\n  height: 22px;\n  border: 2px solid currentColor;\n  color: #ff4d4f;\n  border-radius: 40px;\n\n  &::after,\n  &::before {\n    content: \"\";\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    width: 12px;\n    height: 2px;\n    background: currentColor;\n    transform: rotate(45deg);\n    border-radius: 5px;\n    top: 8px;\n    left: 3px;\n  }\n  &::after {\n    transform: rotate(-45deg);\n  }\n"])));
+var ToastIcon = function ToastIcon(_ref) {
+  var className = _ref.className,
+    icon = _ref.icon;
+  switch (icon) {
+    case "error":
+      return /*#__PURE__*/jsx(ErrorMark, {
+        className: className
+      });
+    case "success":
+      return /*#__PURE__*/jsx(SuccessMark, {
+        className: className
+      });
+    case "info":
+      return /*#__PURE__*/jsx(InfoMark, {
+        className: className
+      });
+    case "warning":
+      return /*#__PURE__*/jsx(WarningMark, {
+        className: className
+      });
+    default:
+      return icon;
+  }
+};
+
+export { ToastIcon };

package/esm/index.mjs

@@ -0,0 +1,12 @@
+import { createToastStore } from './store.mjs';
+import { ReactToastOpener as ReactToastOpener$1 } from './Renderer.mjs';
+import { useToast } from './useToast.mjs';
+import { setup as m } from './node_modules/.pnpm/goober@2.1.18_csstype@3.2.3/node_modules/goober/dist/goober.modern.mjs';
+import { createElement } from 'react';
+
+m(createElement);
+var ReactToastOpener = ReactToastOpener$1;
+ReactToastOpener.createStore = createToastStore;
+ReactToastOpener.useToast = useToast;
+
+export { ReactToastOpener };

package/esm/node_modules/.pnpm/goober@2.1.18_csstype@3.2.3/node_modules/goober/dist/goober.modern.mjs

@@ -0,0 +1,115 @@
+import { defineProperty as _defineProperty, typeof as _typeof } from '../../../../../../_virtual/_rollupPluginBabelHelpers.mjs';
+
+var e = {
+    data: ""
+  },
+  t = function t(_t) {
+    if ("object" == (typeof window === "undefined" ? "undefined" : _typeof(window))) {
+      var _e = (_t ? _t.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
+        innerHTML: " ",
+        id: "_goober"
+      });
+      return _e.nonce = window.__nonce__, _e.parentNode || (_t || document.head).appendChild(_e), _e.firstChild;
+    }
+    return _t || e;
+  },
+  l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,
+  a = /\/\*[^]*?\*\/|  +/g,
+  n = /\n+/g,
+  _o = function o(e, t) {
+    var r = "",
+      l = "",
+      a = "";
+    var _loop = function _loop(_n) {
+      var c = e[_n];
+      "@" == _n[0] ? "i" == _n[1] ? r = _n + " " + c + ";" : l += "f" == _n[1] ? _o(c, _n) : _n + "{" + _o(c, "k" == _n[1] ? "" : t) + "}" : "object" == _typeof(c) ? l += _o(c, t ? t.replace(/([^,])+/g, function (e) {
+        return _n.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, function (t) {
+          return /&/.test(t) ? t.replace(/&/g, e) : e ? e + " " + t : t;
+        });
+      }) : _n) : null != c && (_n = /^--/.test(_n) ? _n : _n.replace(/[A-Z]/g, "-$&").toLowerCase(), a += _o.p ? _o.p(_n, c) : _n + ":" + c + ";");
+    };
+    for (var _n in e) {
+      _loop(_n);
+    }
+    return r + (t && a ? t + "{" + a + "}" : a) + l;
+  },
+  c = {},
+  _s = function s(e) {
+    if ("object" == _typeof(e)) {
+      var _t2 = "";
+      for (var _r in e) _t2 += _r + _s(e[_r]);
+      return _t2;
+    }
+    return e;
+  },
+  i = function i(e, t, r, _i, p) {
+    var u = _s(e),
+      d = c[u] || (c[u] = function (e) {
+        var t = 0,
+          r = 11;
+        for (; t < e.length;) r = 101 * r + e.charCodeAt(t++) >>> 0;
+        return "go" + r;
+      }(u));
+    if (!c[d]) {
+      var _t3 = u !== e ? e : function (e) {
+        var t,
+          r,
+          o = [{}];
+        for (; t = l.exec(e.replace(a, ""));) t[4] ? o.shift() : t[3] ? (r = t[3].replace(n, " ").trim(), o.unshift(o[0][r] = o[0][r] || {})) : o[0][t[1]] = t[2].replace(n, " ").trim();
+        return o[0];
+      }(e);
+      c[d] = _o(p ? _defineProperty({}, "@keyframes " + d, _t3) : _t3, r ? "" : "." + d);
+    }
+    var f = r && c.g ? c.g : null;
+    return r && (c.g = c[d]), function (e, t, r, l) {
+      l ? t.data = t.data.replace(l, e) : -1 === t.data.indexOf(e) && (t.data = r ? e + t.data : t.data + e);
+    }(c[d], t, _i, f), d;
+  },
+  p = function p(e, t, r) {
+    return e.reduce(function (e, l, a) {
+      var n = t[a];
+      if (n && n.call) {
+        var _e2 = n(r),
+          _t4 = _e2 && _e2.props && _e2.props.className || /^go/.test(_e2) && _e2;
+        n = _t4 ? "." + _t4 : _e2 && "object" == _typeof(_e2) ? _e2.props ? "" : _o(_e2, "") : false === _e2 ? "" : _e2;
+      }
+      return e + l + (null == n ? "" : n);
+    }, "");
+  };
+function u(e) {
+  var r = this || {},
+    l = e.call ? e(r.p) : e;
+  return i(l.unshift ? l.raw ? p(l, [].slice.call(arguments, 1), r.p) : l.reduce(function (e, t) {
+    return Object.assign(e, t && t.call ? t(r.p) : t);
+  }, {}) : l, t(r.target), r.g, r.o, r.k);
+}
+var d,
+  f,
+  g;
+  u.bind({
+    g: 1
+  });
+  var h = u.bind({
+    k: 1
+  });
+function m(e, t, r, l) {
+  _o.p = t, d = e, f = r, g = l;
+}
+function w(e, t) {
+  var r = this || {};
+  return function () {
+    var l = arguments;
+    function a(n, o) {
+      var c = Object.assign({}, n),
+        s = c.className || a.className;
+      r.p = Object.assign({
+        theme: f && f()
+      }, c), r.o = / *go\d+/.test(s), c.className = u.apply(r, l) + (s ? " " + s : "");
+      var i = e;
+      return e[0] && (i = c.as || e, delete c.as), g && i[0] && g(c), d(i, c);
+    }
+    return t ? t(a) : a;
+  };
+}
+
+export { u as css, h as keyframes, m as setup, w as styled };

package/esm/store.mjs

@@ -0,0 +1,80 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { createStore } from 'react-opener';
+import { ToastBar } from './components/ToastBar.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var createToastStore = function createToastStore() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$delay = options.delay,
+    delay = _options$delay === void 0 ? 1000 : _options$delay,
+    _options$position = options.position,
+    position = _options$position === void 0 ? "top-center" : _options$position;
+  var store = createStore(function (_, state) {
+    return _objectSpread2(_objectSpread2({}, state), {}, {
+      position: position,
+      delay: delay
+    });
+  });
+  var openToast = function openToast(item) {
+    var element = function element(_ref) {
+      var _state$delay;
+      var close = _ref.close,
+        id = _ref.id,
+        isOpen = _ref.isOpen,
+        state = _ref.state,
+        unmount = _ref.unmount;
+      return /*#__PURE__*/jsx(ToastBar, {
+        isOpen: isOpen,
+        toast: _objectSpread2(_objectSpread2({}, state), {}, {
+          id: id
+        }),
+        close: close,
+        unmount: unmount,
+        position: position,
+        delay: (_state$delay = state.delay) !== null && _state$delay !== void 0 ? _state$delay : delay
+      }, id);
+    };
+    store.getState().open(element, typeof item === "string" ? {
+      message: item
+    } : item);
+  };
+  return _objectSpread2(_objectSpread2({}, store), {}, {
+    custom: function custom(item) {
+      openToast(item);
+    },
+    success: function success(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "success"
+      }));
+    },
+    error: function error(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "error"
+      }));
+    },
+    info: function info(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "info"
+      }));
+    },
+    warn: function warn(item) {
+      var _item = typeof item === "string" ? {
+        message: item
+      } : item;
+      openToast(_objectSpread2(_objectSpread2({}, _item), {}, {
+        icon: "warning"
+      }));
+    }
+  });
+};
+
+export { createToastStore };

package/esm/useToast.mjs

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import { createToastStore } from './store.mjs';
+import { ReactToastOpener } from './Renderer.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function useToast() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = useRef();
+  if (!ref.current) {
+    ref.current = createToastStore(options);
+  }
+  return [{
+    close: ref.current.getState().close,
+    closeAll: ref.current.getState().closeAll,
+    custom: ref.current.custom,
+    success: ref.current.success,
+    error: ref.current.error,
+    info: ref.current.info,
+    warn: ref.current.warn
+  }, /*#__PURE__*/jsx(ReactToastOpener, {
+    store: ref.current
+  })];
+}
+
+export { useToast };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@react-opener/toast",
+  "version": "0.0.1-alpha.1",
+  "sideEffects": false,
+  "description": "Toast notifications for react-opener",
+  "author": "Yunho Seo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yunho1017/react-opener.git"
+  },
+  "homepage": "https://react-opener.vercel.app/",
+  "keywords": [
+    "react",
+    "notifications",
+    "toast",
+    "snackbar"
+  ],
+  "import": "./esm/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./esm/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./esm/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "goober": "^2.1.14"
+  },
+  "peerDependencies": {
+    "@types/react": ">=18.0.0",
+    "react": ">=18.0.0",
+    "react-opener": ">=1.4.0"
+  },
+  "files": [
+    "dist",
+    "esm"
+  ],
+  "scripts": {
+    "build": "rm -rf dist esm && tsc -p tsconfig.json --declaration --emitDeclarationOnly --declarationDir dist && rollup -c rollup.config.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/react": "^18.3.2",
+    "react-opener": "workspace:*",
+    "rollup": "^4.18.0",
+    "typescript": "^5.4.5"
+  }
+}