echo-toast 1.0.2 → 1.0.4

package/README.md

@@ -1,4 +1,4 @@
-# A simple toast component for React/Next.JS under 5kb
+# A simple toast component for React/Next.JS
 
 ## Installation
 

package/dist/echo-toast.css

@@ -0,0 +1,2 @@
+@keyframes echoLibEnterAnimation{0%{opacity:0}to{opacity:1}}@keyframes echoLibExitAnimation{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.echo-lib-enter{animation:.6s ease-out forwards echoLibEnterAnimation}.echo-lib-fade-out{animation:.5s forwards echoLibExitAnimation}
+/*$vite$:1*/

package/dist/echo-toast.d.ts

@@ -17,10 +17,6 @@ declare interface IToast {
     icon?: React.ElementType;
     closeButton?: boolean;
     border?: boolean;
-    duration?: {
-        animation?: number;
-        notification?: number;
-    };
     swipe?: boolean;
     swipeDirection?: 'left' | 'right';
     deleteToast?: () => void;

package/dist/echo-toast.js

@@ -1,22 +1,7 @@
-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 { Check as e, Info as t, LoaderCircle as n, ShieldAlert as r, X as i } from "lucide-react";
+import { useEffect as a, useLayoutEffect as o, useRef 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 {
+var d = new class {
 	observers = [];
 	counter = 0;
 	subscribe(e) {
@@ -30,15 +15,7 @@ var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, p = Object.g
 			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 = {
+}(), f = {
 	left: {
 		up: {
 			left: 16,
@@ -87,12 +64,12 @@ var x = {
 			bottom: 16
 		}
 	}
-}, S = {
+}, p = {
 	borderRadius: 8,
 	boxShadow: "0px 0px 4px #efefef",
 	maxWidth: "350px",
 	width: "calc(100vw - 40px)"
-}, C = {
+}, m = {
 	blank: {
 		backgroundColor: "#e5e7eb",
 		color: "#4b5563"
@@ -117,7 +94,7 @@ var x = {
 		backgroundColor: "#1e3a8a",
 		color: "white"
 	}
-}, w = {
+}, h = {
 	blank: {
 		backgroundColor: "#ffffff",
 		border: "1px solid #eeeff1"
@@ -142,115 +119,107 @@ var x = {
 		backgroundColor: "#dbeafe",
 		border: "1px solid #ddd6fe"
 	}
-}, T = {
+}, g = {
 	blank: "#1f2937",
 	loading: "#1f2937",
 	succesful: "#166534",
 	error: "#b91c1c",
 	warning: "#ea580c",
 	info: "#1e3a8a"
-}, E = {
-	loading: i,
-	succesful: n,
-	error: o,
-	warning: a,
-	info: r,
+}, _ = {
+	loading: n,
+	succesful: e,
+	error: i,
+	warning: r,
+	info: t,
 	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]
+function v({ type: e = "blank", label: t, icon: n, action: r, closeButton: d = !0, title: f, swipe: v = !0, swipeDirection: y = "right", deleteToast: b }) {
+	let x = s(null), S = s(null), [C, w] = c(0), [T, E] = c(!1), D = _[e] && e !== "blank" ? _[e] : n || void 0, O = {
+		...p,
+		...h[e]
+	}, k = (e) => {
+		e.currentTarget.setPointerCapture(e.pointerId), w(e.clientX);
 	};
-	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,
+	function A() {
+		S?.current?.classList.remove("echo-lib-enter"), S?.current?.classList.add("echo-lib-fade-out"), E(!0), x.current && clearTimeout(x.current);
+	}
+	let j = (e) => {
+		let t = C - e.clientX;
+		Math.abs(t) > 100 && (t < 0 && y === "right" && A(), t > 0 && y === "left" && A());
+	};
+	o(() => {
+		S.current && S.current.classList.add("echo-lib-enter");
+	}, []), a(() => (x.current = setTimeout(() => {
+		S.current && (S.current.classList.remove("echo-lib-enter"), S.current.classList.add("echo-lib-fade-out"), E(!0));
+	}, 5e3), () => {
+		x.current && clearTimeout(x.current);
+	}), []);
+	function M() {
+		T && b();
+	}
+	return /* @__PURE__ */ l("section", {
+		onPointerDown: v ? k : void 0,
+		onPointerUp: v ? j : void 0,
+		onAnimationEnd: M,
+		style: O,
+		ref: S,
 		children: /* @__PURE__ */ u("section", {
 			style: {
 				position: "relative",
 				paddingLeft: "1rem",
 				paddingTop: "0.8rem",
-				paddingRight: i ? a ? "2.5Arem" : "1rem" : "8rem",
+				paddingRight: r ? d ? "2.5Arem" : "1rem" : "8rem",
 				paddingBottom: "0.8rem",
 				display: "flex",
 				alignItems: "center",
 				gap: 16
 			},
 			children: [
-				_ && _ !== void 0 && /* @__PURE__ */ l(t.div, {
+				D && D !== void 0 && /* @__PURE__ */ l("section", {
 					style: {
 						display: "flex",
 						alignItems: "center"
 					},
-					animate: e === "loading" ? { rotate: 360 } : {},
-					transition: e === "loading" ? {
-						repeat: Infinity,
-						duration: 1,
-						ease: "linear"
-					} : {},
-					children: /* @__PURE__ */ l(_, {
+					children: /* @__PURE__ */ l(D, {
 						size: 18,
-						color: T[e]
+						color: g[e]
 					})
 				}),
 				/* @__PURE__ */ u("section", {
 					style: {
 						display: "flex",
-						flexDirection: i ? "row" : "column",
+						flexDirection: r ? "row" : "column",
 						alignItems: "center",
 						justifyContent: "space-between",
 						gap: 16
 					},
-					children: [/* @__PURE__ */ u("section", { children: [s && /* @__PURE__ */ l("p", {
+					children: [/* @__PURE__ */ u("section", { children: [f && /* @__PURE__ */ l("p", {
 						style: {
 							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
 							fontSize: "0.9rem",
 							fontWeight: 700,
 							marginBottom: "4px",
 							marginTop: "0px",
-							color: T[e]
+							color: g[e]
 						},
-						children: s
+						children: f
 					}), /* @__PURE__ */ l("p", {
 						style: {
 							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
 							fontSize: "0.8rem",
 							marginTop: "0px",
 							marginBottom: "0px",
-							color: T[e]
+							color: g[e]
 						},
-						children: n
-					})] }), i && /* @__PURE__ */ l("button", {
-						onClick: i.onClick,
+						children: t
+					})] }), r && /* @__PURE__ */ l("button", {
+						onClick: r.onClick,
 						style: {
 							border: "none",
-							backgroundColor: C[e].backgroundColor,
+							backgroundColor: m[e].backgroundColor,
 							paddingTop: "0.4rem",
 							paddingBottom: "0.4rem",
 							paddingLeft: "0.8rem",
@@ -260,16 +229,16 @@ function D({ type: e = "blank", label: n, icon: r, action: i, closeButton: a = !
 							fontFamily: "Inter, system-ui, -apple-system, sans-serif",
 							cursor: "pointer",
 							fontWeight: 600,
-							color: C[e].color
+							color: m[e].color
 						},
-						children: i.label
+						children: r.label
 					})]
 				}),
-				a && /* @__PURE__ */ l("button", {
+				d && /* @__PURE__ */ l("button", {
 					style: {
 						background: "transparent",
 						border: "0px",
-						color: T[e],
+						color: g[e],
 						position: "absolute",
 						top: 8,
 						right: 8,
@@ -277,9 +246,9 @@ function D({ type: e = "blank", label: n, icon: r, action: i, closeButton: a = !
 						zIndex: 10
 					},
 					onPointerDown: (e) => {
-						m && (e.stopPropagation(), m());
+						e.stopPropagation(), A();
 					},
-					children: /* @__PURE__ */ l(o, { size: 18 })
+					children: /* @__PURE__ */ l(i, { size: 18 })
 				})
 			]
 		})
@@ -287,45 +256,39 @@ function D({ type: e = "blank", label: n, icon: r, action: i, closeButton: a = !
 }
 //#endregion
 //#region lib/hooks/useToaster.tsx
-function O(e) {
+function y(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);
+	return a(() => {
+		let t = e.subscribe((e) => {
+			function t() {
+				n((t) => t.filter((t) => t.id !== e.id));
 			}
-			n((t) => [...t, {
+			n((n) => [...n, {
 				...e,
-				deleteToast: r
+				deleteToast: t
 			}]);
-			let i = setTimeout(() => {
-				r();
-			}, 5e3);
-			t.push(i);
 		});
 		return () => {
-			r(), t.forEach((e) => {
-				e && clearTimeout(e);
-			});
+			t();
 		};
 	}, [e]), t;
 }
 //#endregion
 //#region lib/components/Toaster.tsx
-function k({ positionX: e = "right", positionY: t = "bottom" }) {
-	let n = O(v);
+function b({ positionX: e = "right", positionY: t = "bottom" }) {
+	let n = y(d);
 	return /* @__PURE__ */ l("section", {
 		style: {
 			position: "fixed",
 			display: "grid",
 			gap: 8,
-			...x[e][t]
+			...f[e][t]
 		},
-		children: /* @__PURE__ */ l(y.AnimatePresence, { children: n.filter((e, t) => t < 5).map((e) => /* @__PURE__ */ l(D, { ...e }, e.id)) })
+		children: n.filter((e, t) => t < 5).map((e) => /* @__PURE__ */ l(v, { ...e }, e.id))
 	});
 }
 //#endregion
 //#region lib/main.ts
-var A = { notify: v.notify.bind(v) };
+var x = { notify: d.notify.bind(d) };
 //#endregion
-export { k as Toaster, A as echo };
+export { b as Toaster, x as echo };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "echo-toast",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "./dist/echo-toast.js",
   "module": "./dist/echo-toast.js",
@@ -11,17 +11,20 @@
     "build": "tsc -b ./tsconfig.lib.json && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "lucide-react": "^1.3.0",
-    "motion": "^12.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@microsoft/api-extractor": "^7.58.7",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -29,11 +32,12 @@
     "eslint": "^10.2.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-storybook": "^10.3.6",
     "globals": "^17.5.0",
     "lucide-react": "^1.3.0",
-    "motion": "^12.38.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "storybook": "^10.3.6",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.2",
     "unplugin-dts": "^1.0.0",