raku-toast-react 1.0.8 → 1.0.10

package/dist/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,aAAa,CAAC;AAErB,eAAO,MAAM,aAAa,+CAuFzB,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

@@ -12,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-60 sm:w-72 pointer-events-none", children: _jsx("div", { className: "relative h-[600px]", children: toasts.map((t, index) => {
+    return (_jsx("div", { className: "fixed top-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;
@@ -25,7 +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("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));
+                                    ? "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"
+                                                        ? "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

@@ -8,6 +8,7 @@ export interface Toast {
     _startTime?: number;
     _remaining?: number;
     _animate?: boolean;
+    _paused?: boolean;
 }
 export declare const toastStore: {
     subscribe(fn: (toasts: Toast[]) => void): () => 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;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,eAAO,MAAM,UAAU;kBACP,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI;kBAQzB,MAAM,SAAQ,SAAS,aAAqB,MAAM;oBA2BhD,MAAM;mBAQP,MAAM;oBAaL,MAAM;CAWvB,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,29 +10,34 @@ 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));
-        // Trigger progress bar animation on next tick
+        // Trigger animation on next tick
         requestAnimationFrame(() => {
-            toast._animate = true;
+            toasts = toasts.map((t) => t.id === newToast.id ? { ...t, _animate: true } : t);
             listeners.forEach((l) => l(toasts));
         });
         // Start auto-remove timer
-        toast._startTime = Date.now();
-        toast._timeout = window.setTimeout(() => toastStore.remove(toast.id), duration);
+        newToast._startTime = Date.now();
+        newToast._timeout = window.setTimeout(() => {
+            toastStore.remove(newToast.id);
+        }, duration);
     },
     remove(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));
     },
@@ -41,18 +46,35 @@ export const toastStore = {
         if (!toast || !toast._timeout)
             return;
         clearTimeout(toast._timeout);
-        toast._timeout = undefined;
-        // calculate remaining time
-        toast._remaining =
-            (toast._remaining ?? 3000) - (Date.now() - (toast._startTime ?? 0));
+        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 = window.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

@@ -17,6 +17,11 @@
 }
 
 /* Colors */
-.toast-success { background-color: #c084fc !important; }
-.toast-error   { background-color: #f87171 !important; }
-.toast-info    { background-color: #818cf8 !important; }
+/* .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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raku-toast-react",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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"
   }
 }