add swipe + drag to dismiss 👋🏼

Author: hiaaryan

src/sileo.css

@@ -55,6 +55,7 @@
 	position: relative;
 	cursor: pointer;
 	pointer-events: auto;
+	touch-action: none;
 	border: 0;
 	background: transparent;
 	padding: 0;

src/sileo.tsx

@@ -66,6 +66,7 @@ interface SileoProps {
 	refreshKey?: string;
 	onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
 	onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
+	onDismiss?: () => void;
 }
 
 /* ---------------------------------- Icons --------------------------------- */
@@ -133,6 +134,7 @@ export const Sileo = memo(function Sileo({
 	refreshKey,
 	onMouseEnter,
 	onMouseLeave,
+	onDismiss,
 }: SileoProps) {
 	const next: View = useMemo(
 		() => ({ title, description, state, icon, styles, button, fill }),
@@ -428,10 +430,59 @@ export const Sileo = memo(function Sileo({
 			[open],
 		);
 
+	/* -------------------------------- Swipe ----------------------------------- */
+
+	const SWIPE_DISMISS = 30;
+	const SWIPE_MAX = 20;
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	const pointerStartRef = useRef<number | null>(null);
+	const onDismissRef = useRef(onDismiss);
+	onDismissRef.current = onDismiss;
+
+	useEffect(() => {
+		const el = buttonRef.current;
+		if (!el) return;
+
+		const onMove = (e: PointerEvent) => {
+			if (pointerStartRef.current === null) return;
+			const dy = e.clientY - pointerStartRef.current;
+			const sign = dy > 0 ? 1 : -1;
+			const clamped = Math.min(Math.abs(dy), SWIPE_MAX) * sign;
+			el.style.transform = `translateY(${clamped}px)`;
+		};
+
+		const onUp = (e: PointerEvent) => {
+			if (pointerStartRef.current === null) return;
+			const dy = e.clientY - pointerStartRef.current;
+			pointerStartRef.current = null;
+			el.style.transform = "";
+			if (Math.abs(dy) > SWIPE_DISMISS) {
+				onDismissRef.current?.();
+			}
+		};
+
+		el.addEventListener("pointermove", onMove);
+		el.addEventListener("pointerup", onUp);
+		return () => {
+			el.removeEventListener("pointermove", onMove);
+			el.removeEventListener("pointerup", onUp);
+		};
+	}, []);
+
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent<HTMLButtonElement>) => {
+			if (exiting || !onDismiss) return;
+			pointerStartRef.current = e.clientY;
+			e.currentTarget.setPointerCapture(e.pointerId);
+		},
+		[exiting, onDismiss],
+	);
+
 	/* --------------------------------- Render --------------------------------- */
 
 	return (
 		<button
+			ref={buttonRef}
 			type="button"
 			data-sileo-toast
 			data-ready={ready}
@@ -445,6 +496,7 @@ export const Sileo = memo(function Sileo({
 			onMouseEnter={handleEnter}
 			onMouseLeave={handleLeave}
 			onTransitionEnd={handleTransitionEnd}
+			onPointerDown={handlePointerDown}
 		>
 			<div data-sileo-canvas data-edge={expand}>
 				<svg

src/toast.tsx

@@ -144,7 +144,7 @@ const createToast = (options: InternalSileoOptions) => {
 	if (prev) {
 		store.update((p) => p.map((t) => (t.id === id ? item : t)));
 	} else {
-		store.update((p) => [...p, item]);
+		store.update((p) => [...p.filter((t) => t.id !== id), item]);
 	}
 	return { id, duration: merged.duration ?? DEFAULT_DURATION };
 };
@@ -236,6 +236,7 @@ export function Toaster({
 			{
 				enter: MouseEventHandler<HTMLButtonElement>;
 				leave: MouseEventHandler<HTMLButtonElement>;
+				dismiss: () => void;
 			}
 		>(),
 	);
@@ -343,6 +344,7 @@ export function Toaster({
 				);
 				handleMouseLeaveRef.current?.(e);
 			}) as MouseEventHandler<HTMLButtonElement>,
+			dismiss: () => dismissToast(toastId),
 		};
 
 		handlersCache.current.set(toastId, cached);
@@ -427,6 +429,7 @@ export function Toaster({
 									canExpand={activeId === undefined || activeId === item.id}
 									onMouseEnter={h.enter}
 									onMouseLeave={h.leave}
+									onDismiss={h.dismiss}
 								/>
 							);
 						})}