@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.
Files changed (37) hide show
  1. package/dist/client.js +35 -32
  2. package/dist/components/Slider/Slider.d.ts +47 -0
  3. package/dist/components/Slider/Slider.js +232 -0
  4. package/dist/components/Slider/index.d.ts +1 -0
  5. package/dist/components/Slider/index.js +5 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +39 -36
  8. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-context.js +5 -0
  9. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-control.js +16 -0
  10. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-dragging-indicator.js +18 -0
  11. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-hidden-input.js +17 -0
  12. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-label.js +16 -0
  13. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker-group.js +16 -0
  14. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker.js +17 -0
  15. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-range.js +16 -0
  16. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root-provider.js +20 -0
  17. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root.js +46 -0
  18. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-thumb.js +21 -0
  19. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-track.js +16 -0
  20. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-value-text.js +17 -0
  21. package/dist/node_modules/@ark-ui/react/dist/components/slider/slider.js +32 -0
  22. package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-context.js +10 -0
  23. package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-thumb-props-context.js +10 -0
  24. package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider.js +19 -0
  25. package/dist/node_modules/@zag-js/dom-query/dist/event.js +36 -31
  26. package/dist/node_modules/@zag-js/dom-query/dist/form.js +31 -21
  27. package/dist/node_modules/@zag-js/dom-query/dist/pointer-move.js +29 -0
  28. package/dist/node_modules/@zag-js/slider/dist/slider.anatomy.js +17 -0
  29. package/dist/node_modules/@zag-js/slider/dist/slider.connect.js +272 -0
  30. package/dist/node_modules/@zag-js/slider/dist/slider.dom.js +88 -0
  31. package/dist/node_modules/@zag-js/slider/dist/slider.machine.js +309 -0
  32. package/dist/node_modules/@zag-js/slider/dist/slider.style.js +119 -0
  33. package/dist/node_modules/@zag-js/slider/dist/slider.utils.js +105 -0
  34. package/dist/node_modules/@zag-js/utils/dist/number.js +63 -8
  35. package/dist/node_modules/@zag-js/utils/dist/object.js +17 -8
  36. package/dist/styles.css +1 -1
  37. package/package.json +1 -1
