@rozie-ui/toast-solid 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,51 @@
+import { JSX } from "solid-js";
+
+//#region src/Toaster.d.ts
+interface ToastSlotCtx {
+  toast: any;
+  dismiss: any;
+}
+interface ToasterProps {
+  /**
+   * Which corner the toast stack renders in: `'top-left'`, `'top-right'`, `'top-center'`, `'bottom-left'`, `'bottom-right'`, or `'bottom-center'`. Drives the fixed-position layout and the stack direction.
+   */
+  position?: string;
+  /**
+   * Default auto-dismiss time in milliseconds, applied to any toast that does not pass its own `duration`. `0` (or a per-toast `duration` of `0`) makes the toast sticky — it stays until explicitly dismissed.
+   */
+  duration?: number;
+  /**
+   * Maximum number of visible toasts (`0` = unlimited). When the queue exceeds this, the oldest toasts drop off the stack.
+   */
+  max?: number;
+  /**
+   * Opt **out** of pausing the auto-dismiss timers while the pointer is over the stack. By default hovering pauses every timer and leaving restarts them; set this to keep toasts dismissing on schedule regardless of hover.
+   */
+  disablePauseOnHover?: boolean;
+  /**
+   * Accessible name for the live region (`role="region"`), applied as its `aria-label`. Defaults to `'Notifications'` when not set, so assistive tech can navigate to the toast stack as a landmark.
+   */
+  ariaLabel?: (string) | null;
+  /**
+   * Opt **out** of pointer swipe-to-dismiss. By default, dragging a toast past 45% of its own width/height (direction auto-derived from `position`) or a fast flick dismisses it with reason `'swipe'`; a short drag springs back. A drag starting on the close button (or any button/link) never swipes.
+   */
+  disableSwipe?: boolean;
+  /**
+   * Opt **in** to a sonner-style collapsed stack: a single-cell grid overlay with depth-driven transforms (toasts at depth 3+ fade to invisible), newest on top. Hovering the region or moving keyboard focus into it expands to the normal flex-column stack; leaving re-collapses. `false` (default) renders the plain flex column at all times.
+   */
+  stacked?: boolean;
+  onDismissed?: (...args: unknown[]) => void;
+  toastSlot?: (ctx: ToastSlotCtx) => JSX.Element;
+  slots?: Record<string, (ctx: any) => JSX.Element>;
+  ref?: (h: ToasterHandle) => void;
+}
+interface ToasterHandle {
+  show: (...args: any[]) => any;
+  dismiss: (...args: any[]) => any;
+  clear: (...args: any[]) => any;
+  patch: (...args: any[]) => any;
+  promise: (...args: any[]) => any;
+}
+declare function Toaster(_props: ToasterProps): JSX.Element;
+//#endregion
+export { Toaster, Toaster as default, type ToasterHandle };

package/dist/index.mjs

