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

package/dist/filter-bar.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./filter-bar-b2Q9BZHf.js";
+export { r as FILTER_BAR_FALLBACK, t as FilterBar, n as FilterBarDefaultsProvider, e as useFilterBarDefaults };

package/dist/form-vTCQhZM-.js

@@ -0,0 +1,265 @@
+import { r as e } from "./i18n-DpW8lqJ1.js";
+import { createControllable as t } from "@slotted/core/state";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as ee, useImperativeHandle as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Fragment as te, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { formMessages as ne } from "@slotted/core/i18n";
+import { collectValidity as f, hasErrors as p, isDirty as re, mergeErrors as m, namedControls as ie, normaliseErrors as h, orderErrors as ae, withoutError as g } from "@slotted/core/form";
+var _ = n({
+	align: "end",
+	errorFocus: "summary",
+	nativeValidation: !1,
+	summary: "auto",
+	summaryDescription: void 0,
+	validate: "submit"
+});
+function v() {
+	return i(_);
+}
+var y = n(void 0);
+function b() {
+	return i(y);
+}
+//#endregion
+//#region src/form/form-parts.tsx
+function x({ ref: e, ...t }) {
+	let n = b();
+	return n === void 0 || n.entries.length === 0 ? null : /* @__PURE__ */ d("div", {
+		"aria-labelledby": n.summaryId,
+		"data-ui": "form",
+		"data-part": "summary",
+		role: "alert",
+		tabIndex: -1,
+		...t,
+		ref: (t) => {
+			n.registerSummary(t), typeof e == "function" ? e(t) : e != null && (e.current = t);
+		},
+		children: [
+			/* @__PURE__ */ u("h2", {
+				"data-part": "summary-title",
+				id: n.summaryId,
+				children: n.summaryTitle
+			}),
+			n.summaryDescription === void 0 ? null : /* @__PURE__ */ u("p", { children: n.summaryDescription }),
+			/* @__PURE__ */ u("ul", {
+				"data-part": "summary-list",
+				children: n.entries.flatMap((e) => e.messages.map((t, n) => /* @__PURE__ */ u("li", { children: e.id === void 0 ? /* @__PURE__ */ u("span", {
+					"data-part": "summary-item",
+					children: t
+				}) : /* @__PURE__ */ u("a", {
+					"data-part": "summary-item",
+					href: `#${e.id}`,
+					onClick: (t) => {
+						let n = t.currentTarget.ownerDocument.getElementById(e.id);
+						n !== null && (t.preventDefault(), n.focus());
+					},
+					children: t
+				}) }, `${e.name}-${n}`)))
+			})
+		]
+	});
+}
+function S({ align: e, ref: t, ...n }) {
+	let r = b(), i = v();
+	return /* @__PURE__ */ u("div", {
+		"data-align": e ?? r?.align ?? i.align,
+		"data-ui": "form",
+		"data-part": "actions",
+		...n,
+		ref: t
+	});
+}
+//#endregion
+//#region src/form/form.tsx
+var oe = (e, t) => {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => t[n] !== void 0 && e[n].length === t[n].length && e[n].every((e, r) => e === t[n][r]));
+};
+function C({ align: n, children: i, className: _, defaultErrors: b, disabled: S, errorFocus: C, errors: w, guardUnsaved: T = !1, handle: se, loading: ce = !1, messages: le, nativeValidation: E, onErrorsChange: D, onSubmit: O, ref: k, style: ue, summary: A, summaryDescription: de, summaryTitle: fe, validate: pe, ...me }) {
+	let j = v(), he = e(ne, le), M = c(null), N = c(null), P = ee(), F = n ?? j.align, I = C ?? j.errorFocus, L = A ?? j.summary, R = fe ?? he("summaryTitle"), z = de ?? j.summaryDescription, B = pe ?? j.validate, ge = E ?? j.nativeValidation, V = w !== void 0, H = s(() => h(w), [w]), [_e, ve] = l(() => h(b)), U = V ? H : _e, [ye, W] = l(!1), G = ye || ce, [K, q] = l(!1), [J, be] = l([]), Y = c(!1), X = r((e, n, r) => {
+		let i = t({
+			...V ? { controlled: H } : {},
+			initial: U,
+			equals: oe,
+			onRequest: (e) => D?.(e.value, e)
+		}).request(e, n, r);
+		return i && ve(e), i;
+	}, [
+		V,
+		U,
+		H,
+		D
+	]);
+	a(() => {
+		let e = M.current;
+		be(e === null ? [] : ae(U, ie(e)));
+	}, [U]);
+	let Z = r(() => {
+		if (I === "none") return;
+		if (I === "summary" && N.current !== null) {
+			N.current.focus();
+			return;
+		}
+		let e = M.current, t = J[0];
+		if (e === null || t === void 0) return;
+		let n = e.elements.namedItem(t.name), r = n instanceof RadioNodeList ? n[0] : n;
+		r instanceof HTMLElement && r.focus();
+	}, [J, I]);
+	a(() => {
+		Y.current && J.length !== 0 && (Y.current = !1, Z());
+	}, [J, Z]);
+	let Q = r((e, t, n) => (Y.current = p(e), X(e, t, n), e), [X]), $ = r((e, t) => {
+		let n = M.current;
+		if (n === null) return {};
+		let r = m(H, f(n));
+		return Q(r, e, t), r;
+	}, [H, Q]), xe = r(async (e) => {
+		let t = e.currentTarget;
+		if (q(!0), G) {
+			e.preventDefault();
+			return;
+		}
+		let n = B === "none" ? H : m(H, f(t));
+		if (p(n)) {
+			e.preventDefault(), Q(n, "submit", e);
+			return;
+		}
+		if (Q({}, "submit", e), O === void 0) return;
+		e.preventDefault();
+		let r = new FormData(t), i = {};
+		for (let e of new Set(r.keys())) {
+			let t = r.getAll(e);
+			i[e] = t.length > 1 ? t : t[0];
+		}
+		let a = O(i, {
+			event: e,
+			values: i
+		});
+		if (!(a instanceof Promise)) {
+			a !== void 0 && Q(h(a), "submit", e);
+			return;
+		}
+		W(!0);
+		try {
+			let t = await a;
+			t !== void 0 && Q(h(t), "submit", e);
+		} finally {
+			W(!1);
+		}
+	}, [
+		H,
+		O,
+		Q,
+		B,
+		G
+	]);
+	a(() => {
+		let e = M.current;
+		if (e === null) return;
+		let t = (t) => {
+			let n = t.target;
+			if (!(n instanceof HTMLElement)) return;
+			let r = n.name;
+			if (typeof r != "string" || r === "") return;
+			if (B === "change" && K) {
+				X(m(H, f(e)), "keyboard", t);
+				return;
+			}
+			let i = g(U, r);
+			i !== U && X(i, "keyboard", t);
+		}, n = (t) => {
+			if (B !== "blur") return;
+			let n = t.target;
+			if (!(n instanceof HTMLElement)) return;
+			let r = n.name;
+			if (typeof r != "string" || r === "") return;
+			let i = f(e), a = r in i ? m(U, { [r]: i[r] }) : g(U, r);
+			a !== U && X(a, "keyboard", t);
+		}, r = () => {
+			Y.current = !1, q(!1), X({}, "clear", void 0);
+		};
+		return e.addEventListener("input", t), e.addEventListener("focusout", n), e.addEventListener("reset", r), () => {
+			e.removeEventListener("input", t), e.removeEventListener("focusout", n), e.removeEventListener("reset", r);
+		};
+	}, [
+		U,
+		H,
+		X,
+		B,
+		K
+	]), a(() => {
+		if (!T) return;
+		let e = M.current;
+		if (e === null) return;
+		let t = (t) => {
+			!G && re(e) && t.preventDefault();
+		};
+		return window.addEventListener("beforeunload", t), () => window.removeEventListener("beforeunload", t);
+	}, [T, G]), o(se, () => ({
+		validate: () => $("programmatic", void 0),
+		submit: () => M.current?.requestSubmit(),
+		reset: () => M.current?.reset(),
+		focusFirstError: Z
+	}), [Z, $]);
+	let Se = s(() => ({
+		align: F,
+		entries: J,
+		errors: U,
+		registerSummary: (e) => {
+			N.current = e;
+		},
+		submitted: K,
+		submitting: G,
+		summaryDescription: z,
+		summaryId: P,
+		summaryTitle: R
+	}), [
+		U,
+		J,
+		F,
+		z,
+		R,
+		K,
+		G,
+		P
+	]), Ce = {
+		children: /* @__PURE__ */ d(te, { children: [L === "auto" ? /* @__PURE__ */ u(x, {}) : null, i] }),
+		className: _,
+		style: ue,
+		...S === !0 ? { "data-disabled": "" } : {},
+		...p(U) ? { "data-invalid": "" } : {},
+		...G ? { "data-loading": "" } : {},
+		"data-part": "root",
+		"data-ui": "form"
+	};
+	return /* @__PURE__ */ u(y.Provider, {
+		value: Se,
+		children: /* @__PURE__ */ u("form", {
+			...me,
+			...Ce,
+			"aria-busy": G ? !0 : void 0,
+			noValidate: !ge,
+			onSubmit: xe,
+			ref: (e) => {
+				M.current = e, typeof k == "function" ? k(e) : k != null && (k.current = e);
+			}
+		})
+	});
+}
+//#endregion
+//#region src/form/form-defaults.tsx
+function w({ children: e, ...t }) {
+	let n = v();
+	return /* @__PURE__ */ u(_.Provider, {
+		value: {
+			align: t.align ?? n.align,
+			errorFocus: t.errorFocus ?? n.errorFocus,
+			nativeValidation: t.nativeValidation ?? n.nativeValidation,
+			summary: t.summary ?? n.summary,
+			summaryDescription: t.summaryDescription ?? n.summaryDescription,
+			validate: t.validate ?? n.validate
+		},
+		children: e
+	});
+}
+//#endregion
+export { v as a, x as i, C as n, b as o, S as r, w as t };

