@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/dialog-CpdINwbD.js

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

package/dist/dialog.js

@@ -1,2 +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-yT-x3B9s.js";
+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-CpdINwbD.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-mlzDmInL.js

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

package/dist/divider.js

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

package/dist/docs/calendar.json

@@ -114,7 +114,7 @@
           "part": "previous",
           "element": "button",
           "required": true,
-          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
+          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view, and it is named for that step. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
         },
         {
           "part": "next",