@@ -0,0 +1,477 @@
+import { Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { Key } from "@solid-primitives/keyed";
+import { __rozieInjectStyle, mergeListeners, parseInlineStyle, rozieAttr, rozieClass, rozieDisplay } from "@rozie/runtime-solid";
+//#region src/Toaster.tsx
+__rozieInjectStyle("Toaster-12d4265c", `@media (prefers-reduced-motion: reduce) {
+  .rozie-toast[data-rozie-s-12d4265c] {
+    animation-name: rozie-toast-fade-in;
+    animation-duration: 1ms;
+  }
+  .rozie-toast--exiting[data-rozie-s-12d4265c] {
+    animation-name: rozie-toast-fade-out;
+    animation-duration: 1ms;
+  }
+}
+.rozie-toaster[data-rozie-s-12d4265c] {
+  position: fixed;
+  z-index: var(--rozie-toast-z, 9999);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rozie-toast-gap, 0.5rem);
+  padding: var(--rozie-toast-region-padding, 1rem);
+  max-width: var(--rozie-toast-max-width, calc(100vw - 2rem));
+  pointer-events: none;
+  font: var(--rozie-toast-font, inherit);
+}
+.rozie-toaster[data-rozie-s-12d4265c] > *[data-rozie-s-12d4265c] {
+  pointer-events: auto;
+}
+.rozie-toaster--top-left[data-rozie-s-12d4265c] { top: 0; left: 0; align-items: flex-start; }
+.rozie-toaster--top-right[data-rozie-s-12d4265c] { top: 0; right: 0; align-items: flex-end; }
+.rozie-toaster--top-center[data-rozie-s-12d4265c] { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] { bottom: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+.rozie-toaster--stacked[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  grid-area: 1 / 1;
+  z-index: calc(100 - var(--rozie-toast-depth, 0));
+}
+.rozie-toaster--stacked[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) {
+  display: grid;
+}
+.rozie-toaster--stacked[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c] {
+  transform:
+    translateY(calc(var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-offset, 8px)))
+    scale(calc(1 - var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-scale-step, 0.05)));
+  opacity: calc(1 - min(1, max(0, var(--rozie-toast-depth, 0) - 2)));
+}
+.rozie-toaster--stacked.rozie-toaster--bottom-left[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--stacked.rozie-toaster--bottom-right[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--stacked.rozie-toaster--bottom-center[data-rozie-s-12d4265c]:not([data-rozie-s-12d4265c]:hover):not([data-rozie-s-12d4265c]:focus-within) .rozie-toast[data-rozie-s-12d4265c] {
+  transform:
+    translateY(calc(var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-offset, 8px) * -1))
+    scale(calc(1 - var(--rozie-toast-depth, 0) * var(--rozie-toast-stack-scale-step, 0.05)));
+}
+.rozie-toast[data-rozie-s-12d4265c] {
+  display: flex;
+  align-items: center;
+  gap: var(--rozie-toast-content-gap, 0.75rem);
+  min-width: var(--rozie-toast-min-width, 16rem);
+  max-width: var(--rozie-toast-toast-max-width, 24rem);
+  padding: var(--rozie-toast-padding, 0.75rem 1rem);
+  color: var(--rozie-toast-color, #fff);
+  background: var(--rozie-toast-bg, #333);
+  border-radius: var(--rozie-toast-radius, 0.5rem);
+  box-shadow: var(--rozie-toast-shadow, 0 6px 20px rgba(0, 0, 0, 0.25));
+  /* Swipe: page scroll stays alive on touch along the axis the toast does
+     NOT move on. The transition here drives the spring-back (the active-drag
+     :style sets an inline \`transition: none\` to track the finger 1:1;
+     releasing it without a further gesture falls back to this transition). */
+  touch-action: pan-y;
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+.rozie-toaster--top-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  touch-action: pan-x;
+}
+.rozie-toast--success[data-rozie-s-12d4265c] { background: var(--rozie-toast-success-bg, #16a34a); }
+.rozie-toast--error[data-rozie-s-12d4265c] { background: var(--rozie-toast-error-bg, #dc2626); }
+.rozie-toast--warning[data-rozie-s-12d4265c] { background: var(--rozie-toast-warning-bg, #ca8a04); }
+.rozie-toast--info[data-rozie-s-12d4265c] { background: var(--rozie-toast-info-bg, var(--rozie-toast-bg, #333)); }
+from[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(-0.5rem); }
+to[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+from[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(0.5rem); }
+to[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(-0.5rem); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(0.5rem); }
+.rozie-toast[data-rozie-s-12d4265c] {
+  animation: rozie-toast-enter var(--rozie-toast-enter-duration, 200ms) ease-out;
+}
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-enter-from-bottom;
+}
+.rozie-toast--exiting[data-rozie-s-12d4265c] {
+  animation: rozie-toast-exit var(--rozie-toast-exit-duration, 200ms) ease-in forwards;
+}
+.rozie-toaster--bottom-left[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-right[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast--exiting[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-exit-to-bottom;
+}
+from[data-rozie-s-12d4265c] { opacity: 0; }
+to[data-rozie-s-12d4265c] { opacity: 1; }
+from[data-rozie-s-12d4265c] { opacity: 1; }
+to[data-rozie-s-12d4265c] { opacity: 0; }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateX(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateX(calc(var(--rozie-toast-swipe-exit, 1) * 100%)); }
+from[data-rozie-s-12d4265c] { opacity: 1; transform: translateY(0); }
+to[data-rozie-s-12d4265c] { opacity: 0; transform: translateY(calc(var(--rozie-toast-swipe-exit, 1) * 100%)); }
+.rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-swipe-exit-x;
+}
+.rozie-toaster--top-center[data-rozie-s-12d4265c] .rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c],
+.rozie-toaster--bottom-center[data-rozie-s-12d4265c] .rozie-toast--exiting.rozie-toast--swipe-exit[data-rozie-s-12d4265c] {
+  animation-name: rozie-toast-swipe-exit-y;
+}
+.rozie-toast-spinner[data-rozie-s-12d4265c] {
+  flex: 0 0 auto;
+  width: var(--rozie-toast-spinner-size, 1em);
+  height: var(--rozie-toast-spinner-size, 1em);
+  border: 2px solid color-mix(in srgb, var(--rozie-toast-spinner-color, currentColor) 25%, transparent);
+  border-top-color: var(--rozie-toast-spinner-color, currentColor);
+  border-radius: 50%;
+  animation: rozie-toast-spin 0.75s linear infinite;
+}
+to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
+.rozie-toast-message[data-rozie-s-12d4265c] {
+  flex: 1 1 auto;
+  font-size: var(--rozie-toast-font-size, 0.9rem);
+}
+.rozie-toast-close[data-rozie-s-12d4265c] {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rozie-toast-close-size, 1.25rem);
+  height: var(--rozie-toast-close-size, 1.25rem);
+  padding: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: inherit;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  opacity: var(--rozie-toast-close-opacity, 0.75);
+  cursor: pointer;
+}
+.rozie-toast-close[data-rozie-s-12d4265c]:hover {
+  opacity: 1;
+}`);
+function Toaster(_props) {
+	const [local, attrs] = splitProps(mergeProps({
+		position: "bottom-right",
+		duration: 4e3,
+		max: 0,
+		disablePauseOnHover: false,
+		ariaLabel: null,
+		disableSwipe: false,
+		stacked: false
+	}, _props), [
+		"position",
+		"duration",
+		"max",
+		"disablePauseOnHover",
+		"ariaLabel",
+		"disableSwipe",
+		"stacked",
+		"ref"
+	]);
+	onMount(() => {
+		local.ref?.({
+			show,
+			dismiss,
+			clear,
+			patch,
+			promise
+		});
+	});
+	const [toasts, setToasts] = createSignal([]);
+	const [seq, setSeq] = createSignal(0);
+	const [swipe, setSwipe] = createSignal(null);
+	const [swipeGesture, setSwipeGesture] = createSignal(null);
+	onCleanup(() => {
+		unmounted = true;
+		teardownTimers();
+	});
+	let timers = {};
+	let exitFailsafes = {};
+	let unmounted = false;
+	let seqLocal = 0;
+	let paused = false;
+	function startTimer(toast) {
+		if (!toast || !toast.duration || toast.duration <= 0) return;
+		if (typeof window === "undefined") return;
+		const existing = timers[toast.id];
+		if (existing && existing.handle != null) window.clearTimeout(existing.handle);
+		const remaining = toast.duration;
+		const handle = window.setTimeout(() => dismissBegin(toast.id, "timeout"), remaining);
+		timers[toast.id] = {
+			handle,
+			startedAt: Date.now(),
+			remaining
+		};
+	}
+	function clearTimer(id) {
+		const entry = timers[id];
+		if (entry && entry.handle != null && typeof window !== "undefined") window.clearTimeout(entry.handle);
+		delete timers[id];
+	}
+	function pauseTimers() {
+		paused = true;
+		if (typeof window === "undefined") return;
+		for (const id in timers) {
+			const entry = timers[id];
+			if (entry.handle == null) continue;
+			window.clearTimeout(entry.handle);
+			const elapsed = Date.now() - entry.startedAt;
+			const remaining = Math.max(0, entry.remaining - elapsed);
+			timers[id] = {
+				handle: null,
+				startedAt: entry.startedAt,
+				remaining
+			};
+		}
+	}
+	function resumeTimers() {
+		paused = false;
+		if (typeof window === "undefined") return;
+		for (const id in timers) {
+			const entry = timers[id];
+			if (entry.handle != null) continue;
+			if (entry.remaining == null || entry.remaining <= 0) {
+				dismissBegin(id, "timeout");
+				continue;
+			}
+			const remaining = entry.remaining;
+			const handle = window.setTimeout(() => dismissBegin(id, "timeout"), remaining);
+			timers[id] = {
+				handle,
+				startedAt: Date.now(),
+				remaining
+			};
+		}
+	}
+	function teardownTimers() {
+		if (typeof window !== "undefined") {
+			for (const id in timers) {
+				const entry = timers[id];
+				if (entry.handle != null) window.clearTimeout(entry.handle);
+			}
+			for (const id in exitFailsafes) if (exitFailsafes[id] != null) window.clearTimeout(exitFailsafes[id]);
+		}
+		timers = {};
+		exitFailsafes = {};
+	}
+	function show(input) {
+		const t = input || {};
+		let id;
+		if (t.id != null) id = String(t.id);
+		else {
+			const s = Math.max(seq(), seqLocal);
+			id = "t" + s;
+			seqLocal = s + 1;
+			setSeq(s + 1);
+		}
+		const toast = {
+			id,
+			message: t.message != null ? t.message : "",
+			type: t.type || "info",
+			duration: t.duration != null ? t.duration : local.duration
+		};
+		setToasts(toasts().concat([toast]).slice(local.max > 0 ? Math.max(0, toasts().length + 1 - local.max) : 0));
+		startTimer(toast);
+		return id;
+	}
+	const EXIT_FAILSAFE_MS = 350;
+	function removeToast(id) {
+		if (typeof window !== "undefined" && exitFailsafes[id] != null) window.clearTimeout(exitFailsafes[id]);
+		delete exitFailsafes[id];
+		setToasts(toasts().filter((t) => t.id !== id));
+	}
+	function dismissBegin(id, reason, extra) {
+		const entry = toasts().find((t) => t.id === id);
+		if (!entry || entry.exiting) return;
+		clearTimer(id);
+		_props.onDismissed?.({
+			toast: entry,
+			reason
+		});
+		setToasts(toasts().map((t) => t.id === id ? {
+			...t,
+			exiting: true,
+			...extra || {}
+		} : t));
+		if (typeof window === "undefined") removeToast(id);
+		else exitFailsafes[id] = window.setTimeout(() => removeToast(id), EXIT_FAILSAFE_MS);
+	}
+	function dismiss(id) {
+		dismissBegin(id, "api");
+	}
+	function clear() {
+		teardownTimers();
+		setToasts([]);
+	}
+	function patch(id, changes) {
+		const c = changes || {};
+		let existed = false;
+		const next = toasts().map((t) => {
+			if (t.id !== id) return t;
+			if (t.exiting) return t;
+			existed = true;
+			const merged = { ...t };
+			if (c.message !== void 0) merged.message = c.message;
+			if (c.type !== void 0) merged.type = c.type;
+			if (c.duration !== void 0) merged.duration = c.duration;
+			return merged;
+		});
+		if (!existed) return false;
+		setToasts(next);
+		if (c.duration !== void 0) {
+			clearTimer(id);
+			const patched = next.find((t) => t.id === id);
+			if (paused) {
+				if (patched && patched.duration > 0 && typeof window !== "undefined") timers[id] = {
+					handle: null,
+					startedAt: Date.now(),
+					remaining: patched.duration
+				};
+			} else startTimer(patched);
+		}
+		return true;
+	}
+	function settlePromise(id, type, messageOrFn, value) {
+		if (unmounted) return;
+		const entry = toasts().find((t) => t.id === id);
+		if (!entry || entry.exiting) return;
+		patch(id, {
+			type,
+			message: typeof messageOrFn === "function" ? messageOrFn(value) : messageOrFn,
+			duration: local.duration
+		});
+	}
+	function promise(p, opts) {
+		const o = opts || {};
+		const id = show({
+			type: "loading",
+			duration: 0,
+			message: o.loading
+		});
+		if (p && typeof p.then === "function") p.then((value) => settlePromise(id, "success", o.success, value)).catch((err) => settlePromise(id, "error", o.error, err));
+		return id;
+	}
+	function swipeAxisFor(position) {
+		return position === "top-center" || position === "bottom-center" ? "y" : "x";
+	}
+	function swipeSignFor(position) {
+		if (position === "top-right" || position === "bottom-right") return 1;
+		if (position === "top-left" || position === "bottom-left") return -1;
+		if (position === "bottom-center") return 1;
+		return -1;
+	}
+	function onToastPointerDown(t, event) {
+		if (local.disableSwipe) return;
+		if (event.button != null && event.button !== 0) return;
+		if (event.target && event.target.closest ? event.target.closest("button, a") : null) return;
+		const axis = swipeAxisFor(local.position);
+		const sign = swipeSignFor(local.position);
+		const el = event.currentTarget;
+		const size = axis === "x" ? el.offsetWidth : el.offsetHeight;
+		setSwipeGesture({
+			id: t.id,
+			axis,
+			sign,
+			size,
+			startX: event.clientX,
+			startY: event.clientY,
+			startTime: Date.now()
+		});
+		if (el && el.setPointerCapture) try {
+			el.setPointerCapture(event.pointerId);
+		} catch (e) {}
+	}
+	function onToastPointerMove(t, event) {
+		if (local.disableSwipe) return;
+		const gesture = swipeGesture();
+		if (!gesture || gesture.id !== t.id) return;
+		const raw = gesture.axis === "x" ? event.clientX - gesture.startX : event.clientY - gesture.startY;
+		const d = raw * gesture.sign > 0 ? raw : raw * .15;
+		setSwipe({
+			id: t.id,
+			d,
+			axis: gesture.axis,
+			sign: gesture.sign,
+			size: gesture.size
+		});
+	}
+	function onToastPointerUp(t, event) {
+		if (local.disableSwipe) return;
+		const gesture = swipeGesture();
+		setSwipeGesture(null);
+		const dragState = swipe();
+		setSwipe(null);
+		if (!gesture || gesture.id !== t.id || !dragState) return;
+		const elapsed = Math.max(1, Date.now() - gesture.startTime);
+		const magnitude = dragState.d * gesture.sign;
+		const velocity = magnitude / elapsed;
+		if (magnitude > 0 && (magnitude > gesture.size * .45 || velocity > .11)) dismissBegin(t.id, "swipe", { swipeExitSign: gesture.sign });
+	}
+	function onToastPointerCancel(t) {
+		if (local.disableSwipe) return;
+		if (swipeGesture() && swipeGesture().id === t.id) setSwipeGesture(null);
+		if (swipe() && swipe().id === t.id) setSwipe(null);
+	}
+	function depth(t) {
+		const idx = toasts().findIndex((x) => x.id === t.id);
+		return idx === -1 ? 0 : toasts().length - 1 - idx;
+	}
+	function toastStyle(t) {
+		const depthDecl = "--rozie-toast-depth: " + depth(t) + ";";
+		if (t.exiting) return t.swipeExitSign != null ? depthDecl + " --rozie-toast-swipe-exit: " + t.swipeExitSign + ";" : depthDecl;
+		const dragState = swipe();
+		if (!dragState || dragState.id !== t.id) return depthDecl;
+		const translate = dragState.axis === "x" ? "translateX(" + dragState.d + "px)" : "translateY(" + dragState.d + "px)";
+		const magnitude = dragState.d * dragState.sign;
+		const opacity = magnitude > 0 && dragState.size > 0 ? Math.max(.3, 1 - magnitude / dragState.size) : 1;
+		return depthDecl + " transform: " + translate + "; opacity: " + opacity + "; transition: none;";
+	}
+	function onMouseEnter() {
+		if (local.disablePauseOnHover) return;
+		pauseTimers();
+	}
+	function onMouseLeave() {
+		if (local.disablePauseOnHover) return;
+		resumeTimers();
+	}
+	function regionLabel() {
+		return local.ariaLabel != null ? local.ariaLabel : "Notifications";
+	}
+	function liveFor(type) {
+		return type === "error" || type === "warning" ? "assertive" : "polite";
+	}
+	return <>
+    <div role="region" aria-label={rozieAttr(regionLabel())} {...attrs} class={"rozie-toaster " + rozieClass("rozie-toaster--" + local.position + (local.stacked ? " rozie-toaster--stacked" : "")) + (attrs.class ? " " + attrs.class : "")} {...mergeListeners({
+		onMouseEnter: ($event) => {
+			onMouseEnter();
+		},
+		onMouseLeave: ($event) => {
+			onMouseLeave();
+		}
+	}, attrs)} data-rozie-s-12d4265c="">
+      
+      <Key each={toasts()} by={(t) => t.id}>{(t) => <div role="status" aria-live={rozieAttr(liveFor(t().type))} class={"rozie-toast " + rozieClass("rozie-toast--" + t().type + (t().exiting ? " rozie-toast--exiting" : "") + (t().swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))} style={parseInlineStyle(toastStyle(t()))} onAnimationEnd={($event) => {
+		t().exiting && removeToast(t().id);
+	}} onPointerDown={($event) => {
+		onToastPointerDown(t(), $event);
+	}} onPointerMove={($event) => {
+		onToastPointerMove(t(), $event);
+	}} onPointerUp={($event) => {
+		onToastPointerUp(t(), $event);
+	}} onPointerCancel={($event) => {
+		onToastPointerCancel(t());
+	}} data-rozie-s-12d4265c="">
+        {(_props.toastSlot ?? _props.slots?.["toast"])?.({
+		toast: t(),
+		dismiss
+	}) ?? <>{<Show when={t().type === "loading"}><span class={"rozie-toast-spinner"} aria-hidden="true" data-rozie-s-12d4265c="" /></Show>}<span class={"rozie-toast-message"} data-rozie-s-12d4265c="">{rozieDisplay(t().message)}</span><button type="button" aria-label="Dismiss" class={"rozie-toast-close"} onClick={($event) => {
+		dismissBegin(t().id, "close");
+	}} data-rozie-s-12d4265c="">×</button></>}
+      </div>}</Key>
+    </div>
+    </>;
+}
+//#endregion
+export { Toaster, Toaster as default };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@rozie-ui/toast-solid",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "description": "Idiomatic Solid headless, accessible toast / notification host (queue, auto-dismiss, hover-pause, positioning, imperative show/dismiss/clear handle) — one accessible Rozie source compiled to Solid.",
+  "keywords": [
+    "rozie",
+    "rozie-ui",
+    "toast",
+    "toaster",
+    "notification",
+    "snackbar",
+    "headless",
+    "accessibility",
+    "aria",
+    "component",
+    "solid"
+  ],
+  "author": "One Learning Community (https://github.com/One-Learning-Community)",
+  "homepage": "https://github.com/One-Learning-Community/rozie.js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/One-Learning-Community/rozie.js.git",
+    "directory": "packages/ui/toast/packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/One-Learning-Community/rozie.js/issues"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./source": "./src/Toaster.tsx",
+    "./themes/*": "./src/themes/*"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@solid-primitives/keyed": "^1.5.3",
+    "@rozie/runtime-solid": "0.2.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8"
+  },
+  "peerDependenciesMeta": {
+    "solid-js": {
+      "optional": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}