@zag-js/number-input 0.50.0 → 0.51.1

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.mjs CHANGED
@@ -1,836 +1,8 @@
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
- // src/number-input.connect.ts
15
- import { getEventPoint, getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
16
- import { ariaAttr, dataAttr } from "@zag-js/dom-query";
17
- import { roundToDevicePixel as roundToDevicePixel2 } from "@zag-js/number-utils";
18
-
19
- // src/number-input.dom.ts
20
- import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
21
- import { roundToDevicePixel, wrap } from "@zag-js/number-utils";
22
- var dom = createScope({
23
- getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
24
- getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
25
- getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
26
- getDecrementTriggerId: (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`,
27
- getScrubberId: (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`,
28
- getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
29
- getLabelId: (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`,
30
- getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
31
- getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
32
- getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
33
- getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
34
- getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
35
- getPressedTriggerEl: (ctx, hint = ctx.hint) => {
36
- let btnEl = null;
37
- if (hint === "increment") {
38
- btnEl = dom.getIncrementTriggerEl(ctx);
39
- }
40
- if (hint === "decrement") {
41
- btnEl = dom.getDecrementTriggerEl(ctx);
42
- }
43
- return btnEl;
44
- },
45
- setupVirtualCursor(ctx) {
46
- if (isSafari())
47
- return;
48
- dom.createVirtualCursor(ctx);
49
- return () => {
50
- dom.getCursorEl(ctx)?.remove();
51
- };
52
- },
53
- preventTextSelection(ctx) {
54
- const doc = dom.getDoc(ctx);
55
- const html = doc.documentElement;
56
- const body = doc.body;
57
- body.style.pointerEvents = "none";
58
- html.style.userSelect = "none";
59
- html.style.cursor = "ew-resize";
60
- return () => {
61
- body.style.pointerEvents = "";
62
- html.style.userSelect = "";
63
- html.style.cursor = "";
64
- if (!html.style.length) {
65
- html.removeAttribute("style");
66
- }
67
- if (!body.style.length) {
68
- body.removeAttribute("style");
69
- }
70
- };
71
- },
72
- getMousementValue(ctx, event) {
73
- const x = roundToDevicePixel(event.movementX);
74
- const y = roundToDevicePixel(event.movementY);
75
- let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
76
- if (ctx.isRtl && hint === "increment")
77
- hint = "decrement";
78
- if (ctx.isRtl && hint === "decrement")
79
- hint = "increment";
80
- const point = {
81
- x: ctx.scrubberCursorPoint.x + x,
82
- y: ctx.scrubberCursorPoint.y + y
83
- };
84
- const win = dom.getWin(ctx);
85
- const width = win.innerWidth;
86
- const half = roundToDevicePixel(7.5);
87
- point.x = wrap(point.x + half, width) - half;
88
- return { hint, point };
89
- },
90
- createVirtualCursor(ctx) {
91
- const doc = dom.getDoc(ctx);
92
- const el = doc.createElement("div");
93
- el.className = "scrubber--cursor";
94
- el.id = dom.getCursorId(ctx);
95
- Object.assign(el.style, {
96
- width: "15px",
97
- height: "15px",
98
- position: "fixed",
99
- pointerEvents: "none",
100
- left: "0px",
101
- top: "0px",
102
- zIndex: MAX_Z_INDEX,
103
- transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
104
- willChange: "transform"
105
- });
106
- el.innerHTML = `
1
+ import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("numberInput").parts("root","label","input","control","incrementTrigger","decrementTrigger","scrubber");var parts=anatomy.build();import{getEventPoint,getEventStep,getNativeEvent,isLeftClick}from"@zag-js/dom-event";import{ariaAttr,dataAttr}from"@zag-js/dom-query";import{roundToDevicePixel as roundToDevicePixel2}from"@zag-js/number-utils";import{createScope,isSafari,MAX_Z_INDEX}from"@zag-js/dom-query";import{roundToDevicePixel,wrap}from"@zag-js/number-utils";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`number-input:${ctx.id}`,getInputId:ctx=>ctx.ids?.input??`number-input:${ctx.id}:input`,getIncrementTriggerId:ctx=>ctx.ids?.incrementTrigger??`number-input:${ctx.id}:inc`,getDecrementTriggerId:ctx=>ctx.ids?.decrementTrigger??`number-input:${ctx.id}:dec`,getScrubberId:ctx=>ctx.ids?.scrubber??`number-input:${ctx.id}:scrubber`,getCursorId:ctx=>`number-input:${ctx.id}:cursor`,getLabelId:ctx=>ctx.ids?.label??`number-input:${ctx.id}:label`,getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),getIncrementTriggerEl:ctx=>dom.getById(ctx,dom.getIncrementTriggerId(ctx)),getDecrementTriggerEl:ctx=>dom.getById(ctx,dom.getDecrementTriggerId(ctx)),getScrubberEl:ctx=>dom.getById(ctx,dom.getScrubberId(ctx)),getCursorEl:ctx=>dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),getPressedTriggerEl:(ctx,hint=ctx.hint)=>{let btnEl=null;if(hint==="increment"){btnEl=dom.getIncrementTriggerEl(ctx)}if(hint==="decrement"){btnEl=dom.getDecrementTriggerEl(ctx)}return btnEl},setupVirtualCursor(ctx){if(isSafari())return;dom.createVirtualCursor(ctx);return()=>{dom.getCursorEl(ctx)?.remove()}},preventTextSelection(ctx){const doc=dom.getDoc(ctx);const html=doc.documentElement;const body=doc.body;body.style.pointerEvents="none";html.style.userSelect="none";html.style.cursor="ew-resize";return()=>{body.style.pointerEvents="";html.style.userSelect="";html.style.cursor="";if(!html.style.length){html.removeAttribute("style")}if(!body.style.length){body.removeAttribute("style")}}},getMousementValue(ctx,event){const x=roundToDevicePixel(event.movementX);const y=roundToDevicePixel(event.movementY);let hint=x>0?"increment":x<0?"decrement":null;if(ctx.isRtl&&hint==="increment")hint="decrement";if(ctx.isRtl&&hint==="decrement")hint="increment";const point={x:ctx.scrubberCursorPoint.x+x,y:ctx.scrubberCursorPoint.y+y};const win=dom.getWin(ctx);const width=win.innerWidth;const half=roundToDevicePixel(7.5);point.x=wrap(point.x+half,width)-half;return{hint,point}},createVirtualCursor(ctx){const doc=dom.getDoc(ctx);const el=doc.createElement("div");el.className="scrubber--cursor";el.id=dom.getCursorId(ctx);Object.assign(el.style,{width:"15px",height:"15px",position:"fixed",pointerEvents:"none",left:"0px",top:"0px",zIndex:MAX_Z_INDEX,transform:ctx.scrubberCursorPoint?`translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)`:void 0,willChange:"transform"});el.innerHTML=`
107
2
  <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
108
3
  <g transform="translate(2 3)">
109
4
  <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
110
5
  <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
111
6
  </g>
112
- </svg>`;
113
- doc.body.appendChild(el);
114
- }
115
- });
116
-
117
- // src/number-input.connect.ts
118
- function connect(state, send, normalize) {
119
- const focused = state.hasTag("focus");
120
- const disabled = state.context.isDisabled;
121
- const readOnly = state.context.readOnly;
122
- const empty = state.context.isValueEmpty;
123
- const invalid = state.context.isOutOfRange || !!state.context.invalid;
124
- const isIncrementDisabled = disabled || !state.context.canIncrement || readOnly;
125
- const isDecrementDisabled = disabled || !state.context.canDecrement || readOnly;
126
- const translations = state.context.translations;
127
- return {
128
- focused,
129
- invalid,
130
- empty,
131
- value: state.context.formattedValue,
132
- valueAsNumber: state.context.valueAsNumber,
133
- setValue(value) {
134
- send({ type: "VALUE.SET", value });
135
- },
136
- clearValue() {
137
- send("VALUE.CLEAR");
138
- },
139
- increment() {
140
- send("VALUE.INCREMENT");
141
- },
142
- decrement() {
143
- send("VALUE.DECREMENT");
144
- },
145
- setToMax() {
146
- send({ type: "VALUE.SET", value: state.context.max });
147
- },
148
- setToMin() {
149
- send({ type: "VALUE.SET", value: state.context.min });
150
- },
151
- focus() {
152
- dom.getInputEl(state.context)?.focus();
153
- },
154
- rootProps: normalize.element({
155
- id: dom.getRootId(state.context),
156
- ...parts.root.attrs,
157
- dir: state.context.dir,
158
- "data-disabled": dataAttr(disabled),
159
- "data-focus": dataAttr(focused),
160
- "data-invalid": dataAttr(invalid)
161
- }),
162
- labelProps: normalize.label({
163
- ...parts.label.attrs,
164
- dir: state.context.dir,
165
- "data-disabled": dataAttr(disabled),
166
- "data-focus": dataAttr(focused),
167
- "data-invalid": dataAttr(invalid),
168
- id: dom.getLabelId(state.context),
169
- htmlFor: dom.getInputId(state.context)
170
- }),
171
- controlProps: normalize.element({
172
- ...parts.control.attrs,
173
- dir: state.context.dir,
174
- role: "group",
175
- "aria-disabled": disabled,
176
- "data-focus": dataAttr(focused),
177
- "data-disabled": dataAttr(disabled),
178
- "data-invalid": dataAttr(invalid),
179
- "aria-invalid": ariaAttr(state.context.invalid)
180
- }),
181
- inputProps: normalize.input({
182
- ...parts.input.attrs,
183
- dir: state.context.dir,
184
- name: state.context.name,
185
- form: state.context.form,
186
- id: dom.getInputId(state.context),
187
- role: "spinbutton",
188
- defaultValue: state.context.formattedValue,
189
- pattern: state.context.pattern,
190
- inputMode: state.context.inputMode,
191
- "aria-invalid": ariaAttr(invalid),
192
- "data-invalid": dataAttr(invalid),
193
- disabled,
194
- "data-disabled": dataAttr(disabled),
195
- readOnly: !!state.context.readOnly,
196
- autoComplete: "off",
197
- autoCorrect: "off",
198
- spellCheck: "false",
199
- type: "text",
200
- "aria-roledescription": "numberfield",
201
- "aria-valuemin": state.context.min,
202
- "aria-valuemax": state.context.max,
203
- "aria-valuenow": Number.isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
204
- "aria-valuetext": state.context.valueText,
205
- onFocus() {
206
- send("INPUT.FOCUS");
207
- },
208
- onBlur() {
209
- send({ type: "INPUT.COMMIT", src: "blur" });
210
- },
211
- onChange(event) {
212
- send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set" });
213
- },
214
- onBeforeInput(event) {
215
- try {
216
- const { selectionStart, selectionEnd, value } = event.currentTarget;
217
- const nextValue = value.slice(0, selectionStart) + (event.data ?? "") + value.slice(selectionEnd);
218
- const isValid = state.context.parser.isValidPartialNumber(nextValue);
219
- if (!isValid) {
220
- event.preventDefault();
221
- }
222
- } catch {
223
- }
224
- },
225
- onKeyDown(event) {
226
- if (event.defaultPrevented)
227
- return;
228
- if (readOnly)
229
- return;
230
- const evt = getNativeEvent(event);
231
- if (evt.isComposing)
232
- return;
233
- const step = getEventStep(event) * state.context.step;
234
- const keyMap = {
235
- ArrowUp() {
236
- send({ type: "INPUT.ARROW_UP", step });
237
- event.preventDefault();
238
- },
239
- ArrowDown() {
240
- send({ type: "INPUT.ARROW_DOWN", step });
241
- event.preventDefault();
242
- },
243
- Home() {
244
- send("INPUT.HOME");
245
- event.preventDefault();
246
- },
247
- End() {
248
- send("INPUT.END");
249
- event.preventDefault();
250
- },
251
- Enter() {
252
- send({ type: "INPUT.COMMIT", src: "enter" });
253
- }
254
- };
255
- const exec = keyMap[event.key];
256
- exec?.(event);
257
- }
258
- }),
259
- decrementTriggerProps: normalize.button({
260
- ...parts.decrementTrigger.attrs,
261
- dir: state.context.dir,
262
- id: dom.getDecrementTriggerId(state.context),
263
- disabled: isDecrementDisabled,
264
- "data-disabled": dataAttr(isDecrementDisabled),
265
- "aria-label": translations.decrementLabel,
266
- type: "button",
267
- tabIndex: -1,
268
- "aria-controls": dom.getInputId(state.context),
269
- onPointerDown(event) {
270
- if (isDecrementDisabled || !isLeftClick(event))
271
- return;
272
- send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
273
- if (event.pointerType === "mouse") {
274
- event.preventDefault();
275
- }
276
- if (event.pointerType === "touch") {
277
- event.currentTarget?.focus({ preventScroll: true });
278
- }
279
- },
280
- onPointerUp(event) {
281
- send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
282
- },
283
- onPointerLeave() {
284
- if (isDecrementDisabled)
285
- return;
286
- send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
287
- }
288
- }),
289
- incrementTriggerProps: normalize.button({
290
- ...parts.incrementTrigger.attrs,
291
- dir: state.context.dir,
292
- id: dom.getIncrementTriggerId(state.context),
293
- disabled: isIncrementDisabled,
294
- "data-disabled": dataAttr(isIncrementDisabled),
295
- "aria-label": translations.incrementLabel,
296
- type: "button",
297
- tabIndex: -1,
298
- "aria-controls": dom.getInputId(state.context),
299
- onPointerDown(event) {
300
- if (isIncrementDisabled || !isLeftClick(event))
301
- return;
302
- send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
303
- if (event.pointerType === "mouse") {
304
- event.preventDefault();
305
- }
306
- if (event.pointerType === "touch") {
307
- event.currentTarget?.focus({ preventScroll: true });
308
- }
309
- },
310
- onPointerUp(event) {
311
- send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
312
- },
313
- onPointerLeave(event) {
314
- send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
315
- }
316
- }),
317
- scrubberProps: normalize.element({
318
- ...parts.scrubber.attrs,
319
- dir: state.context.dir,
320
- "data-disabled": dataAttr(disabled),
321
- id: dom.getScrubberId(state.context),
322
- role: "presentation",
323
- onMouseDown(event) {
324
- if (disabled)
325
- return;
326
- const evt = getNativeEvent(event);
327
- const point = getEventPoint(evt);
328
- point.x = point.x - roundToDevicePixel2(7.5);
329
- point.y = point.y - roundToDevicePixel2(7.5);
330
- send({ type: "SCRUBBER.PRESS_DOWN", point });
331
- event.preventDefault();
332
- },
333
- style: {
334
- cursor: disabled ? void 0 : "ew-resize"
335
- }
336
- })
337
- };
338
- }
339
-
340
- // src/number-input.machine.ts
341
- import { choose, createMachine, guards } from "@zag-js/core";
342
- import { addDomEvent, requestPointerLock } from "@zag-js/dom-event";
343
- import { isSafari as isSafari2, observeAttributes, raf } from "@zag-js/dom-query";
344
- import { trackFormControl } from "@zag-js/form-utils";
345
- import { clamp, decrement, increment, isAtMax, isAtMin, isWithinRange } from "@zag-js/number-utils";
346
- import { callAll, compact, isEqual } from "@zag-js/utils";
347
-
348
- // src/cursor.ts
349
- function recordCursor(inputEl) {
350
- if (inputEl.ownerDocument.activeElement !== inputEl)
351
- return;
352
- try {
353
- const { selectionStart: start, selectionEnd: end, value } = inputEl;
354
- const beforeTxt = value.substring(0, start);
355
- const afterTxt = value.substring(end);
356
- return {
357
- start,
358
- end,
359
- value,
360
- beforeTxt,
361
- afterTxt
362
- };
363
- } catch {
364
- }
365
- }
366
- function restoreCursor(inputEl, selection) {
367
- if (inputEl.ownerDocument.activeElement !== inputEl)
368
- return;
369
- if (!selection) {
370
- inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
371
- return;
372
- }
373
- try {
374
- const { value } = inputEl;
375
- const { beforeTxt = "", afterTxt = "", start } = selection;
376
- let startPos = value.length;
377
- if (value.endsWith(afterTxt)) {
378
- startPos = value.length - afterTxt.length;
379
- } else if (value.startsWith(beforeTxt)) {
380
- startPos = beforeTxt.length;
381
- } else if (start != null) {
382
- const beforeLastChar = beforeTxt[start - 1];
383
- const newIndex = value.indexOf(beforeLastChar, start - 1);
384
- if (newIndex !== -1) {
385
- startPos = newIndex + 1;
386
- }
387
- }
388
- inputEl.setSelectionRange(startPos, startPos);
389
- } catch {
390
- }
391
- }
392
-
393
- // src/number-input.utils.ts
394
- import { NumberParser } from "@internationalized/number";
395
- import { ref } from "@zag-js/core";
396
- var createFormatter = (locale, options = {}) => {
397
- return ref(new Intl.NumberFormat(locale, options));
398
- };
399
- var createParser = (locale, options = {}) => {
400
- return ref(new NumberParser(locale, options));
401
- };
402
- var parseValue = (ctx, value) => {
403
- if (!ctx.formatOptions)
404
- return parseFloat(value);
405
- return ctx.parser.parse(String(value));
406
- };
407
- var formatValue = (ctx, value) => {
408
- if (Number.isNaN(value))
409
- return "";
410
- if (!ctx.formatOptions)
411
- return value.toString();
412
- return ctx.formatter.format(value);
413
- };
414
-
415
- // src/number-input.machine.ts
416
- var { not, and } = guards;
417
- function machine(userContext) {
418
- const ctx = compact(userContext);
419
- return createMachine(
420
- {
421
- id: "number-input",
422
- initial: "idle",
423
- context: {
424
- dir: "ltr",
425
- locale: "en-US",
426
- focusInputOnChange: true,
427
- clampValueOnBlur: true,
428
- allowOverflow: false,
429
- inputMode: "decimal",
430
- pattern: "[0-9]*(.[0-9]+)?",
431
- value: "",
432
- step: 1,
433
- min: Number.MIN_SAFE_INTEGER,
434
- max: Number.MAX_SAFE_INTEGER,
435
- invalid: false,
436
- spinOnPress: true,
437
- ...ctx,
438
- hint: null,
439
- scrubberCursorPoint: null,
440
- fieldsetDisabled: false,
441
- formatter: createFormatter(ctx.locale || "en-US", ctx.formatOptions),
442
- parser: createParser(ctx.locale || "en-US", ctx.formatOptions),
443
- translations: {
444
- incrementLabel: "increment value",
445
- decrementLabel: "decrease value",
446
- ...ctx.translations
447
- }
448
- },
449
- computed: {
450
- isRtl: (ctx2) => ctx2.dir === "rtl",
451
- valueAsNumber: (ctx2) => parseValue(ctx2, ctx2.value),
452
- formattedValue: (ctx2) => formatValue(ctx2, ctx2.valueAsNumber),
453
- isAtMin: (ctx2) => isAtMin(ctx2.valueAsNumber, ctx2),
454
- isAtMax: (ctx2) => isAtMax(ctx2.valueAsNumber, ctx2),
455
- isOutOfRange: (ctx2) => !isWithinRange(ctx2.valueAsNumber, ctx2),
456
- isValueEmpty: (ctx2) => ctx2.value === "",
457
- isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
458
- canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
459
- canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
460
- valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value)
461
- },
462
- watch: {
463
- formatOptions: ["setFormatterAndParser", "syncInputElement"],
464
- locale: ["setFormatterAndParser", "syncInputElement"],
465
- value: ["syncInputElement"],
466
- isOutOfRange: ["invokeOnInvalid"],
467
- scrubberCursorPoint: ["setVirtualCursorPosition"]
468
- },
469
- activities: ["trackFormControl"],
470
- on: {
471
- "VALUE.SET": {
472
- actions: ["setRawValue", "setHintToSet"]
473
- },
474
- "VALUE.CLEAR": {
475
- actions: ["clearValue"]
476
- },
477
- "VALUE.INCREMENT": {
478
- actions: ["increment"]
479
- },
480
- "VALUE.DECREMENT": {
481
- actions: ["decrement"]
482
- }
483
- },
484
- states: {
485
- idle: {
486
- on: {
487
- "TRIGGER.PRESS_DOWN": [
488
- { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
489
- {
490
- target: "before:spin",
491
- actions: ["focusInput", "invokeOnFocus", "setHint"]
492
- }
493
- ],
494
- "SCRUBBER.PRESS_DOWN": {
495
- target: "scrubbing",
496
- actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
497
- },
498
- "INPUT.FOCUS": {
499
- target: "focused",
500
- actions: ["focusInput", "invokeOnFocus"]
501
- }
502
- }
503
- },
504
- focused: {
505
- tags: "focus",
506
- activities: "attachWheelListener",
507
- on: {
508
- "TRIGGER.PRESS_DOWN": [
509
- { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
510
- { target: "before:spin", actions: ["focusInput", "setHint"] }
511
- ],
512
- "SCRUBBER.PRESS_DOWN": {
513
- target: "scrubbing",
514
- actions: ["focusInput", "setHint", "setCursorPoint"]
515
- },
516
- "INPUT.ARROW_UP": {
517
- actions: "increment"
518
- },
519
- "INPUT.ARROW_DOWN": {
520
- actions: "decrement"
521
- },
522
- "INPUT.HOME": {
523
- actions: "decrementToMin"
524
- },
525
- "INPUT.END": {
526
- actions: "incrementToMax"
527
- },
528
- "INPUT.CHANGE": {
529
- actions: ["setValue", "setHint"]
530
- },
531
- "INPUT.COMMIT": [
532
- {
533
- guard: and("clampValueOnBlur", not("isInRange")),
534
- target: "idle",
535
- actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
536
- },
537
- {
538
- target: "idle",
539
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
540
- }
541
- ]
542
- }
543
- },
544
- "before:spin": {
545
- tags: "focus",
546
- activities: "trackButtonDisabled",
547
- entry: choose([
548
- { guard: "isIncrementHint", actions: "increment" },
549
- { guard: "isDecrementHint", actions: "decrement" }
550
- ]),
551
- after: {
552
- CHANGE_DELAY: {
553
- target: "spinning",
554
- guard: and("isInRange", "spinOnPress")
555
- }
556
- },
557
- on: {
558
- "TRIGGER.PRESS_UP": [
559
- { guard: "isTouchPointer", target: "focused", actions: "clearHint" },
560
- { target: "focused", actions: ["focusInput", "clearHint"] }
561
- ]
562
- }
563
- },
564
- spinning: {
565
- tags: "focus",
566
- activities: "trackButtonDisabled",
567
- every: [
568
- {
569
- delay: "CHANGE_INTERVAL",
570
- guard: and(not("isAtMin"), "isIncrementHint"),
571
- actions: "increment"
572
- },
573
- {
574
- delay: "CHANGE_INTERVAL",
575
- guard: and(not("isAtMax"), "isDecrementHint"),
576
- actions: "decrement"
577
- }
578
- ],
579
- on: {
580
- "TRIGGER.PRESS_UP": {
581
- target: "focused",
582
- actions: ["focusInput", "clearHint"]
583
- }
584
- }
585
- },
586
- scrubbing: {
587
- tags: "focus",
588
- activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
589
- on: {
590
- "SCRUBBER.POINTER_UP": {
591
- target: "focused",
592
- actions: ["focusInput", "clearCursorPoint"]
593
- },
594
- "SCRUBBER.POINTER_MOVE": [
595
- {
596
- guard: "isIncrementHint",
597
- actions: ["increment", "setCursorPoint"]
598
- },
599
- {
600
- guard: "isDecrementHint",
601
- actions: ["decrement", "setCursorPoint"]
602
- }
603
- ]
604
- }
605
- }
606
- }
607
- },
608
- {
609
- delays: {
610
- CHANGE_INTERVAL: 50,
611
- CHANGE_DELAY: 300
612
- },
613
- guards: {
614
- clampValueOnBlur: (ctx2) => ctx2.clampValueOnBlur,
615
- isAtMin: (ctx2) => ctx2.isAtMin,
616
- spinOnPress: (ctx2) => !!ctx2.spinOnPress,
617
- isAtMax: (ctx2) => ctx2.isAtMax,
618
- isInRange: (ctx2) => !ctx2.isOutOfRange,
619
- isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
620
- isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
621
- isTouchPointer: (_ctx, evt) => evt.pointerType === "touch"
622
- },
623
- activities: {
624
- trackFormControl(ctx2, _evt, { initialContext }) {
625
- const inputEl = dom.getInputEl(ctx2);
626
- return trackFormControl(inputEl, {
627
- onFieldsetDisabledChange(disabled) {
628
- ctx2.fieldsetDisabled = disabled;
629
- },
630
- onFormReset() {
631
- set.value(ctx2, initialContext.value);
632
- }
633
- });
634
- },
635
- setupVirtualCursor(ctx2) {
636
- return dom.setupVirtualCursor(ctx2);
637
- },
638
- preventTextSelection(ctx2) {
639
- return dom.preventTextSelection(ctx2);
640
- },
641
- trackButtonDisabled(ctx2, _evt, { send }) {
642
- const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
643
- return observeAttributes(btn, {
644
- attributes: ["disabled"],
645
- callback() {
646
- send({ type: "TRIGGER.PRESS_UP", src: "attr" });
647
- }
648
- });
649
- },
650
- attachWheelListener(ctx2, _evt, { send }) {
651
- const inputEl = dom.getInputEl(ctx2);
652
- if (!inputEl || !dom.isActiveElement(ctx2, inputEl) || !ctx2.allowMouseWheel)
653
- return;
654
- function onWheel(event) {
655
- event.preventDefault();
656
- const dir = Math.sign(event.deltaY) * -1;
657
- if (dir === 1) {
658
- send("VALUE.INCREMENT");
659
- } else if (dir === -1) {
660
- send("VALUE.DECREMENT");
661
- }
662
- }
663
- return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
664
- },
665
- activatePointerLock(ctx2) {
666
- if (isSafari2())
667
- return;
668
- return requestPointerLock(dom.getDoc(ctx2));
669
- },
670
- trackMousemove(ctx2, _evt, { send }) {
671
- const doc = dom.getDoc(ctx2);
672
- function onMousemove(event) {
673
- if (!ctx2.scrubberCursorPoint)
674
- return;
675
- const value = dom.getMousementValue(ctx2, event);
676
- if (!value.hint)
677
- return;
678
- send({
679
- type: "SCRUBBER.POINTER_MOVE",
680
- hint: value.hint,
681
- point: value.point
682
- });
683
- }
684
- function onMouseup() {
685
- send("SCRUBBER.POINTER_UP");
686
- }
687
- return callAll(
688
- addDomEvent(doc, "mousemove", onMousemove, false),
689
- addDomEvent(doc, "mouseup", onMouseup, false)
690
- );
691
- }
692
- },
693
- actions: {
694
- focusInput(ctx2) {
695
- if (!ctx2.focusInputOnChange)
696
- return;
697
- const inputEl = dom.getInputEl(ctx2);
698
- if (dom.isActiveElement(ctx2, inputEl))
699
- return;
700
- raf(() => inputEl?.focus({ preventScroll: true }));
701
- },
702
- increment(ctx2, evt) {
703
- const nextValue = increment(ctx2.valueAsNumber, evt.step ?? ctx2.step);
704
- const value = formatValue(ctx2, clamp(nextValue, ctx2));
705
- set.value(ctx2, value);
706
- },
707
- decrement(ctx2, evt) {
708
- const nextValue = decrement(ctx2.valueAsNumber, evt.step ?? ctx2.step);
709
- const value = formatValue(ctx2, clamp(nextValue, ctx2));
710
- set.value(ctx2, value);
711
- },
712
- setClampedValue(ctx2) {
713
- const nextValue = clamp(ctx2.valueAsNumber, ctx2);
714
- set.value(ctx2, formatValue(ctx2, nextValue));
715
- },
716
- setRawValue(ctx2, evt) {
717
- const parsedValue = parseValue(ctx2, evt.value);
718
- const value = formatValue(ctx2, clamp(parsedValue, ctx2));
719
- set.value(ctx2, value);
720
- },
721
- setValue(ctx2, evt) {
722
- const value = evt.target?.value ?? evt.value;
723
- set.value(ctx2, value);
724
- },
725
- clearValue(ctx2) {
726
- set.value(ctx2, "");
727
- },
728
- incrementToMax(ctx2) {
729
- const value = formatValue(ctx2, ctx2.max);
730
- set.value(ctx2, value);
731
- },
732
- decrementToMin(ctx2) {
733
- const value = formatValue(ctx2, ctx2.min);
734
- set.value(ctx2, value);
735
- },
736
- setHint(ctx2, evt) {
737
- ctx2.hint = evt.hint;
738
- },
739
- clearHint(ctx2) {
740
- ctx2.hint = null;
741
- },
742
- setHintToSet(ctx2) {
743
- ctx2.hint = "set";
744
- },
745
- invokeOnFocus(ctx2) {
746
- ctx2.onFocusChange?.({
747
- focused: true,
748
- value: ctx2.formattedValue,
749
- valueAsNumber: ctx2.valueAsNumber
750
- });
751
- },
752
- invokeOnBlur(ctx2) {
753
- ctx2.onFocusChange?.({
754
- focused: false,
755
- value: ctx2.formattedValue,
756
- valueAsNumber: ctx2.valueAsNumber
757
- });
758
- },
759
- invokeOnInvalid(ctx2) {
760
- if (!ctx2.isOutOfRange)
761
- return;
762
- const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
763
- ctx2.onValueInvalid?.({
764
- reason,
765
- value: ctx2.formattedValue,
766
- valueAsNumber: ctx2.valueAsNumber
767
- });
768
- },
769
- syncInputElement(ctx2, evt) {
770
- const value = evt.type.endsWith("CHANGE") ? ctx2.value : ctx2.formattedValue;
771
- sync.input(ctx2, value);
772
- },
773
- setFormattedValue(ctx2) {
774
- set.value(ctx2, ctx2.formattedValue);
775
- },
776
- setCursorPoint(ctx2, evt) {
777
- ctx2.scrubberCursorPoint = evt.point;
778
- },
779
- clearCursorPoint(ctx2) {
780
- ctx2.scrubberCursorPoint = null;
781
- },
782
- setVirtualCursorPosition(ctx2) {
783
- const cursorEl = dom.getCursorEl(ctx2);
784
- if (!cursorEl || !ctx2.scrubberCursorPoint)
785
- return;
786
- const { x, y } = ctx2.scrubberCursorPoint;
787
- cursorEl.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
788
- },
789
- setFormatterAndParser(ctx2) {
790
- if (!ctx2.locale)
791
- return;
792
- ctx2.formatter = createFormatter(ctx2.locale, ctx2.formatOptions);
793
- ctx2.parser = createParser(ctx2.locale, ctx2.formatOptions);
794
- }
795
- },
796
- compareFns: {
797
- formatOptions: (a, b) => isEqual(a, b),
798
- scrubberCursorPoint: (a, b) => isEqual(a, b)
799
- }
800
- }
801
- );
802
- }
803
- var sync = {
804
- input(ctx, value) {
805
- const inputEl = dom.getInputEl(ctx);
806
- if (!inputEl)
807
- return;
808
- const sel = recordCursor(inputEl);
809
- raf(() => {
810
- dom.setValue(inputEl, value);
811
- restoreCursor(inputEl, sel);
812
- });
813
- }
814
- };
815
- var invoke = {
816
- onChange: (ctx) => {
817
- ctx.onValueChange?.({
818
- value: ctx.value,
819
- valueAsNumber: ctx.valueAsNumber
820
- });
821
- }
822
- };
823
- var set = {
824
- value: (ctx, value) => {
825
- if (isEqual(ctx.value, value))
826
- return;
827
- ctx.value = value;
828
- invoke.onChange(ctx);
829
- }
830
- };
831
- export {
832
- anatomy,
833
- connect,
834
- machine
835
- };
7
+ </svg>`;doc.body.appendChild(el)}});function connect(state,send,normalize){const focused=state.hasTag("focus");const disabled=state.context.isDisabled;const readOnly=state.context.readOnly;const empty=state.context.isValueEmpty;const invalid=state.context.isOutOfRange||!!state.context.invalid;const isIncrementDisabled=disabled||!state.context.canIncrement||readOnly;const isDecrementDisabled=disabled||!state.context.canDecrement||readOnly;const translations=state.context.translations;return{focused,invalid,empty,value:state.context.formattedValue,valueAsNumber:state.context.valueAsNumber,setValue(value){send({type:"VALUE.SET",value})},clearValue(){send("VALUE.CLEAR")},increment(){send("VALUE.INCREMENT")},decrement(){send("VALUE.DECREMENT")},setToMax(){send({type:"VALUE.SET",value:state.context.max})},setToMin(){send({type:"VALUE.SET",value:state.context.min})},focus(){dom.getInputEl(state.context)?.focus()},rootProps:normalize.element({id:dom.getRootId(state.context),...parts.root.attrs,dir:state.context.dir,"data-disabled":dataAttr(disabled),"data-focus":dataAttr(focused),"data-invalid":dataAttr(invalid)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,"data-disabled":dataAttr(disabled),"data-focus":dataAttr(focused),"data-invalid":dataAttr(invalid),id:dom.getLabelId(state.context),htmlFor:dom.getInputId(state.context)}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,role:"group","aria-disabled":disabled,"data-focus":dataAttr(focused),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid),"aria-invalid":ariaAttr(state.context.invalid)}),inputProps:normalize.input({...parts.input.attrs,dir:state.context.dir,name:state.context.name,form:state.context.form,id:dom.getInputId(state.context),role:"spinbutton",defaultValue:state.context.formattedValue,pattern:state.context.pattern,inputMode:state.context.inputMode,"aria-invalid":ariaAttr(invalid),"data-invalid":dataAttr(invalid),disabled,"data-disabled":dataAttr(disabled),readOnly:!!state.context.readOnly,autoComplete:"off",autoCorrect:"off",spellCheck:"false",type:"text","aria-roledescription":"numberfield","aria-valuemin":state.context.min,"aria-valuemax":state.context.max,"aria-valuenow":Number.isNaN(state.context.valueAsNumber)?void 0:state.context.valueAsNumber,"aria-valuetext":state.context.valueText,onFocus(){send("INPUT.FOCUS")},onBlur(){send({type:"INPUT.COMMIT",src:"blur"})},onChange(event){send({type:"INPUT.CHANGE",target:event.currentTarget,hint:"set"})},onBeforeInput(event){try{const{selectionStart,selectionEnd,value}=event.currentTarget;const nextValue=value.slice(0,selectionStart)+(event.data??"")+value.slice(selectionEnd);const isValid=state.context.parser.isValidPartialNumber(nextValue);if(!isValid){event.preventDefault()}}catch{}},onKeyDown(event){if(event.defaultPrevented)return;if(readOnly)return;const evt=getNativeEvent(event);if(evt.isComposing)return;const step=getEventStep(event)*state.context.step;const keyMap={ArrowUp(){send({type:"INPUT.ARROW_UP",step});event.preventDefault()},ArrowDown(){send({type:"INPUT.ARROW_DOWN",step});event.preventDefault()},Home(){send("INPUT.HOME");event.preventDefault()},End(){send("INPUT.END");event.preventDefault()},Enter(){send({type:"INPUT.COMMIT",src:"enter"})}};const exec=keyMap[event.key];exec?.(event)}}),decrementTriggerProps:normalize.button({...parts.decrementTrigger.attrs,dir:state.context.dir,id:dom.getDecrementTriggerId(state.context),disabled:isDecrementDisabled,"data-disabled":dataAttr(isDecrementDisabled),"aria-label":translations.decrementLabel,type:"button",tabIndex:-1,"aria-controls":dom.getInputId(state.context),onPointerDown(event){if(isDecrementDisabled||!isLeftClick(event))return;send({type:"TRIGGER.PRESS_DOWN",hint:"decrement",pointerType:event.pointerType});if(event.pointerType==="mouse"){event.preventDefault()}if(event.pointerType==="touch"){event.currentTarget?.focus({preventScroll:true})}},onPointerUp(event){send({type:"TRIGGER.PRESS_UP",hint:"decrement",pointerType:event.pointerType})},onPointerLeave(){if(isDecrementDisabled)return;send({type:"TRIGGER.PRESS_UP",hint:"decrement"})}}),incrementTriggerProps:normalize.button({...parts.incrementTrigger.attrs,dir:state.context.dir,id:dom.getIncrementTriggerId(state.context),disabled:isIncrementDisabled,"data-disabled":dataAttr(isIncrementDisabled),"aria-label":translations.incrementLabel,type:"button",tabIndex:-1,"aria-controls":dom.getInputId(state.context),onPointerDown(event){if(isIncrementDisabled||!isLeftClick(event))return;send({type:"TRIGGER.PRESS_DOWN",hint:"increment",pointerType:event.pointerType});if(event.pointerType==="mouse"){event.preventDefault()}if(event.pointerType==="touch"){event.currentTarget?.focus({preventScroll:true})}},onPointerUp(event){send({type:"TRIGGER.PRESS_UP",hint:"increment",pointerType:event.pointerType})},onPointerLeave(event){send({type:"TRIGGER.PRESS_UP",hint:"increment",pointerType:event.pointerType})}}),scrubberProps:normalize.element({...parts.scrubber.attrs,dir:state.context.dir,"data-disabled":dataAttr(disabled),id:dom.getScrubberId(state.context),role:"presentation",onMouseDown(event){if(disabled)return;const evt=getNativeEvent(event);const point=getEventPoint(evt);point.x=point.x-roundToDevicePixel2(7.5);point.y=point.y-roundToDevicePixel2(7.5);send({type:"SCRUBBER.PRESS_DOWN",point});event.preventDefault()},style:{cursor:disabled?void 0:"ew-resize"}})}}import{choose,createMachine,guards}from"@zag-js/core";import{addDomEvent,requestPointerLock}from"@zag-js/dom-event";import{isSafari as isSafari2,observeAttributes,raf}from"@zag-js/dom-query";import{trackFormControl}from"@zag-js/form-utils";import{clamp,decrement,increment,isAtMax,isAtMin,isWithinRange}from"@zag-js/number-utils";import{callAll,compact,isEqual}from"@zag-js/utils";function recordCursor(inputEl){if(inputEl.ownerDocument.activeElement!==inputEl)return;try{const{selectionStart:start,selectionEnd:end,value}=inputEl;const beforeTxt=value.substring(0,start);const afterTxt=value.substring(end);return{start,end,value,beforeTxt,afterTxt}}catch{}}function restoreCursor(inputEl,selection){if(inputEl.ownerDocument.activeElement!==inputEl)return;if(!selection){inputEl.setSelectionRange(inputEl.value.length,inputEl.value.length);return}try{const{value}=inputEl;const{beforeTxt="",afterTxt="",start}=selection;let startPos=value.length;if(value.endsWith(afterTxt)){startPos=value.length-afterTxt.length}else if(value.startsWith(beforeTxt)){startPos=beforeTxt.length}else if(start!=null){const beforeLastChar=beforeTxt[start-1];const newIndex=value.indexOf(beforeLastChar,start-1);if(newIndex!==-1){startPos=newIndex+1}}inputEl.setSelectionRange(startPos,startPos)}catch{}}import{NumberParser}from"@internationalized/number";import{ref}from"@zag-js/core";var createFormatter=(locale,options={})=>{return ref(new Intl.NumberFormat(locale,options))};var createParser=(locale,options={})=>{return ref(new NumberParser(locale,options))};var parseValue=(ctx,value)=>{if(!ctx.formatOptions)return parseFloat(value);return ctx.parser.parse(String(value))};var formatValue=(ctx,value)=>{if(Number.isNaN(value))return"";if(!ctx.formatOptions)return value.toString();return ctx.formatter.format(value)};var{not,and}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({id:"number-input",initial:"idle",context:{dir:"ltr",locale:"en-US",focusInputOnChange:true,clampValueOnBlur:true,allowOverflow:false,inputMode:"decimal",pattern:"[0-9]*(.[0-9]+)?",value:"",step:1,min:Number.MIN_SAFE_INTEGER,max:Number.MAX_SAFE_INTEGER,invalid:false,spinOnPress:true,...ctx,hint:null,scrubberCursorPoint:null,fieldsetDisabled:false,formatter:createFormatter(ctx.locale||"en-US",ctx.formatOptions),parser:createParser(ctx.locale||"en-US",ctx.formatOptions),translations:{incrementLabel:"increment value",decrementLabel:"decrease value",...ctx.translations}},computed:{isRtl:ctx2=>ctx2.dir==="rtl",valueAsNumber:ctx2=>parseValue(ctx2,ctx2.value),formattedValue:ctx2=>formatValue(ctx2,ctx2.valueAsNumber),isAtMin:ctx2=>isAtMin(ctx2.valueAsNumber,ctx2),isAtMax:ctx2=>isAtMax(ctx2.valueAsNumber,ctx2),isOutOfRange:ctx2=>!isWithinRange(ctx2.valueAsNumber,ctx2),isValueEmpty:ctx2=>ctx2.value==="",isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled,canIncrement:ctx2=>ctx2.allowOverflow||!ctx2.isAtMax,canDecrement:ctx2=>ctx2.allowOverflow||!ctx2.isAtMin,valueText:ctx2=>ctx2.translations.valueText?.(ctx2.value)},watch:{formatOptions:["setFormatterAndParser","syncInputElement"],locale:["setFormatterAndParser","syncInputElement"],value:["syncInputElement"],isOutOfRange:["invokeOnInvalid"],scrubberCursorPoint:["setVirtualCursorPosition"]},activities:["trackFormControl"],on:{"VALUE.SET":{actions:["setRawValue","setHintToSet"]},"VALUE.CLEAR":{actions:["clearValue"]},"VALUE.INCREMENT":{actions:["increment"]},"VALUE.DECREMENT":{actions:["decrement"]}},states:{idle:{on:{"TRIGGER.PRESS_DOWN":[{guard:"isTouchPointer",target:"before:spin",actions:["setHint"]},{target:"before:spin",actions:["focusInput","invokeOnFocus","setHint"]}],"SCRUBBER.PRESS_DOWN":{target:"scrubbing",actions:["focusInput","invokeOnFocus","setHint","setCursorPoint"]},"INPUT.FOCUS":{target:"focused",actions:["focusInput","invokeOnFocus"]}}},focused:{tags:"focus",activities:"attachWheelListener",on:{"TRIGGER.PRESS_DOWN":[{guard:"isTouchPointer",target:"before:spin",actions:["setHint"]},{target:"before:spin",actions:["focusInput","setHint"]}],"SCRUBBER.PRESS_DOWN":{target:"scrubbing",actions:["focusInput","setHint","setCursorPoint"]},"INPUT.ARROW_UP":{actions:"increment"},"INPUT.ARROW_DOWN":{actions:"decrement"},"INPUT.HOME":{actions:"decrementToMin"},"INPUT.END":{actions:"incrementToMax"},"INPUT.CHANGE":{actions:["setValue","setHint"]},"INPUT.COMMIT":[{guard:and("clampValueOnBlur",not("isInRange")),target:"idle",actions:["setClampedValue","clearHint","invokeOnBlur"]},{target:"idle",actions:["setFormattedValue","clearHint","invokeOnBlur"]}]}},"before:spin":{tags:"focus",activities:"trackButtonDisabled",entry:choose([{guard:"isIncrementHint",actions:"increment"},{guard:"isDecrementHint",actions:"decrement"}]),after:{CHANGE_DELAY:{target:"spinning",guard:and("isInRange","spinOnPress")}},on:{"TRIGGER.PRESS_UP":[{guard:"isTouchPointer",target:"focused",actions:"clearHint"},{target:"focused",actions:["focusInput","clearHint"]}]}},spinning:{tags:"focus",activities:"trackButtonDisabled",every:[{delay:"CHANGE_INTERVAL",guard:and(not("isAtMin"),"isIncrementHint"),actions:"increment"},{delay:"CHANGE_INTERVAL",guard:and(not("isAtMax"),"isDecrementHint"),actions:"decrement"}],on:{"TRIGGER.PRESS_UP":{target:"focused",actions:["focusInput","clearHint"]}}},scrubbing:{tags:"focus",activities:["activatePointerLock","trackMousemove","setupVirtualCursor","preventTextSelection"],on:{"SCRUBBER.POINTER_UP":{target:"focused",actions:["focusInput","clearCursorPoint"]},"SCRUBBER.POINTER_MOVE":[{guard:"isIncrementHint",actions:["increment","setCursorPoint"]},{guard:"isDecrementHint",actions:["decrement","setCursorPoint"]}]}}}},{delays:{CHANGE_INTERVAL:50,CHANGE_DELAY:300},guards:{clampValueOnBlur:ctx2=>ctx2.clampValueOnBlur,isAtMin:ctx2=>ctx2.isAtMin,spinOnPress:ctx2=>!!ctx2.spinOnPress,isAtMax:ctx2=>ctx2.isAtMax,isInRange:ctx2=>!ctx2.isOutOfRange,isDecrementHint:(ctx2,evt)=>(evt.hint??ctx2.hint)==="decrement",isIncrementHint:(ctx2,evt)=>(evt.hint??ctx2.hint)==="increment",isTouchPointer:(_ctx,evt)=>evt.pointerType==="touch"},activities:{trackFormControl(ctx2,_evt,{initialContext}){const inputEl=dom.getInputEl(ctx2);return trackFormControl(inputEl,{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){set.value(ctx2,initialContext.value)}})},setupVirtualCursor(ctx2){return dom.setupVirtualCursor(ctx2)},preventTextSelection(ctx2){return dom.preventTextSelection(ctx2)},trackButtonDisabled(ctx2,_evt,{send}){const btn=dom.getPressedTriggerEl(ctx2,ctx2.hint);return observeAttributes(btn,{attributes:["disabled"],callback(){send({type:"TRIGGER.PRESS_UP",src:"attr"})}})},attachWheelListener(ctx2,_evt,{send}){const inputEl=dom.getInputEl(ctx2);if(!inputEl||!dom.isActiveElement(ctx2,inputEl)||!ctx2.allowMouseWheel)return;function onWheel(event){event.preventDefault();const dir=Math.sign(event.deltaY)*-1;if(dir===1){send("VALUE.INCREMENT")}else if(dir===-1){send("VALUE.DECREMENT")}}return addDomEvent(inputEl,"wheel",onWheel,{passive:false})},activatePointerLock(ctx2){if(isSafari2())return;return requestPointerLock(dom.getDoc(ctx2))},trackMousemove(ctx2,_evt,{send}){const doc=dom.getDoc(ctx2);function onMousemove(event){if(!ctx2.scrubberCursorPoint)return;const value=dom.getMousementValue(ctx2,event);if(!value.hint)return;send({type:"SCRUBBER.POINTER_MOVE",hint:value.hint,point:value.point})}function onMouseup(){send("SCRUBBER.POINTER_UP")}return callAll(addDomEvent(doc,"mousemove",onMousemove,false),addDomEvent(doc,"mouseup",onMouseup,false))}},actions:{focusInput(ctx2){if(!ctx2.focusInputOnChange)return;const inputEl=dom.getInputEl(ctx2);if(dom.isActiveElement(ctx2,inputEl))return;raf(()=>inputEl?.focus({preventScroll:true}))},increment(ctx2,evt){const nextValue=increment(ctx2.valueAsNumber,evt.step??ctx2.step);const value=formatValue(ctx2,clamp(nextValue,ctx2));set.value(ctx2,value)},decrement(ctx2,evt){const nextValue=decrement(ctx2.valueAsNumber,evt.step??ctx2.step);const value=formatValue(ctx2,clamp(nextValue,ctx2));set.value(ctx2,value)},setClampedValue(ctx2){const nextValue=clamp(ctx2.valueAsNumber,ctx2);set.value(ctx2,formatValue(ctx2,nextValue))},setRawValue(ctx2,evt){const parsedValue=parseValue(ctx2,evt.value);const value=formatValue(ctx2,clamp(parsedValue,ctx2));set.value(ctx2,value)},setValue(ctx2,evt){const value=evt.target?.value??evt.value;set.value(ctx2,value)},clearValue(ctx2){set.value(ctx2,"")},incrementToMax(ctx2){const value=formatValue(ctx2,ctx2.max);set.value(ctx2,value)},decrementToMin(ctx2){const value=formatValue(ctx2,ctx2.min);set.value(ctx2,value)},setHint(ctx2,evt){ctx2.hint=evt.hint},clearHint(ctx2){ctx2.hint=null},setHintToSet(ctx2){ctx2.hint="set"},invokeOnFocus(ctx2){ctx2.onFocusChange?.({focused:true,value:ctx2.formattedValue,valueAsNumber:ctx2.valueAsNumber})},invokeOnBlur(ctx2){ctx2.onFocusChange?.({focused:false,value:ctx2.formattedValue,valueAsNumber:ctx2.valueAsNumber})},invokeOnInvalid(ctx2){if(!ctx2.isOutOfRange)return;const reason=ctx2.valueAsNumber>ctx2.max?"rangeOverflow":"rangeUnderflow";ctx2.onValueInvalid?.({reason,value:ctx2.formattedValue,valueAsNumber:ctx2.valueAsNumber})},syncInputElement(ctx2,evt){const value=evt.type.endsWith("CHANGE")?ctx2.value:ctx2.formattedValue;sync.input(ctx2,value)},setFormattedValue(ctx2){set.value(ctx2,ctx2.formattedValue)},setCursorPoint(ctx2,evt){ctx2.scrubberCursorPoint=evt.point},clearCursorPoint(ctx2){ctx2.scrubberCursorPoint=null},setVirtualCursorPosition(ctx2){const cursorEl=dom.getCursorEl(ctx2);if(!cursorEl||!ctx2.scrubberCursorPoint)return;const{x,y}=ctx2.scrubberCursorPoint;cursorEl.style.transform=`translate3d(${x}px, ${y}px, 0px)`},setFormatterAndParser(ctx2){if(!ctx2.locale)return;ctx2.formatter=createFormatter(ctx2.locale,ctx2.formatOptions);ctx2.parser=createParser(ctx2.locale,ctx2.formatOptions)}},compareFns:{formatOptions:(a,b)=>isEqual(a,b),scrubberCursorPoint:(a,b)=>isEqual(a,b)}})}var sync={input(ctx,value){const inputEl=dom.getInputEl(ctx);if(!inputEl)return;const sel=recordCursor(inputEl);raf(()=>{dom.setValue(inputEl,value);restoreCursor(inputEl,sel)})}};var invoke={onChange:ctx=>{ctx.onValueChange?.({value:ctx.value,valueAsNumber:ctx.valueAsNumber})}};var set={value:(ctx,value)=>{if(isEqual(ctx.value,value))return;ctx.value=value;invoke.onChange(ctx)}};export{anatomy,connect,machine};
836
8
  //# sourceMappingURL=index.mjs.map