npm - your-toast - Versions diffs - 0.1.0 → 0.1.2 - Mend

your-toast 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,8 @@
 # your-toast 🍞
+![npm](https://img.shields.io/npm/v/your-toast)
+![GitHub stars](https://img.shields.io/github/stars/masaudahmod/your-toast)
 Modern toast notification library for React apps.
 ✨ Clean & intuitive API
@@ -12,18 +15,22 @@ Modern toast notification library for React apps.
 ## 🚀 Features
-* 🔥 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
+- 🔥 Minimal and powerful `toast()` API
+- 🎨 Multiple toast variants
+- ⚡ Promise-based notifications with `toast.promise()`
+- 📦 Automatic toast stack management
+- 🔁 Update and dismiss notifications programmatically
+- ⏱ Configurable auto-dismiss duration
+- 🍏 Modern glass-style UI
+- 🌙 Dark-mode ready
+- 🎯 Action buttons
+- 🔷 TypeScript support
+- ⚛️ React 18+ support
+- ▲ Next.js App Router friendly
 ---
-## 📦 Install
+## 📦 Installation
 ```bash
 npm install your-toast
@@ -31,107 +38,353 @@ npm install your-toast
 ---
-## 🚀 Basic Usage
+## ⚛️ React / Vite
-```jsx
-"use client";
+For client-side React applications such as Vite, import the provider and
+toast API directly:
+```tsx
 import { YourToastProvider, toast } from "your-toast";
 export default function App() {
   return (
-    <YourToastProvider>
+    <>
+      <YourToastProvider />
       <button onClick={() => toast("Hello from your-toast 🚀")}>
         Show Toast
       </button>
-    </YourToastProvider>
+    </>
+  );
+}
+```
+The provider only needs to be mounted once in your application.
+---
+## ▲ Next.js App Router
+`your-toast` supports the Next.js App Router without making your root
+layout a Client Component.
+### 1. Add the provider
+Import the provider from the dedicated client entry:
+```tsx
+import { YourToastProvider } from "your-toast/provider";
+```
+Then add it to your root layout:
+```tsx
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <YourToastProvider />
+      </body>
+    </html>
+  );
+}
+```
+You do **not** need to add `"use client"` to your root `layout.tsx`.
+### 2. Trigger a toast from a Client Component
+```tsx
+"use client";
+import { toast } from "your-toast";
+export default function SaveButton() {
+  return (
+    <button onClick={() => toast.success("Saved successfully!")}>Save</button>
   );
 }
 ```
+### Why `your-toast/provider`?
+The provider is exposed through a dedicated client entry point:
+```tsx
+import { YourToastProvider } from "your-toast/provider";
+```
+This keeps the Next.js Client Component boundary explicit while allowing
+your root layout to remain a Server Component.
 ---
-## 🎯 Variants
+## 🎯 Toast Variants
-```js
+### Default
+```ts
 toast("Default message");
+```
+### Success
+```ts
+toast.success("Saved successfully!");
+```
+### Error
+```ts
+toast.error("Something went wrong!");
+```
+### Warning
+```ts
+toast.warning("Please check your input.");
+```
+### Info
+```ts
+toast.info("New update available.");
+```
-toast.success("Saved successfully");
+### Loading
-toast.error("Something went wrong");
+```ts
+toast.loading("Uploading...");
+```
+---
+## ⚙️ Toast Options
+Customize a toast with additional options:
+```ts
+toast.success("Profile updated!", {
+  description: "Your profile has been saved successfully.",
+  duration: 3000,
+});
+```
-toast.loading("Loading...");
+### Available options
+```ts
+{
+  description?: string;
+  duration?: number;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+```
+---
+## 🎯 Action Toast
+Add an interactive action to a toast:
+```ts
+toast("File deleted", {
+  action: {
+    label: "Undo",
+    onClick: () => {
+      console.log("Undo clicked");
+    },
+  },
+});
 ```
 ---
 ## ⚡ Promise Toast
-```js
+Show loading, success, and error states automatically:
+```ts
+toast.promise(fetchData(), {
+  loading: "Loading...",
+  success: "Data loaded!",
+  error: "Something went wrong.",
+});
+```
+You can also generate messages dynamically from the resolved value or
+error:
+```ts
 toast.promise(fetchData(), {
+  loading: "Loading...",
+  success: (data) => `Loaded ${data.name}`,
+  error: (error) => "Failed to load data.",
+});
+```
+`toast.promise()` returns the original promise result, so it can still
+be awaited:
+```ts
+const data = await toast.promise(fetchData(), {
   loading: "Loading...",
   success: "Data loaded!",
-  error: "Something went wrong",
+  error: "Failed to load data.",
 });
 ```
 ---
-## 🔁 Update & Dismiss
+## 🔁 Update a Toast
-```js
+Every toast returns an ID:
+```ts
 const id = toast("Uploading...");
+```
-// update
+Update it later:
+```ts
 toast.update(id, {
-  title: "Uploaded!",
+  title: "Upload complete!",
   type: "success",
 });
+```
+You can also update the description or duration:
+```ts
+toast.update(id, {
+  title: "Almost done...",
+  description: "Processing your file.",
+  duration: 3000,
+});
+```
+---
+## ❌ Dismiss Toasts
+Dismiss a specific toast:
+```ts
+const id = toast("Hello!");
-// dismiss
 toast.dismiss(id);
 ```
+Dismiss all active toasts:
+```ts
+toast.dismiss();
+```
 ---
-## 🧩 Advanced Example
+## ⏱ Duration
-```js
-toast("File deleted", {
-  action: {
-    label: "Undo",
-    onClick: () => console.log("Undo clicked"),
-  },
+Toasts automatically disappear after their duration:
+```ts
+toast("This disappears after 2 seconds.", {
+  duration: 2000,
+});
+```
+Loading toasts remain visible until they are updated or dismissed:
+```ts
+const id = toast.loading("Uploading...");
+// Later
+toast.update(id, {
+  title: "Upload complete!",
+  type: "success",
 });
 ```
 ---
+## 🔷 TypeScript
+`your-toast` is written with TypeScript and provides built-in type
+definitions.
+The package includes typed APIs for:
+- Toast variants
+- Toast options
+- Toast actions
+- Promise messages
+- Toast updates
+Example:
+```ts
+toast.success("Success!", {
+  description: "Everything went well.",
+  duration: 3000,
+});
+```
+Your editor will provide autocomplete and type checking automatically.
+---
 ## 🎨 Supported Types
-* `default`
-* `success`
-* `error`
-* `loading`
-* `action`
+Type API
+---
+Default `toast()`
+Success `toast.success()`
+Error `toast.error()`
+Warning `toast.warning()`
+Info `toast.info()`
+Loading `toast.loading()`
+Action `toast()` with `action`
 ---
 ## 🛠 Developer Friendly
-* Simple and predictable API
-* No extra setup required
-* Works with modern React (18+)
-* Lightweight and customizable
+- Simple and predictable API
+- Minimal setup
+- No external UI dependencies
+- Built-in TypeScript definitions
+- React 18+ compatible
+- React 19 compatible
+- Next.js App Router friendly
+- Vite friendly
+- ESM + CommonJS builds
+- Lightweight package
 ---
-## 🚧 Roadmap
+## 🗺 Roadmap
-* 🍏 Advanced glass UI polish
-* 🎞 Animation improvements
-* 🎨 Theme system
-* 📱 Mobile UX optimization
+- 🍏 Advanced glass UI polish
+- 🎞 Improved animations
+- 🎨 Theme system
+- 📱 Mobile UX optimization
+- 📍 Toast positioning system
+- 📊 Progress indicators
+- ⏸ Pause on hover / focus
+- 👆 Swipe-to-dismiss
+- 🔔 Custom icons
+- 🌐 RTL support
+- ⚛️ Custom React content
 ---
@@ -144,3 +397,8 @@ MIT
 ## 👨‍💻 Author
 Masaud Ahmod
+## ⭐ Support
+If you find this useful, consider giving a ⭐ on GitHub:
+👉 https://github.com/masaudahmod/your-toast

package/dist/chunk-374JS6OY.js ADDED Viewed

@@ -0,0 +1,251 @@
+// src/components/YourToastProvider.tsx
+import { useEffect } from "react";
+// src/hooks/useToast.ts
+import { useSyncExternalStore } from "react";
+// src/store/toastStore.ts
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((listener) => listener());
+}
+var toastStore = {
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot() {
+    return toasts;
+  },
+  getServerSnapshot() {
+    return [];
+  },
+  add(toast) {
+    toasts = [toast, ...toasts].slice(0, 5);
+    emit();
+  },
+  remove(id) {
+    toasts = toasts.filter((toast) => toast.id !== id);
+    emit();
+  },
+  update(id, updated) {
+    toasts = toasts.map(
+      (toast) => toast.id === id ? { ...toast, ...updated } : toast
+    );
+    emit();
+  },
+  clear() {
+    toasts = [];
+    emit();
+  },
+  getToasts() {
+    return toasts;
+  }
+};
+// src/hooks/useToast.ts
+function useToast() {
+  const toasts2 = useSyncExternalStore(
+    toastStore.subscribe,
+    toastStore.getSnapshot,
+    toastStore.getServerSnapshot
+  );
+  return { toasts: toasts2 };
+}
+// src/components/YourToastProvider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function YourToastProvider() {
+  const { toasts: toasts2 } = useToast();
+  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__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      style: containerStyle,
+      children: toasts2.map((toast) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "yt-toast",
+          role: toast.type === "error" ? "alert" : "status",
+          style: {
+            ...toastStyle,
+            ...getVariantStyle(toast.type)
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
+              toast.title && /* @__PURE__ */ jsx("span", { style: titleStyle, children: toast.title }),
+              toast.description && /* @__PURE__ */ jsx("span", { style: descriptionStyle, children: toast.description })
+            ] }),
+            toast.action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toast.action.onClick,
+                style: actionBtn,
+                children: toast.action.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Dismiss notification",
+                onClick: () => toastStore.remove(toast.id),
+                style: closeBtn,
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        toast.id
+      ))
+    }
+  );
+}
+function getVariantStyle(type) {
+  switch (type) {
+    case "success":
+      return {
+        background: "linear-gradient(135deg, rgba(22,163,74,.9), rgba(21,128,61,.8))"
+      };
+    case "error":
+      return {
+        background: "linear-gradient(135deg, rgba(220,38,38,.9), rgba(185,28,28,.8))"
+      };
+    case "loading":
+      return {
+        background: "linear-gradient(135deg, rgba(37,99,235,.9), rgba(29,78,216,.8))"
+      };
+    case "action":
+      return {
+        background: "linear-gradient(135deg, rgba(124,58,237,.9), rgba(109,40,217,.8))"
+      };
+    default:
+      return {
+        background: "rgba(20,20,25,.82)"
+      };
+  }
+}
+var containerStyle = {
+  position: "fixed",
+  top: "20px",
+  right: "20px",
+  zIndex: 99999,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-end",
+  gap: "10px",
+  width: "min(420px, calc(100vw - 40px))",
+  pointerEvents: "none"
+};
+var toastStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  padding: "14px 16px",
+  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",
+  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 = {
+  flexShrink: 0,
+  width: "28px",
+  height: "28px",
+  display: "grid",
+  placeItems: "center",
+  border: "none",
+  borderRadius: "8px",
+  background: "rgba(255,255,255,.08)",
+  color: "#fff",
+  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
+};
+export {
+  toastStore,
+  YourToastProvider
+};