@zag-js/slider 0.70.0 → 0.71.0

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.js CHANGED
@@ -1,38 +1,17 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ 'use strict';
19
2
 
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- anatomy: () => anatomy,
24
- connect: () => connect,
25
- machine: () => machine,
26
- props: () => props,
27
- splitProps: () => splitProps,
28
- splitThumbProps: () => splitThumbProps,
29
- thumbProps: () => thumbProps
30
- });
31
- module.exports = __toCommonJS(src_exports);
3
+ var anatomy$1 = require('@zag-js/anatomy');
4
+ var domEvent = require('@zag-js/dom-event');
5
+ var domQuery = require('@zag-js/dom-query');
6
+ var numericRange = require('@zag-js/numeric-range');
7
+ var formUtils = require('@zag-js/form-utils');
8
+ var core = require('@zag-js/core');
9
+ var elementSize = require('@zag-js/element-size');
10
+ var utils = require('@zag-js/utils');
11
+ var types = require('@zag-js/types');
32
12
 
33
13
  // src/slider.anatomy.ts
34
- var import_anatomy = require("@zag-js/anatomy");
35
- var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
14
+ var anatomy = anatomy$1.createAnatomy("slider").parts(
36
15
  "root",
37
16
  "label",
38
17
  "thumb",
@@ -44,20 +23,6 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
44
23
  "marker"
45
24
  );
46
25
  var parts = anatomy.build();
47
-
48
- // src/slider.connect.ts
49
- var import_dom_event2 = require("@zag-js/dom-event");
50
- var import_dom_query2 = require("@zag-js/dom-query");
51
- var import_numeric_range4 = require("@zag-js/numeric-range");
52
-
53
- // src/slider.dom.ts
54
- var import_dom_event = require("@zag-js/dom-event");
55
- var import_dom_query = require("@zag-js/dom-query");
56
- var import_form_utils = require("@zag-js/form-utils");
57
- var import_numeric_range2 = require("@zag-js/numeric-range");
58
-
59
- // src/slider.style.ts
60
- var import_numeric_range = require("@zag-js/numeric-range");
61
26
  function getBounds(value) {
62
27
  const firstValue = value[0];
63
28
  const lastThumb = value[value.length - 1];
@@ -92,16 +57,16 @@ function getRangeStyle(ctx) {
92
57
  }
93
58
  function getVerticalThumbOffset(ctx) {
94
59
  const { height = 0 } = ctx.thumbSize ?? {};
95
- const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
60
+ const getValue = numericRange.getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2]);
96
61
  return parseFloat(getValue(ctx.value).toFixed(2));
97
62
  }
98
63
  function getHorizontalThumbOffset(ctx) {
99
64
  const { width = 0 } = ctx.thumbSize ?? {};
100
65
  if (ctx.isRtl) {
101
- const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width / 2, width / 2]);
66
+ const getValue2 = numericRange.getValueTransformer([ctx.max, ctx.min], [-width / 2, width / 2]);
102
67
  return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
103
68
  }
104
- const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-width / 2, width / 2]);
69
+ const getValue = numericRange.getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
105
70
  return parseFloat(getValue(ctx.value).toFixed(2));
106
71
  }
