your-toast 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -18,214 +18,355 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   YourToastProvider: () => YourToastProvider,
   toast: () => toast
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/store/toastStore.ts
 var toasts = [];
-var listeners = [];
-function notify() {
-  listeners.forEach((listener) => listener(toasts));
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((listener) => listener());
 }
 var toastStore = {
   subscribe(listener) {
-    listeners.push(listener);
+    listeners.add(listener);
     return () => {
-      listeners = listeners.filter((l) => l !== listener);
+      listeners.delete(listener);
     };
   },
-  getToasts() {
+  getSnapshot() {
     return toasts;
   },
+  getServerSnapshot() {
+    return [];
+  },
   add(toast2) {
     toasts = [toast2, ...toasts].slice(0, 5);
-    notify();
+    emit();
   },
   remove(id) {
-    toasts = toasts.filter((t) => t.id !== id);
-    notify();
+    toasts = toasts.filter((toast2) => toast2.id !== id);
+    emit();
   },
   update(id, updated) {
     toasts = toasts.map(
-      (t) => t.id === id ? { ...t, ...updated } : t
+      (toast2) => toast2.id === id ? { ...toast2, ...updated } : toast2
     );
-    notify();
+    emit();
+  },
+  clear() {
+    toasts = [];
+    emit();
+  },
+  getToasts() {
+    return toasts;
   }
 };
 
 // src/core/toast.ts
-function createToast(message, type = "default") {
-  const id = crypto.randomUUID();
-  const duration = 4e3;
+function isBrowser() {
+  return typeof window !== "undefined";
+}
+function generateId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function createToast(message, type = "default", options = {}) {
+  if (!isBrowser()) {
+    return "";
+  }
+  const id = generateId();
+  const duration = options.duration ?? 4e3;
   toastStore.add({
     id,
     title: message,
     type,
-    duration
+    duration,
+    description: options.description,
+    action: options.action
   });
-  setTimeout(() => {
-    toastStore.remove(id);
-  }, duration);
+  if (duration !== Infinity && duration > 0) {
+    setTimeout(() => {
+      toastStore.remove(id);
+    }, duration);
+  }
   return id;
 }
+function createTypedToast(type, message, options) {
+  return createToast(message, type, options);
+}
 var toast = Object.assign(
-  (message) => createToast(message, "default"),
+  (message, options) => createToast(message, "default", options),
   {
-    success: (message) => createToast(message, "success"),
-    error: (message) => createToast(message, "error"),
-    loading: (message) => createToast(message, "loading"),
-    action: (message) => createToast(message, "action"),
-    dismiss: (id) => {
-      toastStore.remove(id);
+    success: (message, options) => createTypedToast("success", message, options),
+    error: (message, options) => createTypedToast("error", message, options),
+    warning: (message, options) => createTypedToast("action", message, options),
+    info: (message, options) => createTypedToast("default", message, options),
+    loading: (message, options) => createTypedToast("loading", message, {
+      duration: Infinity,
+      ...options
+    }),
+    action: (message, options) => createTypedToast("action", message, options),
+    dismiss(id) {
+      if (!isBrowser()) return;
+      if (id) {
+        toastStore.remove(id);
+      } else {
+        toastStore.clear();
+      }
     },
-    update: (id, data) => {
+    update(id, data) {
+      if (!isBrowser()) return;
       toastStore.update(id, data);
     },
-    promise: async (promise, messages) => {
-      const id = createToast(messages.loading, "loading");
+    async promise(promise, messages) {
+      const id = createToast(
+        messages.loading,
+        "loading",
+        {
+          duration: Infinity
+        }
+      );
       try {
         const result = await promise;
-        toastStore.update(id, {
-          title: messages.success,
-          type: "success"
-        });
+        const successMessage = typeof messages.success === "function" ? messages.success(result) : messages.success;
+        if (id) {
+          toastStore.update(id, {
+            title: successMessage,
+            type: "success",
+            duration: 4e3
+          });
+          setTimeout(() => {
+            toastStore.remove(id);
+          }, 4e3);
+        }
         return result;
-      } catch (err) {
-        toastStore.update(id, {
-          title: messages.error,
-          type: "error"
-        });
-        throw err;
+      } catch (error) {
+        const errorMessage = typeof messages.error === "function" ? messages.error(error) : messages.error;
+        if (id) {
+          toastStore.update(id, {
+            title: errorMessage,
+            type: "error",
+            duration: 4e3
+          });
+          setTimeout(() => {
+            toastStore.remove(id);
+          }, 4e3);
+        }
+        throw error;
       }
     }
   }
 );
 
+// src/components/YourToastProvider.tsx
+var import_react2 = require("react");
+
 // src/hooks/useToast.ts
 var import_react = require("react");
 function useToast() {
-  const [toasts2, setToasts] = (0, import_react.useState)(
-    toastStore.getToasts()
+  const toasts2 = (0, import_react.useSyncExternalStore)(
+    toastStore.subscribe,
+    toastStore.getSnapshot,
+    toastStore.getServerSnapshot
   );
-  (0, import_react.useEffect)(() => {
-    const unsubscribe = toastStore.subscribe(setToasts);
-    return unsubscribe;
-  }, []);
   return { toasts: toasts2 };
 }
 
 // src/components/YourToastProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var YourToastProvider = ({
-  children
-}) => {
+function YourToastProvider() {
   const { toasts: toasts2 } = useToast();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: containerStyle, children: toasts2.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        style: {
-          ...toastStyle,
-          ...getVariantStyle(toast2.type)
+  (0, import_react2.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "your-toast-styles";
+    if (document.getElementById(styleId)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      @keyframes yt-slide-in {
+        from {
+          opacity: 0;
+          transform: translate3d(20px, -10px, 0) scale(0.96);
+        }
+
+        to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0) scale(1);
+        }
+      }
+
+      @keyframes yt-slide-out {
+        from {
+          opacity: 1;
+          transform: translate3d(0, 0, 0) scale(1);
+        }
+
+        to {
+          opacity: 0;
+          transform: translate3d(20px, -10px, 0) scale(0.96);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .yt-toast {
+          animation: none !important;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      style.remove();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      style: containerStyle,
+      children: toasts2.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "yt-toast",
+          role: toast2.type === "error" ? "alert" : "status",
+          style: {
+            ...toastStyle,
+            ...getVariantStyle(toast2.type)
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: contentStyle, children: [
+              toast2.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: titleStyle, children: toast2.title }),
+              toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: descriptionStyle, children: toast2.description })
+            ] }),
+            toast2.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toast2.action.onClick,
+                style: actionBtn,
+                children: toast2.action.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Dismiss notification",
+                onClick: () => toastStore.remove(toast2.id),
+                style: closeBtn,
+                children: "\xD7"
+              }
+            )
+          ]
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600 }, children: toast2.title }),
-            toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7, fontSize: "13px" }, children: toast2.description })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: () => toastStore.remove(toast2.id),
-              style: closeBtn,
-              children: "\u2715"
-            }
-          ),
-          toast2.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: toast2.action.onClick,
-              style: {
-                background: "rgba(255,255,255,0.1)",
-                border: "none",
-                padding: "6px 10px",
-                borderRadius: "8px",
-                color: "#fff",
-                cursor: "pointer",
-                fontSize: "12px"
-              },
-              children: toast2.action.label
-            }
-          )
-        ]
-      },
-      toast2.id
-    )) })
-  ] });
-};
+        toast2.id
+      ))
+    }
+  );
+}
 function getVariantStyle(type) {
   switch (type) {
     case "success":
-      return { background: "#16a34a" };
+      return {
+        background: "linear-gradient(135deg, rgba(22,163,74,.9), rgba(21,128,61,.8))"
+      };
     case "error":
-      return { background: "#dc2626" };
+      return {
+        background: "linear-gradient(135deg, rgba(220,38,38,.9), rgba(185,28,28,.8))"
+      };
     case "loading":
-      return { background: "#2563eb" };
+      return {
+        background: "linear-gradient(135deg, rgba(37,99,235,.9), rgba(29,78,216,.8))"
+      };
     case "action":
-      return { background: "#7c3aed" };
+      return {
+        background: "linear-gradient(135deg, rgba(124,58,237,.9), rgba(109,40,217,.8))"
+      };
     default:
-      return { background: "#111" };
+      return {
+        background: "rgba(20,20,25,.82)"
+      };
   }
 }
 var containerStyle = {
   position: "fixed",
-  top: 20,
-  right: 20,
+  top: "20px",
+  right: "20px",
+  zIndex: 99999,
   display: "flex",
   flexDirection: "column",
+  alignItems: "flex-end",
   gap: "10px",
-  zIndex: 9999
+  width: "min(420px, calc(100vw - 40px))",
+  pointerEvents: "none"
 };
 var toastStyle = {
-  backdropFilter: "blur(16px)",
-  background: "rgba(255, 255, 255, 0.08)",
-  color: "#fff",
+  width: "100%",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
   padding: "14px 16px",
-  borderRadius: "14px",
+  borderRadius: "16px",
+  color: "#fff",
+  border: "1px solid rgba(255,255,255,.14)",
+  boxShadow: "0 12px 40px rgba(0,0,0,.28)",
+  backdropFilter: "blur(18px)",
+  WebkitBackdropFilter: "blur(18px)",
+  animation: "yt-slide-in .3s cubic-bezier(.16,1,.3,1)",
+  pointerEvents: "auto"
+};
+var contentStyle = {
+  flex: 1,
   display: "flex",
-  justifyContent: "space-between",
-  alignItems: "flex-start",
-  minWidth: "260px",
-  gap: "10px",
-  border: "1px solid rgba(255,255,255,0.1)",
-  boxShadow: "0 8px 30px rgba(0,0,0,0.3)",
-  animation: "yt-slide-in 0.3s ease"
+  flexDirection: "column",
+  minWidth: 0,
+  gap: "3px"
+};
+var titleStyle = {
+  fontSize: "14px",
+  fontWeight: 600,
+  lineHeight: 1.4
+};
+var descriptionStyle = {
+  fontSize: "13px",
+  lineHeight: 1.4,
+  opacity: 0.75
 };
 var closeBtn = {
-  background: "transparent",
+  flexShrink: 0,
+  width: "28px",
+  height: "28px",
+  display: "grid",
+  placeItems: "center",
   border: "none",
+  borderRadius: "8px",
+  background: "rgba(255,255,255,.08)",
   color: "#fff",
-  cursor: "pointer"
+  cursor: "pointer",
+  fontSize: "18px",
+  lineHeight: 1
+};
+var actionBtn = {
+  flexShrink: 0,
+  border: "1px solid rgba(255,255,255,.12)",
+  borderRadius: "8px",
+  padding: "7px 10px",
+  background: "rgba(255,255,255,.1)",
+  color: "#fff",
+  cursor: "pointer",
+  fontSize: "12px",
+  fontWeight: 500
 };
