@zag-js/slider 0.2.10 → 0.2.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.
@@ -6,9 +6,8 @@ var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
6
6
  // ../../utilities/dom/src/platform.ts
7
7
  var isDom = () => typeof window !== "undefined";
8
8
  function getPlatform() {
9
- var _a;
10
9
  const agent = navigator.userAgentData;
11
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
10
+ return agent?.platform ?? navigator.platform;
12
11
  }
13
12
  var pt = (v) => isDom() && v.test(getPlatform());
14
13
  var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -18,8 +17,7 @@ var isIos = () => isApple() && !isMac();
18
17
 
19
18
  // ../../utilities/dom/src/event.ts
20
19
  function getNativeEvent(e) {
21
- var _a;
22
- return (_a = e.nativeEvent) != null ? _a : e;
20
+ return e.nativeEvent ?? e;
23
21
  }
24
22
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
25
23
  var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
File without changes
@@ -1,37 +1,29 @@
1
1
  import {
2
2
  styles
3
- } from "./chunk-GVCEKN7A.mjs";
3
+ } from "./chunk-IJAAAKZQ.mjs";
4
4
 
5
5
  // ../../utilities/dom/src/query.ts
6
6
  function isDocument(el) {
7
7
  return el.nodeType === Node.DOCUMENT_NODE;
8
8
  }
9
9
  function isWindow(value) {
10
- return (value == null ? void 0 : value.toString()) === "[object Window]";
10
+ return value?.toString() === "[object Window]";
11
11
  }
12
12
  function getDocument(el) {
13
- var _a;
14
13
  if (isWindow(el))
15
14
  return el.document;
16
15
  if (isDocument(el))
17
16
  return el;
18
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
17
+ return el?.ownerDocument ?? document;
19
18
  }
20
19
  function getWindow(el) {
21
- var _a;
22
- return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
20
+ return el?.ownerDocument.defaultView ?? window;
23
21
  }
