@zag-js/number-input 0.0.0-dev-20221208125717 → 0.0.0-dev-20221208133044

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 (4) hide show
  1. package/dist/index.d.ts +16 -16
  2. package/dist/index.js +28 -22
  3. package/dist/index.mjs +28 -22
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -795,57 +795,57 @@ declare const anatomy: Omit<{
795
795
  }>;
796
796
  }, "parts">;
797
797
  extend: <V_20 extends string>(...parts: V_20[]) => Omit<any, "parts">;
798
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
798
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
799
799
  selector: string;
800
800
  attrs: Record<"data-scope" | "data-part", string>;
801
801
  }>;
802
802
  }, "parts">;
803
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
803
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
804
804
  selector: string;
805
805
  attrs: Record<"data-scope" | "data-part", string>;
806
806
  }>;
807
807
  }, "parts">;
808
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
808
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
809
809
  selector: string;
810
810
  attrs: Record<"data-scope" | "data-part", string>;
811
811
  }>;
812
812
  }, "parts">;
813
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
813
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
814
814
  selector: string;
815
815
  attrs: Record<"data-scope" | "data-part", string>;
816
816
  }>;
817
817
  }, "parts">;
818
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
818
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
819
819
  selector: string;
820
820
  attrs: Record<"data-scope" | "data-part", string>;
821
821
  }>;
822
822
  }, "parts">;
823
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14, {
823
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13 | V_14, {
824
824
  selector: string;
825
825
  attrs: Record<"data-scope" | "data-part", string>;
826
826
  }>;
827
827
  }, "parts">;
828
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12 | V_13, {
828
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12 | V_13, {
829
829
  selector: string;
830
830
  attrs: Record<"data-scope" | "data-part", string>;
831
831
  }>;
832
832
  }, "parts">;
833
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11 | V_12, {
833
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11 | V_12, {
834
834
  selector: string;
835
835
  attrs: Record<"data-scope" | "data-part", string>;
836
836
  }>;
837
837
  }, "parts">;
838
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10 | V_11, {
838
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10 | V_11, {
839
839
  selector: string;
840
840
  attrs: Record<"data-scope" | "data-part", string>;
841
841
  }>;
842
842
  }, "parts">;
843
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber" | V_10, {
843
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber" | V_10, {
844
844
  selector: string;
845
845
  attrs: Record<"data-scope" | "data-part", string>;
846
846
  }>;
847
847
  }, "parts">;
848
- build: () => Record<"root" | "label" | "group" | "input" | "spinButton" | "scrubber", {
848
+ build: () => Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
849
849
  selector: string;
850
850
  attrs: Record<"data-scope" | "data-part", string>;
851
851
  }>;
@@ -856,8 +856,8 @@ declare type ElementIds = Partial<{
856
856
  root: string;
857
857
  label: string;
858
858
  input: string;
859
- incBtn: string;
860
- decBtn: string;
859
+ incrementTrigger: string;
860
+ decrementTrigger: string;
861
861
  scrubber: string;
862
862
  }>;
863
863
  declare type IntlTranslations = {
@@ -1080,10 +1080,10 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
1080
1080
  blur(): void;
1081
1081
  rootProps: T["element"];
1082
1082
  labelProps: T["label"];
1083
- groupProps: T["element"];
1083
+ controlProps: T["element"];
1084
1084
  inputProps: T["input"];
1085
- decrementButtonProps: T["button"];
1086
- incrementButtonProps: T["button"];
1085
+ decrementTriggerProps: T["button"];
1086
+ incrementTriggerProps: T["button"];
1087
1087
  scrubberProps: T["element"];
1088
1088
  };
1089
1089
 
package/dist/index.js CHANGED
@@ -28,7 +28,15 @@ module.exports = __toCommonJS(src_exports);
28
28
 
29
29
  // src/number-input.anatomy.ts
30
30
  var import_anatomy = require("@zag-js/anatomy");
31
- var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts("root", "label", "group", "input", "spinButton", "scrubber");
31
+ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
32
+ "root",
33
+ "label",
34
+ "input",
35
+ "control",
36
+ "incrementTrigger",
37
+ "decrementTrigger",
38
+ "scrubber"
39
+ );
32
40
  var parts = anatomy.build();
33
41
 
34
42
  // ../../utilities/dom/dist/index.mjs
