@kazee-ds/react 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { Button as Button$1, ButtonContext } from "react-aria-components/Button";
-import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ProgressBarContext } from "react-aria-components/ProgressBar";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton as ToggleButton$1 } from "react-aria-components/ToggleButton";
@@ -25,6 +25,7 @@ import { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tool
 import { Button as Button$4, ComboBox, Input as Input$3, Label as Label$6, ListBox as ListBox$2, ListBoxItem as ListBoxItem$2, Popover as Popover$3 } from "react-aria-components/ComboBox";
 import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
 import { GregorianCalendar, endOfMonth, getLocalTimeZone, parseDate, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import { Button as Button$5, I18nProvider as I18nProvider$1, Text as Text$3, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastList, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 //#region src/Button.tsx
 function PendingLabelAnchor() {
 	const context = useContext(ProgressBarContext);
@@ -2731,6 +2732,709 @@ function DateRangePicker(props) {
 	});
 }
 //#endregion
-export { Alert, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, Card, Chart, Checkbox, Combobox, DataTable, DateRangePicker, Dialog, DropdownMenu, Empty, Field, Form, Input, Label, Listbox, NumberField, Pagination, Popover, RadioGroup, Select, SelectGroup, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, createDateRangePresets, rangeText as formatDateRange };
+//#region src/toast-model.ts
+var EMPTY = Object.freeze([]);
+var messageOptions = (message) => typeof message === "string" ? { title: message } : message;
+var milliseconds = (value, fallback) => Number.isFinite(value) && value >= 0 ? value : fallback;
+/** Complete required notifications/cleanup before reporting user callback failures. */
+var complete = (operations) => {
+	const errors = [];
+	for (const operation of operations) try {
+		operation();
+	} catch (error) {
+		errors.push(error);
+	}
+	if (errors.length === 1) throw errors[0];
+	if (errors.length > 1) throw new AggregateError(errors, "Toast lifecycle callbacks failed.");
+};
+/** Create per application/provider; no browser globals or timers are used until attached. */
+function createToastManager(options = {}) {
+	const maxVisible = Math.max(1, Math.floor(options.maxVisible ?? 3));
+	const maxPending = Math.max(0, Math.floor(options.maxPending ?? 50));
+	const duration = milliseconds(options.duration ?? 5e3, 5e3);
+	const exitDuration = milliseconds(options.exitDuration ?? 200, 200);
+	const records = /* @__PURE__ */ new Map();
+	const visible = [];
+	const pending = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const pauses = /* @__PURE__ */ new Map();
+	let snapshot = EMPTY;
+	let attached = false;
+	let disposed = false;
+	let sequence = 0;
+	let generation = 0;
+	const paused = () => !attached || pauses.size > 0;
+	const freeze = (entry) => Object.freeze({
+		...entry,
+		action: entry.action ? Object.freeze({ ...entry.action }) : void 0,
+		cancel: entry.cancel ? Object.freeze({ ...entry.cancel }) : void 0
+	});
+	const publish = () => {
+		const next = visible.map((id) => records.get(id).entry);
+		if (next.length === snapshot.length && next.every((entry, index) => entry === snapshot[index])) return;
+		snapshot = Object.freeze(next);
+		complete([...listeners]);
+	};
+	const stop = (record) => {
+		if (record.timer !== void 0) clearTimeout(record.timer);
+		record.timer = void 0;
+		if (record.startedAt !== null) {
+			const elapsed = Math.max(0, Date.now() - record.startedAt);
+			if (record.entry.state === "closing") record.exitRemaining = Math.max(0, record.exitRemaining - elapsed);
+			else record.entry = freeze({
+				...record.entry,
+				remaining: Math.max(0, record.entry.remaining - elapsed)
+			});
+		}
+		record.startedAt = null;
+	};
+	const promote = () => {
+		while (visible.length < maxVisible && pending.length) {
+			const id = pending.shift();
+			const record = records.get(id);
+			visible.push(id);
+			record.entry = freeze({
+				...record.entry,
+				visibleAt: Date.now(),
+				paused: paused()
+			});
+			start(record);
+		}
+	};
+	const remove = (id) => {
+		const record = records.get(id);
+		if (!record) return;
+		stop(record);
+		records.delete(id);
+		const index = visible.indexOf(id);
+		if (index >= 0) visible.splice(index, 1);
+		const waiting = pending.indexOf(id);
+		if (waiting >= 0) pending.splice(waiting, 1);
+		promote();
+		publish();
+	};
+	const start = (record) => {
+		if (!attached || record.entry.visibleAt === null || record.timer !== void 0) return;
+		const closing = record.entry.state === "closing";
+		if (!closing && (paused() || record.entry.isLoading || record.entry.duration === 0)) return;
+		record.startedAt = Date.now();
+		record.timer = setTimeout(() => {
+			record.timer = void 0;
+			record.startedAt = null;
+			if (closing) remove(record.entry.id);
+			else manager.dismiss(record.entry.id, "timeout");
+		}, closing ? record.exitRemaining : record.entry.remaining);
+	};
+	const refreshPause = () => {
+		for (const id of visible) {
+			const record = records.get(id);
+			stop(record);
+			record.entry = freeze({
+				...record.entry,
+				paused: paused() || record.entry.state === "closing"
+			});
+			start(record);
+		}
+		publish();
+	};
+	const update = (id, changes, invalidate, onGeneration) => {
+		const record = records.get(id);
+		if (!record || record.entry.state === "closing" || disposed) return false;
+		stop(record);
+		const before = record.entry;
+		const settled = before.isLoading && changes.isLoading === false;
+		const nextDuration = changes.duration !== void 0 ? milliseconds(changes.duration, duration) : settled ? duration : before.duration;
+		record.entry = freeze({
+			...before,
+			...changes,
+			id,
+			tone: changes.tone ?? before.tone,
+			duration: nextDuration,
+			isLoading: changes.isLoading ?? before.isLoading,
+			remaining: changes.duration !== void 0 || settled ? nextDuration : before.remaining,
+			generation: invalidate ? ++generation : before.generation
+		});
+		onGeneration?.(record.entry.generation);
+		start(record);
+		publish();
+		return true;
+	};
+	const add = (value, onGeneration) => {
+		if (disposed) return null;
+		if (value.id !== void 0 && records.has(value.id)) return update(value.id, value, true, onGeneration) ? value.id : null;
+		if (visible.length >= maxVisible && pending.length >= maxPending) return null;
+		let id = value.id;
+		if (id === void 0) do
+			id = `toast-${++sequence}`;
+		while (records.has(id));
+		const entry = freeze({
+			...value,
+			id,
+			tone: value.tone ?? "neutral",
+			duration: milliseconds(value.duration ?? duration, duration),
+			isLoading: value.isLoading ?? false,
+			generation: ++generation,
+			state: "open",
+			createdAt: Date.now(),
+			visibleAt: visible.length < maxVisible ? Date.now() : null,
+			remaining: milliseconds(value.duration ?? duration, duration),
+			paused: paused()
+		});
+		const record = {
+			entry,
+			startedAt: null,
+			exitRemaining: exitDuration
+		};
+		records.set(id, record);
+		if (visible.length < maxVisible) {
+			visible.push(id);
+			start(record);
+		} else pending.push(id);
+		onGeneration?.(entry.generation);
+		publish();
+		return id;
+	};
+	const manager = {
+		add,
+		update: (id, changes) => update(id, changes, true),
+		dismiss(id, reason = "dismiss") {
+			const record = records.get(id);
+			if (!record || record.entry.state === "closing") return;
+			stop(record);
+			record.entry = freeze({
+				...record.entry,
+				state: "closing",
+				paused: true,
+				remaining: reason === "timeout" ? 0 : record.entry.remaining
+			});
+			complete([() => {
+				if (record.entry.visibleAt === null) remove(id);
+				else {
+					start(record);
+					publish();
+				}
+			}, () => record.entry.onClose?.(reason)]);
+		},
+		clear(reason = "clear") {
+			complete([...pending, ...visible].map((id) => () => manager.dismiss(id, reason)));
+		},
+		pause(reason) {
+			if (disposed) return;
+			pauses.set(reason, (pauses.get(reason) ?? 0) + 1);
+			if (pauses.size === 1 && pauses.get(reason) === 1) refreshPause();
+		},
+		resume(reason) {
+			const count = pauses.get(reason);
+			if (!count || disposed) return;
+			if (count === 1) pauses.delete(reason);
+			else pauses.set(reason, count - 1);
+			if (!pauses.size) refreshPause();
+		},
+		attach() {
+			if (disposed) throw new Error("Cannot attach a disposed ToastManager.");
+			if (attached) throw new Error("A ToastManager may attach to only one provider.");
+			attached = true;
+			try {
+				refreshPause();
+			} catch (error) {
+				attached = false;
+				complete([() => {
+					throw error;
+				}, refreshPause]);
+			}
+			let detached = false;
+			return () => {
+				if (detached || disposed) return;
+				detached = true;
+				attached = false;
+				refreshPause();
+			};
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			attached = false;
+			const closing = [...records.values()].filter((record) => record.entry.state === "open");
+			for (const record of records.values()) stop(record);
+			records.clear();
+			visible.length = 0;
+			pending.length = 0;
+			pauses.clear();
+			complete([
+				publish,
+				() => listeners.clear(),
+				...closing.map((record) => () => record.entry.onClose?.("unmount"))
+			]);
+		},
+		subscribe(listener) {
+			if (!disposed) listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot: () => snapshot,
+		getServerSnapshot: () => EMPTY,
+		promise(task, messages, promiseOptions = {}) {
+			let expected;
+			const id = add({
+				...promiseOptions,
+				...messageOptions(messages.loading),
+				isLoading: true
+			}, (value) => {
+				expected = value;
+			});
+			const settle = (message, tone) => {
+				if (id === null || records.get(id)?.entry.generation !== expected || records.get(id)?.entry.state !== "open") return;
+				const content = typeof message === "function" ? message() : message;
+				if (records.get(id)?.entry.generation !== expected || records.get(id)?.entry.state !== "open") return;
+				update(id, {
+					tone,
+					duration: promiseOptions.duration ?? duration,
+					...messageOptions(content),
+					isLoading: false
+				}, false);
+			};
+			return {
+				id,
+				promise: task.then((value) => {
+					const message = messages.success;
+					settle(typeof message === "function" ? () => message(value) : message, "success");
+					return value;
+				}, (error) => {
+					const message = messages.error;
+					settle(typeof message === "function" ? () => message(error) : message, "danger");
+					throw error;
+				})
+			};
+		}
+	};
+	return manager;
+}
+//#endregion
+//#region src/Toast.tsx
+/** Keeps upstream accessibility/focus behavior while Kazee owns every timer and queue decision. */
+var QueueAdapter = class extends UNSTABLE_ToastQueue {
+	manager;
+	regionPaused = false;
+	constructor(manager) {
+		super();
+		this.manager = manager;
+		this.refresh();
+	}
+	refresh() {
+		this.visibleToasts = this.manager.getSnapshot().map((content) => ({
+			key: content.id,
+			content
+		}));
+	}
+	subscribe(listener) {
+		return this.manager.subscribe(() => {
+			this.refresh();
+			listener();
+		});
+	}
+	add(content) {
+		return this.manager.add(content) ?? "";
+	}
+	close(key) {
+		this.manager.dismiss(key);
+	}
+	clear() {
+		this.manager.clear();
+	}
+	pauseAll() {
+		if (!this.regionPaused) {
+			this.regionPaused = true;
+			this.manager.pause("region");
+		}
+	}
+	resumeAll() {
+		if (this.regionPaused) {
+			this.regionPaused = false;
+			this.manager.resume("region");
+		}
+	}
+};
+var ToastContext = createContext(null);
+function ToastProvider({ children, manager: suppliedManager, placement = "bottom-end", label = "Notifikasi / Notifications", closeLabel = "Tutup notifikasi / Close notification", hotkey = ["Alt", "t"], dir = "ltr", showProgress = false, showCloseButton = false, swipeThreshold = 50, renderToast }) {
+	const [ownedManager] = useState(() => createToastManager());
+	const manager = suppliedManager ?? ownedManager;
+	const queue = useMemo(() => new QueueAdapter(manager), [manager]);
+	const region = useRef(null);
+	const entries = useSyncExternalStore(manager.subscribe, manager.getSnapshot, manager.getServerSnapshot);
+	const positions = useRef(/* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		const nodes = region.current?.querySelectorAll(".toast");
+		const previous = positions.current;
+		const next = /* @__PURE__ */ new Map();
+		const animations = [];
+		const regionTop = region.current?.getBoundingClientRect().top ?? 0;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		for (const node of nodes ?? []) {
+			const id = node.dataset.toastId;
+			if (!id) continue;
+			const top = node.offsetTop + regionTop;
+			next.set(id, top);
+			const before = previous.get(id);
+			if (before !== void 0 && before !== top && node.dataset.state === "open" && !reducedMotion && node.animate) {
+				const style = getComputedStyle(node);
+				const token = style.getPropertyValue("--ds-motion-duration-normal").trim();
+				const duration = token.endsWith("ms") ? parseFloat(token) : parseFloat(token) * 1e3;
+				animations.push(node.animate([{ translate: `0 ${before - top}px` }, { translate: "0 0" }], {
+					duration: Number.isFinite(duration) ? duration : 160,
+					easing: style.getPropertyValue("--ds-motion-ease-standard").trim() || "ease-out"
+				}));
+			}
+		}
+		positions.current = next;
+		return () => {
+			for (const animation of animations) animation.cancel();
+		};
+	}, [entries]);
+	const lastFocused = useRef(null);
+	const lifetime = useRef({ generation: 0 });
+	const hotkeySignature = hotkey.join("+");
+	useEffect(() => {
+		const keys = hotkeySignature ? hotkeySignature.split("+") : [];
+		const detach = manager.attach();
+		let documentPaused = false;
+		let windowPaused = false;
+		const visibility = () => {
+			if (document.hidden && !documentPaused) {
+				documentPaused = true;
+				manager.pause("document");
+			} else if (!document.hidden && documentPaused) {
+				documentPaused = false;
+				manager.resume("document");
+			}
+		};
+		const blur = () => {
+			if (!windowPaused) {
+				windowPaused = true;
+				manager.pause("window");
+			}
+		};
+		const focus = () => {
+			if (windowPaused) {
+				windowPaused = false;
+				manager.resume("window");
+			}
+		};
+		visibility();
+		const keydown = (event) => {
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape" && region.current?.contains(event.target)) {
+				const target = event.target;
+				if (target.closest("input,textarea,select,[contenteditable=\"true\"]")) return;
+				const focused = target.closest(".toast[data-state=\"open\"]");
+				const latest = [...manager.getSnapshot()].reverse().find((entry) => entry.state === "open");
+				const id = focused?.dataset.toastId ?? latest?.id;
+				if (id) {
+					event.preventDefault();
+					event.stopPropagation();
+					manager.dismiss(id);
+				}
+				return;
+			}
+			if (!keys.length) return;
+			const key = keys[keys.length - 1].toLowerCase();
+			const modifiers = keys.slice(0, -1).map((value) => value.toLowerCase());
+			if (event.key.toLowerCase() === key && event.altKey === modifiers.includes("alt") && event.ctrlKey === modifiers.includes("control") && event.metaKey === modifiers.includes("meta") && event.shiftKey === modifiers.includes("shift")) {
+				const target = region.current?.querySelector(".toast[data-state=\"open\"]");
+				if (target) {
+					event.preventDefault();
+					target.focus();
+				}
+			}
+		};
+		const focusIn = (event) => {
+			if (region.current?.contains(event.target) && !region.current.contains(event.relatedTarget)) lastFocused.current = event.relatedTarget;
+		};
+		document.addEventListener("focusin", focusIn);
+		document.addEventListener("visibilitychange", visibility);
+		document.addEventListener("keydown", keydown);
+		window.addEventListener("blur", blur);
+		window.addEventListener("focus", focus);
+		return () => {
+			document.removeEventListener("focusin", focusIn);
+			document.removeEventListener("visibilitychange", visibility);
+			document.removeEventListener("keydown", keydown);
+			window.removeEventListener("blur", blur);
+			window.removeEventListener("focus", focus);
+			detach();
+			if (documentPaused) manager.resume("document");
+			if (windowPaused) manager.resume("window");
+			queue.resumeAll();
+		};
+	}, [
+		manager,
+		hotkeySignature,
+		queue
+	]);
+	useEffect(() => {
+		const lifecycle = lifetime.current;
+		const token = ++lifecycle.generation;
+		return () => {
+			queueMicrotask(() => {
+				if (lifecycle.generation === token) ownedManager.dispose();
+			});
+		};
+	}, [ownedManager]);
+	const context = {
+		manager,
+		closeLabel,
+		placement,
+		dir,
+		showProgress,
+		showCloseButton,
+		swipeThreshold,
+		restoreFocus: () => {
+			const next = region.current?.querySelector(".toast[data-state=\"open\"]");
+			if (next) next.focus();
+			else if (lastFocused.current?.isConnected) lastFocused.current.focus();
+		}
+	};
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: context,
+		children: [children, /* @__PURE__ */ jsx(I18nProvider$1, {
+			locale: dir === "rtl" ? "ar" : "en",
+			children: /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
+				queue,
+				ref: region,
+				className: "toast-region",
+				"data-placement": placement,
+				"aria-label": label,
+				"aria-keyshortcuts": hotkey.length ? hotkey.join("+") : void 0,
+				children: /* @__PURE__ */ jsx(UNSTABLE_ToastList, {
+					className: "toast-list",
+					children: ({ toast }) => /* @__PURE__ */ jsx(Fragment$1, { children: renderToast ? renderToast(toast.content) : /* @__PURE__ */ jsx(Toast, { entry: toast.content }) })
+				})
+			})
+		})]
+	});
+}
+function useToast() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider.");
+	return context.manager;
+}
+function Indicator({ entry }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		"aria-hidden": "true",
+		children: entry.isLoading ? /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8",
+			strokeDasharray: "36 14"
+		}) : entry.tone === "success" ? /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) : entry.tone === "warning" || entry.tone === "danger" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "m12 3 10 18H2L12 3Z" }), /* @__PURE__ */ jsx("path", { d: "M12 9v5m0 3v1" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 10v7m0-11v1" })] })
+	});
+}
+function Toast({ entry, indicator, children, className, showCloseButton: closeOverride, showProgress: progressOverride }) {
+	const actionDescriptionId = useId();
+	const cancelDescriptionId = useId();
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("Toast must be used within a ToastProvider region.");
+	const { manager, closeLabel, placement, dir, swipeThreshold, restoreFocus } = context;
+	const showCloseButton = closeOverride ?? context.showCloseButton;
+	const showProgress = progressOverride ?? context.showProgress;
+	const ref = useRef(null);
+	const drag = useRef(null);
+	const [offset, setOffset] = useState(0);
+	const [swipe, setSwipe] = useState();
+	const closing = entry.state === "closing";
+	const direction = (placement.endsWith("start") ? -1 : 1) * (dir === "rtl" ? -1 : 1);
+	useEffect(() => {
+		if (closing && ref.current?.contains(document.activeElement)) restoreFocus?.();
+	}, [closing, restoreFocus]);
+	const action = (item, reason) => {
+		item.onAction();
+		if (item.dismiss !== false) manager.dismiss(entry.id, reason);
+	};
+	const finishSwipe = (commit) => {
+		const current = drag.current;
+		drag.current = null;
+		if (!current) return;
+		if (current && !current.cancelled) manager.resume("swipe");
+		if (commit && !current.cancelled && current.offset * direction >= swipeThreshold) {
+			setSwipe("end");
+			setOffset(current.offset);
+			manager.dismiss(entry.id, "swipe");
+		} else {
+			setSwipe("cancel");
+			setOffset(0);
+		}
+	};
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const handlers = {
+			pointerdown: (event) => {
+				if (closing || drag.current || event.button !== 0 || event.target.closest("button,a,input,textarea,select,[role=\"button\"],[contenteditable=\"true\"]")) return;
+				if (event.pointerType === "mouse") event.preventDefault();
+				drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					id: event.pointerId,
+					cancelled: false,
+					offset: 0
+				};
+				ref.current?.setPointerCapture?.(event.pointerId);
+				manager.pause("swipe");
+			},
+			selectstart: (event) => {
+				if (drag.current && !drag.current.cancelled) event.preventDefault();
+			},
+			dragstart: (event) => {
+				if (drag.current && !drag.current.cancelled) event.preventDefault();
+			},
+			pointermove: (event) => {
+				const current = drag.current;
+				if (!current || current.id !== event.pointerId || current.cancelled) return;
+				const x = event.clientX - current.x;
+				const y = event.clientY - current.y;
+				if (Math.abs(y) > Math.abs(x) && Math.abs(y) > 8) {
+					current.cancelled = true;
+					setOffset(0);
+					manager.resume("swipe");
+					return;
+				}
+				if (Math.abs(x) > 8) {
+					current.offset = Math.max(0, x * direction) * direction;
+					setSwipe("move");
+					setOffset(current.offset);
+				}
+			},
+			pointerup: () => finishSwipe(true),
+			pointercancel: () => finishSwipe(false),
+			lostpointercapture: () => {
+				if (drag.current) finishSwipe(false);
+			}
+		};
+		for (const [name, handler] of Object.entries(handlers)) node.addEventListener(name, handler);
+		return () => {
+			for (const [name, handler] of Object.entries(handlers)) node.removeEventListener(name, handler);
+		};
+	});
+	useEffect(() => () => {
+		if (drag.current) {
+			const active = !drag.current.cancelled;
+			drag.current = null;
+			if (active) manager.resume("swipe");
+		}
+	}, [manager]);
+	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
+		toast: {
+			key: entry.id,
+			content: entry
+		},
+		ref,
+		className: `toast${className ? ` ${className}` : ""}`,
+		"data-toast-id": entry.id,
+		"data-tone": entry.tone,
+		"data-has-close": showCloseButton || void 0,
+		"data-loading": entry.isLoading || void 0,
+		"data-state": entry.state,
+		"data-placement": placement,
+		"data-paused": entry.paused || void 0,
+		"data-swipe": swipe,
+		inert: closing || void 0,
+		"aria-hidden": closing || void 0,
+		style: {
+			"--toast-swipe-x": `${offset}px`,
+			touchAction: "pan-y"
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "toast__indicator",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsx(Indicator, { entry })
+			}),
+			/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+				className: "toast__body",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx(Text$3, {
+						slot: "title",
+						className: "toast__title",
+						children: entry.title
+					}),
+					entry.description && /* @__PURE__ */ jsx(Text$3, {
+						slot: "description",
+						className: "toast__description",
+						children: entry.description
+					}),
+					children,
+					(entry.action || entry.cancel) && /* @__PURE__ */ jsxs("div", {
+						className: "toast__actions",
+						children: [
+							entry.action && /* @__PURE__ */ jsx("span", {
+								id: actionDescriptionId,
+								hidden: true,
+								children: entry.action.altText
+							}),
+							entry.cancel && /* @__PURE__ */ jsx("span", {
+								id: cancelDescriptionId,
+								hidden: true,
+								children: entry.cancel.altText
+							}),
+							entry.action && /* @__PURE__ */ jsx(Button$5, {
+								className: "toast__action",
+								"aria-describedby": actionDescriptionId,
+								isDisabled: closing,
+								onPress: () => action(entry.action, "action"),
+								children: entry.action.label
+							}),
+							entry.cancel && /* @__PURE__ */ jsx(Button$5, {
+								className: "toast__action",
+								"data-cancel": true,
+								"aria-describedby": cancelDescriptionId,
+								isDisabled: closing,
+								onPress: () => action(entry.cancel, "cancel"),
+								children: entry.cancel.label
+							})
+						]
+					})
+				]
+			}),
+			showCloseButton && /* @__PURE__ */ jsx(Button$5, {
+				slot: "close",
+				className: "toast__close",
+				"aria-label": closeLabel,
+				isDisabled: closing,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					width: "16",
+					height: "16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
+				})
+			}),
+			showProgress && entry.duration > 0 && !entry.isLoading && /* @__PURE__ */ jsx("span", {
+				className: "toast__progress",
+				"aria-hidden": "true",
+				style: {
+					"--toast-progress": entry.remaining / entry.duration,
+					"--toast-remaining": `${entry.remaining}ms`
+				}
+			}, `${entry.generation}-${entry.remaining}-${entry.paused}`)
+		]
+	});
+}
+//#endregion
+export { Alert, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, Card, Chart, Checkbox, Combobox, DataTable, DateRangePicker, Dialog, DropdownMenu, Empty, Field, Form, Input, Label, Listbox, NumberField, Pagination, Popover, RadioGroup, Select, SelectGroup, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, Toast, ToastProvider, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
 
 //# sourceMappingURL=index.js.map