raku-toast-react 1.0.7 → 1.0.9

package/dist/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAMA,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,aAAa,+CAqFzB,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,aAAa,+CAwFzB,CAAC"}

package/dist/ToastProvider.js

@@ -1,4 +1,3 @@
-// src/ToastProvider.tsx
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -13,7 +12,7 @@ export const ToastProvider = () => {
         error: _jsx(XCircle, { size: 22, className: "text-white" }),
         info: _jsx(Info, { size: 22, className: "text-white" }),
     };
-    return (_jsx("div", { className: "fixed top-1/2 -translate-y-1/2 right-4 z-50 w-64 sm:w-74 pointer-events-none", children: _jsx("div", { className: "relative h-[600px] w-64 sm:w-74", children: toasts.map((t, index) => {
+    return (_jsx("div", { className: "fixed top-1/2 -translate-y-1/2 right-4 z-50 w-60 sm:w-72 pointer-events-none", children: _jsx("div", { className: "relative h-[600px]", children: toasts.map((t, index) => {
                 const offset = index * 78;
                 const scale = 1 - index * 0.03;
                 const opacity = 1 - index * 0.12;
@@ -26,14 +25,14 @@ export const ToastProvider = () => {
                     }, className: "toast-item absolute top-0 right-0 w-full flex items-start gap-3 sm:gap-4 px-4 py-3 sm:px-5 sm:py-4 rounded-2xl sm:rounded-lg shadow-2xl backdrop-blur-lg hover:scale-[1.02]", onMouseEnter: () => toastStore.pause(t.id), onMouseLeave: () => toastStore.resume(t.id), children: [_jsx("div", { className: `absolute inset-0 rounded-2xl sm:rounded-lg opacity-90 blur-sm shadow-lg ${t.type === "success"
                                 ? "bg-gradient-to-r from-purple-500 to-indigo-500"
                                 : t.type === "error"
-                                    ? "bg-gradient-to-r from-pink-500 to-red-500"
-                                    : "bg-gradient-to-r from-indigo-500 to-purple-600"}` }), _jsxs("div", { className: "relative flex w-full gap-3 sm:gap-4", children: [_jsx("div", { className: "mt-1", children: icons[t.type] }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm sm:text-base font-bold text-white drop-shadow-md", children: t.type.toUpperCase() }), _jsx("p", { className: "text-xs sm:text-sm text-white/90 leading-snug drop-shadow", children: t.message }), _jsx("div", { className: "mt-2 sm:mt-3 h-[3px] sm:h-[4px] w-full rounded-full bg-white/20 overflow-hidden", children: _jsx("div", { className: `toast-progress ${t.type === "success"
-                                                    ? "bg-purple-300"
+                                    ? "bg-gradient-to-r from-pink-500 to-rose-500"
+                                    : "bg-gradient-to-r from-indigo-500 to-purple-600"}` }), _jsxs("div", { className: "relative flex w-full gap-3 sm:gap-4", children: [_jsx("div", { className: "mt-1", children: icons[t.type] }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm sm:text-base font-bold text-white drop-shadow-md", children: t.type.toUpperCase() }), _jsx("p", { className: "text-xs sm:text-sm text-white/90 leading-snug drop-shadow", children: t.message }), _jsx("div", { className: "mt-2 sm:mt-3 h-1 sm:h-2 w-full rounded-full bg-white/20 overflow-hidden", children: _jsx("div", { className: `toast-progress ${t.type === "success"
+                                                    ? "toast-success"
                                                     : t.type === "error"
-                                                        ? "bg-red-300"
-                                                        : "bg-indigo-300"}`, style: {
-                                                    width: `${((t._remaining ?? t.duration) / t.duration) * 100}%`,
-                                                    transition: `width ${t._remaining}ms linear`,
-                                                } }) })] }), _jsx("button", { onClick: () => toastStore.remove(t.id), className: "text-white/80 text-white transition p-1 sm:p-2 rounded-lg hover:bg-white/20", children: _jsx(X, { size: 18, className: "sm:text-[20px]" }) })] })] }, t.id));
+                                                        ? "toast-error"
+                                                        : "toast-info"} ${t._animate ? "animate-progress" : ""}`, style: {
+                                                    animationDuration: `${t._remaining ?? t.duration ?? 3000}ms`,
+                                                    animationPlayState: t._paused ? "paused" : "running",
+                                                } }) })] }), _jsx("button", { onClick: () => toastStore.remove(t.id), className: "text-white transition p-1 sm:p-2 rounded-lg hover:bg-white/20 cursor-pointer", children: _jsx(X, { size: 18, className: "sm:text-[20px]" }) })] })] }, t.id));
             }) }) }));
 };

package/dist/toast-store.d.ts

