@serendie/ui 3.2.2-dev.202604251110 → 3.2.2-dev.202604270058
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client.js +35 -32
- package/dist/components/Slider/Slider.d.ts +47 -0
- package/dist/components/Slider/Slider.js +232 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Slider/index.js +5 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +39 -36
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-context.js +5 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-control.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-dragging-indicator.js +18 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-hidden-input.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-label.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker-group.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-range.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root-provider.js +20 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root.js +46 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-thumb.js +21 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-track.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-value-text.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider.js +32 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-context.js +10 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-thumb-props-context.js +10 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider.js +19 -0
- package/dist/node_modules/@zag-js/dom-query/dist/event.js +36 -31
- package/dist/node_modules/@zag-js/dom-query/dist/form.js +31 -21
- package/dist/node_modules/@zag-js/dom-query/dist/pointer-move.js +29 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.anatomy.js +17 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.connect.js +272 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.dom.js +88 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.machine.js +309 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.style.js +119 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.utils.js +105 -0
- package/dist/node_modules/@zag-js/utils/dist/number.js +63 -8
- package/dist/node_modules/@zag-js/utils/dist/object.js +17 -8
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { toPx as a, getValuePercent as p, getValueTransformer as u } from "../../utils/dist/number.js";
|
|
2
|
+
function b(t) {
|
|
3
|
+
const e = t[0], o = t[t.length - 1];
|
|
4
|
+
return [e, o];
|
|
5
|
+
}
|
|
6
|
+
function x(t) {
|
|
7
|
+
const { prop: e, computed: o } = t, n = o("valuePercent"), [r, i] = b(n);
|
|
8
|
+
if (n.length === 1) {
|
|
9
|
+
if (e("origin") === "center") {
|
|
10
|
+
const s = n[0] < 50, l = s ? `${n[0]}%` : "50%", c = s ? "50%" : `${100 - n[0]}%`;
|
|
11
|
+
return { start: l, end: c };
|
|
12
|
+
}
|
|
13
|
+
return e("origin") === "end" ? { start: `${i}%`, end: "0%" } : { start: "0%", end: `${100 - i}%` };
|
|
14
|
+
}
|
|
15
|
+
return { start: `${r}%`, end: `${100 - i}%` };
|
|
16
|
+
}
|
|
17
|
+
function R(t) {
|
|
18
|
+
const { computed: e } = t, o = e("isVertical"), n = e("isRtl");
|
|
19
|
+
return o ? {
|
|
20
|
+
position: "absolute",
|
|
21
|
+
bottom: "var(--slider-range-start)",
|
|
22
|
+
top: "var(--slider-range-end)"
|
|
23
|
+
} : {
|
|
24
|
+
position: "absolute",
|
|
25
|
+
[n ? "right" : "left"]: "var(--slider-range-start)",
|
|
26
|
+
[n ? "left" : "right"]: "var(--slider-range-end)"
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function v(t, e) {
|
|
30
|
+
const { context: o, prop: n } = t, { height: r = 0 } = o.get("thumbSize") ?? {}, i = u([n("min"), n("max")], [-r / 2, r / 2]);
|
|
31
|
+
return parseFloat(i(e).toFixed(2));
|
|
32
|
+
}
|
|
33
|
+
function S(t, e) {
|
|
34
|
+
const { computed: o, context: n, prop: r } = t, { width: i = 0 } = n.get("thumbSize") ?? {};
|
|
35
|
+
if (o("isRtl")) {
|
|
36
|
+
const c = u([r("max"), r("min")], [-i / 2, i / 2]);
|
|
37
|
+
return -1 * parseFloat(c(e).toFixed(2));
|
|
38
|
+
}
|
|
39
|
+
const l = u([r("min"), r("max")], [-i / 2, i / 2]);
|
|
40
|
+
return parseFloat(l(e).toFixed(2));
|
|
41
|
+
}
|
|
42
|
+
function y(t, e, o) {
|
|
43
|
+
const { computed: n, prop: r } = t;
|
|
44
|
+
if (r("thumbAlignment") === "center") return `${e}%`;
|
|
45
|
+
const i = n("isVertical") ? v(t, o) : S(t, o);
|
|
46
|
+
return `calc(${e}% - ${i}px)`;
|
|
47
|
+
}
|
|
48
|
+
function f(t, e) {
|
|
49
|
+
const { prop: o } = t, n = p(e, o("min"), o("max")) * 100;
|
|
50
|
+
return y(t, n, e);
|
|
51
|
+
}
|
|
52
|
+
function d(t) {
|
|
53
|
+
const { computed: e, prop: o } = t;
|
|
54
|
+
let n = "visible";
|
|
55
|
+
return o("thumbAlignment") === "contain" && !e("hasMeasuredThumbSize") && (n = "hidden"), n;
|
|
56
|
+
}
|
|
57
|
+
function $(t, e) {
|
|
58
|
+
const { computed: o, context: n } = t, r = o("isVertical") ? "bottom" : "insetInlineStart", i = n.get("focusedIndex");
|
|
59
|
+
return {
|
|
60
|
+
visibility: d(t),
|
|
61
|
+
position: "absolute",
|
|
62
|
+
transform: "var(--slider-thumb-transform)",
|
|
63
|
+
[r]: `var(--slider-thumb-offset-${e})`,
|
|
64
|
+
zIndex: i === e ? 1 : void 0
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
function P() {
|
|
68
|
+
return {
|
|
69
|
+
touchAction: "none",
|
|
70
|
+
userSelect: "none",
|
|
71
|
+
WebkitUserSelect: "none",
|
|
72
|
+
position: "relative"
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
function T(t) {
|
|
76
|
+
const { context: e, computed: o } = t, n = o("isVertical"), r = o("isRtl"), i = x(t), s = e.get("thumbSize");
|
|
77
|
+
return {
|
|
78
|
+
...e.get("value").reduce((c, g, m) => {
|
|
79
|
+
const h = f(t, g);
|
|
80
|
+
return { ...c, [`--slider-thumb-offset-${m}`]: h };
|
|
81
|
+
}, {}),
|
|
82
|
+
"--slider-thumb-width": a(s == null ? void 0 : s.width),
|
|
83
|
+
"--slider-thumb-height": a(s == null ? void 0 : s.height),
|
|
84
|
+
"--slider-thumb-transform": n ? "translateY(50%)" : r ? "translateX(50%)" : "translateX(-50%)",
|
|
85
|
+
"--slider-range-start": i.start,
|
|
86
|
+
"--slider-range-end": i.end
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function F(t, e) {
|
|
90
|
+
const { computed: o } = t, n = o("isHorizontal"), r = o("isRtl");
|
|
91
|
+
return {
|
|
92
|
+
visibility: d(t),
|
|
93
|
+
position: "absolute",
|
|
94
|
+
pointerEvents: "none",
|
|
95
|
+
[n ? "insetInlineStart" : "bottom"]: f(t, e),
|
|
96
|
+
translate: "var(--translate-x) var(--translate-y)",
|
|
97
|
+
"--translate-x": n ? r ? "50%" : "-50%" : "0%",
|
|
98
|
+
"--translate-y": n ? "0%" : "50%"
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
function z() {
|
|
102
|
+
return {
|
|
103
|
+
userSelect: "none",
|
|
104
|
+
WebkitUserSelect: "none",
|
|
105
|
+
pointerEvents: "none",
|
|
106
|
+
position: "relative"
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
export {
|
|
110
|
+
P as getControlStyle,
|
|
111
|
+
z as getMarkerGroupStyle,
|
|
112
|
+
F as getMarkerStyle,
|
|
113
|
+
x as getRangeOffsets,
|
|
114
|
+
R as getRangeStyle,
|
|
115
|
+
T as getRootStyle,
|
|
116
|
+
f as getThumbOffset,
|
|
117
|
+
$ as getThumbStyle,
|
|
118
|
+
d as getVisibility
|
|
119
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { snapValueToStep as b, clampValue as x, getValueRanges as w, getNextStepValue as V, getPreviousStepValue as T } from "../../utils/dist/number.js";
|
|
2
|
+
function g(t) {
|
|
3
|
+
const { index: n, values: s, min: e, max: c, gap: o } = t, a = s[n - 1], u = s[n + 1];
|
|
4
|
+
return {
|
|
5
|
+
min: a != null ? a + o : e,
|
|
6
|
+
max: u != null ? u - o : c
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
function i(t) {
|
|
10
|
+
return Math.round(t * 1e10) / 1e10;
|
|
11
|
+
}
|
|
12
|
+
function h(t) {
|
|
13
|
+
const { index: n, value: s, values: e } = t, c = g(t), o = e.slice();
|
|
14
|
+
return o[n] = i(x(s, c.min, c.max)), { values: o, index: n, swapped: !1 };
|
|
15
|
+
}
|
|
16
|
+
function I(t) {
|
|
17
|
+
const { index: n, value: s, values: e, min: c, max: o, gap: a } = t, u = e.slice(), p = c + n * a, m = o - (e.length - 1 - n) * a;
|
|
18
|
+
u[n] = i(x(s, p, m));
|
|
19
|
+
for (let l = n + 1; l < e.length; l++) {
|
|
20
|
+
const r = u[l - 1] + a;
|
|
21
|
+
u[l] < r && (u[l] = i(r));
|
|
22
|
+
}
|
|
23
|
+
for (let l = n - 1; l >= 0; l--) {
|
|
24
|
+
const r = u[l + 1] - a;
|
|
25
|
+
u[l] > r && (u[l] = i(r));
|
|
26
|
+
}
|
|
27
|
+
return { values: u, index: n, swapped: !1 };
|
|
28
|
+
}
|
|
29
|
+
function M(t, n) {
|
|
30
|
+
const { index: s, value: e, values: c, gap: o } = t, a = c[s - 1], u = c[s + 1], p = u != null && e >= u && e > n, m = a != null && e <= a && e < n;
|
|
31
|
+
if (!p && !m)
|
|
32
|
+
return h(t);
|
|
33
|
+
const l = p ? s + 1 : s - 1, r = c.slice(), v = { ...t, index: l }, f = g(v);
|
|
34
|
+
return r[l] = i(x(e, f.min, f.max)), r[s] = c[l], p && r[s] > r[l] - o ? r[s] = i(r[l] - o) : m && r[s] < r[l] + o && (r[s] = i(r[l] + o)), { values: r, index: l, swapped: !0 };
|
|
35
|
+
}
|
|
36
|
+
function N(t, n, s, e, c, o, a, u, p) {
|
|
37
|
+
if (e.length === 1)
|
|
38
|
+
return { values: [i(x(s, c, o))], index: 0, swapped: !1 };
|
|
39
|
+
const m = a * u, l = { behavior: t, index: n, value: s, values: e, min: c, max: o, gap: m };
|
|
40
|
+
switch (t) {
|
|
41
|
+
case "push":
|
|
42
|
+
return I(l);
|
|
43
|
+
case "swap":
|
|
44
|
+
return M(l, p ?? e[n]);
|
|
45
|
+
case "none":
|
|
46
|
+
default:
|
|
47
|
+
return h(l);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
function P(t, n) {
|
|
51
|
+
return n.map((s, e) => S(t, s, e));
|
|
52
|
+
}
|
|
53
|
+
function d(t, n) {
|
|
54
|
+
const { context: s, prop: e } = t, c = e("step") * e("minStepsBetweenThumbs");
|
|
55
|
+
return w(s.get("value"), e("min"), e("max"), c)[n];
|
|
56
|
+
}
|
|
57
|
+
function S(t, n, s) {
|
|
58
|
+
const { prop: e } = t, c = d(t, s), o = b(n, e("min"), e("max"), e("step"));
|
|
59
|
+
return x(o, c.min, c.max);
|
|
60
|
+
}
|
|
61
|
+
function B(t, n, s) {
|
|
62
|
+
const { context: e, prop: c } = t, o = n ?? e.get("focusedIndex"), a = d(t, o), u = T(o, {
|
|
63
|
+
...a,
|
|
64
|
+
step: s ?? c("step"),
|
|
65
|
+
values: e.get("value")
|
|
66
|
+
});
|
|
67
|
+
return u[o] = x(u[o], a.min, a.max), u;
|
|
68
|
+
}
|
|
69
|
+
function R(t, n, s) {
|
|
70
|
+
const { context: e, prop: c } = t, o = n ?? e.get("focusedIndex"), a = d(t, o), u = V(o, {
|
|
71
|
+
...a,
|
|
72
|
+
step: s ?? c("step"),
|
|
73
|
+
values: e.get("value")
|
|
74
|
+
});
|
|
75
|
+
return u[o] = x(u[o], a.min, a.max), u;
|
|
76
|
+
}
|
|
77
|
+
function z(t, n) {
|
|
78
|
+
const { context: s } = t, e = s.get("value");
|
|
79
|
+
let c = 0, o = Math.abs(e[0] - n);
|
|
80
|
+
for (let a = 1; a < e.length; a++) {
|
|
81
|
+
const u = Math.abs(e[a] - n);
|
|
82
|
+
u <= o && (c = a, o = u);
|
|
83
|
+
}
|
|
84
|
+
return A(t, c);
|
|
85
|
+
}
|
|
86
|
+
function A(t, n) {
|
|
87
|
+
const { context: s, prop: e } = t, c = s.get("value"), o = e("max");
|
|
88
|
+
if (c[n] === o) {
|
|
89
|
+
let u = n;
|
|
90
|
+
for (; u > 0 && c[u - 1] === o; )
|
|
91
|
+
u -= 1;
|
|
92
|
+
return u;
|
|
93
|
+
}
|
|
94
|
+
return n;
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
S as constrainValue,
|
|
98
|
+
B as decrement,
|
|
99
|
+
z as getClosestIndex,
|
|
100
|
+
d as getRangeAtIndex,
|
|
101
|
+
R as increment,
|
|
102
|
+
P as normalizeValues,
|
|
103
|
+
N as resolveThumbCollision,
|
|
104
|
+
A as selectMovableThumb
|
|
105
|
+
};
|
|
@@ -1,11 +1,66 @@
|
|
|
1
|
-
var { min:
|
|
2
|
-
const r =
|
|
3
|
-
return
|
|
4
|
-
},
|
|
1
|
+
var { floor: N, abs: p, round: f, min: h, max: I, pow: S, sign: b } = Math, V = (e) => Number.isNaN(e), s = (e) => V(e) ? 0 : e, x = (e, t, a) => e === 0 ? a : t[e - 1], A = (e, t, a) => e === t.length - 1 ? a : t[e + 1], R = (e, t, a) => {
|
|
2
|
+
const r = s(e), n = t == null || r >= t, l = a == null || r <= a;
|
|
3
|
+
return n && l;
|
|
4
|
+
}, P = (e, t, a) => f((s(e) - t) / a) * a + t, m = (e, t, a) => h(I(s(e), t), a), T = (e) => m(e, 0, 1), k = (e, t, a) => (s(e) - t) / (a - t), w = (e, t, a, r) => m(P(e * (a - t) + t, t, r), t, a), i = (e, t) => {
|
|
5
|
+
let a = e, r = t.toString(), n = r.indexOf("."), l = n >= 0 ? r.length - n : 0;
|
|
6
|
+
if (l > 0) {
|
|
7
|
+
let u = S(10, l);
|
|
8
|
+
a = f(a * u) / u;
|
|
9
|
+
}
|
|
10
|
+
return a;
|
|
11
|
+
}, v = (e, t, a, r) => {
|
|
12
|
+
const n = t != null ? Number(t) : 0, l = Number(a), u = (e - n) % r;
|
|
13
|
+
let o = p(u) * 2 >= r ? e + b(u) * (r - p(u)) : e - u;
|
|
14
|
+
if (o = i(o, r), !V(n) && o < n)
|
|
15
|
+
o = n;
|
|
16
|
+
else if (!V(l) && o > l) {
|
|
17
|
+
const c = N((l - n) / r), g = n + c * r;
|
|
18
|
+
o = c <= 0 || g < n ? l : g;
|
|
19
|
+
}
|
|
20
|
+
return i(o, r);
|
|
21
|
+
}, M = (e, t, a) => e[t] === a ? e : [...e.slice(0, t), a, ...e.slice(t + 1)];
|
|
22
|
+
function d(e, t) {
|
|
23
|
+
const a = x(e, t.values, t.min), r = A(e, t.values, t.max);
|
|
24
|
+
let n = t.values.slice();
|
|
25
|
+
return function(u) {
|
|
26
|
+
let o = v(u, a, r, t.step);
|
|
27
|
+
return n = M(n, e, u), n[e] = o, n;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function C(e, t) {
|
|
31
|
+
const a = t.values[e] + t.step;
|
|
32
|
+
return d(e, t)(a);
|
|
33
|
+
}
|
|
34
|
+
function y(e, t) {
|
|
35
|
+
const a = t.values[e] - t.step;
|
|
36
|
+
return d(e, t)(a);
|
|
37
|
+
}
|
|
38
|
+
var O = (e, t, a, r) => e.map((n, l) => ({
|
|
39
|
+
min: l === 0 ? t : e[l - 1] + r,
|
|
40
|
+
max: l === e.length - 1 ? a : e[l + 1] - r,
|
|
41
|
+
value: n
|
|
42
|
+
})), W = (e, t) => {
|
|
43
|
+
const [a, r] = e, [n, l] = t;
|
|
44
|
+
return (u) => a === r || n === l ? n : n + (l - n) / (r - a) * (u - a);
|
|
45
|
+
}, $ = (e) => typeof e == "number" ? `${e}px` : e;
|
|
5
46
|
export {
|
|
47
|
+
T as clampPercent,
|
|
6
48
|
m as clampValue,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
49
|
+
A as getMaxValueAtIndex,
|
|
50
|
+
x as getMinValueAtIndex,
|
|
51
|
+
C as getNextStepValue,
|
|
52
|
+
w as getPercentValue,
|
|
53
|
+
y as getPreviousStepValue,
|
|
54
|
+
k as getValuePercent,
|
|
55
|
+
O as getValueRanges,
|
|
56
|
+
d as getValueSetterAtIndex,
|
|
57
|
+
W as getValueTransformer,
|
|
58
|
+
V as isNaN,
|
|
59
|
+
R as isValueWithinRange,
|
|
60
|
+
s as nan,
|
|
61
|
+
i as roundToStepPrecision,
|
|
62
|
+
P as roundValue,
|
|
63
|
+
M as setValueAtIndex,
|
|
64
|
+
v as snapValueToStep,
|
|
65
|
+
$ as toPx
|
|
11
66
|
};
|
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
import { isPlainObject as
|
|
2
|
-
function
|
|
3
|
-
if (!
|
|
4
|
-
const
|
|
5
|
-
for (const e of
|
|
1
|
+
import { isPlainObject as f } from "./guard.js";
|
|
2
|
+
function r(t) {
|
|
3
|
+
if (!f(t) || t === void 0) return t;
|
|
4
|
+
const i = Reflect.ownKeys(t).filter((e) => typeof e == "string"), o = {};
|
|
5
|
+
for (const e of i) {
|
|
6
6
|
const n = t[e];
|
|
7
|
-
n !== void 0 && (
|
|
7
|
+
n !== void 0 && (o[e] = r(n));
|
|
8
8
|
}
|
|
9
|
-
return
|
|
9
|
+
return o;
|
|
10
|
+
}
|
|
11
|
+
function s(t, i) {
|
|
12
|
+
const o = {};
|
|
13
|
+
for (const e of i) {
|
|
14
|
+
const n = t[e];
|
|
15
|
+
n !== void 0 && (o[e] = n);
|
|
16
|
+
}
|
|
17
|
+
return o;
|
|
10
18
|
}
|
|
11
19
|
export {
|
|
12
|
-
|
|
20
|
+
r as compact,
|
|
21
|
+
s as pick
|
|
13
22
|
};
|