@jonmilner/ui 0.0.0-stage → 0.1.1

package/dist/brands/default.mjs

@@ -0,0 +1,74 @@
+import { lightDark as e } from "./brand.mjs";
+import { arial as t, courierNew as n, inter as r, jetBrainsMono as i } from "./metrics.mjs";
+//#region src/brands/default.ts
+var a = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t, `oklch(${n} ${r} ${e})`])), o = "oklch(1 0 0)", s = "oklch(0 0 0)", c = a(265, {
+	50: [.985, .002],
+	100: [.968, .004],
+	200: [.925, .006],
+	300: [.87, .008],
+	400: [.71, .012],
+	500: [.555, .014],
+	600: [.445, .014],
+	700: [.37, .013],
+	800: [.27, .01],
+	900: [.205, .008],
+	950: [.145, .006]
+}), l = a(258, {
+	50: [.97, .014],
+	100: [.932, .032],
+	200: [.882, .056],
+	300: [.809, .095],
+	400: [.707, .14],
+	500: [.623, .19],
+	600: [.546, .19],
+	700: [.488, .18],
+	800: [.424, .155],
+	900: [.379, .135],
+	950: [.282, .09]
+}), u = a(25, {
+	50: [.971, .013],
+	100: [.936, .032],
+	200: [.885, .06],
+	300: [.808, .105],
+	400: [.704, .17],
+	500: [.637, .2],
+	600: [.56, .2],
+	700: [.505, .19],
+	800: [.444, .16],
+	900: [.396, .13],
+	950: [.258, .085]
+}), d = {
+	metrics: r,
+	fallback: t,
+	generic: "sans-serif"
+}, f = {
+	metrics: i,
+	fallback: n,
+	generic: "monospace"
+}, p = {
+	name: "default",
+	color: {
+		bg: e(o, c[950]),
+		bgMuted: e(c[100], c[800]),
+		bgRaised: e(o, c[900]),
+		fg: e(c[950], c[50]),
+		fgMuted: e(c[600], c[400]),
+		border: e(c[200], c[800]),
+		borderStrong: e(c[500], c[500]),
+		accent: e(l[600], l[400]),
+		accentFg: e(o, c[950]),
+		danger: e(u[600], u[400]),
+		dangerFg: e(o, c[950]),
+		focus: e(l[600], l[400]),
+		shadow: e(c[950], s)
+	},
+	font: {
+		body: d,
+		heading: d,
+		display: d,
+		label: d,
+		mono: f
+	}
+};
+//#endregion
+export { p as defaultBrand };

package/dist/brands/font.d.mts

@@ -0,0 +1,17 @@
+//#region src/brands/font.d.ts
+export interface FontMetrics {
+  readonly familyName: string;
+  readonly fullName?: string;
+  readonly postscriptName?: string;
+  readonly capHeight: number;
+  readonly ascent: number;
+  readonly descent: number;
+  readonly lineGap: number;
+  readonly unitsPerEm: number;
+}
+export interface BrandFont {
+  readonly metrics: FontMetrics;
+  readonly fallback: FontMetrics;
+  readonly generic: "sans-serif" | "serif" | "monospace";
+}
+//#endregion

package/dist/brands/font.mjs

@@ -0,0 +1,35 @@
+//#region src/brands/font.ts
+var e = (e) => `"${e}"`, t = (e) => String(Number(e.toFixed(6))), n = (e) => `${t(e * 100)}%`, r = (e) => `${e.metrics.familyName} Fallback`, i = (t) => [
+	e(t.metrics.familyName),
+	e(r(t)),
+	t.generic
+].join(", ");
+function a({ capHeight: e, ascent: n, descent: r, unitsPerEm: i }) {
+	let a = (n - Math.abs(r)) / i / 2;
+	return {
+		cap: t(e / i - a),
+		baseline: t(a)
+	};
+}
+var o = 1.0001;
+function s({ metrics: t, fallback: r }) {
+	let i = t.capHeight / t.unitsPerEm / (r.capHeight / r.unitsPerEm), a = t.unitsPerEm * i, s = [r.fullName ?? r.familyName, r.postscriptName];
+	return {
+		src: [...new Set(s)].filter(Boolean).map((t) => `local(${e(t)})`).join(", "),
+		sizeAdjust: n(i),
+		ascentOverride: n(t.ascent / a * o),
+		descentOverride: n(Math.abs(t.descent) / a * o),
+		lineGapOverride: n(t.lineGap / a)
+	};
+}
+function c(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = r(n), i = s(n), a = t.get(e);
+		if (a && JSON.stringify(a) !== JSON.stringify(i)) throw Error(`"${e}" is declared with different metrics or fallbacks`);
+		t.set(e, i);
+	}
+	return t;
+}
+//#endregion
+export { s as fallbackFace, c as fallbackFaces, r as fallbackFamily, i as fontStack, a as fontTrim };

