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

package/dist/page-DhWDOrba.js

@@ -0,0 +1,179 @@
+import { r as e } from "./i18n-DpW8lqJ1.js";
+import { n as t } from "./container-D055iqqL.js";
+import { r as n } from "./typography-DLiIuMKf.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createContext as i, useContext as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createPresence as p } from "@slotted/core/presence";
+import { pageMessages as m } from "@slotted/core/i18n";
+//#region src/page/page-defaults.tsx
+var h = i({
+	ground: "sunken",
+	inset: 6,
+	landmark: "main",
+	scroll: "ancestor",
+	width: "wide"
+});
+function g() {
+	return a(h);
+}
+function _({ children: e, ...t }) {
+	let n = g();
+	return /* @__PURE__ */ d(h.Provider, {
+		value: {
+			ground: t.ground ?? n.ground,
+			inset: t.inset ?? n.inset,
+			landmark: t.landmark ?? n.landmark,
+			scroll: t.scroll ?? n.scroll,
+			width: t.width ?? n.width
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/page/page.tsx
+var v = "--slotted-page-sticky-bottom";
+function y(e, t) {
+	let n = `${t}px`;
+	e.style.getPropertyValue("--slotted-page-sticky-bottom") !== n && e.style.setProperty(v, n);
+}
+var b = i(void 0);
+function x() {
+	return a(b);
+}
+var S = typeof document > "u" ? o : s;
+function C({ children: t, className: n, fill: i, footer: a, ground: s, inset: c, landmark: p, loading: h, messages: _, ref: x, render: C, scroll: E, style: D, width: O, ...k }) {
+	let A = g(), j = e(m, _), M = s ?? A.ground, N = c ?? A.inset, P = p ?? A.landmark, F = E ?? A.scroll, I = O ?? A.width, L = {
+		ground: M,
+		inset: N,
+		loading: h === !0,
+		scroll: F,
+		t: j,
+		width: I
+	}, [R, z] = l(null);
+	o(() => {}, [R]), S(() => {
+		if (R === null || typeof ResizeObserver > "u") return;
+		let e = w(R) ?? R.ownerDocument.documentElement, t = new ResizeObserver(() => {
+			let t = R.querySelector(":scope > [data-part=\"footer\"]"), n = F === "self" ? 0 : t?.offsetHeight ?? 0;
+			y(e, n);
+		});
+		t.observe(R);
+		let n = R.querySelector(":scope > [data-part=\"footer\"]");
+		return n !== null && t.observe(n), () => t.disconnect();
+	}, [
+		R,
+		F,
+		a !== void 0
+	]), S(() => {
+		if (R === null) return;
+		let e = w(R) ?? R.ownerDocument.documentElement;
+		return () => {
+			e.style.removeProperty(v);
+		};
+	}, [R]);
+	let B = r({
+		...k,
+		children: /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+			"data-part": "scroll",
+			"data-part-scroll": "",
+			children: t
+		}), /* @__PURE__ */ d(T, { children: a })] }),
+		className: n,
+		...i === !0 ? { "data-fill": "" } : {},
+		"data-ground": M,
+		...h === !0 ? { "data-loading": "" } : {},
+		"data-part": "root",
+		"data-scroll": F,
+		"data-ui": "page",
+		"data-width": I,
+		style: D
+	}), V = (e) => {
+		z(e), typeof x == "function" ? x(e) : x != null && (x.current = e);
+	}, H = P === "main" ? "main" : "div";
+	return /* @__PURE__ */ d(b.Provider, {
+		value: L,
+		children: C === void 0 ? /* @__PURE__ */ d(H, {
+			...B,
+			ref: V
+		}) : C(B)
+	});
+}
+function w(e) {
+	let t = e.ownerDocument.defaultView, n = e.parentElement;
+	for (; t !== null && n !== null && n !== e.ownerDocument.body;) {
+		let e = t.getComputedStyle(n).overflowY;
+		if (e === "auto" || e === "scroll") return n;
+		n = n.parentElement;
+	}
+	return null;
+}
+function T({ children: e }) {
+	let t = e != null && e !== !1, [n, r] = l(t ? "open" : "unmounted"), i = c(e);
+	t && (i.current = e);
+	let a = c(p({
+		present: t,
+		skipInitialAnimation: !0,
+		onStatusChange: (e) => r(e)
+	}));
+	return o(() => {
+		a.current.sync(t);
+	}, [t]), o(() => {
+		let e = a.current;
+		return () => e.stop();
+	}, []), n === "unmounted" ? null : /* @__PURE__ */ d(E.Provider, {
+		value: {
+			status: n,
+			setNode: a.current.setNode
+		},
+		children: t ? e : i.current
+	});
+}
+var E = i({
+	status: "open",
+	setNode: () => {}
+});
+function D({ children: e, className: i, ref: a, render: o, style: s, ...c }) {
+	let l = x(), u = r({
+		...c,
+		...l?.loading ? { "aria-busy": !0 } : {},
+		children: /* @__PURE__ */ d(t, {
+			inset: l?.inset,
+			size: l?.width,
+			children: /* @__PURE__ */ d(n, { children: e })
+		}),
+		className: i,
+		"data-part": "body",
+		style: s
+	});
+	return o === void 0 ? /* @__PURE__ */ d("div", {
+		...u,
+		ref: a
+	}) : o(u);
+}
+function O({ "aria-label": n, children: i, className: o, ref: s, render: c, style: l, ...u }) {
+	let f = x(), p = e(m), h = f?.t ?? p, { setNode: g, status: _ } = a(E), v = r({
+		...u,
+		"aria-label": n ?? h("footer"),
+		children: /* @__PURE__ */ d(t, {
+			inset: f?.inset,
+			size: f?.width,
+			children: /* @__PURE__ */ d("div", {
+				"data-part": "actions",
+				"data-part-actions": "",
+				children: i
+			})
+		}),
+		className: o,
+		"data-part": "footer",
+		"data-status": _,
+		style: l
+	});
+	return c === void 0 ? /* @__PURE__ */ d("footer", {
+		...v,
+		ref: (e) => {
+			g(e), typeof s == "function" ? s(e) : s != null && (s.current = e);
+		}
+	}) : c(v);
+}
+//#endregion
+export { x as a, v as i, D as n, _ as o, O as r, g as s, C as t };

