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

package/dist/splitter-Bg3UgmbV.js

@@ -0,0 +1,289 @@
+import { createControllable as e } from "@slotted/core/state";
+import { createContext as t, useCallback as n, useContext as r, useEffect as i, useId as a, useImperativeHandle as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as ee, jsx as u, jsxs as te } from "react/jsx-runtime";
+import { EXTENT_LARGE_STEP_PX as d, EXTENT_STEP_PX as f, anchorsAtStart as ne, extentAtPoint as p, extentBounds as re, extentFromLength as m, holdResizeGesture as ie, measureLength as h, nearestSnap as ae, stepAmountFromPixels as oe, stepExtent as se } from "@slotted/core/extent";
+//#region src/splitter/splitter-defaults.tsx
+var g = t({
+	collapsedValue: 0,
+	max: 1,
+	min: 0,
+	orientation: "vertical"
+});
+function _() {
+	return r(g);
+}
+function v({ children: e, ...t }) {
+	let n = _();
+	return /* @__PURE__ */ u(g.Provider, {
+		value: {
+			collapsedValue: t.collapsedValue ?? n.collapsedValue,
+			max: t.max ?? n.max,
+			min: t.min ?? n.min,
+			orientation: t.orientation ?? n.orientation
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/splitter/splitter.tsx
+var ce = [];
+function y(e) {
+	return e === "vertical" ? "start" : "top";
+}
+function b(e, t, n, r) {
+	return typeof e == "number" ? Math.min(Math.max(e, 0), 1) : t === null || n <= 0 ? r : m({
+		pixels: h(e, t, n),
+		span: n
+	});
+}
+function x({ className: t, collapsed: r, collapsedValue: m, collapsible: h = !1, defaultCollapsed: g = !1, defaultValue: v = .5, disabled: x = !1, for: S, max: le, min: ue, onCollapsedChange: C, onDoubleClick: de, onKeyDown: fe, onPointerDown: pe, onResizeEnd: w, onValueChange: T, orientation: me, ref: he, render: E, snapPoints: ge, style: _e, value: D, ...O }) {
+	let k = _(), A = me ?? k.orientation, j = ue ?? k.min, M = le ?? k.max, N = m ?? k.collapsedValue, P = ge ?? ce, F = c(null), I = a(), [ve, ye] = l(v), [be, xe] = l(), [Se, Ce] = l(g), [L, R] = l(!1), z = D ?? ve, B = r ?? Se, V = c(v), H = c(null), U = c(z);
+	s(() => {
+		U.current = z;
+	}, [z]);
+	let [we, Te] = l(0), W = n(() => F.current?.parentElement ?? null, []), G = n(() => {
+		if (S !== void 0) return S.current;
+		let e = F.current?.previousElementSibling;
+		return e instanceof HTMLElement ? e : null;
+	}, [S]), K = n(() => {
+		let e = W(), t = e?.getBoundingClientRect(), n = t === void 0 ? 0 : A === "vertical" ? t.width : t.height, r = e != null && getComputedStyle(e).direction === "rtl";
+		return {
+			box: e ?? null,
+			rect: t,
+			rtl: r,
+			span: n
+		};
+	}, [W, A]), q = n(() => {
+		let { box: e, span: t } = K(), n = b(j, e, t, 0), r = b(M, e, t, 1);
+		return re(P, Math.min(n, r), Math.max(n, r));
+	}, [
+		K,
+		M,
+		j,
+		P
+	]), J = n((t, n, r) => {
+		t !== U.current && e({
+			controlled: D,
+			initial: U.current,
+			onRequest: (e) => {
+				T?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: n,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(t, n, r) && (U.current = t, ye(t));
+	}, [T, D]), Y = n((t, n, i) => {
+		if (t === B) return;
+		let a = e({
+			controlled: r,
+			initial: B,
+			onRequest: (e) => {
+				C?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: n,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(t, n, i);
+		return !a && r === void 0 ? !1 : (a && Ce(t), !0);
+	}, [
+		r,
+		B,
+		C
+	]), Ee = n((e, t) => {
+		if (h) {
+			if (B) {
+				Y(!1, t, e) !== !1 && J(V.current, t, e);
+				return;
+			}
+			V.current = z, Y(!0, t, e) !== !1 && J(N, t, e);
+		}
+	}, [
+		h,
+		B,
+		z,
+		Y,
+		J,
+		N
+	]);
+	i(() => {
+		let e = G();
+		e !== null && (e.style.setProperty("--slotted-splitter-value", String(z)), e.id === "" && (e.id = `${I}-region`), xe(e.id));
+	}, [
+		z,
+		I,
+		G
+	]), i(() => () => H.current?.(), []);
+	let X = n((e) => {
+		let t = q();
+		return Math.min(Math.max(e, t.min), t.max);
+	}, [q]);
+	i(() => {
+		let e = W();
+		if (typeof ResizeObserver > "u" || e === null) return;
+		let t = new ResizeObserver(() => Te((e) => e + 1));
+		return t.observe(e), () => t.disconnect();
+	}, [W]), i(() => {
+		if (B || L) return;
+		let e = X(z);
+		e !== z && J(e, "programmatic", void 0);
+	}, [
+		X,
+		B,
+		z,
+		L,
+		we,
+		J
+	]), o(he, () => ({
+		get bar() {
+			return F.current;
+		},
+		collapse: () => {
+			h && !B && (V.current = z, Y(!0, "programmatic", void 0) !== !1 && J(N, "programmatic", void 0));
+		},
+		expand: () => {
+			B && Y(!1, "programmatic", void 0) !== !1 && J(V.current, "programmatic", void 0);
+		},
+		focus: () => F.current?.focus(),
+		reset: () => J(X(v), "programmatic", void 0)
+	}), [
+		X,
+		h,
+		B,
+		z,
+		v,
+		Y,
+		J,
+		N
+	]);
+	let { max: Z, min: Q } = q(), De = (e) => {
+		if (pe?.(e), e.defaultPrevented || x || e.button !== 0) return;
+		let { rect: t, rtl: n, span: r } = K();
+		if (t === void 0 || r <= 0) return;
+		e.currentTarget.setPointerCapture(e.pointerId), R(!0), H.current = ie(e.currentTarget.ownerDocument, A === "vertical" ? "col-resize" : "row-resize");
+		let i = y(A), a = e.currentTarget, o = p({
+			point: {
+				x: e.clientX,
+				y: e.clientY
+			},
+			rect: t,
+			rtl: n,
+			side: i
+		}) - U.current, s = (e) => {
+			let t = W()?.getBoundingClientRect();
+			if (t === void 0) return;
+			let r = p({
+				point: {
+					x: e.clientX,
+					y: e.clientY
+				},
+				rect: t,
+				rtl: n,
+				side: i
+			});
+			J(X(r - o), "pointer", e);
+		}, c = (e) => {
+			a.removeEventListener("pointermove", s), a.removeEventListener("pointerup", c), a.removeEventListener("pointercancel", c), H.current?.(), H.current = null, R(!1);
+			let t = W()?.getBoundingClientRect();
+			if (t !== void 0 && P.length > 0) {
+				let r = p({
+					point: {
+						x: e.clientX,
+						y: e.clientY
+					},
+					rect: t,
+					rtl: n,
+					side: i
+				}), a = X(ae(r - o, P));
+				J(a, "pointer", e), w?.(a);
+				return;
+			}
+			w?.(U.current);
+		};
+		a.addEventListener("pointermove", s), a.addEventListener("pointerup", c), a.addEventListener("pointercancel", c);
+	}, Oe = (e) => {
+		if (fe?.(e), e.defaultPrevented || x) return;
+		if (e.key === "Enter") {
+			if (!h) return;
+			e.preventDefault(), Ee(e, "keyboard");
+			return;
+		}
+		let { rect: t, rtl: n } = K();
+		if (t === void 0) return;
+		let r = y(A), i = ne(r, n) ? 1 : -1, a = A === "vertical", o = e.key === (a ? "ArrowRight" : "ArrowDown") ? i : e.key === (a ? "ArrowLeft" : "ArrowUp") ? -i : void 0;
+		if (o !== void 0) {
+			e.preventDefault();
+			let n = oe({
+				pixels: e.shiftKey ? d : f,
+				rect: t,
+				side: r
+			});
+			J(se({
+				amount: n,
+				direction: o,
+				fraction: z,
+				max: Z,
+				min: Q,
+				snapPoints: P
+			}), "keyboard", e);
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault(), J(Q, "keyboard", e);
+			return;
+		}
+		e.key === "End" && (e.preventDefault(), J(Z, "keyboard", e));
+	}, ke = (e) => {
+		de?.(e), !(e.defaultPrevented || x) && J(X(v), "pointer", e);
+	}, $ = {
+		...O,
+		"aria-controls": O["aria-controls"] ?? be,
+		"aria-disabled": x ? !0 : void 0,
+		"aria-orientation": A === "vertical" ? "vertical" : void 0,
+		"aria-valuemax": Math.round(Z * 100),
+		"aria-valuemin": Math.round(Q * 100),
+		"aria-valuenow": Math.round(z * 100),
+		className: t,
+		...x ? { "data-disabled": "" } : {},
+		...L ? { "data-dragging": "" } : {},
+		...h && !B ? { "data-expanded": "" } : {},
+		"data-orientation": A,
+		"data-part": "root",
+		"data-ui": "splitter",
+		onDoubleClick: ke,
+		onKeyDown: Oe,
+		onPointerDown: De,
+		ref: F,
+		role: "separator",
+		style: _e,
+		tabIndex: O.tabIndex ?? 0,
+		children: /* @__PURE__ */ te(ee, { children: [
+			/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				"data-part": "line"
+			}),
+			/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				"data-part": "grip"
+			}),
+			/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				"data-part": "line"
+			})
+		] })
+	};
+	return E === void 0 ? /* @__PURE__ */ u("div", { ...$ }) : E($);
+}
+//#endregion
+export { v as n, _ as r, x as t };

package/dist/splitter.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./splitter-Bg3UgmbV.js";
+export { n as Splitter, e as SplitterDefaultsProvider, t as useSplitterDefaults };

package/dist/stack-BEFavbRs.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stack/stack.tsx
+function t({ align: t, gap: n, justify: r, render: i, ...a }) {
+	let o = {
+		...a,
+		...t === void 0 ? {} : { "data-align": t },
+		...n === void 0 ? {} : { "data-gap": String(n) },
+		...r === void 0 ? {} : { "data-justify": r },
+		"data-part": "root",
+		"data-ui": "stack"
+	};
+	return i === void 0 ? /* @__PURE__ */ e("div", { ...o }) : i(o);
+}
+//#endregion
+export { t };

package/dist/stack.js

@@ -0,0 +1,2 @@
+import { t as e } from "./stack-BEFavbRs.js";
+export { e as Stack };

package/dist/stat-card-BG7uLytP.js

@@ -0,0 +1,244 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { i } from "./skeleton-2LSpg84Z.js";
+import { t as a } from "./visually-hidden-CE6u5JLW.js";
+import { createContext as o, useContext as s, useId as c, useMemo as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { statCardMessages as p } from "@slotted/core/i18n";
+//#region src/stat-card/stat-card-context.tsx
+var m = o(null), h = m.Provider;
+function g() {
+	let e = s(m);
+	if (e === null) throw Error("A stat-card part must be rendered inside <StatCard>.");
+	return e;
+}
+function _(e) {
+	return e === void 0 || Number.isNaN(e) || e === 0 ? "flat" : e > 0 ? "up" : "down";
+}
+function v(e, t) {
+	return e === "flat" || t === "none" ? "neutral" : e === "up" == (t === "up") ? "success" : "danger";
+}
+//#endregion
+//#region src/stat-card/stat-card-defaults.tsx
+var y = o({});
+function b() {
+	return s(y);
+}
+function x({ children: e, ...t }) {
+	let n = b();
+	return /* @__PURE__ */ d(y.Provider, {
+		value: {
+			fill: t.fill ?? n.fill,
+			formatOptions: t.formatOptions ?? n.formatOptions,
+			goodWhen: t.goodWhen ?? n.goodWhen,
+			layout: t.layout ?? n.layout,
+			size: t.size ?? n.size
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/stat-card/stat-card.tsx
+function S({ children: e, delta: t, fill: i, formatOptions: a, goodWhen: o, layout: s, loading: u = !1, locale: f, messages: m, render: g, size: y, status: x = "ready", tone: S, ...C }) {
+	let w = b(), T = n(), E = r(p, m), D = c(), O = {
+		fill: i ?? w.fill ?? "outline",
+		goodWhen: o ?? w.goodWhen ?? "up",
+		layout: s ?? w.layout ?? "inline",
+		size: y ?? w.size ?? "md",
+		locale: f ?? T,
+		formatOptions: a ?? w.formatOptions
+	}, k = S ?? (t === void 0 ? void 0 : v(_(t), O.goodWhen)), A = l(() => ({
+		delta: t,
+		formatOptions: O.formatOptions,
+		goodWhen: O.goodWhen,
+		labelId: D,
+		loading: u,
+		locale: O.locale,
+		t: E,
+		size: O.size,
+		status: x,
+		tone: k
+	}), [
+		t,
+		O.formatOptions,
+		O.goodWhen,
+		D,
+		u,
+		O.locale,
+		E,
+		O.size,
+		x,
+		k
+	]), j = {
+		"aria-labelledby": D,
+		...C,
+		"aria-busy": u || void 0,
+		children: /* @__PURE__ */ d(h, {
+			value: A,
+			children: /* @__PURE__ */ d("div", {
+				"data-part": "body",
+				children: e
+			})
+		}),
+		"data-fill": O.fill,
+		"data-good-when": O.goodWhen,
+		"data-layout": O.layout,
+		"data-loading": u || void 0,
+		"data-part": "root",
+		"data-size": O.size,
+		"data-status": x,
+		"data-tone": k,
+		"data-ui": "stat-card",
+		role: "group"
+	};
+	return g === void 0 ? /* @__PURE__ */ d("div", { ...j }) : g(j);
+}
+//#endregion
+//#region src/stat-card/stat-card-delta.tsx
+function C({ children: n, format: r = "percent", formatOptions: o, goodWhen: s, render: c, tone: p, value: m, ...h }) {
+	let y = g(), b = m ?? y.delta, x = _(b), S = p ?? v(x, s ?? y.goodWhen), C = l(() => {
+		if (typeof b == "number") return new Intl.NumberFormat(y.locale, {
+			signDisplay: "exceptZero",
+			...r === "percent" ? {
+				style: "percent",
+				maximumFractionDigits: 1
+			} : {},
+			...y.formatOptions,
+			...o
+		}).format(b);
+	}, [
+		b,
+		y.locale,
+		y.formatOptions,
+		r,
+		o
+	]);
+	if (y.loading) {
+		let e = {
+			...h,
+			children: /* @__PURE__ */ d(i, { inlineSize: "3.5em" }),
+			"data-part": "delta",
+			"data-tone": "neutral",
+			"data-trend": "flat"
+		};
+		return c === void 0 ? /* @__PURE__ */ d("span", { ...e }) : c(e);
+	}
+	if (y.status !== "ready" || n === void 0 && C === void 0) return null;
+	let w = {
+		...h,
+		children: /* @__PURE__ */ f(u, { children: [
+			/* @__PURE__ */ d("span", {
+				"aria-hidden": "true",
+				"data-part": "indicator",
+				children: /* @__PURE__ */ d(t, {
+					directional: x !== "flat",
+					children: /* @__PURE__ */ d(e, { name: x === "flat" ? "minus" : "trending-up" })
+				})
+			}),
+			/* @__PURE__ */ f(a, { children: [y.t(x), " "] }),
+			n ?? C
+		] }),
+		"data-part": "delta",
+		"data-tone": S,
+		"data-trend": x
+	};
+	return c === void 0 ? /* @__PURE__ */ d("span", { ...w }) : c(w);
+}
+//#endregion
+//#region src/stat-card/stat-card-parts.tsx
+function w({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "header"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("div", { ...n }) : e(n);
+}
+function T({ children: e, render: t, ...n }) {
+	let { labelId: r, loading: a } = g(), o = {
+		id: r,
+		...n,
+		children: a && e === void 0 ? /* @__PURE__ */ d(i, { inlineSize: "8em" }) : e,
+		"data-part": "label"
+	};
+	return t === void 0 ? /* @__PURE__ */ d("span", { ...o }) : t(o);
+}
+function E({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "status"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("span", { ...n }) : e(n);
+}
+function D({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "action"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("span", { ...n }) : e(n);
+}
+function O({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "figure"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("div", { ...n }) : e(n);
+}
+function k({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "unit"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("span", { ...n }) : e(n);
+}
+function A({ children: e, render: t, ...n }) {
+	let { loading: r, status: a } = g();
+	if (!r && a !== "ready") return null;
+	let o = {
+		...n,
+		children: r ? /* @__PURE__ */ d(i, { inlineSize: "10em" }) : e,
+		"data-part": "comparison"
+	};
+	return t === void 0 ? /* @__PURE__ */ d("p", { ...o }) : t(o);
+}
+function j({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "period"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("span", { ...n }) : e(n);
+}
+function M({ children: e, render: t, ...n }) {
+	let { loading: r, status: a } = g();
+	if (!r && a !== "ready") return null;
+	let o = {
+		...n,
+		children: r ? /* @__PURE__ */ d(i, { shape: "block" }) : e,
+		"data-part": "trend"
+	};
+	return t === void 0 ? /* @__PURE__ */ d("div", { ...o }) : t(o);
+}
+function N({ render: e, ...t }) {
+	let { loading: n, status: r } = g();
+	if (n || r === "ready") return null;
+	let i = {
+		...t,
+		"data-part": "message"
+	};
+	return e === void 0 ? /* @__PURE__ */ d("p", { ...i }) : e(i);
+}
+//#endregion
+//#region src/stat-card/stat-card-value.tsx
+function P({ children: e, formatOptions: t, render: n, value: r, ...a }) {
+	let o = g(), s = t ?? o.formatOptions, c = l(() => typeof r == "number" ? new Intl.NumberFormat(o.locale, s).format(r) : r, [
+		r,
+		o.locale,
+		s
+	]), u = o.loading ? /* @__PURE__ */ d(i, { inlineSize: "5ch" }) : o.status === "ready" ? e ?? c : o.t("empty"), f = {
+		...a,
+		children: u,
+		"data-part": "value"
+	};
+	return n === void 0 ? /* @__PURE__ */ d("span", { ...f }) : n(f);
+}
+//#endregion
+export { _, w as a, j as c, k as d, C as f, v as g, b as h, O as i, E as l, x as m, D as n, T as o, S as p, A as r, N as s, P as t, M as u, g as v };

package/dist/stat-card.js

@@ -0,0 +1,2 @@
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g, v as _ } from "./stat-card-BG7uLytP.js";
+export { f as StatCard, u as StatCardAction, p as StatCardComparison, l as StatCardDefaultsProvider, i as StatCardDelta, s as StatCardFigure, t as StatCardHeader, d as StatCardLabel, m as StatCardMessage, n as StatCardPeriod, c as StatCardStatus, g as StatCardTrend, r as StatCardUnit, h as StatCardValue, a as toneOf, e as trendOf, _ as useStatCard, o as useStatCardDefaults };

package/dist/status-indicator-BOjpXkU5.js

@@ -0,0 +1,73 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+/* empty css                         */
+import { createContext as r, useContext as i, useMemo as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { statusIndicatorMessages as l } from "@slotted/core/i18n";
+//#region src/status-indicator/status-indicator-defaults.tsx
+var u = r({});
+function d() {
+	return i(u);
+}
+function f({ children: e, live: t, mark: n, size: r }) {
+	let i = d(), o = a(() => ({
+		live: t ?? i.live,
+		mark: n ?? i.mark,
+		size: r ?? i.size
+	}), [
+		t,
+		n,
+		r,
+		i
+	]);
+	return /* @__PURE__ */ s(u.Provider, {
+		value: o,
+		children: e
+	});
+}
+//#endregion
+//#region src/status-indicator/status-indicator.constants.ts
+var p = "neutral", m = {
+	neutral: "circle",
+	info: "circle-info",
+	success: "circle-check",
+	warning: "circle-alert",
+	danger: "circle-x",
+	unknown: "circle-question"
+}, h = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+};
+function g({ children: r, label: i, live: a, mark: u, messages: f, pulse: g = !1, render: _, role: v, size: y, status: b = p, ...x }) {
+	let S = d(), C = n(l, f), w = {
+		live: a ?? S.live ?? "off",
+		mark: u ?? S.mark ?? "dot",
+		size: y ?? S.size ?? "md"
+	}, T = i ?? C(b), E = {
+		...x,
+		children: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			"data-part": "mark",
+			children: w.mark === "icon" ? /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s(e, { name: m[b] }) }) : null
+		}), /* @__PURE__ */ s("span", {
+			"data-part": "label",
+			children: r ?? /* @__PURE__ */ s("span", {
+				"data-part": "announcement",
+				"data-ui": "visually-hidden",
+				children: T
+			})
+		})] }),
+		"data-mark": w.mark,
+		"data-part": "root",
+		"data-pulse": g || void 0,
+		"data-size": w.size,
+		"data-status": b,
+		"data-ui": "status-indicator",
+		...v === void 0 ? {} : { role: v },
+		...v === void 0 && h[w.live] !== void 0 ? { role: h[w.live] } : {}
+	};
+	return _ === void 0 ? /* @__PURE__ */ s("span", { ...E }) : _(E);
+}
+//#endregion
+export { d as i, p as n, f as r, g as t };

package/dist/status-indicator.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./status-indicator-BOjpXkU5.js";
+export { t as STATUS_INDICATOR_DEFAULT_STATUS, r as StatusIndicator, n as StatusIndicatorDefaultsProvider, e as useStatusIndicatorDefaults };