107
72
  function getOffset(ctx, percent) {
@@ -110,7 +75,7 @@ function getOffset(ctx, percent) {
110
75
  return `calc(${percent}% - ${offset}px)`;
111
76
  }
112
77
  function getThumbOffset(ctx) {
113
- let percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
78
+ let percent = numericRange.getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
114
79
  return getOffset(ctx, percent);
115
80
  }
116
81
  function getVisibility(ctx) {
@@ -181,7 +146,7 @@ var styleGetterFns = {
181
146
  };
182
147
 
183
148
  // src/slider.dom.ts
184
- var dom = (0, import_dom_query.createScope)({
149
+ var dom = domQuery.createScope({
185
150
  ...styleGetterFns,
186
151
  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
187
152
  getThumbId: (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
@@ -196,69 +161,66 @@ var dom = (0, import_dom_query.createScope)({
196
161
  getThumbEl: (ctx, index) => dom.getById(ctx, dom.getThumbId(ctx, index)),
197
162
  getHiddenInputEl: (ctx, index) => dom.getById(ctx, dom.getHiddenInputId(ctx, index)),
198
163
  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
199
- getElements: (ctx) => (0, import_dom_query.queryAll)(dom.getControlEl(ctx), "[role=slider]"),
164
+ getElements: (ctx) => domQuery.queryAll(dom.getControlEl(ctx), "[role=slider]"),
200
165
  getFirstEl: (ctx) => dom.getElements(ctx)[0],
201
166
  getRangeEl: (ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
202
167
  getValueFromPoint(ctx, point) {
203
168
  const controlEl = dom.getControlEl(ctx);
204
169
  if (!controlEl) return;
205
- const relativePoint = (0, import_dom_event.getRelativePoint)(point, controlEl);
170
+ const relativePoint = domEvent.getRelativePoint(point, controlEl);
206
171
  const percent = relativePoint.getPercentValue({
207
172
  orientation: ctx.orientation,
208
173
  dir: ctx.dir,
209
174
  inverted: { y: true }
210
175
  });
211
- return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
176
+ return numericRange.getPercentValue(percent, ctx.min, ctx.max, ctx.step);
212
177
  },
213
178
  dispatchChangeEvent(ctx) {
214
179
  const valueArray = Array.from(ctx.value);
215
180
  valueArray.forEach((value, index) => {
216
181
  const inputEl = dom.getHiddenInputEl(ctx, index);
217
182
  if (!inputEl) return;
218
- (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value });
183
+ formUtils.dispatchInputValueEvent(inputEl, { value });
219
184
  });
220
185
  }
221
186
  });
222
-
223
- // src/slider.utils.ts
224
- var import_numeric_range3 = require("@zag-js/numeric-range");
225
187
  function normalizeValues(ctx, nextValues) {
226
188
  return nextValues.map((value, index, values) => {
227
189
  return constrainValue({ ...ctx, value: values }, value, index);
228
190
  });
229
191
  }
230
192
  function getRangeAtIndex(ctx, index) {
231
- return (0, import_numeric_range3.getValueRanges)(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
193
+ return numericRange.getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
232
194
  }
233
195
  function constrainValue(ctx, value, index) {
234
196
  const range = getRangeAtIndex(ctx, index);
235
- const snapValue = (0, import_numeric_range3.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
236
- return (0, import_numeric_range3.clampValue)(snapValue, range.min, range.max);
197
+ const snapValue = numericRange.snapValueToStep(value, ctx.min, ctx.max, ctx.step);
198
+ return numericRange.clampValue(snapValue, range.min, range.max);
237
199
  }
238
200
  function decrement(ctx, index, step) {
239
201
  const idx = index ?? ctx.focusedIndex;
240
202
  const range = getRangeAtIndex(ctx, idx);
241
- const nextValues = (0, import_numeric_range3.getPreviousStepValue)(idx, {
203
+ const nextValues = numericRange.getPreviousStepValue(idx, {
242
204
  ...range,
243
205
  step: step ?? ctx.step,
244
206
  values: ctx.value
245
207
  });
246
- nextValues[idx] = (0, import_numeric_range3.clampValue)(nextValues[idx], range.min, range.max);
208
+ nextValues[idx] = numericRange.clampValue(nextValues[idx], range.min, range.max);
247
209
  return nextValues;
248
210
  }
249
211
  function increment(ctx, index, step) {
250
212
  const idx = index ?? ctx.focusedIndex;
251
213
  const range = getRangeAtIndex(ctx, idx);
252
- const nextValues = (0, import_numeric_range3.getNextStepValue)(idx, {
214
+ const nextValues = numericRange.getNextStepValue(idx, {
253
215
  ...range,
254
216
  step: step ?? ctx.step,
255
217
  values: ctx.value
256
218
  });
257
- nextValues[idx] = (0, import_numeric_range3.clampValue)(nextValues[idx], range.min, range.max);
219
+ nextValues[idx] = numericRange.clampValue(nextValues[idx], range.min, range.max);
258
220
  return nextValues;
259
221
  }
260
222
  function getClosestIndex(ctx, pointValue) {
261
- return (0, import_numeric_range3.getClosestValueIndex)(ctx.value, pointValue);
223
+ return numericRange.getClosestValueIndex(ctx.value, pointValue);
262
224
  }
263
225
  function assignArray(current, next) {
264
226
  for (let i = 0; i < next.length; i++) {
@@ -280,10 +242,10 @@ function connect(state, send, normalize) {
280
242
  const isHorizontal = state.context.orientation === "horizontal";
281
243
  const isVertical = state.context.orientation === "vertical";
282
244
  function getValuePercentFn(value) {
283
- return (0, import_numeric_range4.getValuePercent)(value, state.context.min, state.context.max);
245
+ return numericRange.getValuePercent(value, state.context.min, state.context.max);
284
246
  }
285
247
  function getPercentValueFn(percent) {
286
- return (0, import_numeric_range4.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
248
+ return numericRange.getPercentValue(percent, state.context.min, state.context.max, state.context.step);
287
249
  }
288
250
  return {
289
251
  value: state.context.value,
@@ -327,11 +289,11 @@ function connect(state, send, normalize) {
327
289
  return normalize.label({
328
290
  ...parts.label.attrs,
329
291
  dir: state.context.dir,
330
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
292
+ "data-disabled": domQuery.dataAttr(disabled),
331
293
  "data-orientation": state.context.orientation,
332
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
333
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging),
334
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
294
+ "data-invalid": domQuery.dataAttr(invalid),
295
+ "data-dragging": domQuery.dataAttr(dragging),
296
+ "data-focus": domQuery.dataAttr(focused),
335
297
  id: dom.getLabelId(state.context),
336
298
  htmlFor: dom.getHiddenInputId(state.context, 0),
337
299
  onClick(event) {
@@ -348,11 +310,11 @@ function connect(state, send, normalize) {
348
310
  getRootProps() {
349
311
  return normalize.element({
350
312
  ...parts.root.attrs,
351
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
313
+ "data-disabled": domQuery.dataAttr(disabled),
352
314
  "data-orientation": state.context.orientation,
353
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging),
354
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
355
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
315
+ "data-dragging": domQuery.dataAttr(dragging),
316
+ "data-invalid": domQuery.dataAttr(invalid),
317
+ "data-focus": domQuery.dataAttr(focused),
356
318
  id: dom.getRootId(state.context),
357
319
  dir: state.context.dir,
358
320
  style: dom.getRootStyle(state.context)
@@ -362,10 +324,10 @@ function connect(state, send, normalize) {
362
324
  return normalize.element({
363
325
  ...parts.valueText.attrs,
364
326
  dir: state.context.dir,
365
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
327
+ "data-disabled": domQuery.dataAttr(disabled),
366
328
  "data-orientation": state.context.orientation,
367
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
368
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
329
+ "data-invalid": domQuery.dataAttr(invalid),
330
+ "data-focus": domQuery.dataAttr(focused),
369
331
  id: dom.getValueTextId(state.context)
370
332
  });
371
333
  },
@@ -374,11 +336,11 @@ function connect(state, send, normalize) {
374
336
  ...parts.track.attrs,
375
337
  dir: state.context.dir,
376
338
  id: dom.getTrackId(state.context),
377
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
378
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
379
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging),
339
+ "data-disabled": domQuery.dataAttr(disabled),
340
+ "data-invalid": domQuery.dataAttr(invalid),
341
+ "data-dragging": domQuery.dataAttr(dragging),
380
342
  "data-orientation": state.context.orientation,
381
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
343
+ "data-focus": domQuery.dataAttr(focused),
382
344
  style: { position: "relative" }
383
345
  });
384
346
  },
@@ -395,12 +357,12 @@ function connect(state, send, normalize) {
395
357
  "data-index": index,
396
358
  "data-name": name,
397
359
  id: dom.getThumbId(state.context, index),
398
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
360
+ "data-disabled": domQuery.dataAttr(disabled),
399
361
  "data-orientation": state.context.orientation,
400
- "data-focus": (0, import_dom_query2.dataAttr)(focused && state.context.focusedIndex === index),
401
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging && state.context.focusedIndex === index),
362
+ "data-focus": domQuery.dataAttr(focused && state.context.focusedIndex === index),
363
+ "data-dragging": domQuery.dataAttr(dragging && state.context.focusedIndex === index),
402
364
  draggable: false,
403
- "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
365
+ "aria-disabled": domQuery.ariaAttr(disabled),
404
366
  "aria-label": _ariaLabel,
405
367
  "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
406
368
  "aria-orientation": state.context.orientation,
@@ -427,7 +389,7 @@ function connect(state, send, normalize) {
427
389
  onKeyDown(event) {
428
390
  if (event.defaultPrevented) return;
429
391
  if (!interactive) return;
430
- const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
392
+ const step = domEvent.getEventStep(event) * state.context.step;
431
393
  const keyMap = {
432
394
  ArrowUp() {
433
395
  if (isHorizontal) return;
@@ -458,7 +420,7 @@ function connect(state, send, normalize) {
458
420
  send("END");
459
421
  }
460
422
  };
461
- const key = (0, import_dom_event2.getEventKey)(event, state.context);
423
+ const key = domEvent.getEventKey(event, state.context);
462
424
  const exec = keyMap[key];
463
425
  if (exec) {
464
426
  exec(event);
@@ -484,10 +446,10 @@ function connect(state, send, normalize) {
484
446
  id: dom.getRangeId(state.context),
485
447
  ...parts.range.attrs,
486
448
  dir: state.context.dir,
487
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging),
488
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
489
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
490
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
449
+ "data-dragging": domQuery.dataAttr(dragging),
450
+ "data-focus": domQuery.dataAttr(focused),
451
+ "data-invalid": domQuery.dataAttr(invalid),
452
+ "data-disabled": domQuery.dataAttr(disabled),
491
453
  "data-orientation": state.context.orientation,
492
454
  style: dom.getRangeStyle(state.context)
493
455
  });
@@ -497,17 +459,17 @@ function connect(state, send, normalize) {
497
459
  ...parts.control.attrs,
498
460
  dir: state.context.dir,
499
461
  id: dom.getControlId(state.context),
500
- "data-dragging": (0, import_dom_query2.dataAttr)(dragging),
501
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
462
+ "data-dragging": domQuery.dataAttr(dragging),
463
+ "data-disabled": domQuery.dataAttr(disabled),
502
464
  "data-orientation": state.context.orientation,
503
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
504
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
465
+ "data-invalid": domQuery.dataAttr(invalid),
466
+ "data-focus": domQuery.dataAttr(focused),
505
467
  style: dom.getControlStyle(),
506
468
  onPointerDown(event) {
507
469
  if (!interactive) return;
508
- if (!(0, import_dom_event2.isLeftClick)(event)) return;
509
- if ((0, import_dom_event2.isModifierKey)(event)) return;
510
- const point = (0, import_dom_event2.getEventPoint)(event);
470
+ if (!domEvent.isLeftClick(event)) return;
471
+ if (domEvent.isModifierKey(event)) return;
472
+ const point = domEvent.getEventPoint(event);
511
473
  send({ type: "POINTER_DOWN", point });
512
474
  event.preventDefault();
513
475
  event.stopPropagation();
@@ -543,28 +505,19 @@ function connect(state, send, normalize) {
543
505
  dir: state.context.dir,
544
506
  "data-orientation": state.context.orientation,
545
507
  "data-value": props2.value,
546
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
508
+ "data-disabled": domQuery.dataAttr(disabled),
547
509
  "data-state": markerState,
548
510
  style
549
511
  });
550
512
  }
551
513
  };
552
514
  }
553
-
554
- // src/slider.machine.ts
555
- var import_core = require("@zag-js/core");
556
- var import_dom_event3 = require("@zag-js/dom-event");
557
- var import_dom_query3 = require("@zag-js/dom-query");
558
- var import_element_size = require("@zag-js/element-size");
559
- var import_form_utils2 = require("@zag-js/form-utils");
560
- var import_numeric_range5 = require("@zag-js/numeric-range");
561
- var import_utils = require("@zag-js/utils");
562
515
  var isEqualSize = (a, b) => {
563
516
  return a?.width === b?.width && a?.height === b?.height;
564
517
  };
565
518
  function machine(userContext) {
566
- const ctx = (0, import_utils.compact)(userContext);
567
- return (0, import_core.createMachine)(
519
+ const ctx = utils.compact(userContext);
520
+ return core.createMachine(
568
521
  {
569
522
  id: "slider",
570
523
  initial: "idle",
@@ -593,7 +546,7 @@ function machine(userContext) {
593
546
  isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
594
547
  hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
595
548
  valuePercent(ctx2) {
596
- return ctx2.value.map((value) => 100 * (0, import_numeric_range5.getValuePercent)(value, ctx2.min, ctx2.max));
549
+ return ctx2.value.map((value) => 100 * numericRange.getValuePercent(value, ctx2.min, ctx2.max));
597
550
  }
598
551
  },
599
552
  watch: {
@@ -683,7 +636,7 @@ function machine(userContext) {
683
636
  },
684
637
  activities: {
685
638
  trackFormControlState(ctx2, _evt, { initialContext }) {
686
- return (0, import_form_utils2.trackFormControl)(dom.getRootEl(ctx2), {
639
+ return formUtils.trackFormControl(dom.getRootEl(ctx2), {
687
640
  onFieldsetDisabledChange(disabled) {
688
641
  ctx2.fieldsetDisabled = disabled;
689
642
  },
@@ -693,7 +646,7 @@ function machine(userContext) {
693
646
  });
694
647
  },
695
648
  trackPointerMove(ctx2, _evt, { send }) {
696
- return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
649
+ return domEvent.trackPointerMove(dom.getDoc(ctx2), {
697
650
  onPointerMove(info) {
698
651
  send({ type: "POINTER_MOVE", point: info.point });
699
652
  },
@@ -704,7 +657,7 @@ function machine(userContext) {
704
657
  },
705
658
  trackThumbsSize(ctx2) {
706
659
  if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize) return;
707
- return (0, import_element_size.trackElementsSize)({
660
+ return elementSize.trackElementsSize({
708
661
  getNodes: () => dom.getElements(ctx2),
709
662
  observeMutation: true,
710
663
  callback(size) {
@@ -743,7 +696,7 @@ function machine(userContext) {
743
696
  set.valueAtIndex(ctx2, ctx2.focusedIndex, value);
744
697
  },
745
698
  focusActiveThumb(ctx2) {
746
- (0, import_dom_query3.raf)(() => {
699
+ domQuery.raf(() => {
747
700
  const thumbEl = dom.getThumbEl(ctx2, ctx2.focusedIndex);
748
701
  thumbEl?.focus({ preventScroll: true });
749
702
  });
@@ -801,26 +754,22 @@ var invoke = {
801
754
  };
802
755
  var set = {
803
756
  valueAtIndex: (ctx, index, value) => {
804
- if ((0, import_utils.isEqual)(ctx.value[index], value)) return;
757
+ if (utils.isEqual(ctx.value[index], value)) return;
805
758
  ctx.value[index] = value;
806
759
  invoke.valueChange(ctx);
807
760
  },
808
761
  value: (ctx, value) => {
809
- if ((0, import_utils.isEqual)(ctx.value, value)) return;
762
+ if (utils.isEqual(ctx.value, value)) return;
810
763
  assignArray(ctx.value, value);
811
764
  invoke.valueChange(ctx);
812
765
  },
813
766
  focusedIndex: (ctx, index) => {
814
- if ((0, import_utils.isEqual)(ctx.focusedIndex, index)) return;
767
+ if (utils.isEqual(ctx.focusedIndex, index)) return;
815
768
  ctx.focusedIndex = index;
816
769
  invoke.focusChange(ctx);
817
770
  }
818
771
  };
819
-
820
- // src/slider.props.ts
821
- var import_types = require("@zag-js/types");
822
- var import_utils2 = require("@zag-js/utils");
823
- var props = (0, import_types.createProps)()([
772
+ var props = types.createProps()([
824
773
  "aria-label",
825
774
  "aria-labelledby",
826
775
  "dir",
@@ -847,17 +796,14 @@ var props = (0, import_types.createProps)()([
847
796
  "thumbSize",
848
797
  "value"
849
798
  ]);
850
- var splitProps = (0, import_utils2.createSplitProps)(props);
851
- var thumbProps = (0, import_types.createProps)()(["index", "name"]);
852
- var splitThumbProps = (0, import_utils2.createSplitProps)(thumbProps);
853
- // Annotate the CommonJS export names for ESM import in node:
854
- 0 && (module.exports = {
855
- anatomy,
856
- connect,
857
- machine,
858
- props,
859
- splitProps,
860
- splitThumbProps,
861
- thumbProps
862
- });
863
- //# sourceMappingURL=index.js.map
799
+ var splitProps = utils.createSplitProps(props);
800
+ var thumbProps = types.createProps()(["index", "name"]);
801
+ var splitThumbProps = utils.createSplitProps(thumbProps);
802
+
803
+ exports.anatomy = anatomy;
804
+ exports.connect = connect;
805
+ exports.machine = machine;
806
+ exports.props = props;
807
+ exports.splitProps = splitProps;
808
+ exports.splitThumbProps = splitThumbProps;
809
+ exports.thumbProps = thumbProps;
package/dist/index.mjs CHANGED
@@ -1,5 +1,14 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ import { getRelativePoint, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint, trackPointerMove } from '@zag-js/dom-event';
3
+ import { createScope, queryAll, dataAttr, ariaAttr, raf } from '@zag-js/dom-query';
4
+ import { getPercentValue, getValuePercent, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, getValueTransformer } from '@zag-js/numeric-range';
5
+ import { dispatchInputValueEvent, trackFormControl } from '@zag-js/form-utils';
6
+ import { createMachine } from '@zag-js/core';
7
+ import { trackElementsSize } from '@zag-js/element-size';
8
+ import { createSplitProps, compact, isEqual } from '@zag-js/utils';
9
+ import { createProps } from '@zag-js/types';
10
+
1
11
  // src/slider.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
12
  var anatomy = createAnatomy("slider").parts(
4
13
  "root",
5
14
  "label",
@@ -12,26 +21,6 @@ var anatomy = createAnatomy("slider").parts(
12
21
  "marker"
13
22
  );
14
23
  var parts = anatomy.build();
15
-
16
- // src/slider.connect.ts
17
- import {
18
- getEventKey,
19
- getEventPoint,
20
- getEventStep,
21
- isLeftClick,
22
- isModifierKey
23
- } from "@zag-js/dom-event";
24
- import { ariaAttr, dataAttr } from "@zag-js/dom-query";
25
- import { getPercentValue as getPercentValue2, getValuePercent as getValuePercent2 } from "@zag-js/numeric-range";
26
-
27
- // src/slider.dom.ts
28
- import { getRelativePoint } from "@zag-js/dom-event";
29
- import { createScope, queryAll } from "@zag-js/dom-query";
30
- import { dispatchInputValueEvent } from "@zag-js/form-utils";
31
- import { getPercentValue } from "@zag-js/numeric-range";
32
-
33
- // src/slider.style.ts
34
- import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
35
24
  function getBounds(value) {
36
25
  const firstValue = value[0];
37
26
  const lastThumb = value[value.length - 1];
@@ -193,16 +182,6 @@ var dom = createScope({
193
182
  });
194
183
  }
195
184
  });
196
-
197
- // src/slider.utils.ts
198
- import {
199
- clampValue,
200
- getClosestValueIndex,
201
- getNextStepValue,
202
- getPreviousStepValue,
203
- getValueRanges,
204
- snapValueToStep
205
- } from "@zag-js/numeric-range";
206
185
  function normalizeValues(ctx, nextValues) {
207
186
  return nextValues.map((value, index, values) => {
208
187
  return constrainValue({ ...ctx, value: values }, value, index);
@@ -261,10 +240,10 @@ function connect(state, send, normalize) {
261
240
  const isHorizontal = state.context.orientation === "horizontal";
262
241
  const isVertical = state.context.orientation === "vertical";
263
242
  function getValuePercentFn(value) {
264
- return getValuePercent2(value, state.context.min, state.context.max);
243
+ return getValuePercent(value, state.context.min, state.context.max);
265
244
  }
266
245
  function getPercentValueFn(percent) {
267
- return getPercentValue2(percent, state.context.min, state.context.max, state.context.step);
246
+ return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
268
247
  }
269
248
  return {
270
249
  value: state.context.value,
@@ -531,15 +510,6 @@ function connect(state, send, normalize) {
531
510
  }
532
511
  };
533
512
  }
534
-
535
- // src/slider.machine.ts
536
- import { createMachine } from "@zag-js/core";
537
- import { trackPointerMove } from "@zag-js/dom-event";
538
- import { raf } from "@zag-js/dom-query";
539
- import { trackElementsSize } from "@zag-js/element-size";
540
- import { trackFormControl } from "@zag-js/form-utils";
541
- import { getValuePercent as getValuePercent3 } from "@zag-js/numeric-range";
542
- import { compact, isEqual } from "@zag-js/utils";
543
513
  var isEqualSize = (a, b) => {
544
514
  return a?.width === b?.width && a?.height === b?.height;
545
515
  };
@@ -574,7 +544,7 @@ function machine(userContext) {
574
544
  isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
575
545
  hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
576
546
  valuePercent(ctx2) {
577
- return ctx2.value.map((value) => 100 * getValuePercent3(value, ctx2.min, ctx2.max));
547
+ return ctx2.value.map((value) => 100 * getValuePercent(value, ctx2.min, ctx2.max));
578
548
  }
579
549
  },
580
550
  watch: {
@@ -797,10 +767,6 @@ var set = {
797
767
  invoke.focusChange(ctx);
798
768
  }
799
769
  };
800
-
801
- // src/slider.props.ts
802
- import { createProps } from "@zag-js/types";
803
- import { createSplitProps } from "@zag-js/utils";
804
770
  var props = createProps()([
805
771
  "aria-label",
806
772
  "aria-labelledby",
@@ -831,13 +797,5 @@ var props = createProps()([
831
797
  var splitProps = createSplitProps(props);
832
798
  var thumbProps = createProps()(["index", "name"]);
833
799
  var splitThumbProps = createSplitProps(thumbProps);
834
- export {
835
- anatomy,
836
- connect,
837
- machine,
838
- props,
839
- splitProps,
840
- splitThumbProps,
841
- thumbProps
842
- };
843
- //# sourceMappingURL=index.mjs.map
800
+
801
+ export { anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/slider",
3
- "version": "0.70.0",
3
+ "version": "0.71.0",
4
4
  "description": "Core logic for the slider widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -18,8 +18,7 @@
18
18
  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/slider",
19
19
  "sideEffects": false,
20
20
  "files": [
21
- "dist",
22
- "src"
21
+ "dist"
23
22
  ],
24
23
  "publishConfig": {
25
24
  "access": "public"
@@ -28,15 +27,15 @@
28
27
  "url": "https://github.com/chakra-ui/zag/issues"
29
28
  },
30
29
  "dependencies": {
31
- "@zag-js/anatomy": "0.70.0",
32
- "@zag-js/core": "0.70.0",
33
- "@zag-js/form-utils": "0.70.0",
34
- "@zag-js/dom-query": "0.70.0",
35
- "@zag-js/dom-event": "0.70.0",
36
- "@zag-js/utils": "0.70.0",
37
- "@zag-js/numeric-range": "0.70.0",
38
- "@zag-js/element-size": "0.70.0",
39
- "@zag-js/types": "0.70.0"
30
+ "@zag-js/anatomy": "0.71.0",
31
+ "@zag-js/core": "0.71.0",
32
+ "@zag-js/form-utils": "0.71.0",
33
+ "@zag-js/dom-query": "0.71.0",
34
+ "@zag-js/dom-event": "0.71.0",
35
+ "@zag-js/utils": "0.71.0",
36
+ "@zag-js/numeric-range": "0.71.0",
37
+ "@zag-js/element-size": "0.71.0",
38
+ "@zag-js/types": "0.71.0"
40
39
  },
41
40
  "devDependencies": {
42
41
  "clean-package": "2.2.0"