raku-toast-react 1.0.7 → 1.0.8

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,+CAuFzB,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;
@@ -27,13 +26,6 @@ export const ToastProvider = () => {
                                 ? "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"
-                                                    : 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));
+                                    : "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));
             }) }) }));
 };

package/dist/toast-store.d.ts

@@ -7,9 +7,10 @@ export interface Toast {
     _timeout?: number;
     _startTime?: number;
     _remaining?: number;
+    _animate?: 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;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"}

package/dist/toast-store.js

@@ -16,17 +16,21 @@ export const toastStore = {
             type,
             duration,
             _remaining: duration,
+            _animate: false, // start false
         };
         toasts = [toast, ...toasts];
         listeners.forEach((l) => l(toasts));
-        // Start the auto-remove timer
+        // Trigger progress bar animation on next tick
+        requestAnimationFrame(() => {
+            toast._animate = true;
+            listeners.forEach((l) => l(toasts));
+        });
+        // Start auto-remove timer
         toast._startTime = Date.now();
-        toast._timeout = setTimeout(() => {
-            toastStore.remove(toast.id);
-        }, duration);
+        toast._timeout = window.setTimeout(() => toastStore.remove(toast.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);
         toasts = toasts.filter((t) => t.id !== toastId);
@@ -34,20 +38,21 @@ export const toastStore = {
     },
     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);
+        toast._timeout = undefined;
+        // calculate remaining time
+        toast._remaining =
+            (toast._remaining ?? 3000) - (Date.now() - (toast._startTime ?? 0));
+        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);
+        toast._timeout = window.setTimeout(() => toastStore.remove(toast.id), toast._remaining ?? 3000);
+        listeners.forEach((l) => l(toasts));
     },
 };

package/dist/toast.css

@@ -1,15 +1,22 @@
-/* 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: #c084fc !important; }
+.toast-error   { background-color: #f87171 !important; }
+.toast-info    { background-color: #818cf8 !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.8",
   "description": "A lightweight React toast library with gradient and animation",
   "private": false,
   "main": "dist/index.js",