@zag-js/number-input 0.1.18 → 0.2.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.d.ts CHANGED
@@ -11,7 +11,7 @@ declare type ElementIds = Partial<{
11
11
  decBtn: string;
12
12
  scrubber: string;
13
13
  }>;
14
- declare type IntlMessages = {
14
+ declare type IntlTranslations = {
15
15
  /**
16
16
  * Function that returns the human-readable value.
17
17
  * It is used to set the `aria-valuetext` property of the input
@@ -101,7 +101,7 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
101
101
  /**
102
102
  * Specifies the localized strings that identifies the accessibility elements and their states
103
103
  */
104
- messages: IntlMessages;
104
+ translations: IntlTranslations;
105
105
  /**
106
106
  * If using a custom display format, this converts the custom format to a format `parseFloat` understands.
107
107
  */
package/dist/index.js CHANGED
@@ -1,4 +1,31 @@
1
- // ../../utilities/dom/dist/index.js
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);
19
+
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ connect: () => connect,
24
+ machine: () => machine
25
+ });
26
+ module.exports = __toCommonJS(src_exports);
27
+
28
+ // ../../utilities/dom/dist/index.mjs
2
29
  var dataAttr = (guard) => {
3
30
  return guard ? "" : void 0;
4
31
  };
@@ -8,7 +35,7 @@ var ariaAttr = (guard) => {
8
35
  var MAX_Z_INDEX = 2147483647;
9
36
  var runIfFn = (v, ...a) => {
10
37
  const res = typeof v === "function" ? v(...a) : v;
11
- return res ?? void 0;
38
+ return res != null ? res : void 0;
12
39
  };
13
40
  var callAll = (...fns) => (...a) => {
14
41
  fns.forEach(function(fn) {
@@ -20,8 +47,9 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
20
47
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
21
48
  var isDom = () => typeof window !== "undefined";
22
49
  function getPlatform() {
50
+ var _a;
23
51
  const agent = navigator.userAgentData;
24
- return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
52
+ return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
25
53
  }
26
54
  var pt = (v) => isDom() && v.test(getPlatform());
27
55
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -34,22 +62,44 @@ function isWindow(value) {
34
62
  return (value == null ? void 0 : value.toString()) === "[object Window]";
35
63
  }
36
64
  function getDocument(el) {
65
+ var _a;
37
66
  if (isWindow(el))
38
67
  return el.document;
39
68
  if (isDocument(el))
40
69
  return el;
41
- return (el == null ? void 0 : el.ownerDocument) ?? document;
70
+ return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
42
71
  }
43
72
  function defineDomHelpers(helpers) {
44
73
  const dom2 = {
45
74
  getRootNode: (ctx) => {
46
- var _a;
47
- return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
75
+ var _a, _b;
76
+ return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
48
77
  },
49
78
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
50
- getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
79
+ getWin: (ctx) => {
80
+ var _a;
81
+ return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
82
+ },
51
83
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
52
- getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
84
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
85
+ createEmitter: (ctx, target) => {
86
+ const win = dom2.getWin(ctx);
87
+ return function emit(evt, detail, options) {
88
+ const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
89
+ const eventName = `zag:${evt}`;
90
+ const init = { bubbles, cancelable, composed, detail };
91
+ const event = new win.CustomEvent(eventName, init);
92
+ target.dispatchEvent(event);
93
+ };
94
+ },
95
+ createListener: (target) => {
96
+ return function listen(evt, handler) {
97
+ const eventName = `zag:${evt}`;
98
+ const listener = (e) => handler(e);
99
+ target.addEventListener(eventName, listener);
100
+ return () => target.removeEventListener(eventName, listener);
101
+ };
102
+ }
53
103
  };
54
104
  return {
55
105
  ...dom2,
@@ -57,7 +107,8 @@ function defineDomHelpers(helpers) {
57
107
  };
58
108
  }
59
109
  function getNativeEvent(e) {
60
- return e.nativeEvent ?? e;
110
+ var _a;
111
+ return (_a = e.nativeEvent) != null ? _a : e;
61
112
  }
62
113
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
63
114
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
@@ -70,7 +121,8 @@ var fallback = {
70
121
  clientY: 0
71
122
  };
72
123
  function getEventPoint(event, type = "page") {
73
- const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
124
+ var _a, _b;
125
+ const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
74
126
  return { x: point[`${type}X`], y: point[`${type}Y`] };
75
127
  }
76
128
  var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
@@ -157,7 +209,7 @@ function requestPointerLock(doc, handlers = {}) {
157
209
  };
158
210
  }
159
211
 
160
- // ../../utilities/number/dist/index.js
212
+ // ../../utilities/number/dist/index.mjs
161
213
  function wrap(num, max) {
162
214
  return (num % max + max) % max;
163
215
  }
@@ -224,29 +276,29 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
224
276
  // src/number-input.dom.ts
225
277
  var dom = defineDomHelpers({
226
278
  getRootId: (ctx) => {
227
- var _a;
228
- return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `number-input:${ctx.id}`;
279
+ var _a, _b;
280
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
229
281
  },
230
282
  getInputId: (ctx) => {
231
- var _a;
232
- return ((_a = ctx.ids) == null ? void 0 : _a.input) ?? `number-input:${ctx.id}:input`;
283
+ var _a, _b;
284
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
233
285
  },
234
286
  getIncButtonId: (ctx) => {
235
- var _a;
236
- return ((_a = ctx.ids) == null ? void 0 : _a.incBtn) ?? `number-input:${ctx.id}:inc-btn`;
287
+ var _a, _b;
288
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
237
289
  },
238
290
  getDecButtonId: (ctx) => {
239
- var _a;
240
- return ((_a = ctx.ids) == null ? void 0 : _a.decBtn) ?? `number-input:${ctx.id}:dec-btn`;
291
+ var _a, _b;
292
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
241
293
  },
242
294
  getScrubberId: (ctx) => {
243
- var _a;
244
- return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
295
+ var _a, _b;
296
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
245
297
  },
246
298
  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
247
299
  getLabelId: (ctx) => {
248
- var _a;
249
- return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
300
+ var _a, _b;
301
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
250
302
  },
251
303
  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
252
304
  getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
@@ -339,38 +391,39 @@ var dom = defineDomHelpers({
339
391
  // src/number-input.utils.ts
340
392
  var utils = {
341
393
  isValidNumericEvent: (ctx, event) => {
342
- var _a;
394
+ var _a, _b;
343
395
  if (event.key == null)
344
396
  return true;
345
397
  const isModifier = isModifiedEvent(event);
346
398
  const isSingleKey = event.key.length === 1;
347
399
  if (isModifier || !isSingleKey)
348
400
  return true;
349
- return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) ?? utils.isFloatingPoint(event.key);
401
+ return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
350
402
  },
351
403
  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
352
404
  sanitize: (ctx, value) => {
353
- return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
405
+ var _a;
406
+ return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
354
407
  },
355
408
  increment: (ctx, step) => {
356
- const value = increment(ctx.value, step ?? ctx.step);
409
+ const value = increment(ctx.value, step != null ? step : ctx.step);
357
410
  return formatDecimal(clamp(value, ctx), ctx);
358
411
  },
359
412
  decrement: (ctx, step) => {
360
- const value = decrement(ctx.value, step ?? ctx.step);
413
+ const value = decrement(ctx.value, step != null ? step : ctx.step);
361
414
  return formatDecimal(clamp(value, ctx), ctx);
362
415
  },
363
416
  clamp: (ctx) => {
364
417
  return formatDecimal(clamp(ctx.value, ctx), ctx);
365
418
  },
366
419
  parse: (ctx, value) => {
367
- var _a;
368
- return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) ?? value;
420
+ var _a, _b;
421
+ return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
369
422
  },
370
423
  format: (ctx, value) => {
371
- var _a;
424
+ var _a, _b;
372
425
  const _val = value.toString();
373
- return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) ?? _val;
426
+ return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
374
427
  },
375
428
  round: (ctx) => {
376
429
  return formatDecimal(ctx.value, ctx);
@@ -385,7 +438,7 @@ function connect(state, send, normalize) {
385
438
  const isValueEmpty = state.context.isValueEmpty;
386
439
  const isIncrementDisabled = isDisabled || !state.context.canIncrement;
387
440
  const isDecrementDisabled = isDisabled || !state.context.canDecrement;
388
- const messages = state.context.messages;
441
+ const translations = state.context.translations;
389
442
  return {
390
443
  isFocused,
391
444
  isInvalid,
@@ -507,7 +560,7 @@ function connect(state, send, normalize) {
507
560
  id: dom.getDecButtonId(state.context),
508
561
  disabled: isDecrementDisabled,
509
562
  "data-disabled": dataAttr(isDecrementDisabled),
510
- "aria-label": messages.decrementLabel,
563
+ "aria-label": translations.decrementLabel,
511
564
  type: "button",
512
565
  tabIndex: -1,
513
566
  "aria-controls": dom.getInputId(state.context),
@@ -532,7 +585,7 @@ function connect(state, send, normalize) {
532
585
  id: dom.getIncButtonId(state.context),
533
586
  disabled: isIncrementDisabled,
534
587
  "data-disabled": dataAttr(isIncrementDisabled),
535
- "aria-label": messages.incrementLabel,
588
+ "aria-label": translations.incrementLabel,
536
589
  type: "button",
537
590
  tabIndex: -1,
538
591
  "aria-controls": dom.getInputId(state.context),
@@ -572,23 +625,25 @@ function connect(state, send, normalize) {
572
625
  }
573
626
 
574
627
  // src/number-input.machine.ts
575
- import { choose, createMachine, guards } from "@zag-js/core";
628
+ var import_core = require("@zag-js/core");
576
629
 
577
- // ../../utilities/core/dist/index.js
630
+ // ../../utilities/core/dist/index.mjs
578
631
  var callAll2 = (...fns) => (...a) => {
579
632
  fns.forEach(function(fn) {
580
633
  fn == null ? void 0 : fn(...a);
581
634
  });
582
635
  };
583
636
 
584
- // ../../utilities/form-utils/dist/index.js
637
+ // ../../utilities/form-utils/dist/index.mjs
585
638
  function getWindow(el) {
586
- return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
639
+ var _a;
640
+ return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
587
641
  }
588
642
  function getDescriptor(el, options) {
643
+ var _a;
589
644
  const { type, property } = options;
590
645
  const proto = getWindow(el)[type].prototype;
591
- return Object.getOwnPropertyDescriptor(proto, property) ?? {};
646
+ return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
592
647
  }
593
648
  function dispatchInputValueEvent(el, value) {
594
649
  var _a;
@@ -604,9 +659,9 @@ function dispatchInputValueEvent(el, value) {
604
659
  }
605
660
 
606
661
  // src/number-input.machine.ts
607
- var { not, and } = guards;
662
+ var { not, and } = import_core.guards;
608
663
  function machine(ctx) {
609
- return createMachine(
664
+ return (0, import_core.createMachine)(
610
665
  {
611
666
  id: "number-input",
612
667
  initial: "unknown",
@@ -626,10 +681,10 @@ function machine(ctx) {
626
681
  invalid: false,
627
682
  spinOnPress: true,
628
683
  ...ctx,
629
- messages: {
684
+ translations: {
630
685
  incrementLabel: "increment value",
631
686
  decrementLabel: "decrease value",
632
- ...ctx.messages
687
+ ...ctx.translations
633
688
  }
634
689
  },
635
690
  computed: {
@@ -643,11 +698,11 @@ function machine(ctx) {
643
698
  canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
644
699
  valueText: (ctx2) => {
645
700
  var _a, _b;
646
- return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
701
+ return (_b = (_a = ctx2.translations).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
647
702
  },
648
703
  formattedValue: (ctx2) => {
649
- var _a;
650
- return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
704
+ var _a, _b;
705
+ return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
651
706
  }
652
707
  },
653
708
  watch: {
@@ -747,7 +802,7 @@ function machine(ctx) {
747
802
  "before:spin": {
748
803
  tags: "focus",
749
804
  activities: "trackButtonDisabled",
750
- entry: choose([
805
+ entry: (0, import_core.choose)([
751
806
  { guard: "isIncrementHint", actions: "increment" },
752
807
  { guard: "isDecrementHint", actions: "decrement" }
753
808
  ]),
@@ -817,9 +872,15 @@ function machine(ctx) {
817
872
  spinOnPress: (ctx2) => !!ctx2.spinOnPress,
818
873
  isAtMax: (ctx2) => ctx2.isAtMax,
819
874
  isInRange: (ctx2) => !ctx2.isOutOfRange,
820
- isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
875
+ isDecrementHint: (ctx2, evt) => {
876
+ var _a;
877
+ return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
878
+ },
821
879
  isEmptyValue: (ctx2) => ctx2.isValueEmpty,
822
- isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
880
+ isIncrementHint: (ctx2, evt) => {
881
+ var _a;
882
+ return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
883
+ },
823
884
  isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
824
885
  },
825
886
  activities: {
@@ -901,8 +962,8 @@ function machine(ctx) {
901
962
  }
902
963
  },
903
964
  setValue(ctx2, evt) {
904
- var _a;
905
- const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
965
+ var _a, _b;
966
+ const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
906
967
  ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
907
968
  },
908
969
  clearValue(ctx2) {
@@ -992,7 +1053,8 @@ function machine(ctx) {
992
1053
  }
993
1054
  );
994
1055
  }
995
- export {
1056
+ // Annotate the CommonJS export names for ESM import in node:
1057
+ 0 && (module.exports = {
996
1058
  connect,
997
1059
  machine
998
- };
1060
+ });