@zag-js/slider 0.1.8 → 0.1.11

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/index.mjs CHANGED
@@ -1,150 +1,74 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
- var __spreadValues = (a, b) => {
10
- for (var prop in b || (b = {}))
11
- if (__hasOwnProp.call(b, prop))
12
- __defNormalProp(a, prop, b[prop]);
13
- if (__getOwnPropSymbols)
14
- for (var prop of __getOwnPropSymbols(b)) {
15
- if (__propIsEnum.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- }
18
- return a;
19
- };
20
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
-
22
1
  // ../../utilities/dom/dist/index.mjs
23
- var __pow = Math.pow;
24
2
  var dataAttr = (guard) => {
25
3
  return guard ? "" : void 0;
26
4
  };
27
- var isDom = () => typeof window !== "undefined";
5
+ var runIfFn = (v, ...a) => {
6
+ const res = typeof v === "function" ? v(...a) : v;
7
+ return res ?? void 0;
8
+ };
9
+ var callAll = (...fns) => (...a) => {
10
+ fns.forEach(function(fn) {
11
+ fn == null ? void 0 : fn(...a);
12
+ });
13
+ };
28
14
  var isArray = (v) => Array.isArray(v);
29
15
  var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
30
16
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
17
+ var isDom = () => typeof window !== "undefined";
31
18
  function getPlatform() {
32
- var _a;
33
19
  const agent = navigator.userAgentData;
34
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
20
+ return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
35
21
  }
36
22
  var pt = (v) => isDom() && v.test(getPlatform());
37
23
  var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
38
24
  var isMac = () => pt(/^Mac/) && !isTouchDevice;
39
25
  var isApple = () => pt(/mac|iphone|ipad|ipod/i);
40
26
  var isIos = () => isApple() && !isMac();
27
+ function isDocument(el) {
28
+ return el.nodeType === Node.DOCUMENT_NODE;
29
+ }
30
+ function isWindow(value) {
31
+ return (value == null ? void 0 : value.toString()) === "[object Window]";
32
+ }
33
+ function getDocument(el) {
34
+ if (isWindow(el))
35
+ return el.document;
36
+ if (isDocument(el))
37
+ return el;
38
+ return (el == null ? void 0 : el.ownerDocument) ?? document;
39
+ }
40
+ function getWindow(el) {
41
+ return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
42
+ }
43
+ function defineDomHelpers(helpers) {
44
+ const dom2 = {
45
+ getRootNode: (ctx) => {
46
+ var _a;
47
+ return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
48
+ },
49
+ getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
50
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
51
+ getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
52
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
53
+ };
54
+ return {
55
+ ...dom2,
56
+ ...helpers
57
+ };
58
+ }
59
+ function getNativeEvent(e) {
60
+ return e.nativeEvent ?? e;
61
+ }
41
62
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
42
63
  var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
43
64
  var supportsMouseEvent = () => isDom() && window.onmousedown === null;
44
65
  var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
45
66
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
46
67
  var isLeftClick = (v) => v.button === 0;
47
- var runIfFn = (v, ...a) => {
48
- const res = typeof v === "function" ? v(...a) : v;
49
- return res != null ? res : void 0;
50
- };
51
- var noop = () => {
52
- };
53
- var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
54
- var isRef = (v) => hasProp(v, "current");
55
- var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
56
- function extractInfo(event, type = "page") {
57
- const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
58
- return {
59
- point: {
60
- x: point[`${type}X`],
61
- y: point[`${type}Y`]
62
- }
63
- };
64
- }
65
- function addDomEvent(target, eventName, handler, options) {
66
- const node = isRef(target) ? target.current : runIfFn(target);
67
- node == null ? void 0 : node.addEventListener(eventName, handler, options);
68
- return () => {
69
- node == null ? void 0 : node.removeEventListener(eventName, handler, options);
70
- };
71
- }
72
- function addPointerEvent(target, event, listener, options) {
73
- var _a;
74
- const type = (_a = getEventName(event)) != null ? _a : event;
75
- return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
76
- }
77
- function wrapHandler(fn, filter = false) {
78
- const listener = (event) => {
79
- fn(event, extractInfo(event));
80
- };
81
- return filter ? filterPrimaryPointer(listener) : listener;
82
- }
83
- function filterPrimaryPointer(fn) {
84
- return (event) => {
85
- var _a;
86
- const win = (_a = event.view) != null ? _a : window;
87
- const isMouseEvent2 = event instanceof win.MouseEvent;
88
- const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
89
- if (isPrimary)
90
- fn(event);
91
- };
92
- }
93
- var mouseEventNames = {
94
- pointerdown: "mousedown",
95
- pointermove: "mousemove",
96
- pointerup: "mouseup",
97
- pointercancel: "mousecancel",
98
- pointerover: "mouseover",
99
- pointerout: "mouseout",
100
- pointerenter: "mouseenter",
101
- pointerleave: "mouseleave"
102
- };
103
- var touchEventNames = {
104
- pointerdown: "touchstart",
105
- pointermove: "touchmove",
106
- pointerup: "touchend",
107
- pointercancel: "touchcancel"
108
- };
109
- function getEventName(evt) {
110
- if (supportsPointerEvent())
111
- return evt;
112
- if (supportsTouchEvent())
113
- return touchEventNames[evt];
114
- if (supportsMouseEvent())
115
- return mouseEventNames[evt];
116
- return evt;
117
- }
118
- function nextTick(fn) {
119
- const set = /* @__PURE__ */ new Set();
120
- function raf2(fn2) {
121
- const id = globalThis.requestAnimationFrame(fn2);
122
- set.add(() => globalThis.cancelAnimationFrame(id));
123
- }
124
- raf2(() => raf2(fn));
125
- return function cleanup() {
126
- set.forEach(function(fn2) {
127
- fn2();
128
- });
129
- };
130
- }
131
- function raf(fn) {
132
- const id = globalThis.requestAnimationFrame(fn);
133
- return function cleanup() {
134
- globalThis.cancelAnimationFrame(id);
135
- };
136
- }
137
- function getOwnerWindow(el) {
138
- var _a;
139
- return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
140
- }
141
- function getNativeEvent(e) {
142
- var _a;
143
- return (_a = e.nativeEvent) != null ? _a : e;
144
- }
68
+ var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
145
69
  function observeAttributes(node, attributes, fn) {
146
70
  if (!node)
147
- return noop;
71
+ return;
148
72
  const attrs = Array.isArray(attributes) ? attributes : [attributes];
149
73
  const win = node.ownerDocument.defaultView || window;
150
74
  const obs = new win.MutationObserver((changes) => {
@@ -182,20 +106,57 @@ function trackFieldsetDisabled(el, callback) {
182
106
  callback(fieldset.disabled);
183
107
  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
184
108
  }
109
+ function getElementOffset(element) {
110
+ let left = 0;
111
+ let top = 0;
112
+ let el = element;
113
+ if (el.parentNode) {
114
+ do {
115
+ left += el.offsetLeft;
116
+ top += el.offsetTop;
117
+ } while ((el = el.offsetParent) && el.nodeType < 9);
118
+ el = element;
119
+ do {
120
+ left -= el.scrollLeft;
121
+ top -= el.scrollTop;
122
+ } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
123
+ }
124
+ return {
125
+ top,
126
+ right: innerWidth - left - element.offsetWidth,
127
+ bottom: innerHeight - top - element.offsetHeight,
128
+ left
129
+ };
130
+ }
131
+ var fallback = {
132
+ pageX: 0,
133
+ pageY: 0,
134
+ clientX: 0,
135
+ clientY: 0
136
+ };
137
+ function getEventPoint(event, type = "page") {
138
+ const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
139
+ return { x: point[`${type}X`], y: point[`${type}Y`] };
140
+ }
141
+ function getPointRelativeToNode(point, element) {
142
+ const offset = getElementOffset(element);
143
+ const x = point.x - offset.left;
144
+ const y = point.y - offset.top;
145
+ return { x, y };
146
+ }
185
147
  function getDescriptor(el, options) {
186
- var _a;
187
148
  const { type, property } = options;
188
- const win = getOwnerWindow(el);
189
- const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
190
- const proto = win[_type].prototype;
191
- return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
149
+ const proto = getWindow(el)[type].prototype;
150
+ return Object.getOwnPropertyDescriptor(proto, property) ?? {};
192
151
  }
193
152
  function dispatchInputValueEvent(el, value) {
194
153
  var _a;
195
- const win = getOwnerWindow(el);
154
+ if (!el)
155
+ return;
156
+ const win = getWindow(el);
196
157
  if (!(el instanceof win.HTMLInputElement))
197
158
  return;
198
- const desc = getDescriptor(el, { type: "input", property: "value" });
159
+ const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
199
160
  (_a = desc.set) == null ? void 0 : _a.call(el, value);
200
161
  const event = new win.Event("input", { bubbles: true });
201
162
  el.dispatchEvent(event);
@@ -216,10 +177,9 @@ var sameKeyMap = {
216
177
  Right: "ArrowRight"
217
178
  };
218
179
  function getEventKey(event, options = {}) {
219
- var _a;
220
180
  const { dir = "ltr", orientation = "horizontal" } = options;
221
181
  let { key } = event;
222
- key = (_a = sameKeyMap[key]) != null ? _a : key;
182
+ key = sameKeyMap[key] ?? key;
223
183
  const isRtl = dir === "rtl" && orientation === "horizontal";
224
184
  if (isRtl && key in rtlKeyMap) {
225
185
  key = rtlKeyMap[key];
@@ -237,11 +197,92 @@ function getEventStep(event) {
237
197
  return isSkipKey ? 10 : 1;
238
198
  }
239
199
  }
200
+ var isRef = (v) => hasProp(v, "current");
201
+ var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
202
+ function extractInfo(event, type = "page") {
203
+ const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
204
+ return {
205
+ point: {
206
+ x: point[`${type}X`],
207
+ y: point[`${type}Y`]
208
+ }
209
+ };
210
+ }
211
+ function addDomEvent(target, eventName, handler, options) {
212
+ const node = isRef(target) ? target.current : runIfFn(target);
213
+ node == null ? void 0 : node.addEventListener(eventName, handler, options);
214
+ return () => {
215
+ node == null ? void 0 : node.removeEventListener(eventName, handler, options);
216
+ };
217
+ }
218
+ function addPointerEvent(target, event, listener, options) {
219
+ const type = getEventName(event) ?? event;
220
+ return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
221
+ }
222
+ function wrapHandler(fn, filter = false) {
223
+ const listener = (event) => {
224
+ fn(event, extractInfo(event));
225
+ };
226
+ return filter ? filterPrimaryPointer(listener) : listener;
227
+ }
228
+ function filterPrimaryPointer(fn) {
229
+ return (event) => {
230
+ const win = event.view ?? window;
231
+ const isMouseEvent2 = event instanceof win.MouseEvent;
232
+ const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
233
+ if (isPrimary)
234
+ fn(event);
235
+ };
236
+ }
237
+ var mouseEventNames = {
238
+ pointerdown: "mousedown",
239
+ pointermove: "mousemove",
240
+ pointerup: "mouseup",
241
+ pointercancel: "mousecancel",
242
+ pointerover: "mouseover",
243
+ pointerout: "mouseout",
244
+ pointerenter: "mouseenter",
245
+ pointerleave: "mouseleave"
246
+ };
247
+ var touchEventNames = {
248
+ pointerdown: "touchstart",
249
+ pointermove: "touchmove",
250
+ pointerup: "touchend",
251
+ pointercancel: "touchcancel"
252
+ };
253
+ function getEventName(evt) {
254
+ if (supportsPointerEvent())
255
+ return evt;
256
+ if (supportsTouchEvent())
257
+ return touchEventNames[evt];
258
+ if (supportsMouseEvent())
259
+ return mouseEventNames[evt];
260
+ return evt;
261
+ }
262
+ function nextTick(fn) {
263
+ const set = /* @__PURE__ */ new Set();
264
+ function raf2(fn2) {
265
+ const id = globalThis.requestAnimationFrame(fn2);
266
+ set.add(() => globalThis.cancelAnimationFrame(id));
267
+ }
268
+ raf2(() => raf2(fn));
269
+ return function cleanup() {
270
+ set.forEach(function(fn2) {
271
+ fn2();
272
+ });
273
+ };
274
+ }
275
+ function raf(fn) {
276
+ const id = globalThis.requestAnimationFrame(fn);
277
+ return function cleanup() {
278
+ globalThis.cancelAnimationFrame(id);
279
+ };
280
+ }
240
281
  var state = "default";
241
282
  var savedUserSelect = "";
242
283
  var modifiedElementMap = /* @__PURE__ */ new WeakMap();
243
284
  function disableTextSelection({ target, doc } = {}) {
244
- const _document = doc != null ? doc : document;
285
+ const _document = doc ?? document;
245
286
  if (isIos()) {
246
287
  if (state === "default") {
247
288
  savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -255,7 +296,7 @@ function disableTextSelection({ target, doc } = {}) {
255
296
  return () => restoreTextSelection({ target, doc: _document });
256
297
  }
257
298
  function restoreTextSelection({ target, doc } = {}) {
258
- const _document = doc != null ? doc : document;
299
+ const _document = doc ?? document;
259
300
  if (isIos()) {
260
301
  if (state !== "disabled")
261
302
  return;
@@ -275,7 +316,7 @@ function restoreTextSelection({ target, doc } = {}) {
275
316
  if (target && modifiedElementMap.has(target)) {
276
317
  let targetOldUserSelect = modifiedElementMap.get(target);
277
318
  if (target.style.userSelect === "none") {
278
- target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
319
+ target.style.userSelect = targetOldUserSelect ?? "";
279
320
  }
280
321
  if (target.getAttribute("style") === "") {
281
322
  target.removeAttribute("style");
@@ -284,13 +325,13 @@ function restoreTextSelection({ target, doc } = {}) {
284
325
  }
285
326
  }
286
327
  }
287
- function trackPointerMove(opts) {
288
- const { onPointerMove, onPointerUp, ctx } = opts;
289
- const { doc = document, threshold = 5 } = ctx;
328
+ var THRESHOLD = 5;
329
+ function trackPointerMove(doc, opts) {
330
+ const { onPointerMove, onPointerUp } = opts;
290
331
  const handlePointerMove = (event, info) => {
291
332
  const { point: p } = info;
292
- const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
293
- if (distance < threshold)
333
+ const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
334
+ if (distance < THRESHOLD)
294
335
  return;
295
336
  if (isMouseEvent(event) && isLeftClick(event)) {
296
337
  onPointerUp();
@@ -298,33 +339,13 @@ function trackPointerMove(opts) {
298
339
  }
299
340
  onPointerMove(info, event);
300
341
  };
301
- return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
302
- }
303
-
304
- // ../../utilities/rect/dist/index.mjs
305
- var isArray2 = (v) => Array.isArray(v);
306
- var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
307
- var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
308
- var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
309
- var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
310
- function getEventPoint(e, t = "page") {
311
- const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
312
- return { x: p[`${t}X`], y: p[`${t}Y`] };
313
- }
314
- function relativeToNode(p, el) {
315
- const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
316
- const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
317
- return {
318
- point: { x: dx, y: dy },
319
- progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
320
- };
342
+ return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
321
343
  }
322
344
 
323
345
  // ../../utilities/number/dist/index.mjs
324
- var __pow2 = Math.pow;
325
346
  function round(v, t) {
326
347
  let num = valueOf(v);
327
- const p = __pow2(10, t != null ? t : 10);
348
+ const p = 10 ** (t ?? 10);
328
349
  num = Math.round(num * p) / p;
329
350
  return t ? num.toFixed(t) : v.toString();
330
351
  }
@@ -360,7 +381,7 @@ function valueOf(v) {
360
381
  function decimalOperation(a, op, b) {
361
382
  let result = op === "+" ? a + b : a - b;
362
383
  if (a % 1 !== 0 || b % 1 !== 0) {
363
- const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
384
+ const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
364
385
  a = Math.round(a * multiplier);
365
386
  b = Math.round(b * multiplier);
366
387
  result = op === "+" ? a + b : a - b;
@@ -382,14 +403,12 @@ var transform = (a, b) => {
382
403
 
383
404
  // src/slider.style.ts
384
405
  function getVerticalThumbOffset(ctx) {
385
- var _a;
386
- const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
406
+ const { height = 0 } = ctx.thumbSize ?? {};
387
407
  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
388
408
  return parseFloat(getValue(ctx.value).toFixed(2));
389
409
  }
390
410
  function getHorizontalThumbOffset(ctx) {
391
- var _a;
392
- const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
411
+ const { width = 0 } = ctx.thumbSize ?? {};
393
412
  if (ctx.isRtl) {
394
413
  const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
395
414
  return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -499,69 +518,64 @@ var utils = {
499
518
  return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
500
519
  },
501
520
  decrement(ctx, step) {
502
- let value = decrement(ctx.value, step != null ? step : ctx.step);
521
+ let value = decrement(ctx.value, step ?? ctx.step);
503
522
  return utils.convert(ctx, value);
504
523
  },
505
524
  increment(ctx, step) {
506
- let value = increment(ctx.value, step != null ? step : ctx.step);
525
+ let value = increment(ctx.value, step ?? ctx.step);
507
526
  return utils.convert(ctx, value);
508
527
  }
509
528
  };
510
529
 
511
530
  // src/slider.dom.ts
512
- var dom = __spreadProps(__spreadValues({}, styles), {
513
- getDoc: (ctx) => {
514
- var _a;
515
- return (_a = ctx.doc) != null ? _a : document;
516
- },
517
- getRootNode: (ctx) => {
518
- var _a;
519
- return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
520
- },
531
+ var dom = defineDomHelpers({
532
+ ...styles,
521
533
  getRootId: (ctx) => {
522
- var _a, _b;
523
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.uid}`;
534
+ var _a;
535
+ return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
524
536
  },
525
537
  getThumbId: (ctx) => {
526
- var _a, _b;
527
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.uid}:thumb`;
538
+ var _a;
539
+ return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
528
540
  },
529
541
  getControlId: (ctx) => {
530
- var _a, _b;
531
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.uid}:control`;
542
+ var _a;
543
+ return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
532
544
  },
533
- getInputId: (ctx) => `slider:${ctx.uid}:input`,
545
+ getInputId: (ctx) => `slider:${ctx.id}:input`,
534
546
  getOutputId: (ctx) => {
535
- var _a, _b;
536
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.uid}:output`;
547
+ var _a;
548
+ return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
537
549
  },
538
550
  getTrackId: (ctx) => {
539
- var _a, _b;
540
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.uid}track`;
551
+ var _a;
552
+ return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
541
553
  },
542
554
  getRangeId: (ctx) => {
543
- var _a, _b;
544
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.uid}:range`;
555
+ var _a;
556
+ return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
545
557
  },
546
558
  getLabelId: (ctx) => {
547
- var _a, _b;
548
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
559
+ var _a;
560
+ return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
549
561
  },
550
- getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
551
- getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
552
- getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
553
- getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
554
- getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
562
+ getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
563
+ getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
564
+ getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
565
+ getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
566
+ getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
555
567
  getValueFromPoint(ctx, point) {
556
- const control = dom.getControlEl(ctx);
557
- if (!control)
568
+ const el = dom.getControlEl(ctx);
569
+ if (!el)
558
570
  return;
559
- const { progress } = relativeToNode(point, control);
571
+ const relativePoint = getPointRelativeToNode(point, el);
572
+ const percentX = relativePoint.x / el.offsetWidth;
573
+ const percentY = relativePoint.y / el.offsetHeight;
560
574
  let percent;
561
575
  if (ctx.isHorizontal) {
562
- percent = ctx.isRtl ? 1 - progress.x : progress.x;
576
+ percent = ctx.isRtl ? 1 - percentX : percentX;
563
577
  } else {
564
- percent = 1 - progress.y;
578
+ percent = 1 - percentY;
565
579
  }
566
580
  return utils.fromPercent(ctx, percent);
567
581
  },
@@ -573,22 +587,8 @@ var dom = __spreadProps(__spreadValues({}, styles), {
573
587
  }
574
588
  });
575
589
 
576
- // ../../types/dist/index.mjs
577
- function createNormalizer(fn) {
578
- return new Proxy({}, {
579
- get() {
580
- return fn;
581
- }
582
- });
583
- }
584
- var normalizeProp = createNormalizer((v) => v);
585
-
586
- // ../../utilities/core/dist/index.mjs
587
- var isLeftClick2 = (v) => v.button === 0;
588
- var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
589
-
590
590
  // src/slider.connect.ts
591
- function connect(state2, send, normalize = normalizeProp) {
591
+ function connect(state2, send, normalize) {
592
592
  var _a, _b;
593
593
  const ariaLabel = state2.context["aria-label"];
594
594
  const ariaLabelledBy = state2.context["aria-labelledby"];
@@ -656,7 +656,7 @@ function connect(state2, send, normalize = normalizeProp) {
656
656
  "data-invalid": dataAttr(isInvalid),
657
657
  "aria-disabled": isDisabled || void 0,
658
658
  "aria-label": ariaLabel,
659
- "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
659
+ "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
660
660
  "aria-orientation": state2.context.orientation,
661
661
  "aria-valuemax": state2.context.max,
662
662
  "aria-valuemin": state2.context.min,
@@ -765,7 +765,7 @@ function connect(state2, send, normalize = normalizeProp) {
765
765
  if (!isInteractive)
766
766
  return;
767
767
  const evt = getNativeEvent(event);
768
- if (!isLeftClick2(evt) || isModifiedEvent(evt))
768
+ if (!isLeftClick(evt) || isModifiedEvent(evt))
769
769
  return;
770
770
  const point = getEventPoint(evt);
771
771
  send({ type: "POINTER_DOWN", point });
@@ -800,15 +800,14 @@ function connect(state2, send, normalize = normalizeProp) {
800
800
  }
801
801
 
802
802
  // src/slider.machine.ts
803
- import { createMachine, ref } from "@zag-js/core";
804
- function machine(ctx = {}) {
803
+ import { createMachine } from "@zag-js/core";
804
+ function machine(ctx) {
805
805
  return createMachine({
806
806
  id: "slider",
807
807
  initial: "unknown",
808
- context: __spreadValues({
808
+ context: {
809
809
  thumbSize: null,
810
810
  thumbAlignment: "contain",
811
- uid: "",
812
811
  disabled: false,
813
812
  threshold: 5,
814
813
  dir: "ltr",
@@ -818,8 +817,9 @@ function machine(ctx = {}) {
818
817
  value: 0,
819
818
  step: 1,
820
819
  min: 0,
821
- max: 100
822
- }, ctx),
820
+ max: 100,
821
+ ...ctx
822
+ },
823
823
  computed: {
824
824
  isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
825
825
  isVertical: (ctx2) => ctx2.orientation === "vertical",
@@ -847,7 +847,7 @@ function machine(ctx = {}) {
847
847
  on: {
848
848
  SETUP: {
849
849
  target: "idle",
850
- actions: ["setupDocument", "setThumbSize", "checkValue"]
850
+ actions: ["setThumbSize", "checkValue"]
851
851
  }
852
852
  }
853
853
  },
@@ -919,30 +919,21 @@ function machine(ctx = {}) {
919
919
  },
920
920
  activities: {
921
921
  trackFieldsetDisabled(ctx2) {
922
- let cleanup;
923
- nextTick(() => {
924
- cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
925
- if (disabled) {
926
- ctx2.disabled = disabled;
927
- }
928
- });
922
+ return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
923
+ if (disabled) {
924
+ ctx2.disabled = disabled;
925
+ }
929
926
  });
930
- return () => cleanup == null ? void 0 : cleanup();
931
927
  },
932
928
  trackFormReset(ctx2) {
933
- let cleanup;
934
- nextTick(() => {
935
- cleanup = trackFormReset(dom.getInputEl(ctx2), () => {
936
- if (ctx2.initialValue != null) {
937
- ctx2.value = ctx2.initialValue;
938
- }
939
- });
929
+ return trackFormReset(dom.getInputEl(ctx2), () => {
930
+ if (ctx2.initialValue != null) {
931
+ ctx2.value = ctx2.initialValue;
932
+ }
940
933
  });
941
- return () => cleanup == null ? void 0 : cleanup();
942
934
  },
943
935
  trackPointerMove(ctx2, _evt, { send }) {
944
- return trackPointerMove({
945
- ctx: ctx2,
936
+ return trackPointerMove(dom.getDoc(ctx2), {
946
937
  onPointerMove(info) {
947
938
  send({ type: "POINTER_MOVE", point: info.point });
948
939
  },
@@ -953,13 +944,6 @@ function machine(ctx = {}) {
953
944
  }
954
945
  },
955
946
  actions: {
956
- setupDocument(ctx2, evt) {
957
- if (evt.doc)
958
- ctx2.doc = ref(evt.doc);
959
- if (evt.root)
960
- ctx2.rootNode = ref(evt.root);
961
- ctx2.uid = evt.id;
962
- },
963
947
  checkValue(ctx2) {
964
948
  const value = utils.convert(ctx2, ctx2.value);
965
949
  Object.assign(ctx2, { value, initialValue: value });