package/dist/form.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "./form-vTCQhZM-.js";
+export { n as Form, i as FormActions, a as FormDefaultsProvider, t as FormSummary, e as useFormDefaults, r as useFormState };

package/dist/fullscreen-CF0UN4mv.js

@@ -0,0 +1,187 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { createControllable as r } from "@slotted/core/state";
+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 { fullscreenMessages as p } from "@slotted/core/i18n";
+import { createFullscreen as m, fullscreenSupported as h } from "@slotted/core/fullscreen";
+var g = i({
+	mode: "auto",
+	navigationUI: "auto",
+	size: "md",
+	variant: "ghost"
+});
+function _() {
+	return a(g);
+}
+function v({ children: e, ...t }) {
+	let n = _();
+	return /* @__PURE__ */ d(g.Provider, {
+		value: {
+			mode: t.mode ?? n.mode,
+			navigationUI: t.navigationUI ?? n.navigationUI,
+			size: t.size ?? n.size,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/fullscreen/use-fullscreen.ts
+function y(e) {
+	return e === null ? null : e instanceof HTMLElement ? e : e.current;
+}
+function b(e, { fullscreen: t, defaultFullscreen: i = !1, onFullscreenChange: a, onFullscreenError: u, mode: d, navigationUI: f, messages: g } = {}) {
+	let v = _(), b = n(p, g), [x, S] = l(i), [C, w] = l(null), [T, E] = l(null), [D, O] = l(!1), k = r({
+		controlled: t,
+		initial: x,
+		onRequest: (e) => a?.(e.value, e)
+	}), A = c(null), j = c(!1), M = c({
+		state: k,
+		onFullscreenError: u,
+		t: b,
+		policy: d,
+		navigationUI: f,
+		defaults: v
+	});
+	M.current = {
+		state: k,
+		onFullscreenError: u,
+		t: b,
+		policy: d,
+		navigationUI: f,
+		defaults: v
+	};
+	let N = (e, t, n) => {
+		if (!M.current.state.request(e, t, n)) return;
+		S(e);
+		let r = A.current;
+		r && (e ? (E(null), r.enter()) : r.exit());
+	}, P = c(N);
+	P.current = N;
+	let F = () => ({
+		policy: M.current.policy ?? M.current.defaults.mode,
+		navigationUI: M.current.navigationUI ?? M.current.defaults.navigationUI,
+		t: M.current.t,
+		onModeChange: w,
+		onError: (e) => {
+			E(e), M.current.onFullscreenError?.(e);
+		},
+		onExit: (e) => {
+			j.current = A.current?.mode === null, P.current(!1, "escape", e);
+		}
+	});
+	return s(() => {
+		let t = y(e);
+		if (!t) return;
+		O(h(t.ownerDocument));
+		let n = m(t, F());
+		return A.current = n, () => {
+			A.current = null, n.destroy();
+		};
+	}, [e]), o(() => {
+		A.current?.update(F());
+	}), o(() => {
+		let e = A.current;
+		if (e) {
+			if (k.value && e.mode === null) {
+				let t = !j.current;
+				j.current = !1, e.enter({ native: t });
+			} else !k.value && e.mode !== null && e.exit();
+		}
+	}, [
+		k.value,
+		C,
+		e
+	]), {
+		fullscreen: k.value,
+		mode: C,
+		supported: D,
+		error: T,
+		t: b,
+		enter: (e = "programmatic", t) => N(!0, e, t),
+		exit: (e = "programmatic", t) => N(!1, e, t),
+		toggle: (e = "programmatic", t) => N(!k.value, e, t)
+	};
+}
+//#endregion
+//#region src/fullscreen/fullscreen.tsx
+var x = i(null);
+function S() {
+	return a(x);
+}
+function C(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function w({ children: e, defaultFullscreen: t, fullscreen: n, messages: r, mode: i, navigationUI: a, onFullscreenChange: o, onFullscreenError: s, ref: c, render: u, ...f }) {
+	let [p, m] = l(null), h = b(p, {
+		defaultFullscreen: t,
+		fullscreen: n,
+		messages: r,
+		mode: i,
+		navigationUI: a,
+		onFullscreenChange: o,
+		onFullscreenError: s
+	}), g = (e) => {
+		m(e), C(c, e);
+	}, _ = {
+		...f,
+		children: e,
+		...h.fullscreen ? { "data-fullscreen": "" } : {},
+		...h.mode === null ? {} : { "data-mode": h.mode },
+		"data-part": "root",
+		"data-ui": "fullscreen",
+		ref: g
+	};
+	return /* @__PURE__ */ d(x.Provider, {
+		value: h,
+		children: u === void 0 ? /* @__PURE__ */ d("div", { ..._ }) : u(_)
+	});
+}
+function T({ ref: e, render: t, ...n }) {
+	let r = {
+		...n,
+		"data-part": "content",
+		"data-ui": "fullscreen"
+	};
+	return t === void 0 ? /* @__PURE__ */ d("div", {
+		...r,
+		ref: e
+	}) : t(r);
+}
+function E(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function D({ children: r, className: i, disabled: a = !1, icon: o, iconOnly: s = !1, onClick: c, ref: l, render: m, size: h, style: g, target: v, type: y = "button", variant: b, ...x }) {
+	let C = _(), w = S(), T = v ?? w, D = T?.fullscreen ?? !1, O = typeof r == "function" ? r(D) : r, k = typeof o == "function" ? o(D) : o, A = n(p), j = T?.t ?? A, M = {
+		...x,
+		children: /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+			"aria-hidden": "true",
+			"data-part": "icon",
+			children: k ?? /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(e, { name: D ? "minimize" : "maximize" }) })
+		}), /* @__PURE__ */ d("span", {
+			"data-part": "label",
+			children: O ?? j(D ? "exit" : "enter")
+		})] }),
+		className: i,
+		...a ? { "data-disabled": "" } : {},
+		...D ? { "data-fullscreen": "" } : {},
+		...s ? { "data-icon-only": "" } : {},
+		"data-part": "trigger",
+		"data-size": h ?? C.size,
+		"data-ui": "fullscreen",
+		"data-variant": b ?? C.variant,
+		onClick: (e) => {
+			c?.(e), !(e.defaultPrevented || a) && T?.toggle(E(e), e);
+		},
+		style: g
+	};
+	return m === void 0 ? /* @__PURE__ */ d("button", {
+		...M,
+		disabled: a,
+		ref: l,
+		type: y
+	}) : m(M);
+}
+//#endregion
+export { b as a, S as i, T as n, v as o, D as r, _ as s, w as t };