@@ -7,9 +7,11 @@ export interface Toast {
     _timeout?: number;
     _startTime?: number;
     _remaining?: number;
+    _animate?: boolean;
+    _paused?: boolean;
 }
 export declare const toastStore: {
-    subscribe(fn: (t: Toast[]) => void): () => void;
+    subscribe(fn: (toasts: Toast[]) => void): () => void;
     push(message: string, type?: ToastType, duration?: number): void;
     remove(toastId: number): void;
     pause(toastId: number): void;

package/dist/toast-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,eAAO,MAAM,UAAU;kBACP,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI;kBASpB,MAAM,SAAQ,SAAS,aAAqB,MAAM;oBAmBhD,MAAM;mBAQP,MAAM;oBAYL,MAAM;CAOvB,CAAC"}
+{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAMD,eAAO,MAAM,UAAU;kBACP,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI;kBAQzB,MAAM,SAAQ,SAAS,aAAqB,MAAM;oBA8BhD,MAAM;mBASP,MAAM;oBAyBL,MAAM;CAsBvB,CAAC"}

package/dist/toast-store.js

@@ -10,44 +10,71 @@ export const toastStore = {
         };
     },
     push(message, type = "info", duration = 3000) {
-        const toast = {
+        const newToast = {
             id: ++id,
             message,
             type,
             duration,
             _remaining: duration,
+            _animate: false, // start false
+            _paused: false,
         };
-        toasts = [toast, ...toasts];
+        // Add toast immutably
+        toasts = [newToast, ...toasts];
         listeners.forEach((l) => l(toasts));
-        // Start the auto-remove timer
-        toast._startTime = Date.now();
-        toast._timeout = setTimeout(() => {
-            toastStore.remove(toast.id);
+        // Trigger animation on next tick
+        requestAnimationFrame(() => {
+            toasts = toasts.map((t) => t.id === newToast.id ? { ...t, _animate: true } : t);
+            listeners.forEach((l) => l(toasts));
+        });
+        // Start auto-remove timer
+        newToast._startTime = Date.now();
+        newToast._timeout = window.setTimeout(() => {
+            toastStore.remove(newToast.id);
         }, duration);
     },
     remove(toastId) {
-        const toast = toasts.find(t => t.id === toastId);
+        const toast = toasts.find((t) => t.id === toastId);
         if (toast?._timeout)
             clearTimeout(toast._timeout);
+        // Remove immutably
         toasts = toasts.filter((t) => t.id !== toastId);
         listeners.forEach((l) => l(toasts));
     },
     pause(toastId) {
         const toast = toasts.find((t) => t.id === toastId);
-        if (!toast)
+        if (!toast || !toast._timeout)
             return;
-        if (toast._timeout) {
-            clearTimeout(toast._timeout);
-            toast._timeout = undefined;
-            // calculate remaining time
-            toast._remaining = (toast._remaining ?? 3000) - (Date.now() - (toast._startTime ?? 0));
-        }
+        clearTimeout(toast._timeout);
+        const remaining = (toast._remaining ?? toast.duration ?? 3000) -
+            (Date.now() - (toast._startTime ?? 0));
+        // Update immutably
+        toasts = toasts.map((t) => t.id === toastId
+            ? {
+                ...t,
+                _paused: true,
+                _timeout: undefined,
+                _remaining: remaining,
+            }
+            : t);
+        listeners.forEach((l) => l(toasts));
     },
     resume(toastId) {
         const toast = toasts.find((t) => t.id === toastId);
         if (!toast || toast._timeout)
             return;
-        toast._startTime = Date.now();
-        toast._timeout = setTimeout(() => toastStore.remove(toast.id), toast._remaining ?? 3000);
+        const timeout = window.setTimeout(() => {
+            toastStore.remove(toastId);
+        }, toast._remaining ?? 3000);
+        // Update immutably
+        toasts = toasts.map((t) => t.id === toastId
+            ? {
+                ...t,
+                _paused: false,
+                _startTime: Date.now(),
+                _timeout: timeout,
+            }
+            : t);
+        listeners.forEach((l) => l(toasts));
     },
 };

package/dist/toast.css

@@ -1,15 +1,27 @@
-/* src/toast.css */
-@keyframes toast-progress {
-  from { width: 100%; }
-  to { width: 0%; }
-}
-
 .toast-progress {
-  width: 100%;
   height: 100%;
-  animation: toast-progress 3s linear forwards;
+  width: 100%;
+  border-radius: inherit;
 }
 
-.toast-item:hover .toast-progress {
-  animation-play-state: paused; /* pauses animation on hover */
+/* animation triggers shrink from 100% → 0% */
+.animate-progress {
+  animation-name: progress;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
 }
+
+@keyframes progress {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
+/* Colors */
+/* .toast-success { background-color: #9a34ff !important; }
+.toast-error   { background-color: #ff4ae7 !important; }
+.toast-info    { background-color: #3145ff !important; } */
+
+
+.toast-success { background-color: #ffffffec !important; }
+.toast-error   { background-color: #ffffffec !important; }
+.toast-info    { background-color: #ffffffec !important; }

package/dist/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;mBACD,MAAM;iBACR,MAAM;gBACP,MAAM;CACnB,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;mBACD,MAAM;iBACR,MAAM;gBACP,MAAM;CACnB,CAAC"}

package/dist/toast.js

@@ -1,4 +1,3 @@
-// src/toast.ts
 import { toastStore } from "./toast-store";
 export const toast = {
     success: (msg) => toastStore.push(msg, "success"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raku-toast-react",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A lightweight React toast library with gradient and animation",
   "private": false,
   "main": "dist/index.js",
@@ -13,16 +13,16 @@
     "postbuild": "cp src/toast.css dist/toast.css"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "lucide-react": ">=0.300.0"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "lucide-react": "^0.544.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "lucide-react": "^0.300.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.1.6"
+    "@types/react": "^19.2.1",
+    "@types/react-dom": "^19.2.1",
+    "lucide-react": "^0.544.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
   }
 }