@parallelworks/ui 0.43.0 → 0.45.0

package/dist/components/ThemeEditor.js

@@ -0,0 +1,397 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
+import { Button } from "./Button.js";
+import { fieldBox } from "./fieldBox.js";
+import { Disclosure } from "./Disclosure.js";
+import { Switch } from "./Switch.js";
+import { Field } from "./Field.js";
+import { Textarea } from "./Input.js";
+import { Select } from "./Select.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { Slider } from "./Slider.js";
+import { parseColor, toHex } from "../theme/color.js";
+import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
+import { deriveTheme, generateTheme } from "../theme/derive.js";
+import { prefersWideGamut } from "../theme/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+//#region src/components/ThemeEditor.tsx
+/**
+* Edits a theme: a background, an accent and a contrast for light and for
+* dark, an optional sidebar of its own and a code style. Everything else is
+* generated, so any choice reads. It previews the result beside the controls,
+* copies the theme as JSON, imports one pasted back, and resets.
+*/
+function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPreferenceChange, defaultValue = DEFAULT_THEME, preview = true, className }) {
+	const { theme: t } = useStrings();
+	const [ownMode, setOwnMode] = useState(mode ?? "light");
+	const editing = mode ?? ownMode;
+	const setEditing = (next) => {
+		setOwnMode(next);
+		onModeChange?.(next);
+	};
+	const scheme = schemeFor(value, editing);
+	const seed = scheme.interface;
+	const update = (next) => onChange({
+		...value,
+		[editing]: next
+	});
+	const setSeed = (patch) => update({
+		...scheme,
+		interface: {
+			...seed,
+			...patch
+		}
+	});
+	const derived = useMemo(() => deriveTheme(scheme), [scheme]);
+	const { copy } = useCopy();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("grid gap-6", preview && "lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-5",
+			children: [
+				preference !== void 0 && onPreferenceChange && /* @__PURE__ */ jsx(Field, {
+					label: t.appearance,
+					group: true,
+					children: /* @__PURE__ */ jsx(SegmentedControl, {
+						options: [
+							"light",
+							"dark",
+							"system"
+						].map((p) => ({
+							value: p,
+							label: t[p]
+						})),
+						value: preference,
+						onValueChange: onPreferenceChange
+					})
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: t.presets,
+					group: true,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-2",
+						children: THEME_PRESETS.map((preset) => {
+							const native = preset.theme[editing] ? editing : preset.theme.light ? "light" : "dark";
+							const own = schemeFor(preset.theme, native).interface;
+							const current = serializeTheme(preset.theme) === serializeTheme(value);
+							return /* @__PURE__ */ jsxs(Button, {
+								size: "sm",
+								variant: current ? "primary" : "secondary",
+								"aria-pressed": current,
+								onClick: () => {
+									onChange(preset.theme);
+									if (native !== editing) setEditing(native);
+								},
+								children: [/* @__PURE__ */ jsx(Swatch, { colors: [own.base, own.accent] }), preset.label]
+							}, preset.name);
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: t.editing,
+					group: true,
+					children: /* @__PURE__ */ jsx(SegmentedControl, {
+						options: ["light", "dark"].map((m) => ({
+							value: m,
+							label: t[m]
+						})),
+						value: editing,
+						onValueChange: setEditing
+					})
+				}),
+				/* @__PURE__ */ jsx(ColorField, {
+					label: t.base,
+					value: seed.base,
+					onChange: (base) => setSeed({ base })
+				}),
+				/* @__PURE__ */ jsx(ColorField, {
+					label: t.accent,
+					value: seed.accent,
+					onChange: (accent) => setSeed({ accent })
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: t.contrast,
+					hint: /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums text-(--theme-muted-text-color)",
+						children: seed.contrast ?? 30
+					}),
+					description: t.contrastHelp,
+					children: /* @__PURE__ */ jsx(Slider, {
+						"aria-label": t.contrast,
+						value: seed.contrast ?? 30,
+						onValueChange: (contrast) => setSeed({ contrast }),
+						min: 0,
+						max: 100
+					})
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center justify-between gap-3 text-sm font-medium text-(--theme-app)",
+					children: [t.customSidebar, /* @__PURE__ */ jsx(Switch, {
+						checked: !!scheme.sidebar,
+						onCheckedChange: (on) => {
+							const { sidebar: _, ...rest } = scheme;
+							update(on ? {
+								...rest,
+								sidebar: { base: derived["--theme-sidebar-bg"] }
+							} : rest);
+						}
+					})]
+				}),
+				scheme.sidebar && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-5 border-l-2 border-(--theme-border) pl-4",
+					children: [/* @__PURE__ */ jsx(ColorField, {
+						label: t.sidebarBase,
+						value: scheme.sidebar.base ?? derived["--theme-sidebar-bg"],
+						onChange: (base) => update({
+							...scheme,
+							sidebar: {
+								...scheme.sidebar,
+								base
+							}
+						})
+					}), /* @__PURE__ */ jsx(ColorField, {
+						label: t.sidebarAccent,
+						value: scheme.sidebar.accent ?? seed.accent,
+						onChange: (accent) => update({
+							...scheme,
+							sidebar: {
+								...scheme.sidebar,
+								accent
+							}
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: t.code,
+					children: (control) => /* @__PURE__ */ jsx(Select, {
+						id: control.id,
+						"aria-label": t.code,
+						items: CODE_STYLES.map((style) => ({
+							value: style,
+							label: t.codeStyle(style)
+						})),
+						value: value.code ?? "balanced",
+						onValueChange: (code) => code && onChange({
+							...value,
+							code
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: () => copy(serializeTheme(value), { label: t.copied }),
+						children: t.copy
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => onChange(defaultValue),
+						children: t.reset
+					})]
+				}),
+				/* @__PURE__ */ jsx(ImportTheme, { onImport: onChange })
+			]
+		}), preview && /* @__PURE__ */ jsx(ThemePreview, {
+			theme: value,
+			mode: editing
+		})]
+	});
+}
+function Swatch({ colors }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "flex -space-x-1",
+		children: colors.map((c, i) => /* @__PURE__ */ jsx("span", {
+			className: "size-3 rounded-full border border-black/10",
+			style: { backgroundColor: toHex(parseColor(c) ?? {
+				l: 0,
+				c: 0,
+				h: 0
+			}) }
+		}, i))
+	});
+}
+/** A color as a picker beside a hex field. A half-typed hex stays in the field, marked, until it parses. */
+function ColorField({ label, value, onChange }) {
+	const { theme: t } = useStrings();
+	const [draft, setDraft] = useState(null);
+	const parsed = parseColor(value);
+	const hex = parsed ? toHex(parsed) : "#000000";
+	const invalid = draft !== null && parseColor(draft) === null;
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		error: invalid ? t.invalidColor : void 0,
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "color",
+				"aria-label": t.pick(label),
+				value: hex,
+				onChange: (e) => {
+					setDraft(null);
+					onChange(e.target.value);
+				},
+				className: "h-8 w-10 shrink-0 cursor-pointer rounded-md border border-(--theme-border) bg-transparent p-0.5"
+			}), /* @__PURE__ */ jsx("input", {
+				...control,
+				className: fieldBox({ size: "sm" }),
+				spellCheck: false,
+				value: draft ?? value,
+				onChange: (e) => {
+					const text = e.target.value;
+					if (parseColor(text)) {
+						setDraft(null);
+						onChange(text.trim().toLowerCase());
+					} else setDraft(text);
+				},
+				onBlur: () => setDraft(null)
+			})]
+		})
+	});
+}
+function ImportTheme({ onImport }) {
+	const { theme: t } = useStrings();
+	const [open, setOpen] = useState(false);
+	const [text, setText] = useState("");
+	const [error, setError] = useState(null);
+	const id = useId();
+	return /* @__PURE__ */ jsx(Disclosure, {
+		summary: t.import,
+		open,
+		onOpenChange: setOpen,
+		panelClassName: "pt-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				id,
+				label: t.importLabel,
+				placeholder: t.importPlaceholder,
+				rows: 4,
+				mono: true,
+				value: text,
+				error: error ?? void 0,
+				onChange: (e) => {
+					setText(e.target.value);
+					setError(null);
+				}
+			}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "primary",
+				disabled: !text.trim(),
+				onClick: () => {
+					const result = parseTheme(text);
+					if (!result.ok) {
+						setError(t.importError(result.error.code, result.error.path));
+						return;
+					}
+					onImport(result.theme);
+					setText("");
+					setOpen(false);
+				},
+				children: t.apply
+			}) })]
+		})
+	});
+}
+var CODE_SAMPLE = [
+	[["# Runs every night", "comment"]],
+	[
+		["name", "property"],
+		[": ", "text"],
+		["nightly-build", "string"]
+	],
+	[
+		["retries", "property"],
+		[": ", "text"],
+		["3", "number"]
+	],
+	[
+		["enabled", "property"],
+		[": ", "text"],
+		["true", "keyword"]
+	]
+];
+/** The theme on a small page: a sidebar, a panel of text, a control, statuses and code. */
+function ThemePreview({ theme, mode }) {
+	const { theme: t } = useStrings();
+	const scheme = schemeFor(theme, mode);
+	const style = useMemo(() => {
+		const generated = generateTheme(scheme, theme.code ? { code: theme.code } : {});
+		return {
+			...generated.srgb,
+			...prefersWideGamut() ? generated.p3 : {},
+			colorScheme: modeOf(scheme)
+		};
+	}, [scheme, theme.code]);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": t.preview,
+		"data-testid": "theme-preview",
+		style,
+		className: "flex min-h-80 overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow)",
+		children: [/* @__PURE__ */ jsx("nav", {
+			className: "flex w-32 shrink-0 flex-col gap-0.5 bg-(--theme-sidebar-bg) p-2",
+			children: t.previewNav.map((item, i) => /* @__PURE__ */ jsx("span", {
+				className: cx("rounded-md px-2 py-1.5", i === 1 ? "bg-(--theme-sidebar-active-bg) font-medium text-(--theme-sidebar-active-text)" : "text-(--theme-sidebar-text)"),
+				children: item
+			}, item))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-3 p-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-(--theme-shadow-sm)",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "font-semibold",
+							children: t.previewHeading
+						}),
+						/* @__PURE__ */ jsx("p", { children: t.previewBody }),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-xs text-(--theme-muted-text-color)",
+							children: t.previewMuted
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "rounded-full bg-(--theme-success-muted) px-2 py-0.5 text-xs text-(--theme-success)",
+									children: t.previewPassed
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "rounded-full bg-(--theme-error-muted) px-2 py-0.5 text-xs text-(--theme-error)",
+									children: t.previewFailed
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-(--theme-link) underline underline-offset-2",
+									children: t.previewLink
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx(fieldBox({ size: "sm" }), "flex-1 cursor-default text-(--theme-placeholder) border-(--theme-border-strong)"),
+						children: t.previewSearch
+					}), /* @__PURE__ */ jsx("span", {
+						className: "rounded-md bg-(--theme-accent) px-3 py-1.5 text-xs font-medium text-(--theme-accent-text)",
+						children: t.previewButton
+					})]
+				}),
+				/* @__PURE__ */ jsx("pre", {
+					className: "overflow-x-auto rounded-lg bg-(--theme-code-bg) p-3 font-mono text-xs leading-5 text-(--theme-code-text)",
+					children: CODE_SAMPLE.map((line) => /* @__PURE__ */ jsx("div", { children: line.map(([text, token]) => /* @__PURE__ */ jsx("span", {
+						style: { color: `var(--theme-code-${token})` },
+						className: token === "comment" ? "italic" : void 0,
+						children: text
+					}, `${token}-${text}`)) }, line.map(([text]) => text).join("")))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ThemeEditor, ThemePreview };

package/dist/components/Toast.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+export type ToastTone = 'info' | 'success' | 'warning' | 'error';
+export interface ToastAction {
+    label: ReactNode;
+    /** Runs, then the toast closes. */
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /** Shows the toast in place of an open one with this id, rather than stacking another. */
+    id?: string | undefined;
+    /** A bold first line, with the message under it. */
+    title?: ReactNode;
+    /** A button that acts on what the toast reports, such as Undo. */
+    action?: ToastAction | undefined;
+    /** Milliseconds it stays; false keeps it until it's dismissed or updated. It
+     *  pauses while the pointer or focus is on the toasts. */
+    timeout?: number | false | undefined;
+    /** False drops the close button, for a toast whose own content closes or settles it. */
+    dismissible?: boolean | undefined;
+    /** False drops the tone's icon, for content that draws its own. */
+    icon?: boolean | undefined;
+}
+export interface ToastUpdate extends Omit<ToastOptions, 'id'> {
+    message?: ReactNode;
+    /** Settles the toast into this tone, such as a loading toast into success. The
+     *  update then replaces the toast's options rather than adding to them, so it
+     *  takes that tone's timeout, close button and icon unless it names its own. */
+    tone?: ToastTone | undefined;
+}
+export interface Toaster {
+    info: (message: ReactNode, options?: ToastOptions) => string;
+    success: (message: ReactNode, options?: ToastOptions) => string;
+    warning: (message: ReactNode, options?: ToastOptions) => string;
+    /** Announced at once, where the others wait for a pause. */
+    error: (message: ReactNode, options?: ToastOptions) => string;
+    /** A spinner that stays until an update settles it into a tone, or it's dismissed. */
+    loading: (message: ReactNode, options?: ToastOptions) => string;
+    update: (id: string, update: ToastUpdate) => void;
+    /** Without an id, dismisses every toast. */
+    dismiss: (id?: string) => void;
+    /** A loading toast that settles into success or error with the promise, which it returns. */
+    promise: <T>(promise: Promise<T>, messages: {
+        loading: ReactNode;
+        success: ReactNode | ((value: T) => ReactNode);
+        error: ReactNode | ((error: unknown) => ReactNode);
+    }) => Promise<T>;
+}
+/** Shows toasts from anywhere, a component or not. They render in the
+ *  `UIProvider`'s viewport, over dialogs and popups, and stay usable while a
+ *  modal is open. */
+export declare const toast: Toaster;
+/** Whether a dialog's close request came from a press on a toast, which the
+ *  dialog ignores: a toast floats over it, so pressing one isn't leaving it. */
+export declare function pressedToast(event: Event | undefined): boolean;
+/** The viewport toasts render in, at the top of the window, where it clears a
+ *  modal's panel (which opens lower) and the controls along a dialog's foot. */
+export declare function Toaster(): import("react").JSX.Element | null;

package/dist/components/Toast.js

@@ -0,0 +1,203 @@
+import { cx } from "../cx.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { Loader } from "./Loader.js";
+import { toneText } from "./tone.js";
+import { useStrings } from "./Provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useSyncExternalStore } from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/Toast.tsx
+var manager = Toast.createToastManager();
+var TIMEOUT = {
+	info: 5e3,
+	success: 5e3,
+	warning: 8e3,
+	error: 8e3,
+	loading: 0
+};
+/** Everything a toast shows, from its kind's defaults and the options that override them. */
+function toastOptions(kind, message, options) {
+	const { action } = options;
+	return {
+		type: kind,
+		title: options.title,
+		description: message,
+		timeout: options.timeout === false ? 0 : options.timeout ?? TIMEOUT[kind],
+		priority: kind === "error" ? "high" : "low",
+		actionProps: action && {
+			children: action.label,
+			onClick: action.onClick
+		},
+		data: {
+			kind,
+			icon: options.icon ?? true,
+			dismissible: options.dismissible ?? kind !== "loading"
+		}
+	};
+}
+function show(kind) {
+	return (message, { id, ...options } = {}) => manager.add({
+		...id === void 0 ? {} : { id },
+		...toastOptions(kind, message, options)
+	});
+}
+/** Shows toasts from anywhere, a component or not. They render in the
+*  `UIProvider`'s viewport, over dialogs and popups, and stay usable while a
+*  modal is open. */
+var toast = {
+	info: show("info"),
+	success: show("success"),
+	warning: show("warning"),
+	error: show("error"),
+	loading: show("loading"),
+	update(id, { message, tone, ...options }) {
+		manager.update(id, (previous) => {
+			if (tone) return toastOptions(tone, message ?? previous.description, options);
+			const data = previous.data ?? {
+				kind: "info",
+				icon: true,
+				dismissible: true
+			};
+			return {
+				...message === void 0 ? {} : { description: message },
+				..."title" in options ? { title: options.title } : {},
+				...options.timeout === void 0 ? {} : { timeout: options.timeout === false ? 0 : options.timeout },
+				...options.action === void 0 ? {} : { actionProps: {
+					children: options.action.label,
+					onClick: options.action.onClick
+				} },
+				data: {
+					kind: data.kind,
+					icon: options.icon ?? data.icon,
+					dismissible: options.dismissible ?? data.dismissible
+				}
+			};
+		});
+	},
+	dismiss(id) {
+		manager.close(id);
+	},
+	async promise(promise, messages) {
+		const id = toast.loading(messages.loading);
+		try {
+			const value = await promise;
+			toast.update(id, {
+				tone: "success",
+				message: typeof messages.success === "function" ? messages.success(value) : messages.success
+			});
+			return value;
+		} catch (error) {
+			toast.update(id, {
+				tone: "error",
+				message: typeof messages.error === "function" ? messages.error(error) : messages.error
+			});
+			throw error;
+		}
+	}
+};
+/** Whether a dialog's close request came from a press on a toast, which the
+*  dialog ignores: a toast floats over it, so pressing one isn't leaving it. */
+function pressedToast(event) {
+	const target = event?.target;
+	return target instanceof Element && target.closest("[data-toast-viewport]") !== null;
+}
+var viewports = [];
+var listeners = /* @__PURE__ */ new Set();
+var changed = () => {
+	for (const listener of listeners) listener();
+};
+var subscribe = (listener) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+/** The viewport toasts render in, at the top of the window, where it clears a
+*  modal's panel (which opens lower) and the controls along a dialog's foot. */
+function Toaster() {
+	const id = useId();
+	useEffect(() => {
+		viewports.push(id);
+		changed();
+		return () => {
+			viewports.splice(viewports.indexOf(id), 1);
+			changed();
+		};
+	}, [id]);
+	if (!useSyncExternalStore(subscribe, () => viewports[0] === id, () => false)) return null;
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager: manager,
+		limit: 3,
+		children: /* @__PURE__ */ jsx(ToastViewport, {})
+	});
+}
+function ToastViewport() {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+		"data-toast-viewport": "",
+		"aria-label": common.notifications,
+		className: "fixed inset-x-0 top-3 z-(--layer-toast) mx-auto w-[calc(100vw-2rem)] outline-none sm:w-96",
+		children: /* @__PURE__ */ jsx(ToastList, {})
+	}) });
+}
+var ICONS = {
+	info: InfoIcon,
+	success: SuccessIcon,
+	warning: WarningIcon,
+	error: ErrorIcon
+};
+function ToneIcon({ tone }) {
+	const Icon = ICONS[tone];
+	return /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": "true",
+		className: cx("mt-0.5 size-4 shrink-0", toneText[tone])
+	});
+}
+function ToastList() {
+	const { toasts } = Toast.useToastManager();
+	const { common } = useStrings();
+	return toasts.map((item) => {
+		const { kind = "info", icon = true, dismissible = true } = item.data ?? {};
+		return /* @__PURE__ */ jsx(Toast.Root, {
+			toast: item,
+			swipeDirection: ["up", "right"],
+			className: cx("[--gap:0.5rem] [--peek:0.5rem] [--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--gap)+var(--toast-swipe-movement-y))]", "absolute inset-x-0 top-0 z-[calc(100-var(--toast-index))] h-(--height) origin-top select-none", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-index)*var(--peek)+(1-var(--scale))*var(--height)))_scale(var(--scale))]", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-starting-style:[transform:translateY(-150%)] data-ending-style:opacity-0 data-limited:opacity-0", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none focus-visible:outline-2 focus-visible:outline-(--theme-link)", "[transition:transform_0.4s_cubic-bezier(0.22,1,0.36,1),opacity_0.4s,height_0.15s] motion-reduce:transition-none", "after:absolute after:inset-x-0 after:top-full after:h-[calc(var(--gap)+1px)] after:content-['']"),
+			children: /* @__PURE__ */ jsxs(Toast.Content, {
+				className: "flex items-start gap-3 overflow-hidden p-3 transition-opacity duration-200 data-behind:opacity-0 data-expanded:opacity-100",
+				children: [
+					icon && (kind === "loading" ? /* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 text-(--theme-muted-text-color)",
+						children: /* @__PURE__ */ jsx(Loader, {
+							size: "1rem",
+							inline: true,
+							decorative: true
+						})
+					}) : /* @__PURE__ */ jsx(ToneIcon, { tone: kind })),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-0.5 text-sm",
+						children: [/* @__PURE__ */ jsx(Toast.Title, {
+							render: /* @__PURE__ */ jsx("div", {}),
+							className: "font-semibold"
+						}), /* @__PURE__ */ jsx(Toast.Description, {
+							render: /* @__PURE__ */ jsx("div", {}),
+							className: "break-words"
+						})]
+					}),
+					item.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+						onClick: () => manager.close(item.id),
+						className: buttonClasses({
+							variant: "outline",
+							size: "xs"
+						})
+					}),
+					dismissible && /* @__PURE__ */ jsx(Toast.Close, {
+						"aria-label": common.close,
+						className: "-m-1 shrink-0 cursor-pointer rounded-md p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+					})
+				]
+			})
+		}, item.id);
+	});
+}
+//#endregion
+export { Toaster, pressedToast, toast };