package/dist/brands/forced-colors.mjs

@@ -0,0 +1,18 @@
+//#region src/brands/forced-colors.ts
+var e = {
+	bg: "Canvas",
+	bgMuted: "Canvas",
+	bgRaised: "Canvas",
+	fg: "CanvasText",
+	fgMuted: "CanvasText",
+	border: "CanvasText",
+	borderStrong: "CanvasText",
+	accent: "LinkText",
+	accentFg: "Canvas",
+	danger: "CanvasText",
+	dangerFg: "Canvas",
+	focus: "Highlight",
+	shadow: "CanvasText"
+};
+//#endregion
+export { e as forcedColors };

package/dist/brands/index.d.mts

@@ -0,0 +1,8 @@
+import { Brand } from "./brand.mjs";
+import { defaultBrand } from "./default.mjs";
+//#region src/brands/index.d.ts
+export declare const presets: {
+  default: Brand;
+};
+//#endregion
+export { type Brand, defaultBrand };

package/dist/brands/index.mjs

@@ -0,0 +1,5 @@
+import { defaultBrand as e } from "./default.mjs";
+//#region src/brands/index.ts
+var t = { default: e };
+//#endregion
+export { e as defaultBrand, t as presets };

package/dist/brands/metrics.mjs

@@ -0,0 +1,40 @@
+//#region src/brands/metrics.ts
+var e = {
+	familyName: "Inter",
+	fullName: "Inter Regular",
+	postscriptName: "Inter-Regular",
+	capHeight: 1490,
+	ascent: 1984,
+	descent: -494,
+	lineGap: 0,
+	unitsPerEm: 2048
+}, t = {
+	familyName: "JetBrains Mono",
+	fullName: "JetBrains Mono Regular",
+	postscriptName: "JetBrainsMono-Regular",
+	capHeight: 730,
+	ascent: 1020,
+	descent: -300,
+	lineGap: 0,
+	unitsPerEm: 1e3
+}, n = {
+	familyName: "Arial",
+	fullName: "Arial",
+	postscriptName: "ArialMT",
+	capHeight: 1467,
+	ascent: 1854,
+	descent: -434,
+	lineGap: 67,
+	unitsPerEm: 2048
+}, r = {
+	familyName: "Courier New",
+	fullName: "Courier New",
+	postscriptName: "CourierNewPSMT",
+	capHeight: 1170,
+	ascent: 1705,
+	descent: -615,
+	lineGap: 0,
+	unitsPerEm: 2048
+};
+//#endregion
+export { n as arial, r as courierNew, e as inter, t as jetBrainsMono };

package/dist/contrast/color.d.mts

@@ -0,0 +1,3 @@
+//#region src/contrast/color.d.ts
+export type Mode = "light" | "dark";
+//#endregion

package/dist/contrast/color.mjs

