@ryuzaki13/react-foundation-ui 0.1.0

package/dist/chunks/slider-34wxzKkG.js

@@ -0,0 +1,695 @@
+import { n as e, r as t } from "./popover-C79P5bm2.js";
+import { t as n } from "./ui.module-BisoTevy.js";
+import { a as r, c as i, o as a, r as o } from "./Input-Ce2HXBUc.js";
+import { l as s } from "./picker-Cj4RnJh6.js";
+import { cn as c } from "@ryuzaki13/react-foundation-lib/utils";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useCallback as f, useEffect as p, useEffectEvent as ee, useMemo as m, useRef as h, useState as g } from "react";
+import { toFiniteNumber as _ } from "@ryuzaki13/react-foundation-lib/formatters";
+import { findClosestNumberScaleMark as v, findClosestNumberScaleMarkByPercent as y, getNumberScaleMarkPercent as b, offsetNumberScaleValue as x, percentToNumberScaleValue as S, prepareNumberScaleMarks as C, resolveNumberScaleBounds as w, snapNumberScaleValue as T, snapNumberScaleValueToStep as E, valueToNumberScalePercent as D } from "@ryuzaki13/react-foundation-lib/number-scale";
+import "@ryuzaki13/react-foundation-lib/range-output";
+//#region src/slider/lib/sliderMath.ts
+function O(e, t, n) {
+	return C(e, t, n);
+}
+function k(e, t, n) {
+	let r = t.findIndex((t) => t.value === e.value);
+	return b(Math.max(0, r), t, n.min, n.max, n.marksPosition);
+}
+function A(e, t) {
+	let { min: n, max: r } = w(t.min, t.max), i = O(t.marks, n, r);
+	if (i.length > 0) {
+		let a = i.find((t) => t.value === e) ?? v(e, i);
+		if (a) return k(a, i, {
+			...t,
+			min: n,
+			max: r,
+			marks: i
+		});
+	}
+	return D(e, n, r);
+}
+function j(e, t) {
+	let { min: n, max: r } = w(t.min, t.max);
+	return y(e, O(t.marks, n, r), n, r, t.marksPosition);
+}
+function M(e, t) {
+	return T(e, t);
+}
+function N(e, t) {
+	let { min: n, max: r } = w(t.min, t.max);
+	return e === void 0 ? n : M(e, {
+		...t,
+		min: n,
+		max: r
+	});
+}
+function P(e) {
+	if (e) return !Object.hasOwn(e, "outputValue") || e.outputValue === void 0 ? e.value : e.outputValue;
+}
+function F(e, t, n) {
+	let r = t.filter((t) => P(t) === e);
+	if (r.length) return e === null ? n === 0 ? r[0] : r[r.length - 1] : r[0];
+}
+function I(e, t, n) {
+	let r = F(e, t, n);
+	if (r) return r;
+	let i, a = Infinity;
+	for (let n of t) {
+		let t = P(n);
+		if (typeof t != "number" || !Number.isFinite(t)) continue;
+		let r = Math.abs(e - t);
+		r < a && (i = n, a = r);
+	}
+	return i;
+}
+function L(e, t, n, r) {
+	if (e === null) return null;
+	let { min: i, max: a } = w(r.min, r.max), o = O(r.marks, i, a), s = Number.isFinite(e) ? e : t;
+	if (o.length > 0) {
+		let e = I(s, o, n), r = P(e);
+		return r === void 0 ? e?.value ?? t : r;
+	}
+	return E(s, i, a, r.step);
+}
+function R(e, t) {
+	let { min: n, max: r } = w(t.min, t.max);
+	if (!e) return [null, null];
+	let i = L(e[0], n, 0, {
+		...t,
+		min: n,
+		max: r
+	}), a = L(e[1], r, 1, {
+		...t,
+		min: n,
+		max: r
+	});
+	return i !== null && a !== null && i > a ? [a, i] : [i, a];
+}
+function z(e, t, n, r) {
+	if (e === null) return t;
+	let { min: i, max: a } = w(r.min, r.max), o = O(r.marks, i, a);
+	return o.length > 0 ? (F(e, o, n) ?? (typeof e == "number" ? I(e, o, n) : void 0))?.value ?? t : E(e, i, a, r.step);
+}
+function te(e, t) {
+	let { min: n, max: r } = w(t.min, t.max), i = R(e, {
+		...t,
+		min: n,
+		max: r
+	}), a = z(i[0], n, 0, {
+		...t,
+		min: n,
+		max: r
+	}), o = z(i[1], r, 1, {
+		...t,
+		min: n,
+		max: r
+	});
+	return a <= o ? [a, o] : [o, a];
+}
+function B(e, t) {
+	let { min: n, max: r } = w(t.min, t.max), i = O(t.marks, n, r);
+	if (i.length > 0) {
+		let t = v(e, i), n = P(t);
+		return n === void 0 ? t?.value ?? e : n;
+	}
+	return E(e, n, r, t.step);
+}
+function V(e, t) {
+	let [n, r] = t;
+	return Math.abs(e - n) <= Math.abs(e - r) ? 0 : 1;
+}
+function H(e, t) {
+	let { min: n, max: r } = w(t.min, t.max);
+	return Array.isArray(e) ? {
+		startPercent: A(e[0], {
+			...t,
+			min: n,
+			max: r
+		}),
+		endPercent: A(e[1], {
+			...t,
+			min: n,
+			max: r
+		})
+	} : {
+		startPercent: 0,
+		endPercent: A(e, {
+			...t,
+			min: n,
+			max: r
+		})
+	};
+}
+var U = {
+	slider: "fA7zne",
+	sliderCompact: "TMbaqW",
+	trackShell: "_77qn1L",
+	track: "cxJQqh",
+	rail: "gg-atO",
+	fill: "bTLJZl",
+	thumb: "vDAmRy",
+	marks: "iNrV0y",
+	mark: "PpaxP2",
+	compactMark: "_9K78Fi",
+	markDot: "vzEDBe",
+	markLabel: "_0OWJh0",
+	popoverContent: "Mk4xi2",
+	rangeInputControl: "SL0IDQ",
+	rangeSegmentInput: "mdezg5",
+	rangeSeparator: "a4R18g"
+};
+//#endregion
+//#region src/slider/Slider.tsx
+function ne(e) {
+	return e === "ArrowLeft" || e === "ArrowDown" ? -1 : e === "ArrowRight" || e === "ArrowUp" ? 1 : e === "PageDown" ? -10 : e === "PageUp" ? 10 : null;
+}
+function W(e, t) {
+	return !!e && e[0] === t[0] && e[1] === t[1];
+}
+function re(e, t) {
+	return e === null ? t === 0 ? "-∞" : "∞" : String(e);
+}
+function ie(e, t) {
+	return t.find((t) => t.value === e)?.label ?? String(e);
+}
+function ae(e) {
+	return typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("span", {
+		className: "textNoWrap",
+		children: e
+	}) : e;
+}
+function G(t) {
+	let { min: n, max: r, step: o, marks: s, marksPosition: l = "value", marksDisplay: f = "compact", className: ee, error: _, onClearError: v, label: y, description: b, disabled: C, size: T } = t, { min: E, max: D } = m(() => w(n, r), [n, r]), M = m(() => O(s, E, D), [
+		s,
+		E,
+		D
+	]), P = m(() => ({
+		min: E,
+		max: D,
+		step: o,
+		marks: M,
+		marksPosition: l
+	}), [
+		E,
+		D,
+		o,
+		M,
+		l
+	]), F = t.mode === "range", I = F ? void 0 : N(t.value, P), L = F ? R(t.value, P) : void 0, z = F ? te(t.value, P) : void 0, G = F ? z : [I], K = H(F ? z : I, P), q = h(null), J = h([]), Y = h(null), X = h(null), [oe, Z] = g(null), { controlId: Q, labelId: se, descriptionId: ce, errorId: le, describedBy: ue } = i({
+		hasLabel: y != null,
+		hasDescription: !!b,
+		hasError: !!_
+	}), de = (e) => {
+		C || t.mode !== "single" || t.value !== void 0 && t.value === e || (t.onChange(e), v?.());
+	}, fe = (e) => {
+		C || t.mode !== "range" || W(t.value, e) || (t.onChange(e), v?.());
+	}, $ = (e, n) => {
+		if (!C) {
+			if (t.mode === "range") {
+				let [t, r] = z, [i, a] = L, o = R(n === 0 ? [B(Math.min(e, r), P), a] : [i, B(Math.max(e, t), P)], P);
+				fe(o);
+				return;
+			}
+			de(N(e, P));
+		}
+	}, pe = (e) => {
+		let t = q.current?.getBoundingClientRect();
+		if (!t) return E;
+		let n = (e - t.left) / t.width * 100;
+		return (M.length > 0 ? j(n, P) : void 0)?.value ?? S(n, E, D);
+	}, me = h($), he = h(pe);
+	p(() => {
+		me.current = $, he.current = pe;
+	}), p(() => {
+		let e = (e) => {
+			X.current !== null && e && e.pointerId !== X.current || (X.current = null, Y.current = null, Z(null));
+		}, t = (e) => {
+			Y.current !== null && (X.current !== null && e.pointerId !== X.current || me.current(he.current(e.clientX), Y.current));
+		};
+		return window.addEventListener("pointermove", t), window.addEventListener("pointerup", e), window.addEventListener("pointercancel", e), () => {
+			window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", e), window.removeEventListener("pointercancel", e);
+		};
+	}, []);
+	let ge = (e, t) => {
+		X.current = e, Y.current = t, Z(t), J.current[t]?.focus();
+	}, _e = (e) => {
+		if (C) return;
+		e.preventDefault();
+		let t = pe(e.clientX), n = F ? V(t, z) : 0;
+		$(t, n), ge(e.pointerId, n);
+	}, ve = (e) => (t) => {
+		C || (t.preventDefault(), t.stopPropagation(), ge(t.pointerId, e));
+	}, ye = (e) => (t) => {
+		if (C) return;
+		let n = F && e === 1 ? z[0] : E, r = F && e === 0 ? z[1] : D, i = ne(t.key);
+		if (t.key === "Home") {
+			t.preventDefault(), $(n, e);
+			return;
+		}
+		if (t.key === "End") {
+			t.preventDefault(), $(r, e);
+			return;
+		}
+		if (i === null) return;
+		t.preventDefault();
+		let a = G[e], o = x(a, i, P, n, r);
+		$(o, e);
+	}, be = (e) => {
+		if (C) return;
+		let t = F ? V(e, z) : 0;
+		$(e, t), J.current[t]?.focus();
+	}, xe = (e, t) => {
+		if (F) {
+			let n = L[t];
+			return M.find((t) => t.value === e)?.label ?? re(n, t);
+		}
+		return ie(e, M);
+	};
+	return /* @__PURE__ */ u(a, {
+		label: y,
+		description: b,
+		disabled: C,
+		className: ee,
+		size: T,
+		error: _,
+		controlId: Q,
+		labelId: se,
+		descriptionId: ce,
+		errorId: le,
+		children: /* @__PURE__ */ d("div", {
+			id: Q,
+			className: c(U.slider, f === "compact" && U.sliderCompact),
+			children: [/* @__PURE__ */ u("div", {
+				className: U.trackShell,
+				children: /* @__PURE__ */ d("div", {
+					ref: q,
+					"data-slot": "track",
+					className: U.track,
+					role: "presentation",
+					onPointerDown: _e,
+					children: [
+						/* @__PURE__ */ u("div", { className: U.rail }),
+						/* @__PURE__ */ u("div", {
+							"data-slot": "fill",
+							className: U.fill,
+							style: {
+								left: `${K.startPercent}%`,
+								width: `${K.endPercent - K.startPercent}%`
+							}
+						}),
+						f === "compact" && M.map((t) => {
+							let n = k(t, M, P), r = F ? t.value >= z[0] && t.value <= z[1] : t.value <= I;
+							return /* @__PURE__ */ u(e, {
+								tooltip: !0,
+								placement: "top",
+								content: ae(t.label),
+								children: /* @__PURE__ */ u("button", {
+									type: "button",
+									"data-slot": "mark",
+									"data-active": r ? "" : void 0,
+									className: U.compactMark,
+									style: { left: `${n}%` },
+									"aria-label": t.ariaLabel,
+									disabled: C,
+									onClick: () => be(t.value),
+									children: /* @__PURE__ */ u("span", {
+										className: U.markDot,
+										"aria-hidden": "true"
+									})
+								})
+							}, t.value);
+						}),
+						G.map((t, n) => {
+							let r = xe(t, n);
+							return /* @__PURE__ */ u(e, {
+								tooltip: !0,
+								placement: "top",
+								content: ae(r),
+								openDelay: 0,
+								closeDelay: 100,
+								children: /* @__PURE__ */ u("button", {
+									ref: (e) => {
+										J.current[n] = e;
+									},
+									type: "button",
+									role: "slider",
+									"data-slot": "thumb",
+									"data-thumb-index": n,
+									"data-dragging": oe === n ? "" : void 0,
+									className: U.thumb,
+									disabled: C,
+									style: { left: `${A(t, P)}%` },
+									"aria-disabled": C || void 0,
+									"aria-orientation": "horizontal",
+									"aria-valuemin": F && n === 1 ? z[0] : E,
+									"aria-valuemax": F && n === 0 ? z[1] : D,
+									"aria-valuenow": t,
+									"aria-valuetext": typeof r == "string" || typeof r == "number" ? String(r) : void 0,
+									"aria-labelledby": se,
+									"aria-describedby": ue,
+									"aria-label": se ? void 0 : F ? n === 0 ? "Минимальное значение" : "Максимальное значение" : "Значение",
+									onPointerDown: ve(n),
+									onKeyDown: ye(n)
+								})
+							}, n);
+						})
+					]
+				})
+			}), f === "full" && M.length > 0 && /* @__PURE__ */ u("div", {
+				className: U.marks,
+				children: M.map((e) => /* @__PURE__ */ d("button", {
+					type: "button",
+					"data-slot": "mark",
+					"data-active": (F ? e.value >= z[0] && e.value <= z[1] : e.value <= I) ? "" : void 0,
+					className: U.mark,
+					style: { left: `${k(e, M, P)}%` },
+					"aria-label": e.ariaLabel,
+					disabled: C,
+					onClick: () => be(e.value),
+					children: [/* @__PURE__ */ u("span", {
+						className: U.markDot,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ u("span", {
+						className: U.markLabel,
+						children: e.label
+					})]
+				}, e.value))
+			})]
+		})
+	});
+}
+function K(e) {
+	return /* @__PURE__ */ u(G, {
+		...e,
+		mode: "single",
+		marksDisplay: "compact"
+	});
+}
+function q(e) {
+	return /* @__PURE__ */ u(G, {
+		...e,
+		mode: "range",
+		marksDisplay: "compact"
+	});
+}
+//#endregion
+//#region src/slider/SliderInput.tsx
+function J({ open: e, disabled: n, setOpen: r }) {
+	return /* @__PURE__ */ u(t.Trigger, {
+		passive: !0,
+		children: /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u(s, {
+			open: e,
+			disabled: n,
+			openAriaLabel: "Открыть слайдер",
+			closeAriaLabel: "Закрыть слайдер",
+			onToggleMouseDown: (e) => e.preventDefault(),
+			onToggleClick: () => r((e) => !e)
+		}) })
+	});
+}
+function Y(e, t) {
+	let n = R(e, t);
+	return {
+		start: n[0] === null ? "-∞" : String(n[0]),
+		end: n[1] === null ? "∞" : String(n[1])
+	};
+}
+function X(e, t) {
+	let n = e.trim();
+	return n === "" || n === t ? null : _(n);
+}
+function oe(e, t, n) {
+	let r = t.filter((t) => P(t) === e);
+	if (r.length) return e === null && n === "end" ? r[r.length - 1] : r[0];
+}
+function Z(e, t) {
+	return e?.readonlyLabel?.trim() ? e.readonlyLabel.trim() : typeof e?.label == "string" || typeof e?.label == "number" ? String(e.label) : t === null ? "" : String(t);
+}
+function Q(e, t, n) {
+	return Z(oe(e, t, n), e);
+}
+function se(e, t, n) {
+	let [r, i] = e, a = r === null, o = i === null;
+	return a && o ? n ?? "" : a ? `Меньше ${Q(i, t, "end")}` : o ? `Больше ${Q(r, t, "start")}` : r === i ? `Равно ${Q(r, t, "start")}` : `От ${Q(r, t, "start")} до ${Q(i, t, "end")}`;
+}
+function ce({ value: e, onChange: n, min: i, max: a, step: o, marks: s, marksPosition: c = "value", className: l, error: h, onClearError: v, label: y, description: b, placeholder: x, disabled: S, size: C }) {
+	let { min: T, max: E } = m(() => w(i, a), [i, a]), D = m(() => O(s, T, E), [
+		s,
+		T,
+		E
+	]), k = m(() => ({
+		min: T,
+		max: E,
+		step: o,
+		marks: D,
+		marksPosition: c
+	}), [
+		T,
+		E,
+		o,
+		D,
+		c
+	]), A = N(e, k), [j, M] = g(!1), [P, F] = g(String(A)), I = ee((e) => {
+		F(e);
+	});
+	p(() => {
+		I(String(A));
+	}, [A]);
+	let L = f(() => {
+		if (S) {
+			F(String(A));
+			return;
+		}
+		let t = _(P);
+		if (t === void 0) {
+			F(String(A));
+			return;
+		}
+		let r = N(t, k);
+		e !== r && (n(r), v?.()), F(String(r));
+	}, [
+		S,
+		P,
+		A,
+		n,
+		v,
+		k,
+		e
+	]);
+	return /* @__PURE__ */ d(t, {
+		open: j,
+		onOpenChange: M,
+		children: [/* @__PURE__ */ u(r, {
+			label: y,
+			description: b,
+			placeholder: x,
+			disabled: S,
+			size: C,
+			className: l,
+			error: h,
+			value: P,
+			onChange: F,
+			onBlur: L,
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.preventDefault(), L());
+			},
+			endAdornmentWidth: "var(--control-height)",
+			endAdornment: J({
+				open: j,
+				disabled: S,
+				setOpen: M
+			})
+		}), /* @__PURE__ */ u(t.Content, {
+			background: "primary",
+			children: /* @__PURE__ */ u("div", {
+				className: U.popoverContent,
+				children: /* @__PURE__ */ u(G, {
+					mode: "single",
+					min: T,
+					max: E,
+					step: o,
+					marks: D,
+					marksPosition: c,
+					marksDisplay: "full",
+					value: e,
+					onChange: (e) => {
+						n(e), F(String(e)), v?.();
+					},
+					disabled: S
+				})
+			})
+		})]
+	});
+}
+function le({ value: e, onChange: r, min: s, max: h, step: _, marks: v, marksPosition: y = "value", className: b, error: x, onClearError: S, label: C, description: T, readonlyValueText: E, placeholder: D, disabled: k, size: A }) {
+	let { min: j, max: M } = m(() => w(s, h), [s, h]), N = m(() => O(v, j, M), [
+		v,
+		j,
+		M
+	]), P = m(() => ({
+		min: j,
+		max: M,
+		step: _,
+		marks: N,
+		marksPosition: y
+	}), [
+		j,
+		M,
+		_,
+		N,
+		y
+	]), F = m(() => R(e, P), [P, e]), I = m(() => Y(F, P), [F, P]), [L, z] = g(!1), [te, B] = g(I.start), [V, H] = g(I.end), [ne, W] = g(F), re = ee((e, t) => {
+		B(e), H(t);
+	});
+	p(() => {
+		L || re(I.start, I.end);
+	}, [
+		I.start,
+		I.end,
+		F,
+		L
+	]);
+	let { controlId: ie, labelId: ae, descriptionId: K, errorId: q, describedBy: oe } = i({
+		hasLabel: C != null,
+		hasDescription: !!T,
+		hasError: !!x
+	}), Z = f(() => {
+		B(I.start), H(I.end);
+	}, [I.end, I.start]), Q = f(() => {
+		if (k) {
+			Z();
+			return;
+		}
+		let e = X(te, "-∞"), t = X(V, "∞");
+		if (e === void 0 || t === void 0) {
+			Z();
+			return;
+		}
+		let n = R([e, t], P);
+		ue(F, n) || (r(n), S?.());
+		let i = Y(n, P);
+		B(i.start), H(i.end), W(n);
+	}, [
+		k,
+		V,
+		te,
+		F,
+		r,
+		S,
+		Z,
+		P
+	]), ce = f((e) => {
+		let t = R(e, P);
+		ue(F, t) || (r(t), S?.());
+		let n = Y(t, P);
+		B(n.start), H(n.end), W(t);
+	}, [
+		F,
+		r,
+		S,
+		P
+	]), le = (e) => {
+		!L && e && (W(F), B(I.start), H(I.end)), L && !e && !k && ce(ne), z(e);
+	}, de = (e) => {
+		e.key === "Enter" && (e.preventDefault(), Q());
+	}, fe = (e) => {
+		let t = R(e, P);
+		W(t);
+		let n = Y(t, P);
+		B(n.start), H(n.end);
+	}, $ = E ? se(L ? ne : F, N, D) : void 0;
+	return /* @__PURE__ */ d(t, {
+		open: L,
+		onOpenChange: le,
+		children: [/* @__PURE__ */ u(a, {
+			label: C,
+			description: T,
+			disabled: k,
+			className: b,
+			size: A,
+			error: x,
+			controlId: ie,
+			labelId: ae,
+			descriptionId: K,
+			errorId: q,
+			children: /* @__PURE__ */ u(o, {
+				endAdornmentWidth: "var(--control-height)",
+				endAdornment: J({
+					open: L,
+					disabled: k,
+					setOpen: (e) => {
+						le(typeof e == "function" ? e(L) : e);
+					}
+				}),
+				children: ({ controlClassName: e }) => /* @__PURE__ */ u("div", {
+					id: ie,
+					className: c(n.uiInputControlFake, U.rangeInputControl, e),
+					"data-invalid": x ? "" : void 0,
+					"data-disabled": k || void 0,
+					role: "group",
+					"aria-invalid": !!x || void 0,
+					"aria-label": typeof C == "string" ? C : "Диапазон",
+					"aria-labelledby": typeof C == "string" ? void 0 : ae,
+					"aria-describedby": oe,
+					children: E ? /* @__PURE__ */ u("span", {
+						className: c("flexEllipsis", !$ && n.uiPlaceholder),
+						children: $ || D
+					}) : /* @__PURE__ */ d(l, { children: [
+						/* @__PURE__ */ u("input", {
+							type: "text",
+							inputMode: "decimal",
+							className: U.rangeSegmentInput,
+							value: te,
+							disabled: k,
+							"aria-label": "Начало диапазона",
+							onChange: (e) => B(e.target.value),
+							onBlur: Q,
+							onKeyDown: de
+						}),
+						/* @__PURE__ */ u("span", {
+							className: U.rangeSeparator,
+							"data-disabled": k || void 0,
+							children: "-"
+						}),
+						/* @__PURE__ */ u("input", {
+							type: "text",
+							inputMode: "decimal",
+							className: U.rangeSegmentInput,
+							value: V,
+							disabled: k,
+							"aria-label": "Конец диапазона",
+							onChange: (e) => H(e.target.value),
+							onBlur: Q,
+							onKeyDown: de
+						})
+					] })
+				})
+			})
+		}), /* @__PURE__ */ u(t.Content, {
+			background: "primary",
+			children: /* @__PURE__ */ u("div", {
+				className: U.popoverContent,
+				children: /* @__PURE__ */ u(G, {
+					mode: "range",
+					min: j,
+					max: M,
+					step: _,
+					marks: N,
+					marksPosition: y,
+					marksDisplay: "full",
+					value: ne,
+					onChange: fe,
+					disabled: k
+				})
+			})
+		})]
+	});
+}
+function ue(e, t) {
+	return e[0] === t[0] && e[1] === t[1];
+}
+//#endregion
+export { q as i, le as n, K as r, ce as t };
+
+//# sourceMappingURL=slider-34wxzKkG.js.map