package/dist/fullscreen.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./fullscreen-CF0UN4mv.js";
+export { o as Fullscreen, n as FullscreenContent, r as FullscreenDefaultsProvider, i as FullscreenTrigger, e as useFullscreen, t as useFullscreenContext, a as useFullscreenDefaults };

package/dist/grid-CIkG_2IQ.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/grid/grid.tsx
+var t = "--slotted-grid-columns";
+function n(e, n) {
+	return e === void 0 ? n : {
+		[t]: e,
+		...n
+	};
+}
+function r({ align: t, columns: r, gap: i, justify: a, minItemWidth: o, render: s, style: c, ...l }) {
+	let u = {
+		...l,
+		...t === void 0 ? {} : { "data-align": t },
+		...r === void 0 ? {} : { "data-columns": String(r) },
+		...i === void 0 ? {} : { "data-gap": String(i) },
+		...a === void 0 ? {} : { "data-justify": a },
+		...o === void 0 ? {} : { "data-min-item-width": o },
+		"data-part": "root",
+		"data-ui": "grid",
+		style: n(r, c)
+	};
+	return s === void 0 ? /* @__PURE__ */ e("div", { ...u }) : s(u);
+}
+//#endregion
+export { r as t };

package/dist/grid.js

@@ -0,0 +1,2 @@
+import { t as e } from "./grid-CIkG_2IQ.js";
+export { e as Grid };

