your-toast 0.0.1 → 0.1.0

package/README.md

@@ -2,16 +2,24 @@
 
 Modern toast notification library for React apps.
 
-✨ Clean API
-🎨 Glass UI (coming soon)
+✨ Clean & intuitive API
+🍏 Glass-style UI
 ⚡ Lightweight & fast
+🔄 Promise support
+🎯 Fully controllable
 
 ---
 
-## 🚧 Status
+## 🚀 Features
 
-This package is currently under development.
-First stable version will be released soon.
+* 🔥 Minimal & powerful API (`toast()`)
+* ⚡ Promise-based toast (`toast.promise`)
+* 🎨 Multiple variants (default, success, error, loading, action)
+* 📦 Stack management (auto limit)
+* 🔁 Update & dismiss control
+* ⏱ Auto dismiss with duration
+* 🍏 Glass UI (modern design)
+* 🌙 Dark mode ready
 
 ---
 
@@ -26,6 +34,8 @@ npm install your-toast
 ## 🚀 Basic Usage
 
 ```jsx
+"use client";
+
 import { YourToastProvider, toast } from "your-toast";
 
 export default function App() {
@@ -41,38 +51,87 @@ export default function App() {
 
 ---
 
-## 🎯 Planned Features
-
-* 🍏 Apple-style glass UI toast
-* ⚡ Promise-based toast system
-* 📦 Stack management
-* 🎨 Multiple variants (minimal, glass, gradient)
-* 🔁 Update & dismiss controls
-* 🌙 Dark mode support
-
----
-
-## 🧩 Example API (Upcoming)
+## 🎯 Variants
 
 ```js
+toast("Default message");
+
 toast.success("Saved successfully");
 
 toast.error("Something went wrong");
 
