@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
424 lines (423 loc) • 12.6 kB
JavaScript
import * as d from "react";
import { a as ae, c as ce, b as _ } from "./index-Cva-e5M4.js";
import { u as K } from "./index-B_6_jmOO.js";
import { a as le, u as de } from "./index-4ecjw_Aj.js";
import { P as T } from "./index-D7QNmo_D.js";
import { c as ue } from "./index-BbsJ0VIJ.js";
import { jsx as g, jsxs as fe } from "react/jsx-runtime";
function $(e, [t, n]) {
return Math.min(n, Math.max(t, e));
}
var me = d.createContext(void 0);
function pe(e) {
const t = d.useContext(me);
return e || t || "ltr";
}
var j = ["PageUp", "PageDown"], X = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], G = {
"from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
"from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
"from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
"from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
}, M = "Slider", [N, he, Se] = ue(M), [W, ke] = ce(M, [
Se
]), [ge, B] = W(M), q = d.forwardRef(
(e, t) => {
const {
name: n,
min: o = 0,
max: i = 100,
step: c = 1,
orientation: r = "horizontal",
disabled: a = !1,
minStepsBetweenThumbs: l = 0,
defaultValue: m = [o],
value: x,
onValueChange: s = () => {
},
onValueCommit: u = () => {
},
inverted: v = !1,
form: P,
...S
} = e, p = d.useRef(/* @__PURE__ */ new Set()), f = d.useRef(0), w = r === "horizontal" ? ve : we, [h = [], A] = ae({
prop: x,
defaultProp: m,
onChange: (b) => {
var C;
(C = [...p.current][f.current]) == null || C.focus(), s(b);
}
}), k = d.useRef(h);
function H(b) {
const R = ye(h, b);
I(b, R);
}
function ie(b) {
I(b, f.current);
}
function se() {
const b = k.current[f.current];
h[f.current] !== b && u(h);
}
function I(b, R, { commit: C } = { commit: !1 }) {
const U = _e(c), z = Me(Math.round((b - o) / c) * c + o, U), V = $(z, [o, i]);
A((E = []) => {
const y = Pe(E, V, R);
if (Ee(y, l * c)) {
f.current = y.indexOf(V);
const Y = String(y) !== String(E);
return Y && C && u(y), Y ? y : E;
} else
return E;
});
}
return /* @__PURE__ */ g(
ge,
{
scope: e.__scopeSlider,
name: n,
disabled: a,
min: o,
max: i,
valueIndexToChangeRef: f,
thumbs: p.current,
values: h,
orientation: r,
form: P,
children: /* @__PURE__ */ g(N.Provider, { scope: e.__scopeSlider, children: /* @__PURE__ */ g(N.Slot, { scope: e.__scopeSlider, children: /* @__PURE__ */ g(
w,
{
"aria-disabled": a,
"data-disabled": a ? "" : void 0,
...S,
ref: t,
onPointerDown: _(S.onPointerDown, () => {
a || (k.current = h);
}),
min: o,
max: i,
inverted: v,
onSlideStart: a ? void 0 : H,
onSlideMove: a ? void 0 : ie,
onSlideEnd: a ? void 0 : se,
onHomeKeyDown: () => !a && I(o, 0, { commit: !0 }),
onEndKeyDown: () => !a && I(i, h.length - 1, { commit: !0 }),
onStepKeyDown: ({ event: b, direction: R }) => {
if (!a) {
const z = j.includes(b.key) || b.shiftKey && X.includes(b.key) ? 10 : 1, V = f.current, E = h[V], y = c * z * R;
I(E + y, V, { commit: !0 });
}
}
}
) }) })
}
);
}
);
q.displayName = M;
var [J, Q] = W(M, {
startEdge: "left",
endEdge: "right",
size: "width",
direction: 1
}), ve = d.forwardRef(
(e, t) => {
const {
min: n,
max: o,
dir: i,
inverted: c,
onSlideStart: r,
onSlideMove: a,
onSlideEnd: l,
onStepKeyDown: m,
...x
} = e, [s, u] = d.useState(null), v = K(t, (w) => u(w)), P = d.useRef(void 0), S = pe(i), p = S === "ltr", f = p && !c || !p && c;
function D(w) {
const h = P.current || s.getBoundingClientRect(), A = [0, h.width], H = F(A, f ? [n, o] : [o, n]);
return P.current = h, H(w - h.left);
}
return /* @__PURE__ */ g(
J,
{
scope: e.__scopeSlider,
startEdge: f ? "left" : "right",
endEdge: f ? "right" : "left",
direction: f ? 1 : -1,
size: "width",
children: /* @__PURE__ */ g(
Z,
{
dir: S,
"data-orientation": "horizontal",
...x,
ref: v,
style: {
...x.style,
"--radix-slider-thumb-transform": "translateX(-50%)"
},
onSlideStart: (w) => {
const h = D(w.clientX);
r == null || r(h);
},
onSlideMove: (w) => {
const h = D(w.clientX);
a == null || a(h);
},
onSlideEnd: () => {
P.current = void 0, l == null || l();
},
onStepKeyDown: (w) => {
const A = G[f ? "from-left" : "from-right"].includes(w.key);
m == null || m({ event: w, direction: A ? -1 : 1 });
}
}
)
}
);
}
), we = d.forwardRef(
(e, t) => {
const {
min: n,
max: o,
inverted: i,
onSlideStart: c,
onSlideMove: r,
onSlideEnd: a,
onStepKeyDown: l,
...m
} = e, x = d.useRef(null), s = K(t, x), u = d.useRef(void 0), v = !i;
function P(S) {
const p = u.current || x.current.getBoundingClientRect(), f = [0, p.height], w = F(f, v ? [o, n] : [n, o]);
return u.current = p, w(S - p.top);
}
return /* @__PURE__ */ g(
J,
{
scope: e.__scopeSlider,
startEdge: v ? "bottom" : "top",
endEdge: v ? "top" : "bottom",
size: "height",
direction: v ? 1 : -1,
children: /* @__PURE__ */ g(
Z,
{
"data-orientation": "vertical",
...m,
ref: s,
style: {
...m.style,
"--radix-slider-thumb-transform": "translateY(50%)"
},
onSlideStart: (S) => {
const p = P(S.clientY);
c == null || c(p);
},
onSlideMove: (S) => {
const p = P(S.clientY);
r == null || r(p);
},
onSlideEnd: () => {
u.current = void 0, a == null || a();
},
onStepKeyDown: (S) => {
const f = G[v ? "from-bottom" : "from-top"].includes(S.key);
l == null || l({ event: S, direction: f ? -1 : 1 });
}
}
)
}
);
}
), Z = d.forwardRef(
(e, t) => {
const {
__scopeSlider: n,
onSlideStart: o,
onSlideMove: i,
onSlideEnd: c,
onHomeKeyDown: r,
onEndKeyDown: a,
onStepKeyDown: l,
...m
} = e, x = B(M, n);
return /* @__PURE__ */ g(
T.span,
{
...m,
ref: t,
onKeyDown: _(e.onKeyDown, (s) => {
s.key === "Home" ? (r(s), s.preventDefault()) : s.key === "End" ? (a(s), s.preventDefault()) : j.concat(X).includes(s.key) && (l(s), s.preventDefault());
}),
onPointerDown: _(e.onPointerDown, (s) => {
const u = s.target;
u.setPointerCapture(s.pointerId), s.preventDefault(), x.thumbs.has(u) ? u.focus() : o(s);
}),
onPointerMove: _(e.onPointerMove, (s) => {
s.target.hasPointerCapture(s.pointerId) && i(s);
}),
onPointerUp: _(e.onPointerUp, (s) => {
const u = s.target;
u.hasPointerCapture(s.pointerId) && (u.releasePointerCapture(s.pointerId), c(s));
})
}
);
}
), ee = "SliderTrack", te = d.forwardRef(
(e, t) => {
const { __scopeSlider: n, ...o } = e, i = B(ee, n);
return /* @__PURE__ */ g(
T.span,
{
"data-disabled": i.disabled ? "" : void 0,
"data-orientation": i.orientation,
...o,
ref: t
}
);
}
);
te.displayName = ee;
var O = "SliderRange", ne = d.forwardRef(
(e, t) => {
const { __scopeSlider: n, ...o } = e, i = B(O, n), c = Q(O, n), r = d.useRef(null), a = K(t, r), l = i.values.length, m = i.values.map(
(u) => re(u, i.min, i.max)
), x = l > 1 ? Math.min(...m) : 0, s = 100 - Math.max(...m);
return /* @__PURE__ */ g(
T.span,
{
"data-orientation": i.orientation,
"data-disabled": i.disabled ? "" : void 0,
...o,
ref: a,
style: {
...e.style,
[c.startEdge]: x + "%",
[c.endEdge]: s + "%"
}
}
);
}
);
ne.displayName = O;
var L = "SliderThumb", oe = d.forwardRef(
(e, t) => {
const n = he(e.__scopeSlider), [o, i] = d.useState(null), c = K(t, (a) => i(a)), r = d.useMemo(
() => o ? n().findIndex((a) => a.ref.current === o) : -1,
[n, o]
);
return /* @__PURE__ */ g(be, { ...e, ref: c, index: r });
}
), be = d.forwardRef(
(e, t) => {
const { __scopeSlider: n, index: o, name: i, ...c } = e, r = B(L, n), a = Q(L, n), [l, m] = d.useState(null), x = K(t, (D) => m(D)), s = l ? r.form || !!l.closest("form") : !0, u = le(l), v = r.values[o], P = v === void 0 ? 0 : re(v, r.min, r.max), S = Re(o, r.values.length), p = u == null ? void 0 : u[a.size], f = p ? De(p, P, a.direction) : 0;
return d.useEffect(() => {
if (l)
return r.thumbs.add(l), () => {
r.thumbs.delete(l);
};
}, [l, r.thumbs]), /* @__PURE__ */ fe(
"span",
{
style: {
transform: "var(--radix-slider-thumb-transform)",
position: "absolute",
[a.startEdge]: `calc(${P}% + ${f}px)`
},
children: [
/* @__PURE__ */ g(N.ItemSlot, { scope: e.__scopeSlider, children: /* @__PURE__ */ g(
T.span,
{
role: "slider",
"aria-label": e["aria-label"] || S,
"aria-valuemin": r.min,
"aria-valuenow": v,
"aria-valuemax": r.max,
"aria-orientation": r.orientation,
"data-orientation": r.orientation,
"data-disabled": r.disabled ? "" : void 0,
tabIndex: r.disabled ? void 0 : 0,
...c,
ref: x,
style: v === void 0 ? { display: "none" } : e.style,
onFocus: _(e.onFocus, () => {
r.valueIndexToChangeRef.current = o;
})
}
) }),
s && /* @__PURE__ */ g(
xe,
{
name: i ?? (r.name ? r.name + (r.values.length > 1 ? "[]" : "") : void 0),
form: r.form,
value: v
},
o
)
]
}
);
}
);
oe.displayName = L;
var xe = (e) => {
const { value: t, ...n } = e, o = d.useRef(null), i = de(t);
return d.useEffect(() => {
const c = o.current, r = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(r, "value").set;
if (i !== t && l) {
const m = new Event("input", { bubbles: !0 });
l.call(c, t), c.dispatchEvent(m);
}
}, [i, t]), /* @__PURE__ */ g("input", { style: { display: "none" }, ...n, ref: o, defaultValue: t });
};
function Pe(e = [], t, n) {
const o = [...e];
return o[n] = t, o.sort((i, c) => i - c);
}
function re(e, t, n) {
const c = 100 / (n - t) * (e - t);
return $(c, [0, 100]);
}
function Re(e, t) {
return t > 2 ? `Value ${e + 1} of ${t}` : t === 2 ? ["Minimum", "Maximum"][e] : void 0;
}
function ye(e, t) {
if (e.length === 1) return 0;
const n = e.map((i) => Math.abs(i - t)), o = Math.min(...n);
return n.indexOf(o);
}
function De(e, t, n) {
const o = e / 2, c = F([0, 50], [0, o]);
return (o - c(t) * n) * n;
}
function Ce(e) {
return e.slice(0, -1).map((t, n) => e[n + 1] - t);
}
function Ee(e, t) {
if (t > 0) {
const n = Ce(e);
return Math.min(...n) >= t;
}
return !0;
}
function F(e, t) {
return (n) => {
if (e[0] === e[1] || t[0] === t[1]) return t[0];
const o = (t[1] - t[0]) / (e[1] - e[0]);
return t[0] + o * (n - e[0]);
};
}
function _e(e) {
return (String(e).split(".")[1] || "").length;
}
function Me(e, t) {
const n = Math.pow(10, t);
return Math.round(e * n) / n;
}
var He = q, ze = te, Ne = ne, Oe = oe;
export {
He as R,
ze as T,
Ne as a,
Oe as b
};