package/dist/highlight-0Qw23QPp.js

@@ -0,0 +1,57 @@
+/* empty css                   */
+import { Fragment as e, createContext as t, useContext as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { highlightRuns as a } from "@slotted/core/highlight";
+//#region src/highlight/highlight-defaults.tsx
+var o = t({
+	locale: void 0,
+	sensitivity: "base",
+	occurrences: "all"
+});
+function s() {
+	return n(o);
+}
+function c({ children: e, ...t }) {
+	let n = s();
+	return /* @__PURE__ */ i(o.Provider, {
+		value: {
+			locale: t.locale ?? n.locale,
+			sensitivity: t.sensitivity ?? n.sensitivity,
+			occurrences: t.occurrences ?? n.occurrences
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/highlight/highlight.tsx
+function l({ current: t, disabled: n, locale: o, matcher: c, occurrences: l, query: u, ranges: d, render: f, sensitivity: p, text: m, ...h }) {
+	let g = s(), _ = o ?? g.locale, v = p ?? g.sensitivity, y = l ?? g.occurrences, b = r(() => a(m, {
+		locale: _,
+		matcher: c,
+		occurrences: y,
+		query: u,
+		ranges: d,
+		sensitivity: v
+	}), [
+		c,
+		u,
+		d,
+		_,
+		y,
+		v,
+		m
+	]), x = {
+		...h,
+		children: b.map((n, r) => n.matched ? /* @__PURE__ */ i("mark", {
+			"data-part": "match",
+			...n.index === t ? { "data-current": "" } : {},
+			children: n.text
+		}, r) : /* @__PURE__ */ i(e, { children: n.text }, r)),
+		"data-part": "root",
+		"data-ui": "highlight",
+		...n ? { "data-disabled": "" } : {}
+	};
+	return f === void 0 ? /* @__PURE__ */ i("span", { ...x }) : f(x);
+}
+//#endregion
+export { c as n, s as r, l as t };

package/dist/highlight.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./highlight-0Qw23QPp.js";
+export { n as Highlight, e as HighlightDefaultsProvider, t as useHighlightDefaults };