@ryuzaki13/react-foundation-ui 1.4.4 → 1.5.0

package/dist/slider/index.js

@@ -1,7 +1,7 @@
-import { n as e, r as t } from "../chunks/popover-CGU3MlsH.js";
-import { t as n } from "../chunks/ui.module-BisoTevy.js";
-import { i as r, l as i, o as a, s as o } from "../chunks/input-Bp6_Ucgr.js";
-import { l as s } from "../chunks/picker-e6IsrMUG.js";
+import { n as e, r as t } from "../chunks/popover-BTT7zSqx.js";
+import { t as n } from "../chunks/ui.module-BfaIVBba.js";
+import { i as r, l as i, o as a, s as o } from "../chunks/input-BWCaVC06.js";
+import { l as s } from "../chunks/picker-Mdb73_uW.js";
 import { useCallback as c, useEffect as ee, useEffectEvent as l, useMemo as u, useRef as d, useState as f } from "react";
 import { cn as te } from "@ryuzaki13/react-foundation-lib/utils";
 import { Fragment as ne, jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -146,6 +146,7 @@ var V = {
 	sliderCompact: "TMbaqW",
 	trackShell: "_77qn1L",
 	track: "cxJQqh",
+	tooltipReference: "-X13t0",
 	rail: "gg-atO",
 	fill: "bTLJZl",
 	thumb: "vDAmRy",
@@ -179,6 +180,14 @@ function W(e) {
 		children: e
 	}) : e;
 }
