raku-toast-react 1.0.0

package/dist/ToastProvider.d.ts

@@ -0,0 +1,3 @@
+import "./toast.css";
+export declare const ToastProvider: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/ToastProvider.d.ts.map

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

package/dist/ToastProvider.js

@@ -0,0 +1,39 @@
+// src/ToastProvider.tsx
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { toastStore } from "./toast-store";
+import { CheckCircle, XCircle, Info, X } from "lucide-react";
+import "./toast.css";
+export const ToastProvider = () => {
+    const [toasts, setToasts] = useState([]);
+    useEffect(() => toastStore.subscribe(setToasts), []);
+    const icons = {
+        success: _jsx(CheckCircle, { size: 22, className: "text-white" }),
+        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-full max-w-[380px] sm:max-w-[360px] 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;
+                return (_jsxs("div", { style: {
+                        transform: `translateY(${offset}px) scale(${scale})`,
+                        opacity,
+                        zIndex: 100 - index,
+                        pointerEvents: "auto",
+                        transition: "transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease-out",
+                    }, 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"
+                                                    : 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 hover: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));
+            }) }) }));
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ToastProvider";
+export * from "./toast-store";
+export * from "./toast";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// src/index.ts
+export * from "./ToastProvider";
+export * from "./toast-store";
+export * from "./toast";

package/dist/toast-store.d.ts

@@ -0,0 +1,18 @@
+export type ToastType = "success" | "error" | "info";
+export interface Toast {
+    id: number;
+    message: string;
+    type: ToastType;
+    duration?: number;
+    _timeout?: number;
+    _startTime?: number;
+    _remaining?: number;
+}
+export declare const toastStore: {
+    subscribe(fn: (t: Toast[]) => void): () => void;
+    push(message: string, type?: ToastType, duration?: number): void;
+    remove(toastId: number): void;
+    pause(toastId: number): void;
+    resume(toastId: number): void;
+};
+//# sourceMappingURL=toast-store.d.ts.map

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

@@ -0,0 +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"}

package/dist/toast-store.js

@@ -0,0 +1,53 @@
+let listeners = [];
+let toasts = [];
+let id = 0;
+export const toastStore = {
+    subscribe(fn) {
+        listeners.push(fn);
+        fn(toasts);
+        return () => {
+            listeners = listeners.filter((l) => l !== fn);
+        };
+    },
+    push(message, type = "info", duration = 3000) {
+        const toast = {
+            id: ++id,
+            message,
+            type,
+            duration,
+            _remaining: duration,
+        };
+        toasts = [toast, ...toasts];
+        listeners.forEach((l) => l(toasts));
+        // Start the auto-remove timer
+        toast._startTime = Date.now();
+        toast._timeout = setTimeout(() => {
+            toastStore.remove(toast.id);
+        }, duration);
+    },
+    remove(toastId) {
+        const toast = toasts.find(t => t.id === toastId);
+        if (toast?._timeout)
+            clearTimeout(toast._timeout);
+        toasts = toasts.filter((t) => t.id !== toastId);
+        listeners.forEach((l) => l(toasts));
+    },
+    pause(toastId) {
+        const toast = toasts.find((t) => t.id === toastId);
+        if (!toast)
+            return;
+        if (toast._timeout) {
+            clearTimeout(toast._timeout);
+            toast._timeout = undefined;
+            // calculate remaining time
+            toast._remaining = (toast._remaining ?? 3000) - (Date.now() - (toast._startTime ?? 0));
+        }
+    },
+    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);
+    },
+};

package/dist/toast.css

@@ -0,0 +1,15 @@
+/* src/toast.css */
+@keyframes toast-progress {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
+.toast-progress {
+  width: 100%;
+  height: 100%;
+  animation: toast-progress 3s linear forwards;
+}
+
+.toast-item:hover .toast-progress {
+  animation-play-state: paused; /* pauses animation on hover */
+}

package/dist/toast.d.ts

@@ -0,0 +1,6 @@
+export declare const toast: {
+    success: (msg: string) => void;
+    error: (msg: string) => void;
+    info: (msg: string) => void;
+};
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast.d.ts.map

@@ -0,0 +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"}

package/dist/toast.js

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "raku-toast-react",
+  "version": "1.0.0",
+  "description": "A lightweight React toast library with gradient and animation",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "postbuild": "cp src/toast.css dist/toast.css"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "lucide-react": ">=0.300.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"
+  }
+}