echo-toast 1.0.0 → 1.0.1

package/dist/echo-toast.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare const echo: {
+    notify: (data: IToast) => void;
+};
+
+declare interface IToast {
+    id?: number;
+    type?: 'loading' | 'succesful' | 'error' | 'warning' | 'info' | 'blank';
+    action?: {
+        label: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        styling?: string;
+    };
+    label: string;
+    title?: string;
+    icon?: React.ElementType;
+    closeButton?: boolean;
+    border?: boolean;
+    duration?: {
+        animation?: number;
+        notification?: number;
+    };
+    swipe?: boolean;
+    swipeDirection?: 'left' | 'right';
+    deleteToast?: () => void;
+}
+
+declare interface IToaster {
+    positionX?: 'left' | 'center' | 'right';
+    positionY?: 'up' | 'middle' | 'bottom';
+}
+
+export declare function Toaster({ positionX, positionY }: IToaster): JSX.Element;
+
+export { }

package/dist/echo-toast.js

@@ -0,0 +1,331 @@
+import { m as e, motion as t } from "framer-motion";
+import { Check as n, Info as r, LoaderCircle as i, ShieldAlert as a, X as o } from "lucide-react";
+import { useEffect as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, p = Object.getOwnPropertyNames, m = Object.prototype.hasOwnProperty, h = (e, t) => {
+	let n = {};
+	for (var r in e) d(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || d(n, Symbol.toStringTag, { value: "Module" }), n;
+}, g = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = p(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !m.call(e, s) && s !== n && d(e, s, {
+		get: ((e) => t[e]).bind(null, s),
+		enumerable: !(r = f(t, s)) || r.enumerable
+	});
+	return e;
+}, _ = (e, t, n) => (g(e, t, "default"), n && g(n, t, "default")), v = new class {
+	observers = [];
+	counter = 0;
+	subscribe(e) {
+		return this.observers.push(e), () => {
+			this.observers = this.observers.filter((t) => t !== e);
+		};
+	}
+	notify(e) {
+		this.counter++, this.observers.forEach((t) => t({
+			...e,
+			id: this.counter
+		}));
+	}
+}(), y = /* @__PURE__ */ h({
+	m: () => e,
+	motion: () => t
+});
+import * as b from "framer-motion";
+_(y, b);
+//#endregion
+//#region lib/static/static.ts
+var x = {
+	left: {
+		up: {
+			left: 16,
+			top: 16
+		},
+		middle: {
+			left: 16,
+			top: "50%",
+			translateY: "-50%"
+		},
+		bottom: {
+			left: 16,
+			bottom: 16
+		}
+	},
+	center: {
+		up: {
+			top: 16,
+			left: "50%",
+			translateX: "-50%"
+		},
+		middle: {
+			top: "50%",
+			left: "50%",
+			translateY: "-50%",
+			translateX: "-50%"
+		},
+		bottom: {
+			bottom: 16,
+			left: "50%",
+			translateX: "-50%"
+		}
+	},
+	right: {
+		up: {
+			top: 16,
+			right: 16
+		},
+		middle: {
+			right: 16,
+			top: "50%",
+			translateY: "-50%"
+		},
+		bottom: {
+			right: 16,
+			bottom: 16
+		}
+	}
+}, S = {
+	borderRadius: 8,
+	boxShadow: "0px 0px 4px #efefef",
+	maxWidth: "350px",
+	width: "calc(100vw - 40px)"
+}, C = {
+	blank: {
+		backgroundColor: "#e5e7eb",
+		color: "#4b5563"
+	},
+	loading: {
+		backgroundColor: "#e5e7eb",
+		color: "#4b5563"
+	},
+	succesful: {
+		backgroundColor: "#4ade80",
+		color: "#166534"
+	},
+	error: {
+		backgroundColor: "#fecaca",
+		color: "#991b1b"
+	},
+	warning: {
+		backgroundColor: "#f97316",
+		color: "white"
+	},
+	info: {
+		backgroundColor: "#1e3a8a",
+		color: "white"
+	}
+}, w = {
+	blank: {
+		backgroundColor: "#ffffff",
+		border: "1px solid #eeeff1"
+	},
+	loading: {
+		backgroundColor: "#ffffff",
+		border: "1px solid #eeeff1"
+	},
+	succesful: {
+		backgroundColor: "#dcfce7",
+		border: "1px solid #bbf7d0"
+	},
+	error: {
+		backgroundColor: "#fef2f2",
+		border: "1px solid #fee2e2"
+	},
+	warning: {
+		backgroundColor: "#ffedd5",
+		border: "1px solid #fed7aa"
+	},
+	info: {
+		backgroundColor: "#dbeafe",
+		border: "1px solid #ddd6fe"
+	}
+}, T = {
+	blank: "#1f2937",
+	loading: "#1f2937",
+	succesful: "#166534",
+	error: "#b91c1c",
+	warning: "#ea580c",
+	info: "#1e3a8a"
+}, E = {
+	loading: i,
+	succesful: n,
+	error: o,
+	warning: a,
+	info: r,
+	blank: void 0
+};
+//#endregion
+//#region lib/components/Toast.tsx
+function D({ type: e = "blank", label: n, icon: r, action: i, closeButton: a = !0, title: s, duration: d, swipe: f = !0, swipeDirection: p = "right", deleteToast: m }) {
+	let [h, g] = c(0), _ = E[e] && e !== "blank" ? E[e] : r || void 0, v = {
+		...S,
+		...w[e]
+	};
+	return /* @__PURE__ */ l(t.section, {
+		drag: "x",
+		exit: { opacity: 0 },
+		dragDirectionLock: !0,
+		dragConstraints: {
+			left: 0,
+			top: 0,
+			right: 0,
+			bottom: 0
+		},
+		initial: {
+			opacity: 0,
+			scale: .9
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			transition: { duration: d?.animation ?? .2 }
+		},
+		onPointerDown: f ? (e) => {
+			e.currentTarget.setPointerCapture(e.pointerId), g(e.clientX);
+		} : void 0,
+		onPointerUp: f ? (e) => {
+			let t = h - e.clientX;
+			Math.abs(t) > 100 && (t < 0 && p === "right" && m && m(), t > 0 && p === "left" && m && m());
+		} : void 0,
+		style: v,
+		children: /* @__PURE__ */ u("section", {
+			style: {
+				position: "relative",
+				paddingLeft: "1rem",
+				paddingTop: "0.8rem",
+				paddingRight: i ? a ? "2.5Arem" : "1rem" : "8rem",
+				paddingBottom: "0.8rem",
+				display: "flex",
+				alignItems: "center",
+				gap: 16
+			},
+			children: [
+				_ && _ !== void 0 && /* @__PURE__ */ l(t.div, {
+					style: {
+						display: "flex",
+						alignItems: "center"
+					},
+					animate: e === "loading" ? { rotate: 360 } : {},
+					transition: e === "loading" ? {
+						repeat: Infinity,
+						duration: 1,
+						ease: "linear"
+					} : {},
+					children: /* @__PURE__ */ l(_, {
+						size: 18,
+						color: T[e]
+					})
+				}),
+				/* @__PURE__ */ u("section", {
+					style: {
+						display: "flex",
+						flexDirection: i ? "row" : "column",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: 16
+					},
+					children: [/* @__PURE__ */ u("section", { children: [s && /* @__PURE__ */ l("p", {
+						style: {
+							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+							fontSize: "0.9rem",
+							fontWeight: 700,
+							marginBottom: "4px",
+							marginTop: "0px",
+							color: T[e]
+						},
+						children: s
+					}), /* @__PURE__ */ l("p", {
+						style: {
+							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+							fontSize: "0.8rem",
+							marginTop: "0px",
+							marginBottom: "0px",
+							color: T[e]
+						},
+						children: n
+					})] }), i && /* @__PURE__ */ l("button", {
+						onClick: i.onClick,
+						style: {
+							border: "none",
+							backgroundColor: C[e].backgroundColor,
+							paddingTop: "0.4rem",
+							paddingBottom: "0.4rem",
+							paddingLeft: "0.8rem",
+							paddingRight: "0.8rem",
+							borderRadius: "8px",
+							fontSize: "0.8rem",
+							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+							cursor: "pointer",
+							fontWeight: 600,
+							color: C[e].color
+						},
+						children: i.label
+					})]
+				}),
+				a && /* @__PURE__ */ l("button", {
+					style: {
+						background: "transparent",
+						border: "0px",
+						color: T[e],
+						position: "absolute",
+						top: 8,
+						right: 8,
+						cursor: "pointer",
+						zIndex: 10
+					},
+					onPointerDown: (e) => {
+						m && (e.stopPropagation(), m());
+					},
+					children: /* @__PURE__ */ l(o, { size: 18 })
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region lib/hooks/useToaster.tsx
+function O(e) {
+	let [t, n] = c([]);
+	return s(() => {
+		let t = [], r = e.subscribe((e) => {
+			function r() {
+				n((t) => t.filter((t) => t.id !== e.id)), clearTimeout(i), t = t.filter((e) => e !== i);
+			}
+			n((t) => [...t, {
+				...e,
+				deleteToast: r
+			}]);
+			let i = setTimeout(() => {
+				r();
+			}, 5e3);
+			t.push(i);
+		});
+		return () => {
+			r(), t.forEach((e) => {
+				e && clearTimeout(e);
+			});
+		};
+	}, [e]), t;
+}
+//#endregion
+//#region lib/components/Toaster.tsx
+function k({ positionX: e = "right", positionY: t = "bottom" }) {
+	let n = O(v);
+	return /* @__PURE__ */ l("section", {
+		style: {
+			position: "fixed",
+			display: "grid",
+			gap: 8,
+			...x[e][t]
+		},
+		children: /* @__PURE__ */ l(y.AnimatePresence, { children: n.filter((e, t) => t < 5).map((e) => /* @__PURE__ */ l(D, { ...e }, e.id)) })
+	});
+}
+//#endregion
+//#region lib/main.ts
+var A = { notify: v.notify.bind(v) };
+//#endregion
+export { k as Toaster, A as echo };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "echo-toast",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/echo-toast.js",
+  "module": "./dist/echo-toast.js",
   "types": "./dist/echo-toast.d.ts",
   "scripts": {
     "dev": "vite",