+function oe({ position: e, children: t }) {
+	return /* @__PURE__ */ p("span", {
+		"data-slot": "slider-tooltip-reference",
+		className: V.tooltipReference,
+		style: { left: `${e}%` },
+		children: t
+	});
+}
 function G(t) {
 	let { min: n, max: r, step: a, marks: s, marksPosition: c = "value", marksDisplay: l = "compact", className: ne, error: h, onClearError: g, label: _, description: v, disabled: x, size: C } = t, { min: w, max: T } = u(() => S(n, r), [n, r]), A = u(() => E(s, w, T), [
 		s,
@@ -196,51 +205,51 @@ function G(t) {
 		a,
 		A,
 		c
-	]), N = t.mode === "range", P = N ? void 0 : j(t.value, M), F = N ? I(t.value, M) : void 0, L = N ? re(t.value, M) : void 0, G = N ? L : [P], K = B(N ? L : P, M), q = d(null), J = d([]), Y = d(null), X = d(null), [oe, Z] = f(null), { controlId: Q, labelId: se, descriptionId: ce, errorId: le, describedBy: ue } = i({
+	]), N = t.mode === "range", P = N ? void 0 : j(t.value, M), F = N ? I(t.value, M) : void 0, L = N ? re(t.value, M) : void 0, G = N ? L : [P], K = B(N ? L : P, M), se = d(null), q = d([]), J = d(null), Y = d(null), [X, Z] = f(null), { controlId: Q, labelId: ce, descriptionId: le, errorId: ue, describedBy: de } = i({
 		hasLabel: _ != null,
 		hasDescription: !!v,
 		hasError: !!h
-	}), de = (e) => {
+	}), fe = (e) => {
 		x || t.mode !== "single" || (t.value === void 0 || t.value !== e) && (t.onChange(e), g?.());
-	}, fe = (e) => {
+	}, pe = (e) => {
 		x || t.mode !== "range" || U(t.value, e) || (t.onChange(e), g?.());
 	}, $ = (e, n) => {
 		if (!x) {
 			if (t.mode === "range") {
 				let [t, r] = L, [i, a] = F, o = I(n === 0 ? [R(Math.min(e, r), M), a] : [i, R(Math.max(e, t), M)], M);
-				fe(o);
+				pe(o);
 				return;
 			}
-			de(j(e, M));
+			fe(j(e, M));
 		}
-	}, pe = (e) => {
-		let t = q.current?.getBoundingClientRect();
+	}, me = (e) => {
+		let t = se.current?.getBoundingClientRect();
 		if (!t) return w;
 		let n = (e - t.left) / t.width * 100;
 		return (A.length > 0 ? k(n, M) : void 0)?.value ?? b(n, w, T);
-	}, me = d($), he = d(pe);
+	}, he = d($), ge = d(me);
 	ee(() => {
-		me.current = $, he.current = pe;
+		he.current = $, ge.current = me;
 	}), ee(() => {
 		let e = (e) => {
-			X.current !== null && e && e.pointerId !== X.current || (X.current = null, Y.current = null, Z(null));
+			Y.current !== null && e && e.pointerId !== Y.current || (Y.current = null, J.current = null, Z(null));
 		}, t = (e) => {
-			Y.current !== null && (X.current === null || e.pointerId === X.current) && me.current(he.current(e.clientX), Y.current);
+			J.current !== null && (Y.current === null || e.pointerId === Y.current) && he.current(ge.current(e.clientX), J.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) => {
+	let _e = (e, t) => {
+		Y.current = e, J.current = t, Z(t), q.current[t]?.focus();
+	}, ve = (e) => {
 		if (x) return;
 		e.preventDefault();
-		let t = pe(e.clientX), n = N ? z(t, L) : 0;
-		$(t, n), ge(e.pointerId, n);
-	}, ve = (e) => (t) => {
-		x || (t.preventDefault(), t.stopPropagation(), ge(t.pointerId, e));
+		let t = me(e.clientX), n = N ? z(t, L) : 0;
+		$(t, n), _e(e.pointerId, n);
 	}, ye = (e) => (t) => {
+		x || (t.preventDefault(), t.stopPropagation(), _e(t.pointerId, e));
+	}, be = (e) => (t) => {
 		if (x) return;
 		let n = N && e === 1 ? L[0] : w, r = N && e === 0 ? L[1] : T, i = H(t.key);
 		if (t.key === "Home") {
@@ -255,11 +264,11 @@ function G(t) {
 		t.preventDefault();
 		let a = G[e], o = y(a, i, M, n, r);
 		$(o, e);
-	}, be = (e) => {
+	}, xe = (e) => {
 		if (x) return;
 		let t = N ? z(e, L) : 0;
-		$(e, t), J.current[t]?.focus();
-	}, xe = (e, t) => {
+		$(e, t), q.current[t]?.focus();
+	}, Se = (e, t) => {
 		if (N) {
 			let n = F[t];
 			return A.find((t) => t.value === e)?.label ?? ie(n, t);
@@ -274,20 +283,20 @@ function G(t) {
 		size: C,
 		error: h,
 		controlId: Q,
-		labelId: se,
-		descriptionId: ce,
-		errorId: le,
+		labelId: ce,
+		descriptionId: le,
+		errorId: ue,
 		children: /* @__PURE__ */ m("div", {
 			id: Q,
 			className: te(V.slider, l === "compact" && V.sliderCompact),
 			children: [/* @__PURE__ */ p("div", {
 				className: V.trackShell,
 				children: /* @__PURE__ */ m("div", {
-					ref: q,
+					ref: se,
 					"data-slot": "track",
 					className: V.track,
 					role: "presentation",
-					onPointerDown: _e,
+					onPointerDown: ve,
 					children: [
 						/* @__PURE__ */ p("div", { className: V.rail }),
 						/* @__PURE__ */ p("div", {
@@ -300,57 +309,62 @@ function G(t) {
 						}),
 						l === "compact" && A.map((t) => {
 							let n = D(t, A, M), r = N ? t.value >= L[0] && t.value <= L[1] : t.value <= P;
-							return /* @__PURE__ */ p(e, {
-								tooltip: !0,
-								placement: "top",
-								content: W(t.label),
-								children: /* @__PURE__ */ p("button", {
-									type: "button",
-									"data-slot": "mark",
-									"data-active": r ? "" : void 0,
-									className: V.compactMark,
-									style: { left: `${n}%` },
-									"aria-label": t.ariaLabel,
-									disabled: x,
-									onClick: () => be(t.value),
-									children: /* @__PURE__ */ p("span", {
-										className: V.markDot,
-										"aria-hidden": "true"
+							return /* @__PURE__ */ p(oe, {
+								position: n,
+								children: /* @__PURE__ */ p(e, {
+									tooltip: !0,
+									placement: "top",
+									content: W(t.label),
+									children: /* @__PURE__ */ p("button", {
+										type: "button",
+										"data-slot": "mark",
+										"data-active": r ? "" : void 0,
+										className: V.compactMark,
+										"aria-label": t.ariaLabel,
+										disabled: x,
+										onClick: () => xe(t.value),
+										children: /* @__PURE__ */ p("span", {
+											className: V.markDot,
+											"aria-hidden": "true"
+										})
 									})
 								})
 							}, t.value);
 						}),
 						G.map((t, n) => {
-							let r = xe(t, n);
-							return /* @__PURE__ */ p(e, {
-								tooltip: !0,
-								placement: "top",
-								content: W(r),
-								openDelay: 0,
-								closeDelay: 100,
-								children: /* @__PURE__ */ p("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: V.thumb,
-									disabled: x,
-									style: { left: `${O(t, M)}%` },
-									"aria-disabled": x || void 0,
-									"aria-orientation": "horizontal",
-									"aria-valuemin": N && n === 1 ? L[0] : w,
-									"aria-valuemax": N && n === 0 ? L[1] : T,
-									"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 : N ? n === 0 ? "Минимальное значение" : "Максимальное значение" : "Значение",
-									onPointerDown: ve(n),
-									onKeyDown: ye(n)
+							let r = Se(t, n);
+							return /* @__PURE__ */ p(oe, {
+								position: O(t, M),
+								children: /* @__PURE__ */ p(e, {
+									tooltip: !0,
+									placement: "top",
+									content: W(r),
+									openDelay: 0,
+									closeDelay: 100,
+									positionUpdateKey: t,
+									children: /* @__PURE__ */ p("button", {
+										ref: (e) => {
+											q.current[n] = e;
+										},
+										type: "button",
+										role: "slider",
+										"data-slot": "thumb",
+										"data-thumb-index": n,
+										"data-dragging": X === n ? "" : void 0,
+										className: V.thumb,
+										disabled: x,
+										"aria-disabled": x || void 0,
+										"aria-orientation": "horizontal",
+										"aria-valuemin": N && n === 1 ? L[0] : w,
+										"aria-valuemax": N && n === 0 ? L[1] : T,
+										"aria-valuenow": t,
+										"aria-valuetext": typeof r == "string" || typeof r == "number" ? String(r) : void 0,
+										"aria-labelledby": ce,
+										"aria-describedby": de,
+										"aria-label": ce ? void 0 : N ? n === 0 ? "Минимальное значение" : "Максимальное значение" : "Значение",
+										onPointerDown: ye(n),
+										onKeyDown: be(n)
+									})
 								})
 							}, n);
 						})
@@ -368,7 +382,7 @@ function G(t) {
 						style: { left: `${D(e, A, M)}%` },
 						"aria-label": e.ariaLabel,
 						disabled: x,
-						onClick: () => be(e.value),
+						onClick: () => xe(e.value),
 						children: [/* @__PURE__ */ p("span", {
 							className: V.markDot,
 							"aria-hidden": "true"
@@ -389,7 +403,7 @@ function K(e) {
 		marksDisplay: "compact"
 	});
 }
-function q(e) {
+function se(e) {
 	return /* @__PURE__ */ p(G, {
 		...e,
 		mode: "range",
@@ -398,7 +412,7 @@ function q(e) {
 }
 //#endregion
 //#region src/slider/SliderInput.tsx
-function J({ open: e, disabled: n, setOpen: r }) {
+function q({ open: e, disabled: n, setOpen: r }) {
 	return /* @__PURE__ */ p(t.Trigger, {
 		passive: !0,
 		children: /* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(s, {
@@ -411,18 +425,18 @@ function J({ open: e, disabled: n, setOpen: r }) {
 		}) })
 	});
 }
-function Y(e, t) {
+function J(e, t) {
 	let n = I(e, t);
 	return {
 		start: n[0] === null ? "-∞" : String(n[0]),
 		end: n[1] === null ? "∞" : String(n[1])
 	};
 }
-function X(e, t) {
+function Y(e, t) {
 	let n = e.trim();
 	return n === "" || n === t ? null : h(n);
 }
-function oe(e, t, n) {
+function X(e, t, n) {
 	let r = t.filter((t) => M(t) === e);
 	if (r.length) return e === null && n === "end" ? r[r.length - 1] : r[0];
 }
@@ -430,13 +444,13 @@ 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);
+	return Z(X(e, t, n), e);
 }
-function se(e, t, n) {
+function ce(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: r, max: i, step: o, marks: s, marksPosition: d = "value", className: te, error: ne, onClearError: g, label: _, description: v, placeholder: y, disabled: b, size: x }) {
+function le({ value: e, onChange: n, min: r, max: i, step: o, marks: s, marksPosition: d = "value", className: te, error: ne, onClearError: g, label: _, description: v, placeholder: y, disabled: b, size: x }) {
 	let { min: C, max: w } = u(() => S(r, i), [r, i]), T = u(() => E(s, C, w), [
 		s,
 		C,
@@ -498,7 +512,7 @@ function ce({ value: e, onChange: n, min: r, max: i, step: o, marks: s, marksPos
 				e.key === "Enter" && (e.preventDefault(), F());
 			},
 			endAdornmentWidth: "var(--control-height)",
-			endAdornment: J({
+			endAdornment: q({
 				open: k,
 				disabled: b,
 				setOpen: A
@@ -525,7 +539,7 @@ function ce({ value: e, onChange: n, min: r, max: i, step: o, marks: s, marksPos
 		})]
 	});
 }
-function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPosition: _ = "value", className: v, error: y, onClearError: b, label: x, description: C, readonlyValueText: w, placeholder: T, disabled: D, size: O }) {
+function ue({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPosition: _ = "value", className: v, error: y, onClearError: b, label: x, description: C, readonlyValueText: w, placeholder: T, disabled: D, size: O }) {
 	let { min: k, max: A } = u(() => S(s, d), [s, d]), j = u(() => E(g, k, A), [
 		g,
 		k,
@@ -542,7 +556,7 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 		h,
 		j,
 		_
-	]), N = u(() => I(e, M), [M, e]), P = u(() => Y(N, M), [N, M]), [F, L] = f(!1), [re, R] = f(P.start), [z, B] = f(P.end), [H, U] = f(N), ie = l((e, t) => {
+	]), N = u(() => I(e, M), [M, e]), P = u(() => J(N, M), [N, M]), [F, L] = f(!1), [re, R] = f(P.start), [z, B] = f(P.end), [H, U] = f(N), ie = l((e, t) => {
 		R(e), B(t);
 	});
 	ee(() => {
@@ -553,25 +567,25 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 		N,
 		F
 	]);
-	let { controlId: ae, labelId: W, descriptionId: K, errorId: q, describedBy: oe } = i({
+	let { controlId: ae, labelId: W, descriptionId: oe, errorId: K, describedBy: se } = i({
 		hasLabel: x != null,
 		hasDescription: !!C,
 		hasError: !!y
-	}), Z = c(() => {
+	}), X = c(() => {
 		R(P.start), B(P.end);
-	}, [P.end, P.start]), Q = c(() => {
+	}, [P.end, P.start]), Z = c(() => {
 		if (D) {
-			Z();
+			X();
 			return;
 		}
-		let e = X(re, "-∞"), t = X(z, "∞");
+		let e = Y(re, "-∞"), t = Y(z, "∞");
 		if (e === void 0 || t === void 0) {
-			Z();
+			X();
 			return;
 		}
 		let n = I([e, t], M);
-		ue(N, n) || (a(n), b?.());
-		let r = Y(n, M);
+		de(N, n) || (a(n), b?.());
+		let r = J(n, M);
 		R(r.start), B(r.end), U(n);
 	}, [
 		D,
@@ -580,12 +594,12 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 		N,
 		a,
 		b,
-		Z,
+		X,
 		M
-	]), ce = c((e) => {
+	]), Q = c((e) => {
 		let t = I(e, M);
-		ue(N, t) || (a(t), b?.());
-		let n = Y(t, M);
+		de(N, t) || (a(t), b?.());
+		let n = J(t, M);
 		R(n.start), B(n.end), U(t);
 	}, [
 		N,
@@ -593,15 +607,15 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 		b,
 		M
 	]), le = (e) => {
-		!F && e && (U(N), R(P.start), B(P.end)), F && !e && !D && ce(H), L(e);
-	}, de = (e) => {
-		e.key === "Enter" && (e.preventDefault(), Q());
+		!F && e && (U(N), R(P.start), B(P.end)), F && !e && !D && Q(H), L(e);
+	}, ue = (e) => {
+		e.key === "Enter" && (e.preventDefault(), Z());
 	}, fe = (e) => {
 		let t = I(e, M);
 		U(t);
-		let n = Y(t, M);
+		let n = J(t, M);
 		R(n.start), B(n.end);
-	}, $ = w ? se(F ? H : N, j, T) : void 0;
+	}, pe = w ? ce(F ? H : N, j, T) : void 0;
 	return /* @__PURE__ */ m(t, {
 		open: F,
 		onOpenChange: le,
@@ -614,11 +628,11 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 			error: y,
 			controlId: ae,
 			labelId: W,
-			descriptionId: K,
-			errorId: q,
+			descriptionId: oe,
+			errorId: K,
 			children: /* @__PURE__ */ p(r, {
 				endAdornmentWidth: "var(--control-height)",
-				endAdornment: J({
+				endAdornment: q({
 					open: F,
 					disabled: D,
 					setOpen: (e) => {
@@ -634,10 +648,10 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 					"aria-invalid": !!y || void 0,
 					"aria-label": typeof x == "string" ? x : "Диапазон",
 					"aria-labelledby": typeof x == "string" ? void 0 : W,
-					"aria-describedby": oe,
+					"aria-describedby": se,
 					children: w ? /* @__PURE__ */ p("span", {
-						className: te("flexEllipsis", !$ && n.uiPlaceholder),
-						children: $ || T
+						className: te("flexEllipsis", !pe && n.uiPlaceholder),
+						children: pe || T
 					}) : /* @__PURE__ */ m(ne, { children: [
 						/* @__PURE__ */ p("input", {
 							type: "text",
@@ -647,8 +661,8 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 							disabled: D,
 							"aria-label": "Начало диапазона",
 							onChange: (e) => R(e.target.value),
-							onBlur: Q,
-							onKeyDown: de
+							onBlur: Z,
+							onKeyDown: ue
 						}),
 						/* @__PURE__ */ p("span", {
 							className: V.rangeSeparator,
@@ -663,8 +677,8 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 							disabled: D,
 							"aria-label": "Конец диапазона",
 							onChange: (e) => B(e.target.value),
-							onBlur: Q,
-							onKeyDown: de
+							onBlur: Z,
+							onKeyDown: ue
 						})
 					] })
 				})
@@ -689,10 +703,10 @@ function le({ value: e, onChange: a, min: s, max: d, step: h, marks: g, marksPos
 		})]
 	});
 }
-function ue(e, t) {
+function de(e, t) {
 	return e[0] === t[0] && e[1] === t[1];
 }
 //#endregion
-export { K as Slider, ce as SliderInput, q as SliderRange, le as SliderRangeInput };
+export { K as Slider, le as SliderInput, se as SliderRange, ue as SliderRangeInput };
 
 //# sourceMappingURL=index.js.map