24
22
  function defineDomHelpers(helpers) {
25
23
  const dom2 = {
26
- getRootNode: (ctx) => {
27
- var _a, _b;
28
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
29
- },
24
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
30
25
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
31
- getWin: (ctx) => {
32
- var _a;
33
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
34
- },
26
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
35
27
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
36
28
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
37
29
  };
@@ -75,20 +67,18 @@ function getPointRelativeToNode(point, element) {
75
67
 
76
68
  // ../../utilities/form-utils/src/input-event.ts
77
69
  function getDescriptor(el, options) {
78
- var _a;
79
70
  const { type, property = "value" } = options;
80
71
  const proto = getWindow(el)[type].prototype;
81
- return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
72
+ return Object.getOwnPropertyDescriptor(proto, property) ?? {};
82
73
  }
83
74
  function dispatchInputValueEvent(el, value) {
84
- var _a;
85
75
  if (!el)
86
76
  return;
87
77
  const win = getWindow(el);
88
78
  if (!(el instanceof win.HTMLInputElement))
89
79
  return;
90
80
  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
91
- (_a = desc.set) == null ? void 0 : _a.call(el, value);
81
+ desc.set?.call(el, value);
92
82
  const event = new win.Event("input", { bubbles: true });
93
83
  el.dispatchEvent(event);
94
84
  }
@@ -97,35 +87,14 @@ function dispatchInputValueEvent(el, value) {
97
87
  import { getPercentValue } from "@zag-js/numeric-range";
98
88
  var dom = defineDomHelpers({
99
89
  ...styles,
100
- getRootId: (ctx) => {
101
- var _a, _b;
102
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
103
- },
104
- getThumbId: (ctx) => {
105
- var _a, _b;
106
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
107
- },
108
- getControlId: (ctx) => {
109
- var _a, _b;
110
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
111
- },
90
+ getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
91
+ getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
92
+ getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
112
93
  getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
113
- getOutputId: (ctx) => {
114
- var _a, _b;
115
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
116
- },
117
- getTrackId: (ctx) => {
118
- var _a, _b;
119
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
120
- },
121
- getRangeId: (ctx) => {
122
- var _a, _b;
123
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
124
- },
125
- getLabelId: (ctx) => {
126
- var _a, _b;
127
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
128
- },
94
+ getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
95
+ getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
96
+ getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
97
+ getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
129
98
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
130
99
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
131
100
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
@@ -8,15 +8,15 @@ import {
8
8
  supportsMouseEvent,
9
9
  supportsPointerEvent,
10
10
  supportsTouchEvent
11
- } from "./chunk-DIZXKUD6.mjs";
11
+ } from "./chunk-3UP6QL6A.mjs";
12
12
  import {
13
13
  dom
14
- } from "./chunk-RQG27JID.mjs";
14
+ } from "./chunk-55KEN77D.mjs";
15
15
  import {
16
16
  constrainValue,
17
17
  decrement,
18
18
  increment
19
- } from "./chunk-OLKQEDRG.mjs";
19
+ } from "./chunk-YGFSMEUO.mjs";
20
20
 
21
21
  // src/slider.machine.ts
22
22
  import { createMachine } from "@zag-js/core";
@@ -24,11 +24,11 @@ import { createMachine } from "@zag-js/core";
24
24
  // ../../utilities/core/src/functions.ts
25
25
  var runIfFn = (v, ...a) => {
26
26
  const res = typeof v === "function" ? v(...a) : v;
27
- return res != null ? res : void 0;
27
+ return res ?? void 0;
28
28
  };
29
29
  var callAll = (...fns) => (...a) => {
30
30
  fns.forEach(function(fn) {
31
- fn == null ? void 0 : fn(...a);
31
+ fn?.(...a);
32
32
  });
33
33
  };
34
34
 
@@ -55,14 +55,13 @@ function extractInfo(event, type = "page") {
55
55
  }
56
56
  function addDomEvent(target, eventName, handler, options) {
57
57
  const node = isRef(target) ? target.current : runIfFn(target);
58
- node == null ? void 0 : node.addEventListener(eventName, handler, options);
58
+ node?.addEventListener(eventName, handler, options);
59
59
  return () => {
60
- node == null ? void 0 : node.removeEventListener(eventName, handler, options);
60
+ node?.removeEventListener(eventName, handler, options);
61
61
  };
62
62
  }
63
63
  function addPointerEvent(target, event, listener, options) {
64
- var _a;
65
- const type = (_a = getEventName(event)) != null ? _a : event;
64
+ const type = getEventName(event) ?? event;
66
65
  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
67
66
  }
68
67
  function wrapHandler(fn, filter = false) {
@@ -73,8 +72,7 @@ function wrapHandler(fn, filter = false) {
73
72
  }
74
73
  function filterPrimaryPointer(fn) {
75
74
  return (event) => {
76
- var _a;
77
- const win = (_a = event.view) != null ? _a : window;
75
+ const win = event.view ?? window;
78
76
  const isMouseEvent2 = event instanceof win.MouseEvent;
79
77
  const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
80
78
  if (isPrimary)
@@ -150,7 +148,7 @@ var state = "default";
150
148
  var savedUserSelect = "";
151
149
  var modifiedElementMap = /* @__PURE__ */ new WeakMap();
152
150
  function disableTextSelection({ target, doc } = {}) {
153
- const _document = doc != null ? doc : document;
151
+ const _document = doc ?? document;
154
152
  if (isIos()) {
155
153
  if (state === "default") {
156
154
  savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -164,7 +162,7 @@ function disableTextSelection({ target, doc } = {}) {
164
162
  return () => restoreTextSelection({ target, doc: _document });
165
163
  }
166
164
  function restoreTextSelection({ target, doc } = {}) {
167
- const _document = doc != null ? doc : document;
165
+ const _document = doc ?? document;
168
166
  if (isIos()) {
169
167
  if (state !== "disabled")
170
168
  return;
@@ -184,7 +182,7 @@ function restoreTextSelection({ target, doc } = {}) {
184
182
  if (target && modifiedElementMap.has(target)) {
185
183
  let targetOldUserSelect = modifiedElementMap.get(target);
186
184
  if (target.style.userSelect === "none") {
187
- target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
185
+ target.style.userSelect = targetOldUserSelect ?? "";
188
186
  }
189
187
  if (target.getAttribute("style") === "") {
190
188
  target.removeAttribute("style");
@@ -235,13 +233,13 @@ function trackFormReset(el, callback) {
235
233
  if (!el)
236
234
  return;
237
235
  const form = getClosestForm(el);
238
- form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
236
+ form?.addEventListener("reset", callback, { passive: true });
239
237
  return () => {
240
- form == null ? void 0 : form.removeEventListener("reset", callback);
238
+ form?.removeEventListener("reset", callback);
241
239
  };
242
240
  }
243
241
  function trackFieldsetDisabled(el, callback) {
244
- const fieldset = el == null ? void 0 : el.closest("fieldset");
242
+ const fieldset = el?.closest("fieldset");
245
243
  if (!fieldset)
246
244
  return;
247
245
  callback(fieldset.disabled);
@@ -259,7 +257,7 @@ function trackFormControl(el, options) {
259
257
  })
260
258
  ];
261
259
  return () => {
262
- cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
260
+ cleanups.forEach((cleanup) => cleanup?.());
263
261
  };
264
262
  }
265
263
 
@@ -270,7 +268,7 @@ function machine(userContext) {
270
268
  return createMachine(
271
269
  {
272
270
  id: "slider",
273
- initial: "unknown",
271
+ initial: "idle",
274
272
  context: {
275
273
  thumbSize: null,
276
274
  thumbAlignment: "contain",
@@ -309,15 +307,8 @@ function machine(userContext) {
309
307
  actions: "decrement"
310
308
  }
311
309
  },
310
+ entry: ["checkValue"],
312
311
  states: {
313
- unknown: {
314
- on: {
315
- SETUP: {
316
- target: "idle",
317
- actions: ["checkValue"]
318
- }
319
- }
320
- },
321
312
  idle: {
322
313
  on: {
323
314
  POINTER_DOWN: {
@@ -424,16 +415,13 @@ function machine(userContext) {
424
415
  ctx2.initialValue = value;
425
416
  },
426
417
  invokeOnChangeStart(ctx2) {
427
- var _a;
428
- (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
418
+ ctx2.onChangeStart?.({ value: ctx2.value });
429
419
  },
430
420
  invokeOnChangeEnd(ctx2) {
431
- var _a;
432
- (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
421
+ ctx2.onChangeEnd?.({ value: ctx2.value });
433
422
  },
434
423
  invokeOnChange(ctx2) {
435
- var _a;
436
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
424
+ ctx2.onChange?.({ value: ctx2.value });
437
425
  },
438
426
  dispatchChangeEvent(ctx2) {
439
427
  dom.dispatchChangeEvent(ctx2);
@@ -445,10 +433,7 @@ function machine(userContext) {
445
433
  ctx2.value = clampValue(value, ctx2.min, ctx2.max);
446
434
  },
447
435
  focusThumb(ctx2) {
448
- raf(() => {
449
- var _a;
450
- return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
451
- });
436
+ raf(() => dom.getThumbEl(ctx2)?.focus());
452
437
  },
453
438
  decrement(ctx2, evt) {
454
439
  ctx2.value = decrement(ctx2, evt.step);
@@ -1,14 +1,12 @@
1
1
  // src/slider.style.ts
2
2
  import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
3
3
  function getVerticalThumbOffset(ctx) {
4
- var _a;
5
- const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
4
+ const { height = 0 } = ctx.thumbSize ?? {};
6
5
  const getValue = getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2]);
7
6
  return parseFloat(getValue(ctx.value).toFixed(2));
8
7
  }
9
8
  function getHorizontalThumbOffset(ctx) {
10
- var _a;
11
- const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
9
+ const { width = 0 } = ctx.thumbSize ?? {};
12
10
  if (ctx.isRtl) {
13
11
  const getValue2 = getValueTransformer([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
14
12
  return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -1,15 +1,15 @@
1
1
  import {
2
2
  parts
3
- } from "./chunk-7YVG4DKQ.mjs";
3
+ } from "./chunk-3Y7IIPR5.mjs";
4
4
  import {
5
5
  getNativeEvent,
6
6
  isLeftClick,
7
7
  isModifiedEvent,
8
8
  isTouchEvent
9
- } from "./chunk-DIZXKUD6.mjs";
9
+ } from "./chunk-3UP6QL6A.mjs";
10
10
  import {
11
11
  dom
12
- } from "./chunk-RQG27JID.mjs";
12
+ } from "./chunk-55KEN77D.mjs";
13
13
 
14
14
  // ../../utilities/dom/src/attrs.ts
15
15
  var dataAttr = (guard) => {
@@ -24,8 +24,7 @@ var fallback = {
24
24
  clientY: 0
25
25
  };
26
26
  function getEventPoint(event, type = "page") {
27
- var _a, _b;
28
- const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
27
+ const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
29
28
  return { x: point[`${type}X`], y: point[`${type}Y`] };
30
29
  }
31
30
 
@@ -44,10 +43,9 @@ var sameKeyMap = {
44
43
  Right: "ArrowRight"
45
44
  };
46
45
  function getEventKey(event, options = {}) {
47
- var _a;
48
46
  const { dir = "ltr", orientation = "horizontal" } = options;
49
47
  let { key } = event;
50
- key = (_a = sameKeyMap[key]) != null ? _a : key;
48
+ key = sameKeyMap[key] ?? key;
51
49
  const isRtl = dir === "rtl" && orientation === "horizontal";
52
50
  if (isRtl && key in rtlKeyMap) {
53
51
  key = rtlKeyMap[key];
@@ -69,10 +67,9 @@ function getEventStep(event) {
69
67
  // src/slider.connect.ts
70
68
  import { getPercentValue, getValuePercent } from "@zag-js/numeric-range";
71
69
  function connect(state, send, normalize) {
72
- var _a, _b;
73
70
  const ariaLabel = state.context["aria-label"];
74
71
  const ariaLabelledBy = state.context["aria-labelledby"];
75
- const ariaValueText = (_b = (_a = state.context).getAriaValueText) == null ? void 0 : _b.call(_a, state.context.value);
72
+ const ariaValueText = state.context.getAriaValueText?.(state.context.value);
76
73
  const isFocused = state.matches("focus");
77
74
  const isDragging = state.matches("dragging");
78
75
  const isDisabled = state.context.disabled;
@@ -95,8 +92,7 @@ function connect(state, send, normalize) {
95
92
  getPercentValue: getPercentValueFn,
96
93
  getValuePercent: getValuePercentFn,
97
94
  focus() {
98
- var _a2;
99
- (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
95
+ dom.getThumbEl(state.context)?.focus();
100
96
  },
101
97
  increment() {
102
98
  send("INCREMENT");
@@ -122,11 +118,10 @@ function connect(state, send, normalize) {
122
118
  id: dom.getLabelId(state.context),
123
119
  htmlFor: dom.getHiddenInputId(state.context),
124
120
  onClick(event) {
125
- var _a2;
126
121
  if (!isInteractive)
127
122
  return;
128
123
  event.preventDefault();
129
- (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
124
+ dom.getThumbEl(state.context)?.focus();
130
125
  },
131
126
  style: dom.getLabelStyle()
132
127
  }),
@@ -141,7 +136,7 @@ function connect(state, send, normalize) {
141
136
  "data-invalid": dataAttr(isInvalid),
142
137
  "aria-disabled": isDisabled || void 0,
143
138
  "aria-label": ariaLabel,
144
- "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state.context),
139
+ "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
145
140
  "aria-orientation": state.context.orientation,
146
141
  "aria-valuemax": state.context.max,
147
142
  "aria-valuemin": state.context.min,
@@ -11,7 +11,7 @@ function decrement(ctx, step) {
11
11
  const index = 0;
12
12
  const values = getPreviousStepValue(index, {
13
13
  ...ctx,
14
- step: step != null ? step : ctx.step,
14
+ step: step ?? ctx.step,
15
15
  values: [ctx.value]
16
16
  });
17
17
  return values[index];
@@ -20,7 +20,7 @@ function increment(ctx, step) {
20
20
  const index = 0;
21
21
  const values = getNextStepValue(index, {
22
22
  ...ctx,
23
- step: step != null ? step : ctx.step,
23
+ step: step ?? ctx.step,
24
24
  values: [ctx.value]
25
25
  });
26
26
  return values[index];