@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/dialog-Dmy-m_pe.js

@@ -0,0 +1,499 @@
+import { t as e } from "./react-dom-DzrKNxo6.js";
+import { n as t, t as n } from "./icon-T9Yt4tnm.js";
+import { r } from "./i18n-DpW8lqJ1.js";
+import { createFocusScope as i } from "@slotted/core/focus";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useLayoutEffect as f, useMemo as ee, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { createPresence as v } from "@slotted/core/presence";
+import { createPortalRoot as y } from "@slotted/core/portal";
+import { createDismissableLayer as b } from "@slotted/core/dismissable-layer";
+import { dialogMessages as te } from "@slotted/core/i18n";
+//#region src/dialog/dialog-defaults.tsx
+var x = o({
+	back: "close",
+	escape: "close",
+	fullScreen: "narrow",
+	modal: !0,
+	mount: "active",
+	outsidePress: "close",
+	placement: "center",
+	scroll: "content",
+	size: "md",
+	surface: "panel"
+});
+function S() {
+	return c(x);
+}
+function C({ children: e, ...t }) {
+	let n = S();
+	return /* @__PURE__ */ g(x.Provider, {
+		value: {
+			back: t.back ?? n.back,
+			escape: t.escape ?? n.escape,
+			fullScreen: t.fullScreen ?? n.fullScreen,
+			modal: t.modal ?? n.modal,
+			mount: t.mount ?? n.mount,
+			outsidePress: t.outsidePress ?? n.outsidePress,
+			placement: t.placement ?? n.placement,
+			scroll: t.scroll ?? n.scroll,
+			size: t.size ?? n.size,
+			surface: t.surface ?? n.surface
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/dialog/dialog.tsx
+var ne = o(void 0);
+function w() {
+	let e = c(ne);
+	if (e === void 0) throw Error("Every dialog part must be rendered inside Dialog or AlertDialog.");
+	return e;
+}
+function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOpen: o, escape: c, finalFocus: f, fullscreen: h, fullScreen: _, fullscreenToggle: y, initialFocus: b, loading: x, member: C, messages: w, modal: T, mount: re, onFullscreenChange: E, onOpenChange: D, open: O, outsidePress: ie, placement: ae, ref: k, scroll: A, size: j, surface: oe, tone: M }) {
+	let N = S(), P = r(te, w), F = u(), [I, L] = m(o ?? !1), R = O ?? I, z = C === "alertDialog", [B, V] = m(i ?? !1), H = !z && (h ?? B), U = !z && y === !0, W = z ? !0 : T ?? N.modal, G = z ? "none" : ie ?? N.outsidePress, K = re ?? N.mount, q = j ?? (z ? "sm" : N.size), J = _ ?? (z ? "never" : N.fullScreen), se = b ?? (z ? "cancel" : "first"), ce = c ?? N.escape, le = e ?? N.back, ue = ae ?? N.placement, de = A ?? N.scroll, fe = oe ?? N.surface, [Y, pe] = m(R ? "open" : "unmounted"), X = p(null);
+	X.current === null && (X.current = v({
+		present: R,
+		onStatusChange: pe
+	})), l(() => {
+		X.current?.sync(R);
+	}, [R]), l(() => {
+		let e = X.current;
+		return () => e?.destroy();
+	}, []);
+	let me = p(R);
+	R && (me.current = !0);
+	let he = K === "eager" ? !0 : K === "lazy" ? me.current : Y !== "unmounted", Z = p({
+		cancel: null,
+		content: null,
+		trigger: null
+	}), [ge, Q] = m(!1), [_e, ve] = m(!1), ye = s((e, t) => (e === "cancel" && (Z.current.cancel = t), e === "title" && Q(!0), e === "description" && ve(!0), () => {
+		e === "cancel" && (Z.current.cancel = null), e === "title" && Q(!1), e === "description" && ve(!1);
+	}), []), $ = s((e, t, n, r) => {
+		if (e === R) return;
+		let i = !1, o = a({
+			controlled: O,
+			initial: R,
+			onRequest: (e) => {
+				i = e.cancelled, D?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					result: n,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, r);
+		i || o && L(e);
+	}, [
+		R,
+		D,
+		O
+	]), be = s((e, t, n) => {
+		e !== H && a({
+			controlled: h,
+			initial: H,
+			onRequest: (e) => {
+				E?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, n) && V(e);
+	}, [
+		H,
+		h,
+		E
+	]);
+	d(k, () => ({
+		open: () => $(!0, "programmatic", void 0, void 0),
+		close: (e) => $(!1, "programmatic", e, void 0),
+		focus: () => Z.current.content?.focus(),
+		get content() {
+			return Z.current.content;
+		}
+	}), [$]);
+	let xe = ee(() => ({
+		announce: ye,
+		close: (e, t, n) => $(!1, e, t, n),
+		container: n,
+		descriptionId: _e ? `${F}description` : "",
+		back: le,
+		escape: ce,
+		finalFocus: f,
+		fullScreen: J,
+		fullscreen: H,
+		fullscreenToggle: U,
+		initialFocus: se,
+		setFullscreen: be,
+		loading: x === !0,
+		member: C,
+		modal: W,
+		mount: K,
+		mounted: he,
+		nodes: Z.current,
+		open: R,
+		openWith: (e, t) => $(!0, e, void 0, t),
+		outsidePress: G,
+		placement: ue,
+		registerContent: (e) => {
+			Z.current.content = e;
+		},
+		registerLayer: (e) => X.current?.setNode(e),
+		registerTrigger: (e) => {
+			Z.current.trigger = e;
+		},
+		scroll: de,
+		size: q,
+		surface: fe,
+		t: P,
+		titleId: ge ? `${F}title` : "",
+		tone: z ? M ?? "danger" : void 0,
+		triggerId: `${F}trigger`,
+		visible: Y === "open",
+		interactive: Y === "entering" || Y === "open"
+	}), [
+		ye,
+		F,
+		n,
+		R,
+		H,
+		_e,
+		f,
+		z,
+		x,
+		C,
+		he,
+		$,
+		le,
+		ce,
+		J,
+		U,
+		se,
+		W,
+		K,
+		G,
+		ue,
+		de,
+		q,
+		be,
+		fe,
+		Y,
+		P,
+		ge,
+		M
+	]);
+	return /* @__PURE__ */ g(ne.Provider, {
+		value: xe,
+		children: t
+	});
+}
+function re(e) {
+	return /* @__PURE__ */ g(T, {
+		...e,
+		member: "dialog"
+	});
+}
+function E(e) {
+	return /* @__PURE__ */ g(T, {
+		...e,
+		member: "alertDialog"
+	});
+}
+//#endregion
+//#region src/dialog/dialog-parts.tsx
+var D = e();
+function O(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var ie = typeof document > "u" ? l : f;
+function ae({ children: e, className: t, onClick: n, ref: r, render: i, style: a, ...o }) {
+	let s = w(), c = {
+		...o,
+		"aria-controls": s.mounted ? `${s.triggerId}-content` : void 0,
+		"aria-expanded": s.open,
+		"aria-haspopup": "dialog",
+		children: e,
+		className: t,
+		"data-part": "trigger",
+		...s.open ? { "data-open": "" } : {},
+		id: s.triggerId,
+		onClick: (e) => {
+			n?.(e), !e.defaultPrevented && s.openWith(O(e), e);
+		},
+		ref: (e) => {
+			s.registerTrigger(e), typeof r == "function" ? r(e) : r && (r.current = e);
+		},
+		style: a,
+		type: "button"
+	};
+	return i === void 0 ? /* @__PURE__ */ g("button", { ...c }) : i(c);
+}
+function k(e) {
+	let [t, n] = m(null);
+	return ie(() => {
+		if (!e.mounted) return;
+		let t = y({
+			origin: e.nodes.trigger,
+			...e.container === void 0 ? {} : { container: e.container }
+		});
+		return n(t.container), () => {
+			n(null), t.release();
+		};
+	}, [
+		e.container,
+		e.mounted,
+		e.nodes
+	]), t;
+}
+function A({ children: e, className: t, ref: n, render: r, style: a, ...o }) {
+	let s = w(), c = k(s), [u, d] = m(null), f = `${s.triggerId}-content`, ee = s.titleId !== "" && o["aria-label"] === void 0, p = s.descriptionId !== "";
+	if (l(() => {
+		if (s.member === "alertDialog" && u !== null && u.querySelector("[data-part=\"description\"]") === null) throw Error("AlertDialog requires a DialogDescription: the alertdialog pattern makes aria-describedby mandatory.");
+	}, [u, s.member]), l(() => {
+		if (u === null || !s.open) return;
+		let e = u.closest("[data-ui=\"dialog\"]");
+		if (e === null) return;
+		let t = s.nodes.trigger === null ? [] : [s.nodes.trigger], n = b(e, {
+			back: s.modal && s.back === "close",
+			branches: t,
+			content: u,
+			escape: s.escape === "close",
+			modal: s.modal,
+			onDismiss: (e) => {
+				if (e.reason === "outsidePress" && s.outsidePress === "none") return e.cancel();
+				s.close(e.reason, void 0, e.source);
+			},
+			outsidePress: s.outsidePress === "close",
+			outsidePressEvent: "click"
+		}), r = s.initialFocus, a = s.finalFocus, o = i(u, {
+			contain: s.modal,
+			initial: r === "cancel" ? () => s.nodes.cancel : typeof r == "object" && r ? () => r.current : r,
+			...a === void 0 ? {} : { restore: a === !1 ? !1 : () => a.current }
+		});
+		return o.enter(), () => {
+			n.destroy(), o.destroy();
+		};
+	}, [u, s]), !s.mounted || c === null) return null;
+	let h = {
+		"data-full-screen": s.fullScreen,
+		...s.fullscreen ? { "data-fullscreen": "" } : {},
+		...s.loading ? { "data-loading": "" } : {},
+		...s.modal ? { "data-modal": "" } : {},
+		"data-mount": s.mount,
+		...s.visible ? { "data-open": "" } : {},
+		"data-outside-press": s.outsidePress,
+		"data-part": "root",
+		"data-placement": s.placement,
+		"data-scroll": s.scroll,
+		"data-size": s.size,
+		"data-surface": s.surface,
+		...s.tone === void 0 ? {} : { "data-tone": s.tone },
+		"data-ui": "dialog"
+	}, v = {
+		...o,
+		...p ? { "aria-describedby": s.descriptionId } : {},
+		...ee ? { "aria-labelledby": s.titleId } : {},
+		...s.modal ? { "aria-modal": !0 } : {},
+		children: e,
+		className: t,
+		"data-part": "content",
+		id: f,
+		ref: (e) => {
+			d(e), s.registerContent(e), typeof n == "function" ? n(e) : n && (n.current = e);
+		},
+		role: s.member === "alertDialog" ? "alertdialog" : "dialog",
+		style: a
+	}, y = r === void 0 ? /* @__PURE__ */ g("div", { ...v }) : r(v);
+	return (0, D.createPortal)(/* @__PURE__ */ _("div", {
+		...h,
+		...s.interactive ? {} : { inert: !0 },
+		ref: s.registerLayer,
+		children: [/* @__PURE__ */ g("div", { "data-part": "backdrop" }), /* @__PURE__ */ g("div", {
+			"data-part": "viewport",
+			children: y
+		})]
+	}), c);
+}
+function j({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = w(), s = {
+		...a,
+		children: /* @__PURE__ */ _(h, { children: [e, o.fullscreenToggle ? /* @__PURE__ */ g(oe, {}) : null] }),
+		className: t,
+		"data-part": "header",
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ g("header", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function oe() {
+	let e = w();
+	return /* @__PURE__ */ g("button", {
+		"aria-label": e.t("fullScreen"),
+		"aria-pressed": e.fullscreen,
+		"data-part": "fullscreen",
+		onClick: (t) => {
+			t.defaultPrevented || e.setFullscreen(!e.fullscreen, t.detail === 0 ? "keyboard" : "pointer", t);
+		},
+		type: "button",
+		children: /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: e.fullscreen ? "minimize" : "maximize" }) })
+	});
+}
+function M({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = w();
+	l(() => o.announce("title", null), [o]);
+	let s = {
+		...a,
+		children: e,
+		className: t,
+		"data-part": "title",
+		id: o.titleId === "" ? void 0 : o.titleId,
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ g("h2", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function N({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = w();
+	l(() => o.announce("description", null), [o]);
+	let s = {
+		...a,
+		children: e,
+		className: t,
+		"data-part": "description",
+		id: o.descriptionId === "" ? void 0 : o.descriptionId,
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ g("p", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = w(), s = {
+		...a,
+		...o.loading ? { "aria-busy": !0 } : {},
+		children: e,
+		className: t,
+		"data-part": "body",
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ g("div", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function F({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = {
+		...a,
+		children: e,
+		className: t,
+		"data-part": "footer",
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ g("footer", {
+		...o,
+		ref: n
+	}) : r(o);
+}
+function I(e, t, n, r) {
+	let i = w();
+	return {
+		dialog: i,
+		handleClick: (e) => {
+			n?.(e), !e.defaultPrevented && i.close(t, r, e);
+		},
+		part: e
+	};
+}
+function L({ children: e, className: r, onClick: i, ref: a, render: o, style: s, value: c, ...l }) {
+	let { dialog: u, handleClick: d } = I("close", "dismiss", i, c);
+	if (u.member === "alertDialog") throw Error("AlertDialog has no close part: a confirmation is answered with AlertDialogCancel or AlertDialogAction, not dismissed by an ✕.");
+	let f = {
+		"aria-label": u.t("close"),
+		...l,
+		children: e ?? /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: "x" }) }),
+		className: r,
+		"data-part": "close",
+		onClick: d,
+		style: s,
+		type: "button"
+	};
+	return o === void 0 ? /* @__PURE__ */ g("button", {
+		...f,
+		ref: a
+	}) : o(f);
+}
+var R = {
+	accent: "circle-info",
+	secondary: "circle-info",
+	success: "circle-check",
+	warning: "triangle-alert",
+	danger: "circle-alert"
+};
+function z({ children: e, className: r, ref: i, render: a, style: o, ...s }) {
+	let c = w(), l = {
+		"aria-hidden": !0,
+		...s,
+		children: e ?? /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: c.tone === void 0 ? "triangle-alert" : R[c.tone] }) }),
+		className: r,
+		"data-part": "icon",
+		style: o
+	};
+	return a === void 0 ? /* @__PURE__ */ g("span", {
+		...l,
+		ref: i
+	}) : a(l);
+}
+function B({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
+	let { dialog: c, handleClick: l } = I("cancel", "dismiss", n, o ?? "cancel"), u = {
+		...s,
+		children: e,
+		className: t,
+		"data-part": "cancel",
+		onClick: l,
+		style: a,
+		type: "button"
+	}, d = (e) => {
+		c.announce("cancel", e), typeof r == "function" ? r(e) : r && (r.current = e);
+	};
+	return i === void 0 ? /* @__PURE__ */ g("button", {
+		...u,
+		ref: d
+	}) : i({
+		...u,
+		ref: d
+	});
+}
+function V({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
+	let { handleClick: c } = I("action", "submit", n, o ?? "confirm"), l = {
+		...s,
+		children: e,
+		className: t,
+		"data-part": "action",
+		onClick: c,
+		style: a,
+		type: "button"
+	};
+	return i === void 0 ? /* @__PURE__ */ g("button", {
+		...l,
+		ref: r
+	}) : i(l);
+}
+//#endregion
+export { L as a, F as c, ae as d, E as f, S as g, C as h, P as i, j as l, w as m, B as n, A as o, re as p, z as r, N as s, V as t, M as u };

package/dist/dialog.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-Dmy-m_pe.js";
+export { r as AlertDialog, m as AlertDialogAction, l as AlertDialogCancel, f as AlertDialogIcon, d as Dialog, o as DialogBody, e as DialogClose, u as DialogContent, a as DialogDefaultsProvider, p as DialogDescription, t as DialogFooter, s as DialogHeader, h as DialogTitle, n as DialogTrigger, c as useDialog, i as useDialogDefaults };

package/dist/divider-D36Jqo0J.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/divider/divider.tsx
+function t({ align: t = "center", decorative: r = !1, inset: i = !1, label: a, orientation: o = "horizontal", render: s, role: c, ...l }) {
+	let u = a !== void 0, d = s === void 0 && !u, f = {
+		...l,
+		...u && !r ? { "aria-label": a } : {},
+		...o === "vertical" && !r ? { "aria-orientation": "vertical" } : {},
+		...u ? {
+			"data-align": t,
+			"data-labelled": ""
+		} : {},
+		...i ? { "data-inset": "" } : {},
+		"data-orientation": o,
+		"data-part": "root",
+		"data-ui": "divider",
+		role: c ?? (r ? "none" : d ? void 0 : "separator")
+	};
+	return s === void 0 ? u ? /* @__PURE__ */ e("div", {
+		...f,
+		children: n(a)
+	}) : /* @__PURE__ */ e("hr", { ...f }) : s(u ? {
+		...f,
+		children: n(a)
+	} : f);
+}
+function n(t) {
+	return /* @__PURE__ */ e("span", {
+		"data-part": "label",
+		children: t
+	});
+}
+//#endregion
+export { t };

package/dist/divider.js

@@ -0,0 +1,2 @@
+import { t as e } from "./divider-D36Jqo0J.js";
+export { e as Divider };

package/dist/docs/AGENTS.snippet.md

@@ -0,0 +1,11 @@
+## Slotted UI (@slotted/react)
+
+Before writing or changing UI, read `node_modules/@slotted/react/dist/docs/index.md`, then the file of each family you use. These files match the installed version: prefer them over prior knowledge of the library.
+
+- Import components from `@slotted/react` or the family subpath that each file's Import section shows.
+- Load `@slotted/react/styles.css` and `@slotted/themes/default.css` once, at the application entry.
+- Set `data-slotted-theme="default"` on `<html>`. `data-slotted-scheme` (`light`, `dark`, `high-contrast`) and `data-slotted-density` (`comfortable`, `compact`, `dense`) apply to any element and its descendants.
+- Change a family's appearance through its props (`size`, `variant`, `tone` where it has them), not with CSS that targets its parts.
+- Application CSS uses `var(--slotted-*)` tokens for color, spacing and radius, inside a layer declared after the library's: `@layer slotted, app;`.
+- To render a family as another element, such as a router link or a trigger, pass `render`.
+- In CSS and tests, select a family by `[data-ui="<family>"]` and its parts by `[data-part="<part>"]`.