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

package/dist/number-field-J_koud1r.js

@@ -0,0 +1,342 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { b as i } from "./field-BJh5HI7w.js";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useImperativeHandle as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { numberFieldMessages as ee } from "@slotted/core/i18n";
+import { clamp as te } from "@slotted/core/measure";
+import { STEP_REPEAT_DELAY as ne, STEP_REPEAT_DELAY_COARSE as re, STEP_REPEAT_INTERVAL as ie, createNumberFormat as ae, createScrub as oe, snapToStep as se, stepNumber as ce } from "@slotted/core/number";
+//#region src/number-field/number-field-defaults.tsx
+var _ = o({
+	clamp: "blur",
+	formatOn: "change",
+	size: "md",
+	stepper: "stacked",
+	variant: "outline"
+});
+function v() {
+	return c(_);
+}
+function le({ children: e, ...t }) {
+	let n = v();
+	return /* @__PURE__ */ h(_.Provider, {
+		value: {
+			clamp: t.clamp ?? n.clamp,
+			formatOn: t.formatOn ?? n.formatOn,
+			size: t.size ?? n.size,
+			stepper: t.stepper ?? n.stepper,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/number-field/number-field.tsx
+var ue = o(null);
+function de(e) {
+	return e === 0 ? "keyboard" : "pointer";
+}
+function fe({ "aria-describedby": o, "aria-invalid": c, "aria-required": _, className: le, clamp: fe, defaultValue: y = null, disabled: pe, end: me, form: he, format: b, formatOn: ge, handle: _e, id: x, inputMode: ve, invalid: ye, largeStep: be, locale: xe, max: S, messages: Se, min: C, name: Ce, onBlur: we, onChange: Te, onKeyDown: Ee, onValueChange: De, readOnly: Oe, ref: w, render: ke, size: Ae, smallStep: je, snapToStep: T = !1, start: E, step: D = 1, stepFrom: O, stepper: Me, style: Ne, value: k, variant: Pe, wheel: A = !1, ...Fe }) {
+	let j = i(), M = v(), Ie = r(ee, Se), Le = n(), N = p(null), Re = Ae ?? j?.size ?? M.size, ze = Pe ?? M.variant, P = Me ?? M.stepper, F = fe ?? M.clamp, Be = ge ?? M.formatOn, Ve = xe ?? Le, I = pe ?? j?.disabled, L = Oe ?? j?.readOnly, He = b === void 0 ? "" : JSON.stringify(b), R = f(() => ae({
+		locale: Ve,
+		...b === void 0 ? {} : { options: b }
+	}), [
+		Ve,
+		He,
+		b
+	]), [Ue, We] = m(y), z = k === void 0 ? Ue : k, Ge = ye ?? (F === "none" && z !== null && (C !== void 0 && z < C || S !== void 0 && z > S) || j?.invalid), [B, V] = m(() => R.format(z)), H = be ?? D * 10, Ke = je ?? D / 10, qe = j?.registerControl;
+	l(() => qe?.(), [qe]);
+	let U = s((e, t, n) => {
+		let r = a({
+			controlled: k,
+			initial: z,
+			onRequest: (e) => De?.(e.value, e)
+		}).request(e, t, n);
+		return r && We(e), r;
+	}, [
+		z,
+		De,
+		k
+	]), W = s((e, t) => {
+		V(R.format(t ? e : z));
+	}, [z, R]), Je = s((e, t) => {
+		let n = R.parse(B);
+		n !== null && (n = R.parse(R.format(n)) ?? n, T && (n = se(n, D, C ?? 0)), F !== "none" && (n = te(n, C ?? -Infinity, S ?? Infinity))), W(n, U(n, e, t));
+	}, [
+		R,
+		S,
+		C,
+		U,
+		F,
+		W,
+		T,
+		D,
+		B
+	]), G = s((e, t, n, r, i = R.parse(B)) => {
+		let a = ce({
+			value: i,
+			direction: e,
+			step: t,
+			...C === void 0 ? {} : { min: C },
+			...S === void 0 ? {} : { max: S },
+			...O === void 0 ? {} : { stepFrom: O },
+			snapToStep: T
+		});
+		return W(a, U(a, n, r)), a;
+	}, [
+		R,
+		S,
+		C,
+		U,
+		W,
+		T,
+		O,
+		B
+	]);
+	u(_e, () => ({
+		increment: () => G(1, D, "programmatic", void 0),
+		decrement: () => G(-1, D, "programmatic", void 0)
+	}), [G, D]), l(() => {
+		let e = N.current?.form;
+		if (e == null) return;
+		let t = () => {
+			We(y), V(R.format(y));
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [y, R]);
+	let Ye = p(B);
+	Ye.current = B, l(() => {
+		k !== void 0 && (Object.is(k, R.parse(Ye.current)) || V(R.format(k)));
+	}, [R, k]), l(() => {
+		let e = N.current;
+		if (e === null) return;
+		let t = (t) => {
+			if (t.defaultPrevented || t.isComposing || t.inputType.startsWith("delete")) return;
+			let n = e.selectionStart ?? e.value.length, r = e.selectionEnd ?? e.value.length, i = e.value.slice(0, n) + (t.data ?? "") + e.value.slice(r);
+			if (!R.isPartial(i)) {
+				t.preventDefault();
+				return;
+			}
+			if (F !== "strict") return;
+			let a = R.parse(i);
+			a !== null && (C !== void 0 && a < C || S !== void 0 && a > S) && t.preventDefault();
+		};
+		return e.addEventListener("beforeinput", t), () => e.removeEventListener("beforeinput", t);
+	}, [
+		R,
+		S,
+		C,
+		F
+	]), l(() => {
+		let e = N.current;
+		if (e === null || !A || I === !0 || L === !0) return;
+		let t = (t) => {
+			document.activeElement === e && t.deltaY !== 0 && (t.preventDefault(), G(t.deltaY < 0 ? 1 : -1, D, "pointer", t));
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, [
+		G,
+		I,
+		L,
+		D,
+		A
+	]);
+	let K = p(null);
+	d(() => {
+		let e = K.current;
+		if (e === null) return;
+		K.current = null;
+		let t = N.current;
+		t !== null && t.ownerDocument.activeElement === t && t.setSelectionRange(e, e);
+	});
+	let q = p({}), J = s(() => {
+		window.clearTimeout(q.current.delay), window.clearInterval(q.current.interval), q.current = {};
+	}, []);
+	l(() => J, [J]);
+	let Y = R.parse(B), Xe = S !== void 0 && Y !== null && Y >= S, Ze = C !== void 0 && Y !== null && Y <= C, X = I === !0 || L === !0, Qe = (e) => (t) => {
+		if (t.button !== 0) return;
+		t.preventDefault(), N.current?.focus(), G(e, D, de(t.detail), t), J();
+		let n = t.pointerType === "touch" ? re : ne;
+		q.current.delay = window.setTimeout(() => {
+			q.current.interval = window.setInterval(() => {
+				G(e, D, "pointer", void 0);
+			}, ie);
+		}, n);
+	}, [$e, et] = m(!1), Z = p(null), tt = {
+		inert: X,
+		begin: (e, t) => {
+			if (e.button !== 0 || X) return;
+			e.preventDefault(), N.current?.focus(), e.currentTarget.setPointerCapture?.(e.pointerId);
+			let n = N.current;
+			Z.current = {
+				travel: oe({
+					clientX: e.clientX,
+					...t === void 0 ? {} : { sensitivity: t },
+					rtl: n !== null && getComputedStyle(n).direction === "rtl"
+				}),
+				from: R.parse(B)
+			}, et(!0);
+		},
+		drag: (e) => {
+			let t = Z.current;
+			if (t === null) return;
+			let n = t.travel.steps(e.clientX);
+			if (n === 0) return;
+			let r = e.shiftKey ? H : e.altKey ? Ke : D;
+			t.from = G(n > 0 ? 1 : -1, r * Math.abs(n), "pointer", e, t.from);
+		},
+		end: () => {
+			Z.current !== null && (Z.current = null, et(!1));
+		}
+	}, nt = (e) => {
+		if (Ee?.(e), e.defaultPrevented || X) return;
+		let t = e.shiftKey ? H : e.altKey ? Ke : D;
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault(), G(1, t, "keyboard", e);
+				return;
+			case "ArrowDown":
+				e.preventDefault(), G(-1, t, "keyboard", e);
+				return;
+			case "PageUp":
+				e.preventDefault(), G(1, H, "keyboard", e);
+				return;
+			case "PageDown":
+				e.preventDefault(), G(-1, H, "keyboard", e);
+				return;
+			case "Home":
+				if (C === void 0 || e.ctrlKey || e.metaKey) return;
+				e.preventDefault(), W(C, U(C, "keyboard", e));
+				return;
+			case "End":
+				if (S === void 0 || e.ctrlKey || e.metaKey) return;
+				e.preventDefault(), W(S, U(S, "keyboard", e));
+				return;
+			case "Enter":
+				Je("keyboard", e);
+				return;
+		}
+	}, rt = C === void 0 || C < 0 ? "text" : R.maximumFractionDigits > 0 ? "decimal" : "numeric", Q = (n) => {
+		let r = n === 1 ? "increment" : "decrement";
+		return /* @__PURE__ */ h("button", {
+			"aria-controls": x ?? j?.ids.control,
+			"aria-label": Ie(r),
+			"data-part": r,
+			disabled: X || (n === 1 ? Xe : Ze),
+			onLostPointerCapture: J,
+			onPointerCancel: J,
+			onPointerDown: Qe(n),
+			onPointerLeave: J,
+			onPointerUp: J,
+			tabIndex: -1,
+			type: "button",
+			children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: P === "split" ? n === 1 ? "plus" : "minus" : "chevron-down" }) })
+		}, r);
+	}, it = /* @__PURE__ */ h("input", {
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: !1,
+		...Fe,
+		"aria-describedby": [o, j?.describedBy].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": c ?? (Ge === !0 || void 0),
+		"aria-required": _ ?? (j?.required === !0 || void 0),
+		"aria-valuemax": S,
+		"aria-valuemin": C,
+		"aria-valuenow": Y ?? void 0,
+		"aria-valuetext": B === "" ? void 0 : B,
+		"data-part": "input",
+		disabled: I,
+		id: x ?? j?.ids.control,
+		inputMode: ve ?? rt,
+		onBlur: (e) => {
+			we?.(e), Je("blur", e);
+		},
+		onChange: (e) => {
+			Te?.(e);
+			let t = e.currentTarget, n = t.value, r = e.nativeEvent;
+			if (Be !== "change" || r.isComposing) {
+				V(n), U(R.parse(n), "keyboard", e);
+				return;
+			}
+			let i = t.selectionStart ?? n.length, a = r.inputType?.startsWith("delete") === !0 ? R.deleteAcrossSeparator(B, {
+				text: n,
+				caret: i
+			}, r.inputType === "deleteContentForward" ? 1 : -1) : {
+				text: n,
+				caret: i
+			}, o = R.formatWhileTyping(a);
+			t.value !== o.text && (t.value = o.text), t.ownerDocument.activeElement === t && t.setSelectionRange(o.caret, o.caret), V(o.text), K.current = o.caret, U(R.parse(o.text), "keyboard", e);
+		},
+		onKeyDown: nt,
+		readOnly: L,
+		ref: (e) => {
+			N.current = e, typeof w == "function" ? w(e) : w != null && (w.current = e);
+		},
+		role: "spinbutton",
+		type: "text",
+		value: B
+	}), $ = P === "none" ? null : P === "split" ? [Q(-1), Q(1)] : [/* @__PURE__ */ g("span", {
+		"data-part": "stepper",
+		children: [Q(1), Q(-1)]
+	}, "stepper")], at = {
+		children: /* @__PURE__ */ g(ue.Provider, {
+			value: tt,
+			children: [
+				P === "split" ? $?.[0] : null,
+				E === void 0 ? null : /* @__PURE__ */ h("span", {
+					"data-part": "start",
+					children: E
+				}),
+				it,
+				me === void 0 ? null : /* @__PURE__ */ h("span", {
+					"data-part": "end",
+					children: me
+				}),
+				P === "split" ? $?.[1] : $,
+				Ce === void 0 ? null : /* @__PURE__ */ h("input", {
+					form: he,
+					name: Ce,
+					type: "hidden",
+					value: z === null ? "" : String(z)
+				})
+			]
+		}),
+		className: le,
+		style: Ne,
+		...I === !0 ? { "data-disabled": "" } : {},
+		...Ge === !0 ? { "data-invalid": "" } : {},
+		...L === !0 ? { "data-readonly": "" } : {},
+		...$e ? { "data-scrubbing": "" } : {},
+		"data-part": "root",
+		"data-size": Re,
+		"data-stepper": P,
+		"data-ui": "number-field",
+		"data-variant": ze
+	};
+	return ke === void 0 ? /* @__PURE__ */ h("div", { ...at }) : ke(at);
+}
+function y({ "aria-hidden": e = !0, onLostPointerCapture: t, onPointerCancel: n, onPointerDown: r, onPointerMove: i, onPointerUp: a, sensitivity: o, ...s }) {
+	let l = c(ue);
+	if (l === null) throw Error("NumberFieldScrub belongs in the start or end of a NumberField.");
+	let [u, d] = m(!1), f = (e) => (t) => {
+		e?.(t), d(!1), l.end();
+	};
+	return /* @__PURE__ */ h("span", {
+		...s,
+		"aria-hidden": e,
+		"data-part": "scrub",
+		"data-scrubbing": u ? "" : void 0,
+		onLostPointerCapture: f(t),
+		onPointerCancel: f(n),
+		onPointerDown: (e) => {
+			r?.(e), !(e.defaultPrevented || l.inert || e.button !== 0) && (l.begin(e, o), d(!0));
+		},
+		onPointerMove: (e) => {
+			i?.(e), l.drag(e);
+		},
+		onPointerUp: f(a)
+	});
+}
+//#endregion
+export { v as i, y as n, le as r, fe as t };

package/dist/number-field.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./number-field-J_koud1r.js";
+export { r as NumberField, n as NumberFieldDefaultsProvider, t as NumberFieldScrub, e as useNumberFieldDefaults };

package/dist/otp-input-Bf8JUiVR.js

@@ -0,0 +1,205 @@
+import { b as e } from "./field-BJh5HI7w.js";
+import { createControllable as t } from "@slotted/core/state";
+import { createContext as n, useContext as r, useEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { currentSlots as u, normalizeSelection as ee, sanitize as d, spreadPlaceholder as te } from "@slotted/core/otp";
+//#region src/otp-input/otp-input-defaults.tsx
+var f = n({
+	attached: !1,
+	length: 6,
+	placeholder: "",
+	size: "md",
+	type: "numeric",
+	variant: "outline"
+});
+function p() {
+	return r(f);
+}
+function m({ children: e, ...t }) {
+	let n = p();
+	return /* @__PURE__ */ c(f.Provider, {
+		value: {
+			attached: t.attached ?? n.attached,
+			length: t.length ?? n.length,
+			placeholder: t.placeholder ?? n.placeholder,
+			size: t.size ?? n.size,
+			type: t.type ?? n.type,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/otp-input/otp-input.tsx
+var ne = "•";
+function re(e, t) {
+	return t === void 0 ? [e] : t.reduce((e, t) => e + t, 0) === e && t.every((e) => e > 0) ? [...t] : [e];
+}
+function h({ "aria-describedby": n, "aria-invalid": r, "aria-required": f, attached: m, autoComplete: h = "one-time-code", autoSubmit: g = !1, className: ie, defaultValue: ae, disabled: _, groups: v, id: y, inputMode: b, invalid: oe, length: se, mask: x = !1, onBlur: ce, onChange: le, onComplete: S, onDragStart: ue, onFocus: de, onRejected: fe, onValueChange: pe, pattern: me, placeholder: he, readOnly: ge, ref: C, render: w, size: _e, spellCheck: ve = !1, style: ye, transform: be, type: xe, value: T, variant: E, webOtp: D = !1, ...O }) {
+	let k = e(), A = p(), j = a(null), M = se ?? A.length, N = xe ?? A.type, Se = _e ?? k?.size ?? A.size, Ce = E ?? A.variant, we = m ?? A.attached, Te = he ?? A.placeholder, P = _ ?? k?.disabled, F = ge ?? k?.readOnly, I = oe ?? k?.invalid, L = {
+		length: M,
+		pattern: me,
+		transform: be,
+		type: N
+	}, R = d(ae ?? "", L).value, [Ee, z] = o(R), [B, V] = o(null), [H, U] = o(!1), W = a(null), G = (T ?? Ee).slice(0, M), K = k?.registerControl;
+	i(() => K?.(), [K]), i(() => {
+		let e = j.current?.form;
+		if (e == null) return;
+		let t = () => z(R);
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [R]);
+	let q = (e, n, r) => {
+		t({
+			controlled: T,
+			initial: G,
+			onRequest: (e) => pe?.(e.value, e)
+		}).request(e, n, r) && z(e);
+	}, J = a(null);
+	i(() => {
+		if (G.length !== M) {
+			J.current = null;
+			return;
+		}
+		J.current !== G && (J.current = G, S?.(G), g && j.current?.form?.requestSubmit());
+	}, [
+		g,
+		G,
+		M,
+		S
+	]);
+	let Y = () => {
+		let e = j.current;
+		if (e === null) return;
+		let t = e.selectionStart ?? e.value.length, n = e.selectionEnd ?? t, r = ee({
+			start: t,
+			end: n,
+			valueLength: e.value.length,
+			length: M,
+			previous: W.current ?? void 0
+		});
+		r !== null && e.setSelectionRange(r.start, r.end, r.direction);
+		let i = r ?? {
+			start: t,
+			end: n
+		};
+		W.current = i, V(i);
+	};
+	i(() => {
+		if (!H) return;
+		let e = () => {
+			document.activeElement === j.current && Y();
+		};
+		return document.addEventListener("selectionchange", e, { capture: !0 }), () => document.removeEventListener("selectionchange", e, { capture: !0 });
+	}, [H, M]), i(() => {
+		if (!D || typeof window > "u" || !("OTPCredential" in window)) return;
+		let e = new AbortController(), t = j.current?.form ?? null, n = () => e.abort();
+		return t?.addEventListener("submit", n), navigator.credentials.get({
+			otp: { transport: ["sms"] },
+			signal: e.signal
+		}).then((e) => {
+			let t = e?.code;
+			if (t === void 0) return;
+			let n = d(t, L).value, r = j.current;
+			T === void 0 && r !== null && (r.value = n), q(n, "programmatic", e);
+		}).catch(() => void 0), () => {
+			t?.removeEventListener("submit", n), e.abort();
+		};
+	}, [D]);
+	let De = (e) => {
+		let t = e.currentTarget, { rejected: n, value: r } = d(t.value, L);
+		if (n !== "" && fe?.(n, e), r !== t.value) {
+			let e = Math.min(t.selectionStart ?? r.length, r.length);
+			t.value = r, t.setSelectionRange(e, e);
+		}
+		let i = t.selectionStart ?? r.length;
+		W.current = {
+			start: i,
+			end: i
+		}, le?.(e), q(r, "keyboard", e), Y();
+	}, Oe = (e) => {
+		de?.(e), U(!0);
+		let t = e.currentTarget, n = t.value.length;
+		t.setSelectionRange(Math.min(n, M - 1), n), W.current = null, Y();
+	}, ke = (e) => {
+		ce?.(e), U(!1), V(null), W.current = null;
+	}, Ae = (e) => {
+		let t = j.current;
+		if (t === null || t.disabled || typeof document.elementsFromPoint != "function") return;
+		let n = document.elementsFromPoint(e.clientX, e.clientY).find((t) => t instanceof HTMLElement && t.dataset.part === "slot" && t.closest("[data-ui='otp-input']") === e.currentTarget);
+		if (n === void 0) return;
+		e.preventDefault();
+		let r = Math.min(Number(n.dataset.index ?? 0), t.value.length);
+		t.focus();
+		let i = r < t.value.length ? r + 1 : r;
+		W.current = null, t.setSelectionRange(r, i), Y();
+	}, je = /* @__PURE__ */ c("input", {
+		...O,
+		"aria-describedby": [n, k?.describedBy].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": r ?? (I === !0 || void 0),
+		"aria-required": f ?? (k?.required === !0 || void 0),
+		autoComplete: h,
+		"data-part": "input",
+		disabled: P,
+		id: y ?? k?.ids.control,
+		inputMode: b ?? (N === "numeric" ? "numeric" : "text"),
+		maxLength: M,
+		onBlur: ke,
+		onChange: De,
+		onDragStart: (e) => {
+			ue?.(e), e.preventDefault();
+		},
+		onFocus: Oe,
+		readOnly: F,
+		ref: (e) => {
+			j.current = e, typeof C == "function" ? C(e) : C != null && (C.current = e);
+		},
+		spellCheck: ve,
+		type: x ? "password" : "text",
+		...T === void 0 ? { defaultValue: R } : { value: G }
+	}), X = te(Te, M), Me = new Set(H && B !== null ? u({
+		...B,
+		length: M,
+		valueLength: G.length
+	}) : []), Z = [], Q = 0;
+	for (let [e, t] of re(M, v).entries()) {
+		e > 0 && Z.push(/* @__PURE__ */ c("div", {
+			"aria-hidden": "true",
+			"data-part": "separator"
+		}, `separator-${e}`));
+		let n = [];
+		for (let e = 0; e < t; e += 1, Q += 1) {
+			let e = G[Q] ?? "", t = e === "" ? "" : x ? ne : e;
+			n.push(/* @__PURE__ */ c("div", {
+				"data-index": Q,
+				"data-part": "slot",
+				...Me.has(Q) ? { "data-current": "" } : {},
+				...t === "" && X[Q] !== "" ? { "data-placeholder": X[Q] } : {},
+				children: t
+			}, Q));
+		}
+		Z.push(/* @__PURE__ */ c("div", {
+			"aria-hidden": "true",
+			"data-part": "group",
+			children: n
+		}, `group-${e}`));
+	}
+	let $ = {
+		children: /* @__PURE__ */ l(s, { children: [je, Z] }),
+		className: ie,
+		onPointerDown: Ae,
+		style: ye,
+		...we ? { "data-attached": "" } : {},
+		...G.length === M ? { "data-complete": "" } : {},
+		...P === !0 ? { "data-disabled": "" } : {},
+		...I === !0 ? { "data-invalid": "" } : {},
+		...x ? { "data-mask": "" } : {},
+		...F === !0 ? { "data-readonly": "" } : {},
+		"data-part": "root",
+		"data-size": Se,
+		"data-ui": "otp-input",
+		"data-variant": Ce
+	};
+	return w === void 0 ? /* @__PURE__ */ c("div", { ...$ }) : w($);
+}
+//#endregion
+export { m as n, p as r, h as t };

package/dist/otp-input.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./otp-input-Bf8JUiVR.js";
+export { n as OtpInput, e as OtpInputDefaultsProvider, t as useOtpInputDefaults };