@@ -0,0 +1,272 @@
1
+ import { isLeftClick as L, isModifierKey as H, getEventPoint as G, getEventStep as K, getEventKey as X } from "../../dom-query/dist/event.js";
2
+ import { dataAttr as r, ariaAttr as Y } from "../../dom-query/dist/shared.js";
3
+ import { parts as u } from "./slider.anatomy.js";
4
+ import { getMarkerId as j, getControlId as q, getRangeId as J, getHiddenInputId as M, getLabelId as O, getThumbId as Q, getTrackId as Z, getValueTextId as $, getRootId as z, getFirstThumbEl as tt } from "./slider.dom.js";
5
+ import { getThumbStyle as U, getMarkerStyle as et, getMarkerGroupStyle as at, getControlStyle as rt, getRangeStyle as nt, getRootStyle as it } from "./slider.style.js";
6
+ import { getRangeAtIndex as E } from "./slider.utils.js";
7
+ import { first as ot, last as dt } from "../../utils/dist/array.js";
8
+ import { getPercentValue as lt, getValuePercent as st } from "../../utils/dist/number.js";
9
+ function Pt(g, l) {
10
+ const { state: I, send: n, context: v, prop: e, computed: D, scope: o } = g, h = e("aria-label"), T = e("aria-labelledby"), c = v.get("value"), A = v.get("focusedIndex"), p = I.matches("focus"), f = I.matches("dragging"), s = D("isDisabled"), b = e("invalid"), m = D("isInteractive"), V = e("orientation") === "horizontal", w = e("orientation") === "vertical";
11
+ function k(t) {
12
+ return st(t, e("min"), e("max"));
13
+ }
14
+ function C(t) {
15
+ return lt(t, e("min"), e("max"), e("step"));
16
+ }
17
+ return {
18
+ value: c,
19
+ dragging: f,
20
+ focused: p,
21
+ setValue(t) {
22
+ n({ type: "SET_VALUE", value: t });
23
+ },
24
+ getThumbValue(t) {
25
+ return c[t];
26
+ },
27
+ setThumbValue(t, a) {
28
+ n({ type: "SET_VALUE", index: t, value: a });
29
+ },
30
+ getValuePercent: k,
31
+ getPercentValue: C,
32
+ getThumbPercent(t) {
33
+ return k(c[t]);
34
+ },
35
+ setThumbPercent(t, a) {
36
+ const i = C(a);
37
+ n({ type: "SET_VALUE", index: t, value: i });
38
+ },
39
+ getThumbMin(t) {
40
+ return E(g, t).min;
41
+ },
42
+ getThumbMax(t) {
43
+ return E(g, t).max;
44
+ },
45
+ increment(t) {
46
+ n({ type: "INCREMENT", index: t });
47
+ },
48
+ decrement(t) {
49
+ n({ type: "DECREMENT", index: t });
50
+ },
51
+ focus() {
52
+ m && n({ type: "FOCUS", index: 0 });
53
+ },
54
+ getLabelProps() {
55
+ return l.label({
56
+ ...u.label.attrs,
57
+ dir: e("dir"),
58
+ "data-disabled": r(s),
59
+ "data-orientation": e("orientation"),
60
+ "data-invalid": r(b),
61
+ "data-dragging": r(f),
62
+ "data-focus": r(p),
63
+ id: O(o),
64
+ htmlFor: M(o, 0),
65
+ onClick(t) {
66
+ var a;
67
+ m && (t.preventDefault(), (a = tt(o)) == null || a.focus());
68
+ },
69
+ style: {
70
+ userSelect: "none",
71
+ WebkitUserSelect: "none"
72
+ }
73
+ });
74
+ },
75
+ getRootProps() {
76
+ return l.element({
77
+ ...u.root.attrs,
78
+ "data-disabled": r(s),
79
+ "data-orientation": e("orientation"),
80
+ "data-dragging": r(f),
81
+ "data-invalid": r(b),
82
+ "data-focus": r(p),
83
+ id: z(o),
84
+ dir: e("dir"),
85
+ style: it(g)
86
+ });
87
+ },
88
+ getValueTextProps() {
89
+ return l.element({
90
+ ...u.valueText.attrs,
91
+ dir: e("dir"),
92
+ "data-disabled": r(s),
93
+ "data-orientation": e("orientation"),
94
+ "data-invalid": r(b),
95
+ "data-focus": r(p),
96
+ id: $(o)
97
+ });
98
+ },
99
+ getTrackProps() {
100
+ return l.element({
101
+ ...u.track.attrs,
102
+ dir: e("dir"),
103
+ id: Z(o),
104
+ "data-disabled": r(s),
105
+ "data-invalid": r(b),
106
+ "data-dragging": r(f),
107
+ "data-orientation": e("orientation"),
108
+ "data-focus": r(p),
109
+ style: { position: "relative" }
110
+ });
111
+ },
112
+ getThumbProps(t) {
113
+ var _;
114
+ const { index: a = 0, name: i } = t, N = c[a], S = E(g, a), W = (_ = e("getAriaValueText")) == null ? void 0 : _({ value: N, index: a }), F = Array.isArray(h) ? h[a] : h, B = Array.isArray(T) ? T[a] : T;
115
+ return l.element({
116
+ ...u.thumb.attrs,
117
+ dir: e("dir"),
118
+ "data-index": a,
119
+ "data-name": i,
120
+ id: Q(o, a),
121
+ "data-disabled": r(s),
122
+ "data-orientation": e("orientation"),
123
+ "data-focus": r(p && A === a),
124
+ "data-dragging": r(f && A === a),
125
+ draggable: !1,
126
+ "aria-disabled": Y(s),
127
+ "aria-label": F,
128
+ "aria-labelledby": B ?? O(o),
129
+ "aria-orientation": e("orientation"),
130
+ "aria-valuemax": S.max,
131
+ "aria-valuemin": S.min,
132
+ "aria-valuenow": c[a],
133
+ "aria-valuetext": W,
134
+ role: "slider",
135
+ tabIndex: s ? void 0 : 0,
136
+ style: U(g, a),
137
+ onPointerDown(d) {
138
+ if (!m || !L(d)) return;
139
+ const P = d.currentTarget.getBoundingClientRect(), x = {
140
+ x: P.left + P.width / 2,
141
+ y: P.top + P.height / 2
142
+ }, R = {
143
+ x: d.clientX - x.x,
144
+ y: d.clientY - x.y
145
+ };
146
+ n({ type: "THUMB_POINTER_DOWN", index: a, offset: R }), d.stopPropagation();
147
+ },
148
+ onBlur() {
149
+ m && n({ type: "BLUR" });
150
+ },
151
+ onFocus() {
152
+ m && n({ type: "FOCUS", index: a });
153
+ },
154
+ onKeyDown(d) {
155
+ if (d.defaultPrevented || !m) return;
156
+ const y = K(d) * e("step"), P = {
157
+ ArrowUp() {
158
+ V || n({ type: "ARROW_INC", step: y, src: "ArrowUp" });
159
+ },
160
+ ArrowDown() {
161
+ V || n({ type: "ARROW_DEC", step: y, src: "ArrowDown" });
162
+ },
163
+ ArrowLeft() {
164
+ w || n({ type: "ARROW_DEC", step: y, src: "ArrowLeft" });
165
+ },
166
+ ArrowRight() {
167
+ w || n({ type: "ARROW_INC", step: y, src: "ArrowRight" });
168
+ },
169
+ PageUp() {
170
+ n({ type: "ARROW_INC", step: y, src: "PageUp" });
171
+ },
172
+ PageDown() {
173
+ n({ type: "ARROW_DEC", step: y, src: "PageDown" });
174
+ },
175
+ Home() {
176
+ n({ type: "HOME" });
177
+ },
178
+ End() {
179
+ n({ type: "END" });
180
+ }
181
+ }, x = X(d, {
182
+ dir: e("dir"),
183
+ orientation: e("orientation")
184
+ }), R = P[x];
185
+ R && (R(d), d.preventDefault(), d.stopPropagation());
186
+ }
187
+ });
188
+ },
189
+ getHiddenInputProps(t) {
190
+ const { index: a = 0, name: i } = t;
191
+ return l.input({
192
+ name: i ?? (e("name") ? e("name") + (c.length > 1 ? "[]" : "") : void 0),
193
+ form: e("form"),
194
+ type: "text",
195
+ hidden: !0,
196
+ defaultValue: c[a],
197
+ id: M(o, a)
198
+ });
199
+ },
200
+ getRangeProps() {
201
+ return l.element({
202
+ id: J(o),
203
+ ...u.range.attrs,
204
+ dir: e("dir"),
205
+ "data-dragging": r(f),
206
+ "data-focus": r(p),
207
+ "data-invalid": r(b),
208
+ "data-disabled": r(s),
209
+ "data-orientation": e("orientation"),
210
+ style: nt(g)
211
+ });
212
+ },
213
+ getControlProps() {
214
+ return l.element({
215
+ ...u.control.attrs,
216
+ dir: e("dir"),
217
+ id: q(o),
218
+ "data-dragging": r(f),
219
+ "data-disabled": r(s),
220
+ "data-orientation": e("orientation"),
221
+ "data-invalid": r(b),
222
+ "data-focus": r(p),
223
+ style: rt(),
224
+ onPointerDown(t) {
225
+ if (!m || !L(t) || H(t)) return;
226
+ const a = G(t);
227
+ n({ type: "POINTER_DOWN", point: a }), t.preventDefault(), t.stopPropagation();
228
+ }
229
+ });
230
+ },
231
+ getMarkerGroupProps() {
232
+ return l.element({
233
+ ...u.markerGroup.attrs,
234
+ role: "presentation",
235
+ dir: e("dir"),
236
+ "aria-hidden": !0,
237
+ "data-orientation": e("orientation"),
238
+ style: at()
239
+ });
240
+ },
241
+ getMarkerProps(t) {
242
+ const a = et(g, t.value);
243
+ let i;
244
+ return t.value < ot(c) ? i = "under-value" : t.value > dt(c) ? i = "over-value" : i = "at-value", l.element({
245
+ ...u.marker.attrs,
246
+ id: j(o, t.value),
247
+ role: "presentation",
248
+ dir: e("dir"),
249
+ "data-orientation": e("orientation"),
250
+ "data-value": t.value,
251
+ "data-disabled": r(s),
252
+ "data-state": i,
253
+ style: a
254
+ });
255
+ },
256
+ getDraggingIndicatorProps(t) {
257
+ const { index: a = 0 } = t, i = a === A && f;
258
+ return l.element({
259
+ ...u.draggingIndicator.attrs,
260
+ role: "presentation",
261
+ dir: e("dir"),
262
+ hidden: !i,
263
+ "data-orientation": e("orientation"),
264
+ "data-state": i ? "open" : "closed",
265
+ style: U(g, a)
266
+ });
267
+ }
268
+ };
269
+ }
270
+ export {
271
+ Pt as connect
272
+ };
@@ -0,0 +1,88 @@
1
+ import { getPercentValue as P, clampPercent as u } from "../../utils/dist/number.js";
2
+ import { dispatchInputValueEvent as T } from "../../dom-query/dist/form.js";
3
+ import { queryAll as V } from "../../dom-query/dist/query.js";
4
+ var b = (t) => {
5
+ var e;
6
+ return ((e = t.ids) == null ? void 0 : e.root) ?? `slider:${t.id}`;
7
+ }, k = (t, e) => {
8
+ var r, n;
9
+ return ((n = (r = t.ids) == null ? void 0 : r.thumb) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:thumb:${e}`;
10
+ }, C = (t, e) => {
11
+ var r, n;
12
+ return ((n = (r = t.ids) == null ? void 0 : r.hiddenInput) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:input:${e}`;
13
+ }, R = (t) => {
14
+ var e;
15
+ return ((e = t.ids) == null ? void 0 : e.control) ?? `slider:${t.id}:control`;
16
+ }, O = (t) => {
17
+ var e;
18
+ return ((e = t.ids) == null ? void 0 : e.track) ?? `slider:${t.id}:track`;
19
+ }, q = (t) => {
20
+ var e;
21
+ return ((e = t.ids) == null ? void 0 : e.range) ?? `slider:${t.id}:range`;
22
+ }, x = (t) => {
23
+ var e;
24
+ return ((e = t.ids) == null ? void 0 : e.label) ?? `slider:${t.id}:label`;
25
+ }, D = (t) => {
26
+ var e;
27
+ return ((e = t.ids) == null ? void 0 : e.valueText) ?? `slider:${t.id}:value-text`;
28
+ }, F = (t, e) => {
29
+ var r, n;
30
+ return ((n = (r = t.ids) == null ? void 0 : r.marker) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:marker:${e}`;
31
+ }, M = (t) => t.getById(b(t)), X = (t, e) => t.getById(k(t, e)), B = (t) => V(h(t), "[role=slider]"), Y = (t) => B(t)[0], H = (t, e) => t.getById(C(t, e)), h = (t) => t.getById(R(t)), j = (t, e, r) => e === "contain" ? (r === "vertical" ? (t == null ? void 0 : t.height) ?? 0 : (t == null ? void 0 : t.width) ?? 0) / 2 : 0, G = (t, e) => {
32
+ const { context: r, prop: n, scope: o, refs: l } = t, g = h(o);
33
+ if (!g) return;
34
+ const i = l.get("thumbDragOffset"), c = {
35
+ x: e.x - ((i == null ? void 0 : i.x) ?? 0),
36
+ y: e.y - ((i == null ? void 0 : i.y) ?? 0)
37
+ }, v = j(r.get("thumbSize"), n("thumbAlignment"), n("orientation")), d = w(c, g, v).getPercentValue({
38
+ orientation: n("orientation"),
39
+ dir: n("dir"),
40
+ inverted: { y: !0 }
41
+ });
42
+ return P(d, n("min"), n("max"), n("step"));
43
+ };
44
+ function w(t, e, r) {
45
+ const { left: n, top: o, width: l, height: g } = e.getBoundingClientRect(), i = l - r * 2, c = g - r * 2, v = n + r, f = o + r, d = {
46
+ x: t.x - v,
47
+ y: t.y - f
48
+ }, s = {
49
+ x: i > 0 ? u(d.x / i) : 0,
50
+ y: c > 0 ? u(d.y / c) : 0
51
+ };
52
+ function p(I = {}) {
53
+ const { dir: y = "ltr", orientation: m = "horizontal", inverted: a } = I, $ = typeof a == "object" ? a.x : a, E = typeof a == "object" ? a.y : a;
54
+ return m === "horizontal" ? y === "rtl" || $ ? 1 - s.x : s.x : E ? 1 - s.y : s.y;
55
+ }
56
+ return { offset: d, percent: s, getPercentValue: p };
57
+ }
58
+ var J = (t, e) => {
59
+ e.forEach((r, n) => {
60
+ const o = H(t, n);
61
+ o && T(o, { value: r });
62
+ });
63
+ }, K = (t) => ({
64
+ left: (t == null ? void 0 : t.offsetLeft) ?? 0,
65
+ top: (t == null ? void 0 : t.offsetTop) ?? 0,
66
+ width: (t == null ? void 0 : t.offsetWidth) ?? 0,
67
+ height: (t == null ? void 0 : t.offsetHeight) ?? 0
68
+ });
69
+ export {
70
+ J as dispatchChangeEvent,
71
+ h as getControlEl,
72
+ R as getControlId,
73
+ Y as getFirstThumbEl,
74
+ H as getHiddenInputEl,
75
+ C as getHiddenInputId,
76
+ x as getLabelId,
77
+ F as getMarkerId,
78
+ K as getOffsetRect,
79
+ G as getPointValue,
80
+ q as getRangeId,
81
+ M as getRootEl,
82
+ b as getRootId,
83
+ X as getThumbEl,
84
+ B as getThumbEls,
85
+ k as getThumbId,
86
+ O as getTrackId,
87
+ D as getValueTextId
88
+ };
@@ -0,0 +1,309 @@
1
+ import { getThumbEl as h, getPointValue as c, getHiddenInputEl as g, dispatchChangeEvent as f, getThumbEls as v, getRootEl as T, getOffsetRect as x } from "./slider.dom.js";
2
+ import { normalizeValues as b, constrainValue as I, getRangeAtIndex as d, increment as E, decrement as V, resolveThumbCollision as O, selectMovableThumb as C, getClosestIndex as D } from "./slider.utils.js";
3
+ import { createMachine as S } from "../../core/dist/create-machine.js";
4
+ import { setValueAtIndex as r, getValuePercent as A, getValueRanges as P, snapValueToStep as R, clampValue as N, isValueWithinRange as k } from "../../utils/dist/number.js";
5
+ import { raf as M } from "../../dom-query/dist/raf.js";
6
+ import { setElementValue as z, trackFormControl as p } from "../../dom-query/dist/form.js";
7
+ import { resizeObserverBorderBox as F } from "../../dom-query/dist/resize-observer.js";
8
+ import { callAll as _ } from "../../utils/dist/functions.js";
9
+ import { trackPointerMove as w } from "../../dom-query/dist/pointer-move.js";
10
+ import { memo as B } from "../../core/dist/memo.js";
11
+ import { isEqual as y } from "../../utils/dist/equal.js";
12
+ import { pick as U } from "../../utils/dist/object.js";
13
+ var W = (e, t) => (e == null ? void 0 : e.width) === (t == null ? void 0 : t.width) && (e == null ? void 0 : e.height) === (t == null ? void 0 : t.height), m = (e, t, n, a, s) => P(e, t, n, s * a).map((o) => {
14
+ const l = R(o.value, o.min, o.max, a), i = N(l, o.min, o.max);
15
+ if (!k(i, t, n))
16
+ throw new Error(
17
+ "[zag-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid"
18
+ );
19
+ return i;
20
+ }), ee = S({
21
+ props({ props: e }) {
22
+ const t = e.min ?? 0, n = e.max ?? 100, a = e.step ?? 1, s = e.defaultValue ?? [t], u = e.minStepsBetweenThumbs ?? 0;
23
+ return {
24
+ dir: "ltr",
25
+ thumbAlignment: "contain",
26
+ origin: "start",
27
+ orientation: "horizontal",
28
+ thumbCollisionBehavior: "none",
29
+ minStepsBetweenThumbs: u,
30
+ ...e,
31
+ defaultValue: m(s, t, n, a, u),
32
+ value: e.value ? m(e.value, t, n, a, u) : void 0,
33
+ max: n,
34
+ step: a,
35
+ min: t
36
+ };
37
+ },
38
+ initialState() {
39
+ return "idle";
40
+ },
41
+ context({ prop: e, bindable: t, getContext: n }) {
42
+ return {
43
+ thumbSize: t(() => ({
44
+ defaultValue: e("thumbSize") || null
45
+ })),
46
+ value: t(() => ({
47
+ defaultValue: e("defaultValue"),
48
+ value: e("value"),
49
+ isEqual: y,
50
+ hash(a) {
51
+ return a.join(",");
52
+ },
53
+ onChange(a) {
54
+ var s;
55
+ (s = e("onValueChange")) == null || s({ value: a });
56
+ }
57
+ })),
58
+ focusedIndex: t(() => ({
59
+ defaultValue: -1,
60
+ onChange(a) {
61
+ var u;
62
+ const s = n();
63
+ (u = e("onFocusChange")) == null || u({ focusedIndex: a, value: s.get("value") });
64
+ }
65
+ })),
66
+ fieldsetDisabled: t(() => ({
67
+ defaultValue: !1
68
+ }))
69
+ };
70
+ },
71
+ refs() {
72
+ return {
73
+ thumbDragOffset: null,
74
+ thumbDragStartValue: null
75
+ };
76
+ },
77
+ computed: {
78
+ isHorizontal: ({ prop: e }) => e("orientation") === "horizontal",
79
+ isVertical: ({ prop: e }) => e("orientation") === "vertical",
80
+ isRtl: ({ prop: e }) => e("orientation") === "horizontal" && e("dir") === "rtl",
81
+ isDisabled: ({ context: e, prop: t }) => !!t("disabled") || e.get("fieldsetDisabled"),
82
+ isInteractive: ({ prop: e, computed: t }) => !(e("readOnly") || t("isDisabled")),
83
+ hasMeasuredThumbSize: ({ context: e }) => e.get("thumbSize") != null,
84
+ valuePercent: B(
85
+ ({ context: e, prop: t }) => [e.get("value"), t("min"), t("max")],
86
+ ([e, t, n]) => e.map((a) => 100 * A(a, t, n))
87
+ )
88
+ },
89
+ watch({ track: e, action: t, context: n, computed: a, send: s }) {
90
+ e([() => n.hash("value")], () => {
91
+ t(["syncInputElements", "dispatchChangeEvent"]);
92
+ }), e([() => a("isDisabled")], () => {
93
+ a("isDisabled") && s({ type: "POINTER_CANCEL" });
94
+ });
95
+ },
96
+ effects: ["trackFormControlState", "trackThumbSize"],
97
+ on: {
98
+ SET_VALUE: [
99
+ {
100
+ guard: "hasIndex",
101
+ actions: ["setValueAtIndex", "invokeOnChangeEnd"]
102
+ },
103
+ {
104
+ actions: ["setValue", "invokeOnChangeEnd"]
105
+ }
106
+ ],
107
+ INCREMENT: {
108
+ actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
109
+ },
110
+ DECREMENT: {
111
+ actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
112
+ }
113
+ },
114
+ states: {
115
+ idle: {
116
+ on: {
117
+ POINTER_DOWN: {
118
+ target: "dragging",
119
+ actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
120
+ },
121
+ FOCUS: {
122
+ target: "focus",
123
+ actions: ["setFocusedIndex"]
124
+ },
125
+ THUMB_POINTER_DOWN: {
126
+ target: "dragging",
127
+ actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
128
+ }
129
+ }
130
+ },
131
+ focus: {
132
+ entry: ["focusActiveThumb"],
133
+ on: {
134
+ POINTER_DOWN: {
135
+ target: "dragging",
136
+ actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
137
+ },
138
+ THUMB_POINTER_DOWN: {
139
+ target: "dragging",
140
+ actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
141
+ },
142
+ ARROW_DEC: {
143
+ actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
144
+ },
145
+ ARROW_INC: {
146
+ actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
147
+ },
148
+ HOME: {
149
+ actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
150
+ },
151
+ END: {
152
+ actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
153
+ },
154
+ BLUR: {
155
+ target: "idle",
156
+ actions: ["clearFocusedIndex"]
157
+ }
158
+ }
159
+ },
160
+ dragging: {
161
+ entry: ["focusActiveThumb"],
162
+ effects: ["trackPointerMove"],
163
+ on: {
164
+ POINTER_UP: {
165
+ target: "focus",
166
+ actions: ["invokeOnChangeEnd", "clearThumbDragOffset", "clearThumbDragStartValue"]
167
+ },
168
+ POINTER_MOVE: {
169
+ actions: ["setPointerValue"]
170
+ },
171
+ POINTER_CANCEL: {
172
+ target: "idle",
173
+ actions: ["clearFocusedIndex", "clearThumbDragOffset", "clearThumbDragStartValue"]
174
+ }
175
+ }
176
+ }
177
+ },
178
+ implementations: {
179
+ guards: {
180
+ hasIndex: ({ event: e }) => e.index != null
181
+ },
182
+ effects: {
183
+ trackFormControlState({ context: e, scope: t }) {
184
+ return p(T(t), {
185
+ onFieldsetDisabledChange(n) {
186
+ e.set("fieldsetDisabled", n);
187
+ },
188
+ onFormReset() {
189
+ e.set("value", e.initial("value"));
190
+ }
191
+ });
192
+ },
193
+ trackPointerMove({ scope: e, send: t }) {
194
+ return w(e.getDoc(), {
195
+ onPointerMove(n) {
196
+ t({ type: "POINTER_MOVE", point: n.point });
197
+ },
198
+ onPointerUp() {
199
+ t({ type: "POINTER_UP" });
200
+ }
201
+ });
202
+ },
203
+ trackThumbSize({ context: e, scope: t, prop: n }) {
204
+ if (n("thumbAlignment") !== "contain" || n("thumbSize")) return;
205
+ const a = (o) => {
206
+ const l = x(o), i = U(l, ["width", "height"]);
207
+ W(e.get("thumbSize"), i) || e.set("thumbSize", i);
208
+ }, s = v(t);
209
+ s.forEach(a);
210
+ const u = s.map((o) => F.observe(o, () => a(o)));
211
+ return _(...u);
212
+ }
213
+ },
214
+ actions: {
215
+ dispatchChangeEvent({ context: e, scope: t }) {
216
+ f(t, e.get("value"));
217
+ },
218
+ syncInputElements({ context: e, scope: t }) {
219
+ e.get("value").forEach((n, a) => {
220
+ const s = g(t, a);
221
+ z(s, n.toString());
222
+ });
223
+ },
224
+ invokeOnChangeEnd({ prop: e, context: t }) {
225
+ queueMicrotask(() => {
226
+ var n;
227
+ (n = e("onValueChangeEnd")) == null || n({ value: t.get("value") });
228
+ });
229
+ },
230
+ setClosestThumbIndex(e) {
231
+ const { context: t, event: n } = e, a = c(e, n.point);
232
+ if (a == null) return;
233
+ const s = D(e, a);
234
+ t.set("focusedIndex", s);
235
+ },
236
+ setFocusedIndex(e) {
237
+ const { context: t, event: n } = e, a = C(e, n.index);
238
+ t.set("focusedIndex", a);
239
+ },
240
+ clearFocusedIndex({ context: e }) {
241
+ e.set("focusedIndex", -1);
242
+ },
243
+ setThumbDragOffset(e) {
244
+ const { refs: t, event: n } = e;
245
+ t.set("thumbDragOffset", n.offset ?? null);
246
+ },
247
+ clearThumbDragOffset({ refs: e }) {
248
+ e.set("thumbDragOffset", null);
249
+ },
250
+ setThumbDragStartValue({ refs: e, context: t }) {
251
+ e.set("thumbDragStartValue", t.get("value").slice());
252
+ },
253
+ clearThumbDragStartValue({ refs: e }) {
254
+ e.set("thumbDragStartValue", null);
255
+ },
256
+ setPointerValue(e) {
257
+ queueMicrotask(() => {
258
+ const { context: t, event: n, prop: a, refs: s } = e, u = c(e, n.point);
259
+ if (u == null) return;
260
+ const o = t.get("focusedIndex"), l = s.get("thumbDragStartValue"), i = O(
261
+ a("thumbCollisionBehavior"),
262
+ o,
263
+ u,
264
+ t.get("value"),
265
+ a("min"),
266
+ a("max"),
267
+ a("step"),
268
+ a("minStepsBetweenThumbs"),
269
+ l == null ? void 0 : l[o]
270
+ );
271
+ i.swapped && t.set("focusedIndex", i.index), t.set("value", i.values);
272
+ });
273
+ },
274
+ focusActiveThumb({ scope: e, context: t }) {
275
+ M(() => {
276
+ const n = h(e, t.get("focusedIndex"));
277
+ n == null || n.focus({ preventScroll: !0 });
278
+ });
279
+ },
280
+ decrementThumbAtIndex(e) {
281
+ const { context: t, event: n } = e, a = V(e, n.index, n.step);
282
+ t.set("value", a);
283
+ },
284
+ incrementThumbAtIndex(e) {
285
+ const { context: t, event: n } = e, a = E(e, n.index, n.step);
286
+ t.set("value", a);
287
+ },
288
+ setFocusedThumbToMin(e) {
289
+ const { context: t } = e, n = t.get("focusedIndex"), { min: a } = d(e, n);
290
+ t.set("value", (s) => r(s, n, a));
291
+ },
292
+ setFocusedThumbToMax(e) {
293
+ const { context: t } = e, n = t.get("focusedIndex"), { max: a } = d(e, n);
294
+ t.set("value", (s) => r(s, n, a));
295
+ },
296
+ setValueAtIndex(e) {
297
+ const { context: t, event: n } = e, a = I(e, n.value, n.index);
298
+ t.set("value", (s) => r(s, n.index, a));
299
+ },
300
+ setValue(e) {
301
+ const { context: t, event: n } = e, a = b(e, n.value);
302
+ t.set("value", a);
303
+ }
304
+ }
305
+ }
306
+ });
307
+ export {
308
+ ee as machine
309
+ };