package/dist/page-header-_w0GDfzQ.js

@@ -0,0 +1,369 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { n as r, o as i } from "./progress-indicator-BhljwFx8.js";
+import { t as a } from "./skeleton-DhMVeVtn.js";
+import { n as o } from "./container-D055iqqL.js";
+import { a as s } from "./page-DhWDOrba.js";
+import { keyedProps as c } from "@slotted/core/selector-key";
+import { createControllable as l } from "@slotted/core/state";
+import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { pageHeaderMessages as ee } from "@slotted/core/i18n";
+import { createStickyHeader as te } from "@slotted/core/sticky-header";
+//#region src/page-header/page-header-defaults.tsx
+var x = u({
+	collapse: "scroll",
+	level: "1",
+	size: "md",
+	variant: "band"
+});
+function S() {
+	return d(x);
+}
+function C({ children: e, ...t }) {
+	let n = S();
+	return /* @__PURE__ */ y(x.Provider, {
+		value: {
+			collapse: t.collapse ?? n.collapse,
+			level: t.level ?? n.level,
+			size: t.size ?? n.size,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/page-header/page-header.tsx
+var w = u(void 0);
+function T() {
+	let e = d(w);
+	if (e === void 0) throw Error("A PageHeader part must be rendered inside PageHeader.");
+	return e;
+}
+var E = typeof document > "u" ? f : h;
+function ne(e) {
+	let t = e.closest("[data-ui=\"page\"]");
+	return t === null || !t.hasAttribute("data-fill") ? null : t.querySelector(":scope > [data-part=\"scroll\"] > [data-part=\"body\"]");
+}
+function D({ children: e, className: t, collapse: r, defaultExpanded: i, defaultPinned: a, expanded: u, level: d, loading: h, messages: v, onExpandedChange: b, onPinnedChange: x, pinned: C, ref: T, render: D, size: O, style: k, variant: re, ...A }) {
+	let j = S(), M = s(), N = p(), P = r ?? j.collapse, F = d ?? j.level, I = O ?? j.size, L = re ?? j.variant, R = n(ee, v), [ie, ae] = _(i ?? !0), [oe, se] = _(a ?? !1), z = u ?? ie, B = C ?? oe, [V, H] = _(!1), [U, W] = _(!1), [G, K] = _(!1), [ce, le] = _(!1), [ue, de] = _(!1), [q, fe] = _(null), J = g(null), Y = g({
+		collapse: P,
+		expanded: z,
+		pinned: B
+	});
+	Y.current = {
+		collapse: P,
+		expanded: z,
+		pinned: B
+	};
+	let X = g({
+		onExpandedChange: b,
+		onPinnedChange: x
+	});
+	X.current = {
+		onExpandedChange: b,
+		onPinnedChange: x
+	};
+	let Z = g("programmatic"), pe = g(z);
+	E(() => {
+		pe.current !== z && (pe.current = z, J.current?.expandedChanged(z, Z.current), Z.current = "programmatic");
+	}, [z]);
+	let me = g(B);
+	E(() => {
+		me.current !== B && (me.current = B, J.current?.pinnedChanged(B));
+	}, [B]);
+	function Q(e, t, n, r) {
+		if (e === Y.current.expanded) return;
+		let i = !1, a = l({
+			controlled: u,
+			initial: Y.current.expanded,
+			onRequest: (e) => {
+				X.current.onExpandedChange?.(e.value, e), i = e.cancelled;
+			}
+		}).request(e, t, n);
+		i || (Z.current = r, a && (Y.current.expanded = e, ae(e)));
+	}
+	function $(e, t, n) {
+		if (e === Y.current.pinned) return;
+		let r = !1, i = l({
+			controlled: C,
+			initial: Y.current.pinned,
+			onRequest: (e) => {
+				X.current.onPinnedChange?.(e.value, e), r = e.cancelled;
+			}
+		}).request(e, t, n);
+		r || (i && (Y.current.pinned = e, se(e)), e && !Y.current.expanded && Q(!0, "programmatic", n, "pin"));
+	}
+	let he = (e, t, n) => {
+		!e && Y.current.pinned && $(!1, "programmatic", n), Q(e, t, n, t === "programmatic" ? "programmatic" : "control");
+	}, ge = (e, t, n) => {
+		$(e, t, n);
+	};
+	m(T, () => ({
+		element: q,
+		expand: () => Q(!0, "programmatic", void 0, "programmatic"),
+		collapse: () => {
+			Y.current.pinned && $(!1, "programmatic", void 0), Q(!1, "programmatic", void 0, "programmatic");
+		},
+		pin: () => $(!0, "programmatic", void 0),
+		unpin: () => $(!1, "programmatic", void 0)
+	}), [
+		q,
+		u,
+		C
+	]), E(() => {
+		if (q === null) return;
+		let e = (e) => q.querySelector(`:scope > * > [data-part="${e}"]`), t = te({
+			root: q,
+			area: () => e("header-area"),
+			chrome: () => [
+				e("title-area"),
+				e("controls"),
+				e("tabs")
+			].filter((e) => e !== null),
+			state: () => Y.current,
+			onScrolled: H,
+			onRevealed: W,
+			onScrollRequest: (e) => Q(e, "scroll", void 0, "scroll"),
+			onTall: K,
+			onCompact: le,
+			onStuck: de,
+			onPinRequest: (e) => $(e, "programmatic", void 0),
+			contained: () => ne(q)
+		});
+		return J.current = t, () => {
+			t.destroy(), J.current = null;
+		};
+	}, [q, P]), f(() => {
+		J.current?.refresh();
+	});
+	let _e = {
+		collapse: P,
+		expanded: z,
+		ids: {
+			areaId: `${N}area`,
+			headingId: `${N}heading`
+		},
+		level: F,
+		loading: h === !0,
+		t: R,
+		pinned: B,
+		revealed: U,
+		scrolled: V,
+		size: I,
+		setExpanded: he,
+		setPinned: ge
+	}, ve = c({
+		...A,
+		...h === !0 ? { "aria-busy": !0 } : {},
+		children: /* @__PURE__ */ y(o, {
+			inset: M?.inset,
+			size: M?.width ?? "content",
+			children: e
+		}),
+		className: t,
+		"data-collapse": P,
+		...z ? { "data-expanded": "" } : {},
+		"data-level": F,
+		...h === !0 ? { "data-loading": "" } : {},
+		"data-part": "root",
+		...U ? { "data-revealed": "" } : {},
+		...V ? { "data-scrolled": "" } : {},
+		...G ? { "data-tall": "" } : {},
+		...ce ? { "data-compact": "" } : {},
+		"data-size": I,
+		...ue ? { "data-stuck": "" } : {},
+		"data-ui": "page-header",
+		"data-variant": L,
+		style: k
+	});
+	return /* @__PURE__ */ y(w.Provider, {
+		value: _e,
+		children: D === void 0 ? /* @__PURE__ */ y("header", {
+			...ve,
+			ref: fe
+		}) : D(ve)
+	});
+}
+//#endregion
+//#region src/page-header/page-header-parts.tsx
+function O(e) {
+	return /* @__PURE__ */ y(a, {
+		lines: e,
+		render: (e) => /* @__PURE__ */ y("span", { ...e })
+	});
+}
+function k(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function re(e, t) {
+	typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function A(e, t) {
+	function n({ children: t, className: n, ref: r, render: i, style: a, ...o }) {
+		let s = c({
+			...o,
+			children: t,
+			className: n,
+			"data-part": e,
+			style: a
+		});
+		return i === void 0 ? /* @__PURE__ */ y("div", {
+			...s,
+			ref: r
+		}) : i(s);
+	}
+	return n.displayName = t, n;
+}
+var j = A("title-area", "PageHeaderTitleArea"), M = A("nav", "PageHeaderNav"), N = A("breadcrumbs", "PageHeaderBreadcrumbs"), P = A("title-row", "PageHeaderTitleRow"), F = A("visual", "PageHeaderVisual"), I = A("title", "PageHeaderTitle"), L = A("marks", "PageHeaderMarks"), R = A("actions", "PageHeaderActions"), ie = A("navigation", "PageHeaderNavigation"), ae = A("figure", "PageHeaderFigure"), oe = A("content", "PageHeaderContent"), se = A("tabs", "PageHeaderTabs");
+function z({ delay: e, label: t, minDuration: n, size: a, ...o }) {
+	let s = T(), c = i();
+	return /* @__PURE__ */ y("div", {
+		"data-part": "progress",
+		"data-part-progress": "",
+		children: /* @__PURE__ */ y(r, {
+			...o,
+			delay: e ?? c.delay ?? 200,
+			label: t ?? s.t("progress"),
+			minDuration: n ?? c.minDuration ?? 400,
+			placement: "edge-end",
+			size: a ?? "sm"
+		})
+	});
+}
+function B({ children: n, className: r, ref: i, render: a, style: o, ...s }) {
+	let l = c({
+		...s,
+		children: /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(t, {
+			directional: !0,
+			children: /* @__PURE__ */ y(e, { name: "arrow-left" })
+		}), n] }),
+		className: r,
+		"data-part": "back",
+		style: o
+	});
+	return a === void 0 ? /* @__PURE__ */ y("a", {
+		...l,
+		ref: i
+	}) : a(l);
+}
+function V({ children: e, className: t, ref: n, render: r, style: i, title: a, ...o }) {
+	let { ids: s, level: l, loading: u } = T(), d = typeof e == "string" ? e : void 0, f = c({
+		...o,
+		children: u ? O(1) : e,
+		className: t,
+		"data-part": "heading",
+		id: s.headingId,
+		style: i,
+		...a !== void 0 || d !== void 0 ? { title: a ?? d } : {}
+	});
+	if (r !== void 0) return r(f);
+	let p = `h${l}`;
+	return /* @__PURE__ */ y(p, {
+		...f,
+		ref: n
+	});
+}
+function H({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let { loading: o } = T(), s = c({
+		...a,
+		children: o ? O(1) : e,
+		className: t,
+		"data-part": "subheading",
+		style: i
+	});
+	return r === void 0 ? /* @__PURE__ */ y("p", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function U({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let { loading: o } = T(), s = c({
+		...a,
+		children: o ? O(2) : e,
+		className: t,
+		"data-part": "description",
+		style: i
+	});
+	return r === void 0 ? /* @__PURE__ */ y("p", {
+		...s,
+		ref: n
+	}) : r(s);
+}
+function W({ "aria-label": e, children: t, className: n, ref: r, render: i, style: a, ...o }) {
+	let { expanded: s, ids: l, scrolled: u, t: d } = T(), [p, m] = _(null), h = !s && !u;
+	f(() => {
+		p !== null && (h ? (p.setAttribute("inert", ""), p.setAttribute("aria-hidden", "true")) : (p.removeAttribute("inert"), p.removeAttribute("aria-hidden")));
+	}, [p, h]);
+	let g = c({
+		...o,
+		"aria-label": e ?? d("headerArea"),
+		children: t,
+		className: n,
+		"data-part": "header-area",
+		id: l.areaId,
+		role: "region",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ y("div", {
+		...g,
+		ref: (e) => {
+			m(e), re(r, e);
+		}
+	}) : i(g);
+}
+function G({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = c({
+		...a,
+		children: /* @__PURE__ */ y("div", { children: e }),
+		className: t,
+		"data-part": "controls",
+		style: i
+	});
+	return r === void 0 ? /* @__PURE__ */ y("div", {
+		...o,
+		ref: n
+	}) : r(o);
+}
+function K({ "aria-label": n, children: r, className: i, onClick: a, ref: o, render: s, style: l, ...u }) {
+	let { expanded: d, ids: f, setExpanded: p, t: m } = T(), h = c({
+		...u,
+		"aria-controls": f.areaId,
+		"aria-expanded": d,
+		"aria-label": n ?? m(d ? "collapse" : "expand"),
+		children: r ?? /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: "chevron-down" }) }),
+		className: i,
+		"data-part": "toggle",
+		onClick: (e) => {
+			a?.(e), !e.defaultPrevented && p(!d, k(e), e);
+		},
+		style: l,
+		type: "button"
+	});
+	return s === void 0 ? /* @__PURE__ */ y("button", {
+		...h,
+		ref: o
+	}) : s(h);
+}
+function ce({ "aria-label": n, children: r, className: i, onClick: a, ref: o, render: s, style: l, ...u }) {
+	let { pinned: d, setPinned: f, t: p } = T(), m = c({
+		...u,
+		"aria-label": n ?? p(d ? "unpin" : "pin"),
+		"aria-pressed": d,
+		children: r ?? /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: d ? "pin-off" : "pin" }) }),
+		className: i,
+		"data-part": "pin",
+		...d ? { "data-pressed": "" } : {},
+		onClick: (e) => {
+			a?.(e), !e.defaultPrevented && f(!d, k(e), e);
+		},
+		style: l,
+		type: "button"
+	});
+	return s === void 0 ? /* @__PURE__ */ y("button", {
+		...m,
+		ref: o
+	}) : s(m);
+}
+//#endregion
+export { T as C, D as S, S as T, I as _, oe as a, K as b, ae as c, M as d, ie as f, se as g, H as h, N as i, V as l, z as m, W as n, G as o, ce as p, B as r, U as s, R as t, L as u, j as v, C as w, F as x, P as y };

package/dist/page-header.js

@@ -1,2 +1,2 @@
-import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "./page-header-BP_Wt3eS.js";
+import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "./page-header-_w0GDfzQ.js";
 export { t as PageHeader, y as PageHeaderActions, m as PageHeaderArea, _ as PageHeaderBack, d as PageHeaderBreadcrumbs, i as PageHeaderContent, h as PageHeaderControls, S as PageHeaderDefaultsProvider, v as PageHeaderDescription, o as PageHeaderFigure, f as PageHeaderHeading, b as PageHeaderMarks, s as PageHeaderNav, c as PageHeaderNavigation, g as PageHeaderPin, p as PageHeaderProgress, u as PageHeaderSubheading, l as PageHeaderTabs, r as PageHeaderTitle, x as PageHeaderTitleArea, w as PageHeaderTitleRow, a as PageHeaderToggle, C as PageHeaderVisual, e as usePageHeader, n as usePageHeaderDefaults };

package/dist/page.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./page-QP8Zyz8-.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./page-DhWDOrba.js";
 export { o as Page, n as PageBody, r as PageDefaultsProvider, i as PageFooter, t as STICKY_BOTTOM_PROPERTY, e as usePage, a as usePageDefaults };