-var style = document.createElement("style");
-style.innerHTML = `
-@keyframes yt-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px) translateX(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) translateX(0);
-  }
-}
-`;
-document.head.appendChild(style);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   YourToastProvider,

package/dist/index.d.cts

@@ -1,22 +1,46 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+export { YourToastProvider } from './provider.cjs';
+import 'react/jsx-runtime';
 
-declare const toast: ((message: string) => `${string}-${string}-${string}-${string}-${string}`) & {
-    success: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    error: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    loading: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    action: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    dismiss: (id: string) => void;
-    update: (id: string, data: Partial<any>) => void;
-    promise: <T>(promise: Promise<T>, messages: {
-        loading: string;
-        success: string;
-        error: string;
-    }) => Promise<T>;
-};
+type ToastType = "default" | "success" | "error" | "loading" | "action";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface Toast {
+    id: string;
+    title?: string;
+    description?: string;
+    type: ToastType;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastOptions {
+    description?: string;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastPromiseMessages<T = unknown> {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((error: unknown) => string);
+}
 
-declare const YourToastProvider: ({ children, }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+declare const toast: ((message: string, options?: ToastOptions) => string) & {
+    success: (message: string, options?: ToastOptions) => string;
+    error: (message: string, options?: ToastOptions) => string;
+    warning: (message: string, options?: ToastOptions) => string;
+    info: (message: string, options?: ToastOptions) => string;
+    loading: (message: string, options?: ToastOptions) => string;
+    action: (message: string, options?: ToastOptions) => string;
+    dismiss(id?: string): void;
+    update(id: string, data: Partial<{
+        title: string;
+        description: string;
+        type: ToastType;
+        duration: number;
+        action: ToastOptions["action"];
+    }>): void;
+    promise<T>(promise: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T>;
+};
 
-export { YourToastProvider, toast };
+export { type Toast, type ToastAction, type ToastOptions, type ToastPromiseMessages, type ToastType, toast };

package/dist/index.d.ts

@@ -1,22 +1,46 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+export { YourToastProvider } from './provider.js';
+import 'react/jsx-runtime';
 
-declare const toast: ((message: string) => `${string}-${string}-${string}-${string}-${string}`) & {
-    success: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    error: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    loading: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    action: (message: string) => `${string}-${string}-${string}-${string}-${string}`;
-    dismiss: (id: string) => void;
-    update: (id: string, data: Partial<any>) => void;
-    promise: <T>(promise: Promise<T>, messages: {
-        loading: string;
-        success: string;
-        error: string;
-    }) => Promise<T>;
-};
+type ToastType = "default" | "success" | "error" | "loading" | "action";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface Toast {
+    id: string;
+    title?: string;
+    description?: string;
+    type: ToastType;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastOptions {
+    description?: string;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastPromiseMessages<T = unknown> {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((error: unknown) => string);
+}
 
-declare const YourToastProvider: ({ children, }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+declare const toast: ((message: string, options?: ToastOptions) => string) & {
+    success: (message: string, options?: ToastOptions) => string;
+    error: (message: string, options?: ToastOptions) => string;
+    warning: (message: string, options?: ToastOptions) => string;
+    info: (message: string, options?: ToastOptions) => string;
+    loading: (message: string, options?: ToastOptions) => string;
+    action: (message: string, options?: ToastOptions) => string;
+    dismiss(id?: string): void;
+    update(id: string, data: Partial<{
+        title: string;
+        description: string;
+        type: ToastType;
+        duration: number;
+        action: ToastOptions["action"];
+    }>): void;
+    promise<T>(promise: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T>;
+};
 
-export { YourToastProvider, toast };
+export { type Toast, type ToastAction, type ToastOptions, type ToastPromiseMessages, type ToastType, toast };