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

package/dist/side-navigation.js

@@ -1,2 +1,2 @@
-import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./side-navigation-BnUKTrtd.js";
+import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./side-navigation-Clp3d76j.js";
 export { r as SIDE_NAVIGATION_FALLBACK, t as SIDE_NAVIGATION_ROW_SELECTOR, y as SideNavigation, _ as SideNavigationActions, f as SideNavigationCount, b as SideNavigationDefaultsProvider, h as SideNavigationDescription, l as SideNavigationDivider, n as SideNavigationEnd, p as SideNavigationGroup, g as SideNavigationIcon, i as SideNavigationItem, u as SideNavigationLabel, v as SideNavigationLink, a as SideNavigationList, o as SideNavigationSection, m as SideNavigationSectionLabel, d as SideNavigationSkeleton, c as SideNavigationTrigger, x as useSideNavigation, e as useSideNavigationDefaults, s as useSideNavigationItem };

package/dist/skeleton-DhMVeVtn.js

@@ -0,0 +1,149 @@
+import { r as e } from "./i18n-DpW8lqJ1.js";
+/* empty css                         */
+/* empty css                  */
+import { keyedProps as t } from "@slotted/core/selector-key";
+import { createContext as n, useContext as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { skeletonMessages as d } from "@slotted/core/i18n";
+import { initialLoadingVisibility as f, nextLoadingVisibility as p } from "@slotted/core/loading";
+//#region src/skeleton/skeleton-defaults.tsx
+var m = n({});
+function h() {
+	return r(m);
+}
+function g({ children: e, ...t }) {
+	let n = h();
+	return /* @__PURE__ */ l(m.Provider, {
+		value: {
+			animation: t.animation ?? n.animation,
+			delay: t.delay ?? n.delay,
+			lastLineSize: t.lastLineSize ?? n.lastLineSize,
+			live: t.live ?? n.live,
+			loadedLabel: t.loadedLabel ?? n.loadedLabel,
+			minDuration: t.minDuration ?? n.minDuration
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/skeleton/skeleton-region-context.tsx
+var _ = n(null), v = _.Provider;
+function y() {
+	return r(_);
+}
+//#endregion
+//#region src/skeleton/skeleton.tsx
+function b({ blockSize: e, inlineSize: t }, n) {
+	return e === void 0 && t === void 0 ? n : {
+		...n,
+		...e === void 0 ? {} : { "--slotted-skeleton-block-size": x(e) },
+		...t === void 0 ? {} : { "--slotted-skeleton-inline-size": x(t) }
+	};
+}
+var x = (e) => typeof e == "number" ? `${e}px` : e;
+function S({ animation: e, "aria-hidden": n, blockSize: r, children: i, inlineSize: a, loading: o, render: s, shape: c = "text", size: u = "md", style: d, ...f }) {
+	let p = h(), m = y(), g = o ?? m?.loading ?? !0, _ = { animation: e ?? m?.animation ?? p.animation ?? "shimmer" }, v = t({
+		...f,
+		"aria-hidden": g ? n ?? "true" : n,
+		children: i,
+		"data-animation": _.animation,
+		"data-loading": g || void 0,
+		"data-part": "root",
+		"data-shape": c,
+		"data-size": u,
+		"data-ui": "skeleton",
+		inert: g || void 0,
+		style: b({
+			blockSize: r,
+			inlineSize: a
+		}, d)
+	});
+	return s === void 0 ? /* @__PURE__ */ l("span", { ...v }) : s(v);
+}
+//#endregion
+//#region src/skeleton/use-loading-visibility.ts
+function C({ delay: e, loading: t, minDuration: n }) {
+	let r = o(f), [, a] = s(0), c = p({
+		delay: e,
+		loading: t,
+		minDuration: n,
+		now: Date.now(),
+		state: r.current
+	});
+	r.current = c.state;
+	let { wait: l } = c;
+	return i(() => {
+		if (l === null) return;
+		let e = setTimeout(() => a((e) => e + 1), l);
+		return () => clearTimeout(e);
+	}, [l, t]), c.state.visible;
+}
+//#endregion
+//#region src/skeleton/skeleton-region.tsx
+function w({ animation: n, children: r, delay: s, live: f, loadedLabel: p, loading: m = !0, messages: g, minDuration: _, onReveal: y, render: b, ...x }) {
+	let S = h(), w = e(d, g), T = {
+		animation: n ?? S.animation ?? "shimmer",
+		delay: s ?? S.delay ?? 0,
+		label: w("label"),
+		live: f ?? S.live ?? "polite",
+		loadedLabel: p ?? S.loadedLabel,
+		minDuration: _ ?? S.minDuration ?? 0
+	}, E = C({
+		delay: T.delay,
+		loading: m,
+		minDuration: T.minDuration
+	}), D = o(E);
+	i(() => {
+		D.current && !E && y?.(), D.current = E;
+	}, [E, y]);
+	let O = a(() => ({
+		animation: T.animation,
+		loading: E
+	}), [T.animation, E]), k = E ? T.label : T.loadedLabel ?? "", A = t({
+		...x,
+		"aria-busy": E || void 0,
+		children: /* @__PURE__ */ u(c, { children: [T.live === "off" ? null : /* @__PURE__ */ l("span", {
+			"data-part": "announcement",
+			"data-part-announcement": "",
+			"data-ui": "visually-hidden",
+			"data-ui-visually-hidden": "",
+			role: "status",
+			children: k
+		}), r] }),
+		"data-animation": T.animation,
+		"data-loading": E || void 0,
+		"data-part": "region",
+		"data-ui": "skeleton"
+	});
+	return /* @__PURE__ */ l(v, {
+		value: O,
+		children: b === void 0 ? /* @__PURE__ */ l("div", { ...A }) : b(A)
+	});
+}
+//#endregion
+//#region src/skeleton/skeleton-text.tsx
+function T({ animation: e, "aria-hidden": n, inlineSize: r, lastLineSize: i, lines: a = 3, loading: o, render: s, style: c, ...u }) {
+	let d = h(), f = y(), p = o ?? f?.loading ?? !0, m = e ?? f?.animation ?? d.animation ?? "shimmer", g = i ?? d.lastLineSize, _ = t({
+		...u,
+		"aria-hidden": p ? n ?? "true" : n,
+		children: p ? Array.from({ length: Math.max(1, Math.trunc(a)) }, (e, t) => /* @__PURE__ */ l("span", {
+			"data-part": "line",
+			"data-part-line": ""
+		}, t)) : null,
+		"data-animation": m,
+		"data-loading": p || void 0,
+		"data-part": "text",
+		"data-ui": "skeleton",
+		inert: p || void 0,
+		style: E(g, b({ inlineSize: r }, c))
+	});
+	return s === void 0 ? /* @__PURE__ */ l("div", { ..._ }) : s(_);
+}
+function E(e, t) {
+	return e === void 0 ? t : {
+		...t,
+		"--slotted-skeleton-last-line-size": e
+	};
+}
+//#endregion
+export { g as a, S as i, w as n, h as o, C as r, T as t };

package/dist/skeleton.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, t as i } from "./skeleton-2LSpg84Z.js";
+import { a as e, i as t, n, o as r, t as i } from "./skeleton-DhMVeVtn.js";
 export { t as Skeleton, e as SkeletonDefaultsProvider, n as SkeletonRegion, i as SkeletonText, r as useSkeletonDefaults };

package/dist/slider-Q4U838QA.js

@@ -0,0 +1,264 @@
+import { n as e } from "./i18n-DpW8lqJ1.js";
+import { b as t } from "./field-DKA-qsCV.js";
+import { keyedProps as n, withSelectorKey as r } from "@slotted/core/selector-key";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useCallback as o, useContext as s, useEffect as ee, useId as te, useImperativeHandle as ne, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as re, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createNumberFormat as ie } from "@slotted/core/number";
+import { fractionAtPoint as ae, fractionOfValue as p, moveThumb as oe, nearestThumb as se, normaliseValues as m, sameValues as ce, thumbBounds as h, valueAtFraction as le } from "@slotted/core/slider";
+//#region src/slider/slider-defaults.tsx
+var g = a({
+	orientation: "horizontal",
+	size: "md",
+	valueLabel: "auto"
+});
+function _() {
+	return s(g);
+}
+function ue({ children: e, ...t }) {
+	let n = _();
+	return /* @__PURE__ */ d(g.Provider, {
+		value: {
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size,
+			valueLabel: t.valueLabel ?? n.valueLabel
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/slider/slider.tsx
+var v = (e) => Array.isArray(e) ? [...e] : [e], de = (e) => ({ "--_position": e * 100 }), fe = (e, t) => ({
+	"--_start": e * 100,
+	"--_end": t * 100
+}), pe = (e) => e.map((e) => typeof e == "number" ? { value: e } : e);
+function me({ "aria-describedby": a, "aria-invalid": s, "aria-label": g, "aria-required": ue, className: me, defaultValue: y = 0, disabled: he, form: ge, format: b, handle: _e, id: ve, invalid: ye, largeStep: be, locale: xe, marks: x, max: S = 100, min: C = 0, minStepsBetween: w = 0, name: Se, onKeyDown: Ce, onValueChange: T, onValueCommit: E, orientation: we, origin: D = "min", readOnly: Te, ref: O, render: k, size: Ee, step: A = 1, style: De, thumbLabels: Oe, value: j, valueLabel: ke, ...Ae }) {
+	let M = t(), N = _(), je = e(), Me = te(), P = l(null), F = l([]), Ne = Ee ?? M?.size ?? N.size, I = we ?? N.orientation, Pe = ke ?? N.valueLabel, Fe = xe ?? je, L = he ?? M?.disabled, R = Te ?? M?.readOnly, Ie = ye ?? M?.invalid, Le = L === !0 || R === !0, z = c(() => ({
+		min: C,
+		max: S,
+		step: A
+	}), [
+		S,
+		C,
+		A
+	]), B = be ?? A * 10, Re = b === void 0 ? "" : JSON.stringify(b), ze = c(() => ie({
+		locale: Fe,
+		...b === void 0 ? {} : { options: b }
+	}), [
+		Fe,
+		Re,
+		b
+	]), Be = Array.isArray(j ?? y), V = o((e) => Be ? e : e[0] ?? C, [Be, C]), [Ve, He] = u(() => m(v(y), z)), H = j !== void 0, U = c(() => H ? m(v(j), z) : Ve, [
+		H,
+		Ve,
+		z,
+		j
+	]), Ue = M?.registerControl;
+	ee(() => Ue?.(), [Ue]);
+	let We = o((e, t, n) => {
+		let r = i({
+			...H ? { controlled: U } : {},
+			initial: U,
+			equals: ce,
+			onRequest: (e) => T?.(V(e.value), e)
+		}).request(e, t, n);
+		return r && He(e), r;
+	}, [
+		H,
+		T,
+		V,
+		U
+	]), W = o((e, t) => {
+		E?.(V(e), t);
+	}, [E, V]), G = c(() => x === void 0 ? [] : pe(x), [x]), K = o((e) => G.find((t) => t.value === e && t.label !== void 0)?.label ?? ze.format(e), [ze, G]), Ge = D === "min" ? C : D === "max" ? S : D, q = U[0] ?? C, Ke = U[U.length - 1] ?? C, qe = U.length > 1 ? q : Math.min(Ge, q), Je = U.length > 1 ? Ke : Math.max(Ge, q), [J, Y] = u(null), X = o(() => P.current !== null && getComputedStyle(P.current).direction === "rtl", []), Z = o((e, t, n, r) => {
+		let i = oe({
+			...z,
+			values: U,
+			index: e,
+			next: t,
+			minStepsBetween: w
+		});
+		return i === U ? U : (We(i, n, r), i);
+	}, [
+		w,
+		We,
+		z,
+		U
+	]), Ye = o((e) => {
+		let t = P.current;
+		if (t === null) return null;
+		let n = t.getBoundingClientRect(), r = ae({
+			x: e.clientX,
+			y: e.clientY
+		}, {
+			rect: n,
+			orientation: I,
+			rtl: X()
+		});
+		return le(r, z);
+	}, [
+		X,
+		I,
+		z
+	]), Xe = (e) => {
+		if (Le || e.button !== 0) return;
+		let t = Ye(e);
+		if (t === null) return;
+		let n = se(U, t);
+		n !== -1 && (e.preventDefault(), F.current[n]?.focus(), e.currentTarget.setPointerCapture(e.pointerId), Y(n), Z(n, t, "pointer", e));
+	}, Ze = (e) => {
+		if (J === null) return;
+		let t = Ye(e);
+		t !== null && Z(J, t, "pointer", e);
+	}, Qe = (e) => {
+		J !== null && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), Y(null), W(U, "pointer"));
+	}, $e = (e) => (t) => {
+		if (Ce?.(t), t.defaultPrevented || Le) return;
+		let n = t.shiftKey ? B : A, r = X() ? -1 : 1, i = h({
+			...z,
+			values: U,
+			index: e,
+			minStepsBetween: w
+		}), a = U[e] ?? C, o = (n, r) => {
+			t.preventDefault();
+			let i = Z(e, a + n * r, "keyboard", t);
+			W(i, "keyboard");
+		};
+		switch (t.key) {
+			case "ArrowRight":
+				o(r, n);
+				return;
+			case "ArrowLeft":
+				o(-r, n);
+				return;
+			case "ArrowUp":
+				o(1, n);
+				return;
+			case "ArrowDown":
+				o(-1, n);
+				return;
+			case "PageUp":
+				o(1, B);
+				return;
+			case "PageDown":
+				o(-1, B);
+				return;
+			case "Home": {
+				t.preventDefault();
+				let n = Z(e, i.min, "keyboard", t);
+				W(n, "keyboard");
+				return;
+			}
+			case "End": {
+				t.preventDefault();
+				let n = Z(e, i.max, "keyboard", t);
+				W(n, "keyboard");
+				return;
+			}
+		}
+	};
+	ne(_e, () => ({ focusThumb: (e = 0) => F.current[e]?.focus() }), []), ee(() => {
+		let e = F.current[0]?.form;
+		if (e == null) return;
+		let t = () => He(m(v(y), z));
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [y, z]);
+	let Q = ve ?? M?.ids.control ?? Me, et = G.length === 0 ? void 0 : G.some((e) => e.label !== void 0) ? "labelled" : "ticks", tt = /* @__PURE__ */ f(re, { children: [Pe === "none" ? null : /* @__PURE__ */ d("output", {
+		"data-part": "output",
+		"data-part-output": "",
+		htmlFor: Q,
+		children: U.map((e) => K(e)).join(" – ")
+	}), /* @__PURE__ */ d("div", {
+		"data-part": "control",
+		"data-part-control": "",
+		onPointerCancel: Qe,
+		onPointerDown: Xe,
+		onPointerMove: Ze,
+		onPointerUp: Qe,
+		children: /* @__PURE__ */ f("div", {
+			"data-part": "track",
+			"data-part-track": "",
+			ref: P,
+			children: [
+				/* @__PURE__ */ d("div", {
+					"data-part": "indicator",
+					"data-part-indicator": "",
+					style: fe(p(qe, z), p(Je, z))
+				}),
+				G.map((e) => /* @__PURE__ */ d("span", {
+					"data-part": "mark",
+					"data-part-mark": "",
+					style: de(p(e.value, z)),
+					...e.value === C ? { "data-edge": "start" } : {},
+					...e.value === S ? { "data-edge": "end" } : {},
+					children: e.label === void 0 ? null : /* @__PURE__ */ d("span", {
+						"data-part": "mark-label",
+						"data-part-mark-label": "",
+						children: e.label
+					})
+				}, e.value)),
+				U.map((e, t) => {
+					let n = h({
+						...z,
+						values: U,
+						index: t,
+						minStepsBetween: w
+					});
+					return /* @__PURE__ */ f("div", {
+						"data-index": t,
+						"data-part": "thumb",
+						"data-part-thumb": "",
+						style: de(p(e, z)),
+						...J === t ? { "data-active": "" } : {},
+						children: [/* @__PURE__ */ d("input", {
+							...r(Ae, "part", "input"),
+							"aria-describedby": [a, M?.describedBy].filter(Boolean).join(" ") || void 0,
+							"aria-invalid": s ?? (Ie === !0 || void 0),
+							"aria-label": Oe?.[t] ?? (U.length > 1 ? void 0 : g),
+							"aria-orientation": I,
+							"aria-readonly": R === !0 || void 0,
+							"aria-required": ue ?? (M?.required === !0 || void 0),
+							"aria-valuetext": K(e),
+							disabled: L,
+							form: ge,
+							id: t === 0 ? Q : `${Q}-${t}`,
+							max: n.max,
+							min: n.min,
+							name: Se,
+							onKeyDown: $e(t),
+							ref: (e) => {
+								F.current[t] = e, t === 0 && (typeof O == "function" ? O(e) : O != null && (O.current = e));
+							},
+							step: A,
+							type: "range",
+							value: e,
+							onChange: () => void 0
+						}), /* @__PURE__ */ d("span", {
+							"aria-hidden": "true",
+							"data-part": "bubble",
+							"data-part-bubble": "",
+							children: K(e)
+						})]
+					}, t);
+				})
+			]
+		})
+	})] }), $ = n({
+		children: tt,
+		className: me,
+		style: De,
+		...L === !0 ? { "data-disabled": "" } : {},
+		...J === null ? {} : { "data-dragging": "" },
+		...Ie === !0 ? { "data-invalid": "" } : {},
+		...et === void 0 ? {} : { "data-marks": et },
+		...R === !0 ? { "data-readonly": "" } : {},
+		"data-orientation": I,
+		"data-part": "root",
+		"data-size": Ne,
+		"data-ui": "slider",
+		"data-value-label": Pe
+	});
+	return k === void 0 ? /* @__PURE__ */ d("div", { ...$ }) : k($);
+}
+//#endregion
+export { ue as n, _ as r, me as t };

package/dist/slider.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./slider-fp7kyg-6.js";
+import { n as e, r as t, t as n } from "./slider-Q4U838QA.js";
 export { n as Slider, e as SliderDefaultsProvider, t as useSliderDefaults };

package/dist/sparkline-BpEgC_sE.js

@@ -0,0 +1,139 @@
+import { n as e, r as t } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as n } from "@slotted/core/selector-key";
+import { createContext as r, useContext as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { sparklineMessages as f } from "@slotted/core/i18n";
+import { SPARKLINE_STEPS as p, describeSparkline as m, layoutSparkline as h, observeSparklineBox as g, sparklineInset as _ } from "@slotted/core/sparkline";
+//#region src/sparkline/sparkline-defaults.tsx
+var v = r({});
+function y() {
+	return i(v);
+}
+function b({ children: e, ...t }) {
+	let n = y();
+	return /* @__PURE__ */ u(v.Provider, {
+		value: {
+			area: t.area ?? n.area,
+			curve: t.curve ?? n.curve,
+			formatOptions: t.formatOptions ?? n.formatOptions,
+			marker: t.marker ?? n.marker
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/sparkline/sparkline.tsx
+var x = 2, S = 2;
+function C({ area: r, curve: i, data: v, description: b, formatOptions: C, label: w, locale: T, marker: E, max: D, messages: O, min: k, ref: A, reference: j, render: M, series: N, size: P = "md", tone: F, type: I = "line", valueFormatter: L, ...R }) {
+	let z = y(), B = e(), V = t(f, O), H = {
+		area: r ?? z.area ?? !1,
+		curve: i ?? z.curve ?? "linear",
+		marker: E ?? z.marker ?? !0,
+		locale: T ?? B,
+		formatOptions: C ?? z.formatOptions
+	}, U = s(null), [W, G] = c(null);
+	a(() => {
+		let e = U.current;
+		if (e === null) return;
+		let t = g(e, G);
+		return () => t.destroy();
+	}, []);
+	let K = p[P], q = W?.width || K.width, J = W?.height || K.height, Y = o(() => h({
+		data: v,
+		width: q,
+		height: J,
+		inset: _(P, I, H.marker),
+		type: I,
+		curve: H.curve,
+		area: H.area,
+		min: k,
+		max: D,
+		reference: j,
+		gap: x,
+		radius: S
+	}), [
+		v,
+		q,
+		J,
+		P,
+		I,
+		H.marker,
+		H.curve,
+		H.area,
+		k,
+		D,
+		j
+	]), X = o(() => {
+		if (L) return L;
+		let e = new Intl.NumberFormat(H.locale, H.formatOptions);
+		return (t) => e.format(t);
+	}, [
+		L,
+		H.locale,
+		H.formatOptions
+	]), Z = b ?? m(v, {
+		t: V,
+		format: X,
+		label: w
+	}), Q = n({
+		...R,
+		"aria-label": Z,
+		children: /* @__PURE__ */ d("svg", {
+			"aria-hidden": "true",
+			"data-part": "plot",
+			"data-part-plot": "",
+			focusable: "false",
+			preserveAspectRatio: "none",
+			viewBox: `0 0 ${q} ${J}`,
+			children: [
+				Y.area ? /* @__PURE__ */ u("path", {
+					d: Y.area,
+					"data-part": "area",
+					"data-part-area": ""
+				}) : null,
+				Y.line ? /* @__PURE__ */ u("path", {
+					d: Y.line,
+					"data-part": "line",
+					"data-part-line": ""
+				}) : null,
+				Y.bars.map((e, t) => /* @__PURE__ */ u("path", {
+					d: e.path,
+					"data-current": t === Y.bars.length - 1 ? "" : void 0,
+					"data-part": "bar",
+					"data-part-bar": ""
+				}, e.index)),
+				Y.reference === null ? null : /* @__PURE__ */ u("line", {
+					"data-part": "reference",
+					"data-part-reference": "",
+					x1: 0,
+					x2: q,
+					y1: Y.reference,
+					y2: Y.reference
+				}),
+				H.marker && I === "line" && Y.marker ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("path", {
+					d: `M${Y.marker.x} ${Y.marker.y}h0.001`,
+					"data-part": "ring",
+					"data-part-ring": ""
+				}), /* @__PURE__ */ u("path", {
+					d: `M${Y.marker.x} ${Y.marker.y}h0.001`,
+					"data-part": "marker",
+					"data-part-marker": ""
+				})] }) : null
+			]
+		}),
+		"data-curve": H.curve,
+		"data-part": "root",
+		"data-series": N === void 0 ? void 0 : String(N),
+		"data-size": P,
+		"data-tone": F,
+		"data-type": I,
+		"data-ui": "sparkline",
+		ref: (e) => {
+			U.current = e, typeof A == "function" ? A(e) : A != null && (A.current = e);
+		},
+		role: "img"
+	});
+	return M === void 0 ? /* @__PURE__ */ u("span", { ...Q }) : M(Q);
+}
+//#endregion
+export { b as n, y as r, C as t };

package/dist/sparkline.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./sparkline-rY7HIFE4.js";
+import { n as e, r as t, t as n } from "./sparkline-BpEgC_sE.js";
 export { n as Sparkline, e as SparklineDefaultsProvider, t as useSparklineDefaults };