@@ -289,13 +297,13 @@ var dom = defineDomHelpers({
289
297
  var _a, _b;
290
298
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
291
299
  },
292
- getIncButtonId: (ctx) => {
300
+ getIncrementTriggerId: (ctx) => {
293
301
  var _a, _b;
294
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
302
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
295
303
  },
296
- getDecButtonId: (ctx) => {
304
+ getDecrementTriggerId: (ctx) => {
297
305
  var _a, _b;
298
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
306
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
299
307
  },
300
308
  getScrubberId: (ctx) => {
301
309
  var _a, _b;
@@ -307,17 +315,17 @@ var dom = defineDomHelpers({
307
315
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
308
316
  },
309
317
  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
310
- getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
311
- getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
318
+ getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
319
+ getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
312
320
  getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
313
321
  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
314
- getActiveButton: (ctx, hint = ctx.hint) => {
322
+ getPressedTriggerEl: (ctx, hint = ctx.hint) => {
315
323
  let btnEl = null;
316
324
  if (hint === "increment") {
317
- btnEl = dom.getIncButtonEl(ctx);
325
+ btnEl = dom.getIncrementTriggerEl(ctx);
318
326
  }
319
327
  if (hint === "decrement") {
320
- btnEl = dom.getDecButtonEl(ctx);
328
+ btnEl = dom.getDecrementTriggerEl(ctx);
321
329
  }
322
330
  return btnEl;
323
331
  },
@@ -489,8 +497,8 @@ function connect(state, send, normalize) {
489
497
  id: dom.getLabelId(state.context),
490
498
  htmlFor: dom.getInputId(state.context)
491
499
  }),
492
- groupProps: normalize.element({
493
- ...parts.group.attrs,
500
+ controlProps: normalize.element({
501
+ ...parts.control.attrs,
494
502
  role: "group",
495
503
  "aria-disabled": isDisabled,
496
504
  "data-disabled": dataAttr(isDisabled),
@@ -561,10 +569,9 @@ function connect(state, send, normalize) {
561
569
  }
562
570
  }
563
571
  }),
564
- decrementButtonProps: normalize.button({
565
- ...parts.spinButton.attrs,
566
- "data-type": "decrement",
567
- id: dom.getDecButtonId(state.context),
572
+ decrementTriggerProps: normalize.button({
573
+ ...parts.decrementTrigger.attrs,
574
+ id: dom.getDecrementTriggerId(state.context),
568
575
  disabled: isDecrementDisabled,
569
576
  "data-disabled": dataAttr(isDecrementDisabled),
570
577
  "aria-label": translations.decrementLabel,
@@ -586,10 +593,9 @@ function connect(state, send, normalize) {
586
593
  send({ type: "PRESS_UP", hint: "decrement" });
587
594
  }
588
595
  }),
589
- incrementButtonProps: normalize.button({
590
- ...parts.spinButton.attrs,
591
- "data-type": "increment",
592
- id: dom.getIncButtonId(state.context),
596
+ incrementTriggerProps: normalize.button({
597
+ ...parts.incrementTrigger.attrs,
598
+ id: dom.getIncrementTriggerId(state.context),
593
599
  disabled: isIncrementDisabled,
594
600
  "data-disabled": dataAttr(isIncrementDisabled),
595
601
  "aria-label": translations.incrementLabel,
@@ -908,7 +914,7 @@ function machine(userContext) {
908
914
  return dom.preventTextSelection(ctx2);
909
915
  },
910
916
  trackButtonDisabled(ctx2, _evt, { send }) {
911
- const btn = dom.getActiveButton(ctx2, ctx2.hint);
917
+ const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
912
918
  return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
913
919
  },
914
920
  attachWheelListener(ctx2, _evt, { send }) {
@@ -1012,7 +1018,7 @@ function machine(userContext) {
1012
1018
  var _a;
1013
1019
  let srcElement = null;
1014
1020
  if (evt.type === "PRESS_DOWN") {
1015
- srcElement = dom.getActiveButton(ctx2, evt.hint);
1021
+ srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
1016
1022
  } else if (evt.type === "FOCUS") {
1017
1023
  srcElement = dom.getInputEl(ctx2);
1018
1024
  } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
package/dist/index.mjs CHANGED
@@ -1,6 +1,14 @@
1
1
  // src/number-input.anatomy.ts
2
2
  import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("numberInput").parts("root", "label", "group", "input", "spinButton", "scrubber");
3
+ var anatomy = createAnatomy("numberInput").parts(
4
+ "root",
5
+ "label",
6
+ "input",
7
+ "control",
8
+ "incrementTrigger",
9
+ "decrementTrigger",
10
+ "scrubber"
11
+ );
4
12
  var parts = anatomy.build();
5
13
 
6
14
  // ../../utilities/dom/dist/index.mjs
@@ -261,13 +269,13 @@ var dom = defineDomHelpers({
261
269
  var _a, _b;
262
270
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
263
271
  },
264
- getIncButtonId: (ctx) => {
272
+ getIncrementTriggerId: (ctx) => {
265
273
  var _a, _b;
266
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
274
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
267
275
  },
268
- getDecButtonId: (ctx) => {
276
+ getDecrementTriggerId: (ctx) => {
269
277
  var _a, _b;
270
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
278
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
271
279
  },
272
280
  getScrubberId: (ctx) => {
273
281
  var _a, _b;
@@ -279,17 +287,17 @@ var dom = defineDomHelpers({
279
287
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
280
288
  },
281
289
  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
282
- getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
283
- getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
290
+ getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
291
+ getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
284
292
  getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
285
293
  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
286
- getActiveButton: (ctx, hint = ctx.hint) => {
294
+ getPressedTriggerEl: (ctx, hint = ctx.hint) => {
287
295
  let btnEl = null;
288
296
  if (hint === "increment") {
289
- btnEl = dom.getIncButtonEl(ctx);
297
+ btnEl = dom.getIncrementTriggerEl(ctx);
290
298
  }
291
299
  if (hint === "decrement") {
292
- btnEl = dom.getDecButtonEl(ctx);
300
+ btnEl = dom.getDecrementTriggerEl(ctx);
293
301
  }
294
302
  return btnEl;
295
303
  },
@@ -461,8 +469,8 @@ function connect(state, send, normalize) {
461
469
  id: dom.getLabelId(state.context),
462
470
  htmlFor: dom.getInputId(state.context)
463
471
  }),
464
- groupProps: normalize.element({
465
- ...parts.group.attrs,
472
+ controlProps: normalize.element({
473
+ ...parts.control.attrs,
466
474
  role: "group",
467
475
  "aria-disabled": isDisabled,
468
476
  "data-disabled": dataAttr(isDisabled),
@@ -533,10 +541,9 @@ function connect(state, send, normalize) {
533
541
  }
534
542
  }
535
543
  }),
536
- decrementButtonProps: normalize.button({
537
- ...parts.spinButton.attrs,
538
- "data-type": "decrement",
539
- id: dom.getDecButtonId(state.context),
544
+ decrementTriggerProps: normalize.button({
545
+ ...parts.decrementTrigger.attrs,
546
+ id: dom.getDecrementTriggerId(state.context),
540
547
  disabled: isDecrementDisabled,
541
548
  "data-disabled": dataAttr(isDecrementDisabled),
542
549
  "aria-label": translations.decrementLabel,
@@ -558,10 +565,9 @@ function connect(state, send, normalize) {
558
565
  send({ type: "PRESS_UP", hint: "decrement" });
559
566
  }
560
567
  }),
561
- incrementButtonProps: normalize.button({
562
- ...parts.spinButton.attrs,
563
- "data-type": "increment",
564
- id: dom.getIncButtonId(state.context),
568
+ incrementTriggerProps: normalize.button({
569
+ ...parts.incrementTrigger.attrs,
570
+ id: dom.getIncrementTriggerId(state.context),
565
571
  disabled: isIncrementDisabled,
566
572
  "data-disabled": dataAttr(isIncrementDisabled),
567
573
  "aria-label": translations.incrementLabel,
@@ -880,7 +886,7 @@ function machine(userContext) {
880
886
  return dom.preventTextSelection(ctx2);
881
887
  },
882
888
  trackButtonDisabled(ctx2, _evt, { send }) {
883
- const btn = dom.getActiveButton(ctx2, ctx2.hint);
889
+ const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
884
890
  return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
885
891
  },
886
892
  attachWheelListener(ctx2, _evt, { send }) {
@@ -984,7 +990,7 @@ function machine(userContext) {
984
990
  var _a;
985
991
  let srcElement = null;
986
992
  if (evt.type === "PRESS_DOWN") {
987
- srcElement = dom.getActiveButton(ctx2, evt.hint);
993
+ srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
988
994
  } else if (evt.type === "FOCUS") {
989
995
  srcElement = dom.getInputEl(ctx2);
990
996
  } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/number-input",
3
- "version": "0.0.0-dev-20221208125717",
3
+ "version": "0.0.0-dev-20221208133044",
4
4
  "description": "Core logic for the number-input widget implemented as a state machine",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",