+toast.loading("Loading...");
+```
+
+---
+
+## ⚡ Promise Toast
+
+```js
 toast.promise(fetchData(), {
   loading: "Loading...",
-  success: "Done!",
-  error: "Error occurred"
+  success: "Data loaded!",
+  error: "Something went wrong",
+});
+```
+
+---
+
+## 🔁 Update & Dismiss
+
+```js
+const id = toast("Uploading...");
+
+// update
+toast.update(id, {
+  title: "Uploaded!",
+  type: "success",
+});
+
+// dismiss
+toast.dismiss(id);
+```
+
+---
+
+## 🧩 Advanced Example
+
+```js
+toast("File deleted", {
+  action: {
+    label: "Undo",
+    onClick: () => console.log("Undo clicked"),
+  },
 });
 ```
 
 ---
 
+## 🎨 Supported Types
+
+* `default`
+* `success`
+* `error`
+* `loading`
+* `action`
+
+---
+
 ## 🛠 Developer Friendly
 
 * Simple and predictable API
-* Fully customizable
-* Built for modern React apps
+* No extra setup required
+* Works with modern React (18+)
+* Lightweight and customizable
+
+---
+
+## 🚧 Roadmap
+
+* 🍏 Advanced glass UI polish
+* 🎞 Animation improvements
+* 🎨 Theme system
+* 📱 Mobile UX optimization
 
 ---
 
@@ -84,4 +143,4 @@ MIT
 
 ## 👨‍💻 Author
 
-Masaud Ahmod
+Masaud Ahmod

package/dist/index.cjs

@@ -0,0 +1,233 @@
+"use strict";
+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, {
+  YourToastProvider: () => YourToastProvider,
+  toast: () => toast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/store/toastStore.ts
+var toasts = [];
+var listeners = [];
+function notify() {
+  listeners.forEach((listener) => listener(toasts));
+}
+var toastStore = {
+  subscribe(listener) {
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  },
+  getToasts() {
+    return toasts;
+  },
+  add(toast2) {
+    toasts = [toast2, ...toasts].slice(0, 5);
+    notify();
+  },
+  remove(id) {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  },
+  update(id, updated) {
+    toasts = toasts.map(
+      (t) => t.id === id ? { ...t, ...updated } : t
+    );
+    notify();
+  }
+};
+
+// src/core/toast.ts
+function createToast(message, type = "default") {
+  const id = crypto.randomUUID();
+  const duration = 4e3;
+  toastStore.add({
+    id,
+    title: message,
+    type,
+    duration
+  });
+  setTimeout(() => {
+    toastStore.remove(id);
+  }, duration);
+  return id;
+}
+var toast = Object.assign(
+  (message) => createToast(message, "default"),
+  {
+    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);
+    },
+    update: (id, data) => {
+      toastStore.update(id, data);
+    },
+    promise: async (promise, messages) => {
+      const id = createToast(messages.loading, "loading");
+      try {
+        const result = await promise;
+        toastStore.update(id, {
+          title: messages.success,
+          type: "success"
+        });
+        return result;
+      } catch (err) {
+        toastStore.update(id, {
+          title: messages.error,
+          type: "error"
+        });
+        throw err;
+      }
+    }
+  }
+);
+
+// src/hooks/useToast.ts
+var import_react = require("react");
+function useToast() {
+  const [toasts2, setToasts] = (0, import_react.useState)(
+    toastStore.getToasts()
+  );
+  (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
+}) => {
+  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)
+        },
+        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
+    )) })
+  ] });
+};
+function getVariantStyle(type) {
+  switch (type) {
+    case "success":
+      return { background: "#16a34a" };
+    case "error":
+      return { background: "#dc2626" };
+    case "loading":
+      return { background: "#2563eb" };
+    case "action":
+      return { background: "#7c3aed" };
+    default:
+      return { background: "#111" };
+  }
+}
+var containerStyle = {
+  position: "fixed",
+  top: 20,
+  right: 20,
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px",
+  zIndex: 9999
+};
+var toastStyle = {
+  backdropFilter: "blur(16px)",
+  background: "rgba(255, 255, 255, 0.08)",
+  color: "#fff",
+  padding: "14px 16px",
+  borderRadius: "14px",
+  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"
+};
+var closeBtn = {
+  background: "transparent",
+  border: "none",
+  color: "#fff",
+  cursor: "pointer"
+};
+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,
+  toast
+});

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+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>;
+};
+
+declare const YourToastProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+export { YourToastProvider, toast };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+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>;
+};
+
+declare const YourToastProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+export { YourToastProvider, toast };

package/dist/index.js

@@ -1,3 +1,205 @@
-export const toast = () => {
-  console.log("your-toast coming soon 🚀");
-};
+// src/store/toastStore.ts
+var toasts = [];
+var listeners = [];
+function notify() {
+  listeners.forEach((listener) => listener(toasts));
+}
+var toastStore = {
+  subscribe(listener) {
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  },
+  getToasts() {
+    return toasts;
+  },
+  add(toast2) {
+    toasts = [toast2, ...toasts].slice(0, 5);
+    notify();
+  },
+  remove(id) {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  },
+  update(id, updated) {
+    toasts = toasts.map(
+      (t) => t.id === id ? { ...t, ...updated } : t
+    );
+    notify();
+  }
+};
+
+// src/core/toast.ts
+function createToast(message, type = "default") {
+  const id = crypto.randomUUID();
+  const duration = 4e3;
+  toastStore.add({
+    id,
+    title: message,
+    type,
+    duration
+  });
+  setTimeout(() => {
+    toastStore.remove(id);
+  }, duration);
+  return id;
+}
+var toast = Object.assign(
+  (message) => createToast(message, "default"),
+  {
+    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);
+    },
+    update: (id, data) => {
+      toastStore.update(id, data);
+    },
+    promise: async (promise, messages) => {
+      const id = createToast(messages.loading, "loading");
+      try {
+        const result = await promise;
+        toastStore.update(id, {
+          title: messages.success,
+          type: "success"
+        });
+        return result;
+      } catch (err) {
+        toastStore.update(id, {
+          title: messages.error,
+          type: "error"
+        });
+        throw err;
+      }
+    }
+  }
+);
+
+// src/hooks/useToast.ts
+import { useEffect, useState } from "react";
+function useToast() {
+  const [toasts2, setToasts] = useState(
+    toastStore.getToasts()
+  );
+  useEffect(() => {
+    const unsubscribe = toastStore.subscribe(setToasts);
+    return unsubscribe;
+  }, []);
+  return { toasts: toasts2 };
+}
+
+// src/components/YourToastProvider.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var YourToastProvider = ({
+  children
+}) => {
+  const { toasts: toasts2 } = useToast();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { style: containerStyle, children: toasts2.map((toast2) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...toastStyle,
+          ...getVariantStyle(toast2.type)
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: toast2.title }),
+            toast2.description && /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "13px" }, children: toast2.description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => toastStore.remove(toast2.id),
+              style: closeBtn,
+              children: "\u2715"
+            }
+          ),
+          toast2.action && /* @__PURE__ */ 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
+    )) })
+  ] });
+};
+function getVariantStyle(type) {
+  switch (type) {
+    case "success":
+      return { background: "#16a34a" };
+    case "error":
+      return { background: "#dc2626" };
+    case "loading":
+      return { background: "#2563eb" };
+    case "action":
+      return { background: "#7c3aed" };
+    default:
+      return { background: "#111" };
+  }
+}
+var containerStyle = {
+  position: "fixed",
+  top: 20,
+  right: 20,
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px",
+  zIndex: 9999
+};
+var toastStyle = {
+  backdropFilter: "blur(16px)",
+  background: "rgba(255, 255, 255, 0.08)",
+  color: "#fff",
+  padding: "14px 16px",
+  borderRadius: "14px",
+  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"
+};
+var closeBtn = {
+  background: "transparent",
+  border: "none",
+  color: "#fff",
+  cursor: "pointer"
+};
+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);
+export {
+  YourToastProvider,
+  toast
+};

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "your-toast",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "description": "Modern toast notification library for React (coming soon)",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "keywords": [
     "react",
@@ -15,6 +21,18 @@
     "ui",
     "toast-library"
   ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "author": "Masaud Ahmod",
-  "license": "MIT"
-}
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  }
+}