@@ -0,0 +1,222 @@
+//#region src/contrast/color.ts
+var e = {
+	black: {
+		space: "srgb",
+		coords: [
+			0,
+			0,
+			0
+		],
+		alpha: 1
+	},
+	white: {
+		space: "srgb",
+		coords: [
+			1,
+			1,
+			1
+		],
+		alpha: 1
+	},
+	transparent: {
+		space: "srgb",
+		coords: [
+			0,
+			0,
+			0
+		],
+		alpha: 0
+	}
+};
+function t(e, t) {
+	let r = n(e.trim().toLowerCase(), t), [i, a, o] = y(r).map((e) => v(Math.min(1, Math.max(0, e))));
+	return {
+		r: i,
+		g: a,
+		b: o,
+		alpha: r.alpha
+	};
+}
+function n(t, s) {
+	if (t in e) return e[t];
+	if (t.startsWith("#")) return r(t);
+	let c = /^([a-z-]+)\((.*)\)$/s.exec(t);
+	if (!c) throw Error(`Unsupported color: ${t}`);
+	let [, l, u = ""] = c;
+	switch (l) {
+		case "light-dark": {
+			let [e, r] = h(u, ",", 2, t);
+			return n(s === "light" ? e : r, s);
+		}
+		case "color-mix": return o(u, s, t);
+		case "rgb":
+		case "rgba": return i(u, t);
+		case "oklab":
+		case "oklch": return a(l, u, t);
+		default: throw Error(`Unsupported color: ${t}`);
+	}
+}
+function r(e) {
+	let t = e.slice(1);
+	if (!/^([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(t)) throw Error(`Unsupported color: ${e}`);
+	let [n, r, i, a = 255] = (t.length <= 4 ? t.split("").map((e) => e + e) : t.match(/../g)).map((e) => Number.parseInt(e, 16));
+	return {
+		space: "srgb",
+		coords: [
+			n / 255,
+			r / 255,
+			i / 255
+		],
+		alpha: a / 255
+	};
+}
+function i(e, t) {
+	let [n, r] = e.includes(",") ? (([e, t, n, r]) => [[
+		e,
+		t,
+		n
+	], r])(h(e, ",", [3, 4], t)) : m(e, t), [i, a, o] = n.map((e) => Math.min(1, Math.max(0, u(e, 255, t) / 255)));
+	return {
+		space: "srgb",
+		coords: [
+			i,
+			a,
+			o
+		],
+		alpha: p(r, t)
+	};
+}
+function a(e, t, n) {
+	let [[r, i, a], o] = m(t, n), s = Math.min(1, Math.max(0, u(r, 1, n)));
+	return {
+		space: e,
+		coords: e === "oklab" ? [
+			s,
+			u(i, .4, n),
+			u(a, .4, n)
+		] : [
+			s,
+			Math.max(0, u(i, .4, n)),
+			f(a, n)
+		],
+		alpha: p(o, n)
+	};
+}
+function o(e, t, n) {
+	let [r = "", i, a] = h(e, ",", 3, n), o = /^in (srgb|srgb-linear|oklab|oklch)( shorter hue)?$/.exec(r.trim())?.[1];
+	if (!o) throw Error(`Unsupported color-mix() space: ${n}`);
+	let [l, u] = s(i, t, n), [d, f] = s(a, t, n), p = u ?? (f === void 0 ? 50 : 100 - f), m = f ?? 100 - p, _ = p + m;
+	if (_ <= 0 || [p, m].some((e) => e < 0 || e > 100)) throw Error(`Invalid color-mix() percentages: ${n}`);
+	let v = m / _, y = g(l, o), b = g(d, o);
+	o === "oklch" && c(y.coords, b.coords);
+	let x = y.alpha * (1 - v) + b.alpha * v;
+	return {
+		space: o,
+		coords: y.coords.map((e, t) => {
+			if (o === "oklch" && t === 2) return e * (1 - v) + b.coords[t] * v;
+			let n = e * y.alpha * (1 - v) + b.coords[t] * b.alpha * v;
+			return x === 0 ? 0 : n / x;
+		}),
+		alpha: x * Math.min(1, _ / 100)
+	};
+}
+function s(e, t, r) {
+	let i = h(e ?? "", " ", [1, 2], r), a = i.findIndex((e) => e.endsWith("%"));
+	if (i.length > 2 || i.length - (a === -1 ? 0 : 1) != 1) throw Error(`Invalid color-mix() argument: ${r}`);
+	return [n(i[+(a === 0)], t), a === -1 ? void 0 : u(i[a], 100, r)];
+}
+function c(e, t) {
+	let n = 1e-6;
+	e[1] < n && t[1] >= n && (e[2] = t[2]), t[1] < n && e[1] >= n && (t[2] = e[2]);
+	let r = t[2] - e[2];
+	r > 180 ? e[2] += 360 : r < -180 && (t[2] += 360);
+}
+var l = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?/;
+function u(e, t, n) {
+	let r = l.exec(e ?? ""), i = e?.slice(r?.[0].length ?? 0);
+	if (!r || i !== "" && i !== "%") throw Error(`Invalid channel in ${n}`);
+	let a = Number(r[0]);
+	return i === "%" ? a / 100 * t : a;
+}
+var d = {
+	"": 1,
+	deg: 1,
+	grad: .9,
+	rad: 180 / Math.PI,
+	turn: 360
+};
+function f(e, t) {
+	let n = l.exec(e ?? ""), r = e?.slice(n?.[0].length ?? 0) ?? "";
+	if (!n || !(r in d)) throw Error(`Invalid hue in ${t}`);
+	return (Number(n[0]) * d[r] % 360 + 360) % 360;
+}
+function p(e, t) {
+	return e === void 0 ? 1 : Math.min(1, Math.max(0, u(e, 1, t)));
+}
+function m(e, t) {
+	let [n = "", r] = h(e, "/", [1, 2], t);
+	return [h(n, " ", 3, t), r];
+}
+function h(e, t, n, r) {
+	let i = [], a = 0, o = "";
+	for (let n of e) {
+		n === "(" && a++, n === ")" && a--;
+		let e = t === " " ? /\s/.test(n) : n === t;
+		a === 0 && e ? (i.push(o), o = "") : o += n;
+	}
+	i.push(o);
+	let s = t === " " ? i.filter(Boolean) : i.map((e) => e.trim()), c = n === void 0 ? [] : [n].flat();
+	if (a !== 0 || c.length && !c.includes(s.length)) throw Error(`Invalid color: ${r}`);
+	return s;
+}
+function g(e, t) {
+	return e.space === t ? {
+		...e,
+		coords: [...e.coords]
+	} : {
+		space: t,
+		coords: b(y(e), t),
+		alpha: e.alpha
+	};
+}
+var _ = (e) => Math.abs(e) <= .04045 ? e / 12.92 : Math.sign(e) * ((Math.abs(e) + .055) / 1.055) ** 2.4, v = (e) => Math.abs(e) <= .0031308 ? e * 12.92 : Math.sign(e) * (1.055 * Math.abs(e) ** (1 / 2.4) - .055);
+function y({ space: e, coords: t }) {
+	if (e === "srgb-linear") return t;
+	if (e === "srgb") return t.map(_);
+	let [n, r, i] = e === "oklch" ? [
+		t[0],
+		t[1] * Math.cos(t[2] * Math.PI / 180),
+		t[1] * Math.sin(t[2] * Math.PI / 180)
+	] : t, a = (n + .3963377774 * r + .2158037573 * i) ** 3, o = (n - .1055613458 * r - .0638541728 * i) ** 3, s = (n - .0894841775 * r - 1.291485548 * i) ** 3;
+	return [
+		4.0767416621 * a - 3.3077115913 * o + .2309699292 * s,
+		-1.2684380046 * a + 2.6097574011 * o - .3413193965 * s,
+		-.0041960863 * a - .7034186147 * o + 1.707614701 * s
+	];
+}
+function b([e, t, n], r) {
+	if (r === "srgb-linear") return [
+		e,
+		t,
+		n
+	];
+	if (r === "srgb") return [
+		v(e),
+		v(t),
+		v(n)
+	];
+	let i = Math.cbrt(.4122214708 * e + .5363325363 * t + .0514459929 * n), a = Math.cbrt(.2119034982 * e + .6806995451 * t + .1073969566 * n), o = Math.cbrt(.0883024619 * e + .2817188376 * t + .6299787005 * n), s = [
+		.2104542553 * i + .793617785 * a - .0040720468 * o,
+		1.9779984951 * i - 2.428592205 * a + .4505937099 * o,
+		.0259040371 * i + .7827717662 * a - .808675766 * o
+	];
+	if (r === "oklab") return s;
+	let c = Math.atan2(s[2], s[1]) * 180 / Math.PI;
+	return [
+		s[0],
+		Math.hypot(s[1], s[2]),
+		(c + 360) % 360
+	];
+}
+//#endregion
+export { _ as decode, t as resolveColor };

package/dist/contrast/contrast.d.mts

@@ -0,0 +1,18 @@
+import { ColorRole } from "../tokens/roles.mjs";
+import { Brand } from "../brands/brand.mjs";
+import { Mode } from "./color.mjs";
+//#region src/contrast/contrast.d.ts
+export interface ContrastPair {
+  fg: ColorRole;
+  bg: ColorRole;
+  min: 4.5 | 3;
+}
+export interface ContrastFailure extends ContrastPair {
+  mode: Mode;
+  ratio: number;
+}
+export declare const contrastPairs: readonly ContrastPair[];
+export declare function contrastRatio(fg: string, bg: string, mode?: Mode): number;
+export declare function checkContrast(brand: Brand): ContrastFailure[];
+//#endregion
+export type { Mode };

package/dist/contrast/contrast.mjs

@@ -0,0 +1,52 @@
+import { decode as e, resolveColor as t } from "./color.mjs";
+//#region src/contrast/contrast.ts
+var n = [
+	"bg",
+	"bgMuted",
+	"bgRaised"
+], r = (e, t, n) => e.flatMap((e) => t.map((t) => ({
+	fg: e,
+	bg: t,
+	min: n
+}))), i = [
+	...r([
+		"fg",
+		"fgMuted",
+		"accent",
+		"danger"
+	], n, 4.5),
+	...r(["accentFg"], ["accent"], 4.5),
+	...r(["dangerFg"], ["danger"], 4.5),
+	...r(["borderStrong", "focus"], n, 3)
+], a = ["light", "dark"];
+function o({ r: t, g: n, b: r }) {
+	return .2126 * e(t) + .7152 * e(n) + .0722 * e(r);
+}
+function s(e, n, r = "light") {
+	return c(t(e, r), t(n, r), n);
+}
+function c(e, t, n) {
+	if (t.alpha < 1) throw Error(`Contrast background must be opaque: ${n}`);
+	let r = (t, n) => t * e.alpha + n * (1 - e.alpha), [i, a] = [o({
+		r: r(e.r, t.r),
+		g: r(e.g, t.g),
+		b: r(e.b, t.b),
+		alpha: 1
+	}), o(t)].toSorted((e, t) => t - e);
+	return (i + .05) / (a + .05);
+}
+function l(e) {
+	return a.flatMap((n) => {
+		let r = /* @__PURE__ */ new Map(), a = (i) => r.get(i) ?? r.set(i, t(e.color[i], n)).get(i);
+		return i.flatMap((t) => {
+			let r = c(a(t.fg), a(t.bg), e.color[t.bg]);
+			return r < t.min ? [{
+				...t,
+				mode: n,
+				ratio: r
+			}] : [];
+		});
+	});
+}
+//#endregion
+export { l as checkContrast, i as contrastPairs, s as contrastRatio };

package/dist/contrast/mixes.mjs

@@ -0,0 +1,33 @@
+import { fills as e } from "../styles/button-fills.mjs";
+import { contrastRatio as t } from "./contrast.mjs";
+import { highlightFill as n, highlightText as r } from "../styles/highlight.mjs";
+import { hoverFill as i } from "../styles/hover-tint.mjs";
+//#region src/contrast/mixes.ts
+var a = [{
+	name: "Menu highlight",
+	fill: n,
+	text: r,
+	min: 4.5
+}, ...Object.entries(e).map(([e, { backgroundColor: t, color: n }]) => ({
+	name: `${e} Button hover`,
+	fill: (e) => i(e.fg, e[t]),
+	text: [n],
+	min: 4.5
+}))];
+function o(e) {
+	return ["light", "dark"].flatMap((n) => a.flatMap(({ name: r, fill: i, text: a, min: o }) => {
+		let s = i(e.color);
+		return a.flatMap((i) => {
+			let a = t(e.color[i], s, n);
+			return a < o ? [{
+				fg: i,
+				mix: r,
+				min: o,
+				mode: n,
+				ratio: a
+			}] : [];
+		});
+	}));
+}
+//#endregion
+export { o as checkMixes, a as contrastMixes };

package/dist/docs/AlertDialog.md

@@ -0,0 +1,113 @@
+# AlertDialog
+
+## Purpose
+
+Asks the user to confirm a consequential action before it runs: delete a project, discard unsaved changes, sign out every device. Built on Base UI's AlertDialog, which owns the behavior: `role="alertdialog"`, focus moves into the dialog and stays there, the page behind is inert, Esc closes it, and a click outside does not. It wears Dialog's panel at the `sm` width with a title, a description, Cancel and one confirm button, and Cancel takes focus on open.
+
+## When to use
+
+- An action that destroys data or can't be undone, where a slip of the finger would cost the user.
+- An action with a consequence the user may not expect (signing out everywhere, leaving a shared space).
+
+## When not to use
+
+- A task with fields to fill or content to read: use `Dialog`.
+- An action the user can undo: run it and offer Undo as a `Toast` action; a confirm on every click teaches people to click through.
+- A status message or an error: use `Toast` or inline text; nothing needs confirming.
+
+## Rules
+
+- It is one component, not parts: `title`, `description`, `confirmLabel` and `onConfirm` are required; `cancelLabel` defaults to "Cancel". Its only child is `AlertDialog.Trigger`, the same part as `Dialog.Trigger`.
+- `title` is the question ("Delete project?"); `description` says what happens on confirm ("Its 12 invoices are deleted too. This can't be undone."). Both are announced when it opens.
+- `confirmLabel` names the action as a verb ("Delete", "Sign out"), never "OK" or "Yes", so the button reads on its own.
+- `tone="danger"` turns the confirm button `danger`, for an action that destroys or can't be undone. The default tone makes it `primary`.
+- `onConfirm` runs once on the confirm button, then the dialog closes; a second click while it fades out does nothing. If it throws, the dialog stays open; a returned promise is not awaited. For an action that can fail, control it with `open` and `onOpenChange` and report the failure where the action started.
+- Cancel comes first and takes focus, so Enter on open cancels. On a touch screen Base UI focuses the panel instead, so no button is pressed by accident.
+- Without `AlertDialog.Trigger`, control it with `open` and `onOpenChange`; it then portals to `<body>`, as Dialog does.
+- It is always modal and takes no `className`, `style` or style props: the panel is fixed so every confirm looks the same.
+- The module has no hooks and no `"use client"`, but `onConfirm` is a function, so the component that renders it is a client component.
+
+## Do
+
+```tsx
+<AlertDialog
+  title="Delete project?"
+  description="Its 12 invoices are deleted too. This can't be undone."
+  confirmLabel="Delete"
+  tone="danger"
+  onConfirm={deleteProject}
+>
+  <AlertDialog.Trigger variant="secondary">Delete project</AlertDialog.Trigger>
+</AlertDialog>
+```
+
+```tsx
+// Opened from a menu item: no trigger, so control it.
+const [open, setOpen] = useState(false);
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Sign out of every device?"
+  description="You stay signed in here."
+  confirmLabel="Sign out"
+  onConfirm={signOutEverywhere}
+/>;
+```
+
+## Don't
+
+```tsx
+// "OK" doesn't say what happens; name the action.
+<AlertDialog title="Are you sure?" description="…" confirmLabel="OK" onConfirm={remove} />
+```
+
+```tsx
+// A form in a confirm: use Dialog.
+<AlertDialog
+  title="Rename project"
+  description={<Field>…</Field>}
+  confirmLabel="Save"
+  onConfirm={save}
+/>
+```
+
+## Accessibility
+
+- The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="alertdialog"`, labelled by the title and described by the description.
+- Opening moves focus to Cancel; Tab and Shift+Tab cycle between the two buttons, and the page behind is inert. Esc or Cancel closes it, and focus returns to the trigger. A click outside does nothing.
+- The danger confirm button is told apart by its label as well as its color.
+- Under reduced motion the panel only fades.
+
+## Props
+
+Generated from the TypeScript types.
+
+### AlertDialog
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `cancelLabel` | `string` | no |  |
+| `children` | `ReactNode` | no |  |
+| `confirmLabel` | `string` | yes |  |
+| `defaultOpen` | `boolean` | no | Whether the dialog is initially open.  To render a controlled dialog, use the `open` prop instead. |
+| `description` | `string \| number \| bigint \| Iterable<ReactNode> \| Promise<AwaitedReactNode> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| ReactPortal` | yes |  |
+| `onConfirm` | `() => void` | yes |  |
+| `onOpenChange` | `((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)` | no | Event handler called when the alert dialog is opened or closed. |
+| `onOpenChangeComplete` | `((open: boolean) => void)` | no | Event handler called after any animations complete when the dialog is opened or closed. |
+| `open` | `boolean` | no | Whether the dialog is currently open. |
+| `title` | `string \| number \| bigint \| Iterable<ReactNode> \| Promise<AwaitedReactNode> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| ReactPortal` | yes |  |
+| `tone` | `"danger" \| "default"` | no |  |
+
+### AlertDialog.Trigger
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `handle` | `DialogHandle<unknown>` | no | A handle to associate the trigger with a dialog. Can be created with the Dialog.createHandle() method. |
+| `iconEnd` | `ComponentType` | no |  |
+| `iconStart` | `ComponentType` | no |  |
+| `id` | `string` | no | ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop). |
+| `payload` | `unknown` | no | A payload to pass to the dialog when it is opened. |
+| `size` | `"lg" \| "med" \| "sm"` | no |  |
+| `variant` | `"primary" \| "secondary"` | no |  |
+
+Also accepts the style props (see `manifest.json` `styleProps`).