@zag-js/number-input 0.10.2 → 0.10.4

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.
@@ -1,393 +0,0 @@
1
- import {
2
- dom
3
- } from "./chunk-QYY4CWRS.mjs";
4
- import {
5
- utils
6
- } from "./chunk-AXXDGYUW.mjs";
7
-
8
- // src/number-input.machine.ts
9
- import { choose, createMachine, guards } from "@zag-js/core";
10
- import { addDomEvent, requestPointerLock } from "@zag-js/dom-event";
11
- import { isSafari, raf } from "@zag-js/dom-query";
12
- import { dispatchInputValueEvent } from "@zag-js/form-utils";
13
- import { observeAttributes } from "@zag-js/mutation-observer";
14
- import { isAtMax, isAtMin, isWithinRange, valueOf } from "@zag-js/number-utils";
15
- import { callAll, compact } from "@zag-js/utils";
16
- var { not, and } = guards;
17
- function machine(userContext) {
18
- const ctx = compact(userContext);
19
- return createMachine(
20
- {
21
- id: "number-input",
22
- initial: "idle",
23
- context: {
24
- dir: "ltr",
25
- focusInputOnChange: true,
26
- clampValueOnBlur: true,
27
- allowOverflow: false,
28
- inputMode: "decimal",
29
- pattern: "[0-9]*(.[0-9]+)?",
30
- hint: null,
31
- value: "",
32
- step: 1,
33
- min: Number.MIN_SAFE_INTEGER,
34
- max: Number.MAX_SAFE_INTEGER,
35
- scrubberCursorPoint: null,
36
- invalid: false,
37
- spinOnPress: true,
38
- ...ctx,
39
- translations: {
40
- incrementLabel: "increment value",
41
- decrementLabel: "decrease value",
42
- ...ctx.translations
43
- }
44
- },
45
- computed: {
46
- isRtl: (ctx2) => ctx2.dir === "rtl",
47
- valueAsNumber: (ctx2) => valueOf(ctx2.value),
48
- isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
49
- isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
50
- isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
51
- isValueEmpty: (ctx2) => ctx2.value === "",
52
- canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
53
- canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
54
- valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value),
55
- formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.value
56
- },
57
- watch: {
58
- value: ["invokeOnChange", "dispatchChangeEvent"],
59
- isOutOfRange: ["invokeOnInvalid"],
60
- scrubberCursorPoint: ["setVirtualCursorPosition"]
61
- },
62
- entry: ["syncInputValue"],
63
- on: {
64
- SET_VALUE: [
65
- {
66
- guard: "clampOnBlur",
67
- actions: ["setValue", "clampValue", "setHintToSet"]
68
- },
69
- {
70
- actions: ["setValue", "setHintToSet"]
71
- }
72
- ],
73
- CLEAR_VALUE: {
74
- actions: ["clearValue"]
75
- },
76
- INCREMENT: {
77
- actions: ["increment"]
78
- },
79
- DECREMENT: {
80
- actions: ["decrement"]
81
- }
82
- },
83
- states: {
84
- idle: {
85
- exit: "invokeOnFocus",
86
- on: {
87
- PRESS_DOWN: {
88
- target: "before:spin",
89
- actions: ["focusInput", "setHint"]
90
- },
91
- PRESS_DOWN_SCRUBBER: {
92
- target: "scrubbing",
93
- actions: ["focusInput", "setHint", "setCursorPoint"]
94
- },
95
- FOCUS: "focused"
96
- }
97
- },
98
- focused: {
99
- tags: "focus",
100
- entry: "focusInput",
101
- activities: "attachWheelListener",
102
- on: {
103
- PRESS_DOWN: {
104
- target: "before:spin",
105
- actions: ["focusInput", "setHint"]
106
- },
107
- PRESS_DOWN_SCRUBBER: {
108
- target: "scrubbing",
109
- actions: ["focusInput", "setHint", "setCursorPoint"]
110
- },
111
- ARROW_UP: {
112
- actions: "increment"
113
- },
114
- ARROW_DOWN: {
115
- actions: "decrement"
116
- },
117
- HOME: {
118
- actions: "setToMin"
119
- },
120
- END: {
121
- actions: "setToMax"
122
- },
123
- CHANGE: {
124
- actions: ["setValue", "setHint"]
125
- },
126
- BLUR: [
127
- {
128
- guard: "isInvalidExponential",
129
- target: "idle",
130
- actions: ["clearValue", "clearHint", "invokeOnBlur"]
131
- },
132
- {
133
- guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
134
- target: "idle",
135
- actions: ["clampValue", "clearHint", "invokeOnBlur"]
136
- },
137
- {
138
- target: "idle",
139
- actions: ["roundValue", "invokeOnBlur"]
140
- }
141
- ]
142
- }
143
- },
144
- "before:spin": {
145
- tags: "focus",
146
- activities: "trackButtonDisabled",
147
- entry: choose([
148
- { guard: "isIncrementHint", actions: "increment" },
149
- { guard: "isDecrementHint", actions: "decrement" }
150
- ]),
151
- after: {
152
- CHANGE_DELAY: {
153
- target: "spinning",
154
- guard: and("isInRange", "spinOnPress")
155
- }
156
- },
157
- on: {
158
- PRESS_UP: {
159
- target: "focused",
160
- actions: "clearHint"
161
- }
162
- }
163
- },
164
- spinning: {
165
- tags: "focus",
166
- activities: "trackButtonDisabled",
167
- every: [
168
- {
169
- delay: "CHANGE_INTERVAL",
170
- guard: and(not("isAtMin"), "isIncrementHint"),
171
- actions: "increment"
172
- },
173
- {
174
- delay: "CHANGE_INTERVAL",
175
- guard: and(not("isAtMax"), "isDecrementHint"),
176
- actions: "decrement"
177
- }
178
- ],
179
- on: {
180
- PRESS_UP: {
181
- target: "focused",
182
- actions: "clearHint"
183
- }
184
- }
185
- },
186
- scrubbing: {
187
- tags: "focus",
188
- exit: "clearCursorPoint",
189
- activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
190
- on: {
191
- POINTER_UP_SCRUBBER: "focused",
192
- POINTER_MOVE_SCRUBBER: [
193
- {
194
- guard: "isIncrementHint",
195
- actions: ["increment", "setCursorPoint"]
196
- },
197
- {
198
- guard: "isDecrementHint",
199
- actions: ["decrement", "setCursorPoint"]
200
- }
201
- ]
202
- }
203
- }
204
- }
205
- },
206
- {
207
- delays: {
208
- CHANGE_INTERVAL: 50,
209
- CHANGE_DELAY: 300
210
- },
211
- guards: {
212
- clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
213
- isAtMin: (ctx2) => ctx2.isAtMin,
214
- spinOnPress: (ctx2) => !!ctx2.spinOnPress,
215
- isAtMax: (ctx2) => ctx2.isAtMax,
216
- isInRange: (ctx2) => !ctx2.isOutOfRange,
217
- isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
218
- isEmptyValue: (ctx2) => ctx2.isValueEmpty,
219
- isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
220
- isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
221
- },
222
- activities: {
223
- setupVirtualCursor(ctx2) {
224
- return dom.setupVirtualCursor(ctx2);
225
- },
226
- preventTextSelection(ctx2) {
227
- return dom.preventTextSelection(ctx2);
228
- },
229
- trackButtonDisabled(ctx2, _evt, { send }) {
230
- const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
231
- return observeAttributes(btn, ["disabled"], () => {
232
- send("PRESS_UP");
233
- });
234
- },
235
- attachWheelListener(ctx2, _evt, { send }) {
236
- const input = dom.getInputEl(ctx2);
237
- if (!input)
238
- return;
239
- function onWheel(event) {
240
- const isInputFocused = dom.getDoc(ctx2).activeElement === input;
241
- if (!ctx2.allowMouseWheel || !isInputFocused)
242
- return;
243
- event.preventDefault();
244
- const dir = Math.sign(event.deltaY) * -1;
245
- if (dir === 1) {
246
- send("INCREMENT");
247
- } else if (dir === -1) {
248
- send("DECREMENT");
249
- }
250
- }
251
- return addDomEvent(input, "wheel", onWheel, { passive: false });
252
- },
253
- activatePointerLock(ctx2) {
254
- if (isSafari())
255
- return;
256
- return requestPointerLock(dom.getDoc(ctx2));
257
- },
258
- trackMousemove(ctx2, _evt, { send }) {
259
- const doc = dom.getDoc(ctx2);
260
- function onMousemove(event) {
261
- if (!ctx2.scrubberCursorPoint)
262
- return;
263
- const value = dom.getMousementValue(ctx2, event);
264
- if (!value.hint)
265
- return;
266
- send({
267
- type: "POINTER_MOVE_SCRUBBER",
268
- hint: value.hint,
269
- point: value.point
270
- });
271
- }
272
- function onMouseup() {
273
- send("POINTER_UP_SCRUBBER");
274
- }
275
- return callAll(
276
- addDomEvent(doc, "mousemove", onMousemove, false),
277
- addDomEvent(doc, "mouseup", onMouseup, false)
278
- );
279
- }
280
- },
281
- actions: {
282
- focusInput(ctx2) {
283
- if (!ctx2.focusInputOnChange)
284
- return;
285
- const input = dom.getInputEl(ctx2);
286
- raf(() => input?.focus());
287
- },
288
- increment(ctx2, evt) {
289
- ctx2.value = utils.increment(ctx2, evt.step);
290
- },
291
- decrement(ctx2, evt) {
292
- ctx2.value = utils.decrement(ctx2, evt.step);
293
- },
294
- clampValue(ctx2) {
295
- ctx2.value = utils.clamp(ctx2);
296
- },
297
- roundValue(ctx2) {
298
- if (ctx2.value !== "") {
299
- ctx2.value = utils.round(ctx2);
300
- }
301
- },
302
- setValue(ctx2, evt) {
303
- const value = evt.target?.value ?? evt.value;
304
- ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
305
- },
306
- clearValue(ctx2) {
307
- ctx2.value = "";
308
- },
309
- setToMax(ctx2) {
310
- ctx2.value = ctx2.max.toString();
311
- },
312
- setToMin(ctx2) {
313
- ctx2.value = ctx2.min.toString();
314
- },
315
- setHint(ctx2, evt) {
316
- ctx2.hint = evt.hint;
317
- },
318
- clearHint(ctx2) {
319
- ctx2.hint = null;
320
- },
321
- setHintToSet(ctx2) {
322
- ctx2.hint = "set";
323
- },
324
- invokeOnChange(ctx2) {
325
- ctx2.onChange?.({
326
- value: ctx2.value,
327
- valueAsNumber: ctx2.valueAsNumber
328
- });
329
- },
330
- invokeOnFocus(ctx2, evt) {
331
- let srcElement = null;
332
- if (evt.type === "PRESS_DOWN") {
333
- srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
334
- } else if (evt.type === "FOCUS") {
335
- srcElement = dom.getInputEl(ctx2);
336
- } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
337
- srcElement = dom.getScrubberEl(ctx2);
338
- }
339
- ctx2.onFocus?.({
340
- value: ctx2.value,
341
- valueAsNumber: ctx2.valueAsNumber,
342
- srcElement
343
- });
344
- },
345
- invokeOnBlur(ctx2) {
346
- ctx2.onBlur?.({
347
- value: ctx2.value,
348
- valueAsNumber: ctx2.valueAsNumber
349
- });
350
- },
351
- invokeOnInvalid(ctx2) {
352
- if (!ctx2.isOutOfRange)
353
- return;
354
- const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
355
- ctx2.onInvalid?.({
356
- reason,
357
- value: ctx2.formattedValue,
358
- valueAsNumber: ctx2.valueAsNumber
359
- });
360
- },
361
- // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
362
- syncInputValue(ctx2) {
363
- const input = dom.getInputEl(ctx2);
364
- if (!input || input.value == ctx2.value)
365
- return;
366
- const value = utils.parse(ctx2, input.value);
367
- ctx2.value = utils.sanitize(ctx2, value);
368
- },
369
- setCursorPoint(ctx2, evt) {
370
- ctx2.scrubberCursorPoint = evt.point;
371
- },
372
- clearCursorPoint(ctx2) {
373
- ctx2.scrubberCursorPoint = null;
374
- },
375
- setVirtualCursorPosition(ctx2) {
376
- const cursor = dom.getCursorEl(ctx2);
377
- if (!cursor || !ctx2.scrubberCursorPoint)
378
- return;
379
- const { x, y } = ctx2.scrubberCursorPoint;
380
- cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
381
- },
382
- dispatchChangeEvent(ctx2) {
383
- const inputEl = dom.getInputEl(ctx2);
384
- dispatchInputValueEvent(inputEl, { value: ctx2.formattedValue });
385
- }
386
- }
387
- }
388
- );
389
- }
390
-
391
- export {
392
- machine
393
- };
@@ -1,17 +0,0 @@
1
- // src/number-input.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("numberInput").parts(
4
- "root",
5
- "label",
6
- "input",
7
- "control",
8
- "incrementTrigger",
9
- "decrementTrigger",
10
- "scrubber"
11
- );
12
- var parts = anatomy.build();
13
-
14
- export {
15
- anatomy,
16
- parts
17
- };
@@ -1,18 +0,0 @@
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 __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // src/number-input.types.ts
17
- var number_input_types_exports = {};
18
- module.exports = __toCommonJS(number_input_types_exports);
File without changes