@zag-js/number-input 0.2.5 → 0.2.7

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,1052 +1,15 @@
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
- // ../../utilities/dom/dist/index.mjs
15
- var dataAttr = (guard) => {
16
- return guard ? "" : void 0;
17
- };
18
- var ariaAttr = (guard) => {
19
- return guard ? "true" : void 0;
20
- };
21
- var MAX_Z_INDEX = 2147483647;
22
- var runIfFn = (v, ...a) => {
23
- const res = typeof v === "function" ? v(...a) : v;
24
- return res != null ? res : void 0;
25
- };
26
- var callAll = (...fns) => (...a) => {
27
- fns.forEach(function(fn) {
28
- fn == null ? void 0 : fn(...a);
29
- });
30
- };
31
- var isArray = (v) => Array.isArray(v);
32
- var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
33
- var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
34
- var isDom = () => typeof window !== "undefined";
35
- function getPlatform() {
36
- var _a;
37
- const agent = navigator.userAgentData;
38
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
39
- }
40
- var pt = (v) => isDom() && v.test(getPlatform());
41
- var vn = (v) => isDom() && v.test(navigator.vendor);
42
- var isSafari = () => isApple() && vn(/apple/i);
43
- var isApple = () => pt(/mac|iphone|ipad|ipod/i);
44
- function isDocument(el) {
45
- return el.nodeType === Node.DOCUMENT_NODE;
46
- }
47
- function isWindow(value) {
48
- return (value == null ? void 0 : value.toString()) === "[object Window]";
49
- }
50
- function getDocument(el) {
51
- var _a;
52
- if (isWindow(el))
53
- return el.document;
54
- if (isDocument(el))
55
- return el;
56
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
57
- }
58
- function defineDomHelpers(helpers) {
59
- const dom2 = {
60
- getRootNode: (ctx) => {
61
- var _a, _b;
62
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
63
- },
64
- getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
65
- getWin: (ctx) => {
66
- var _a;
67
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
68
- },
69
- getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
70
- getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
71
- createEmitter: (ctx, target) => {
72
- const win = dom2.getWin(ctx);
73
- return function emit(evt, detail, options) {
74
- const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
75
- const eventName = `zag:${evt}`;
76
- const init = { bubbles, cancelable, composed, detail };
77
- const event = new win.CustomEvent(eventName, init);
78
- target.dispatchEvent(event);
79
- };
80
- },
81
- createListener: (target) => {
82
- return function listen(evt, handler) {
83
- const eventName = `zag:${evt}`;
84
- const listener = (e) => handler(e);
85
- target.addEventListener(eventName, listener);
86
- return () => target.removeEventListener(eventName, listener);
87
- };
88
- }
89
- };
90
- return {
91
- ...dom2,
92
- ...helpers
93
- };
94
- }
95
- function getNativeEvent(e) {
96
- var _a;
97
- return (_a = e.nativeEvent) != null ? _a : e;
98
- }
99
- var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
100
- var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
101
- var isLeftClick = (v) => v.button === 0;
102
- var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
103
- var fallback = {
104
- pageX: 0,
105
- pageY: 0,
106
- clientX: 0,
107
- clientY: 0
108
- };
109
- function getEventPoint(event, type = "page") {
110
- var _a, _b;
111
- const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
112
- return { x: point[`${type}X`], y: point[`${type}Y`] };
113
- }
114
- var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
115
- var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
116
- function getEventStep(event) {
117
- if (event.ctrlKey || event.metaKey) {
118
- return 0.1;
119
- } else {
120
- const isPageKey = PAGE_KEYS.has(event.key);
121
- const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
122
- return isSkipKey ? 10 : 1;
123
- }
124
- }
125
- var isRef = (v) => hasProp(v, "current");
126
- function addDomEvent(target, eventName, handler, options) {
127
- const node = isRef(target) ? target.current : runIfFn(target);
128
- node == null ? void 0 : node.addEventListener(eventName, handler, options);
129
- return () => {
130
- node == null ? void 0 : node.removeEventListener(eventName, handler, options);
131
- };
132
- }
133
- function observeAttributes(node, attributes, fn) {
134
- if (!node)
135
- return;
136
- const attrs = Array.isArray(attributes) ? attributes : [attributes];
137
- const win = node.ownerDocument.defaultView || window;
138
- const obs = new win.MutationObserver((changes) => {
139
- for (const change of changes) {
140
- if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
141
- fn(change);
142
- }
143
- }
144
- });
145
- obs.observe(node, { attributes: true, attributeFilter: attrs });
146
- return () => obs.disconnect();
147
- }
148
- function raf(fn) {
149
- const id = globalThis.requestAnimationFrame(fn);
150
- return function cleanup() {
151
- globalThis.cancelAnimationFrame(id);
152
- };
153
- }
154
- function addPointerlockChangeListener(doc, fn) {
155
- return addDomEvent(doc, "pointerlockchange", fn, false);
156
- }
157
- function addPointerlockErrorListener(doc, fn) {
158
- doc.addEventListener("pointerlockerror", fn, false);
159
- return function cleanup() {
160
- doc.removeEventListener("pointerlockerror", fn, false);
161
- };
162
- }
163
- function requestPointerLock(doc, handlers = {}) {
164
- const { onPointerLock, onPointerUnlock } = handlers;
165
- const body = doc.body;
166
- const supported = "pointerLockElement" in doc || "mozPointerLockElement" in doc;
167
- const locked = !!doc.pointerLockElement;
168
- function onPointerChange() {
169
- if (locked)
170
- onPointerLock == null ? void 0 : onPointerLock();
171
- else
172
- onPointerUnlock == null ? void 0 : onPointerUnlock();
173
- }
174
- function onPointerError(event) {
175
- if (locked)
176
- onPointerUnlock == null ? void 0 : onPointerUnlock();
177
- console.error("PointerLock error occured:", event);
178
- exit();
179
- }
180
- function exit() {
181
- doc.exitPointerLock();
182
- }
183
- if (!supported)
184
- return;
185
- body.requestPointerLock();
186
- const cleanup = callAll(
187
- addPointerlockChangeListener(doc, onPointerChange),
188
- addPointerlockErrorListener(doc, onPointerError)
189
- );
190
- return function dispose() {
191
- if (!supported)
192
- return;
193
- cleanup();
194
- exit();
195
- };
196
- }
197
-
198
- // ../../utilities/number/dist/index.mjs
199
- function wrap(num, max) {
200
- return (num % max + max) % max;
201
- }
202
- function roundToDevicePixel(num) {
203
- if (typeof window === "undefined")
204
- return Math.round(num);
205
- const dp = window.devicePixelRatio;
206
- return Math.floor(num * dp + 0.5) / dp;
207
- }
208
- function clamp(v, o) {
209
- return Math.min(Math.max(valueOf(v), o.min), o.max);
210
- }
211
- function countDecimals(value) {
212
- if (!Number.isFinite(value))
213
- return 0;
214
- let e = 1, p = 0;
215
- while (Math.round(value * e) / e !== value) {
216
- e *= 10;
217
- p += 1;
218
- }
219
- return p;
220
- }
221
- var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
222
- var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
223
- function valueOf(v) {
224
- if (typeof v === "number")
225
- return v;
226
- const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
227
- return !Number.isNaN(num) ? num : 0;
228
- }
229
- function formatDecimal(v, o) {
230
- return new Intl.NumberFormat("en-US", {
231
- useGrouping: false,
232
- style: "decimal",
233
- minimumFractionDigits: o.minFractionDigits,
234
- maximumFractionDigits: o.maxFractionDigits
235
- }).format(valueOf(v));
236
- }
237
- function isAtMax(v, o) {
238
- const val = valueOf(v);
239
- return val >= o.max;
240
- }
241
- function isAtMin(v, o) {
242
- const val = valueOf(v);
243
- return val <= o.min;
244
- }
245
- function isWithinRange(v, o) {
246
- const val = valueOf(v);
247
- return val >= o.min && val <= o.max;
248
- }
249
- function decimalOperation(a, op, b) {
250
- let result = op === "+" ? a + b : a - b;
251
- if (a % 1 !== 0 || b % 1 !== 0) {
252
- const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
253
- a = Math.round(a * multiplier);
254
- b = Math.round(b * multiplier);
255
- result = op === "+" ? a + b : a - b;
256
- result /= multiplier;
257
- }
258
- return result;
259
- }
260
- var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
261
-
262
- // src/number-input.dom.ts
263
- var dom = defineDomHelpers({
264
- getRootId: (ctx) => {
265
- var _a, _b;
266
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
267
- },
268
- getInputId: (ctx) => {
269
- var _a, _b;
270
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
271
- },
272
- getIncrementTriggerId: (ctx) => {
273
- var _a, _b;
274
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
275
- },
276
- getDecrementTriggerId: (ctx) => {
277
- var _a, _b;
278
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
279
- },
280
- getScrubberId: (ctx) => {
281
- var _a, _b;
282
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
283
- },
284
- getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
285
- getLabelId: (ctx) => {
286
- var _a, _b;
287
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
288
- },
289
- getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
290
- getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
291
- getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
292
- getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
293
- getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
294
- getPressedTriggerEl: (ctx, hint = ctx.hint) => {
295
- let btnEl = null;
296
- if (hint === "increment") {
297
- btnEl = dom.getIncrementTriggerEl(ctx);
298
- }
299
- if (hint === "decrement") {
300
- btnEl = dom.getDecrementTriggerEl(ctx);
301
- }
302
- return btnEl;
303
- },
304
- setupVirtualCursor(ctx) {
305
- if (isSafari() || !supportsPointerEvent())
306
- return;
307
- dom.createVirtualCursor(ctx);
308
- return () => {
309
- var _a;
310
- (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
311
- };
312
- },
313
- preventTextSelection(ctx) {
314
- const doc = dom.getDoc(ctx);
315
- const html = doc.documentElement;
316
- const body = doc.body;
317
- body.style.pointerEvents = "none";
318
- html.style.userSelect = "none";
319
- html.style.cursor = "ew-resize";
320
- return () => {
321
- body.style.pointerEvents = "";
322
- html.style.userSelect = "";
323
- html.style.cursor = "";
324
- if (!html.style.length) {
325
- html.removeAttribute("style");
326
- }
327
- if (!body.style.length) {
328
- body.removeAttribute("style");
329
- }
330
- };
331
- },
332
- getMousementValue(ctx, event) {
333
- const x = roundToDevicePixel(event.movementX);
334
- const y = roundToDevicePixel(event.movementY);
335
- let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
336
- if (ctx.isRtl && hint === "increment")
337
- hint = "decrement";
338
- if (ctx.isRtl && hint === "decrement")
339
- hint = "increment";
340
- const point = {
341
- x: ctx.scrubberCursorPoint.x + x,
342
- y: ctx.scrubberCursorPoint.y + y
343
- };
344
- const win = dom.getWin(ctx);
345
- const width = win.innerWidth;
346
- const half = roundToDevicePixel(7.5);
347
- point.x = wrap(point.x + half, width) - half;
348
- return { hint, point };
349
- },
350
- createVirtualCursor(ctx) {
351
- const doc = dom.getDoc(ctx);
352
- const el = doc.createElement("div");
353
- el.className = "scrubber--cursor";
354
- el.id = dom.getCursorId(ctx);
355
- Object.assign(el.style, {
356
- width: "15px",
357
- height: "15px",
358
- position: "fixed",
359
- pointerEvents: "none",
360
- left: "0px",
361
- top: "0px",
362
- zIndex: MAX_Z_INDEX,
363
- transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
364
- willChange: "transform"
365
- });
366
- el.innerHTML = `
367
- <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);">
368
- <g transform="translate(2 3)">
369
- <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>
370
- <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>
371
- </g>
372
- </svg>`;
373
- doc.body.appendChild(el);
374
- }
375
- });
376
-
377
- // src/number-input.utils.ts
378
- var utils = {
379
- isValidNumericEvent: (ctx, event) => {
380
- var _a, _b;
381
- if (event.key == null)
382
- return true;
383
- const isModifier = isModifiedEvent(event);
384
- const isSingleKey = event.key.length === 1;
385
- if (isModifier || !isSingleKey)
386
- return true;
387
- return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
388
- },
389
- isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
390
- sanitize: (ctx, value) => {
391
- var _a;
392
- return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
393
- },
394
- increment: (ctx, step) => {
395
- const value = increment(ctx.value, step != null ? step : ctx.step);
396
- return formatDecimal(clamp(value, ctx), ctx);
397
- },
398
- decrement: (ctx, step) => {
399
- const value = decrement(ctx.value, step != null ? step : ctx.step);
400
- return formatDecimal(clamp(value, ctx), ctx);
401
- },
402
- clamp: (ctx) => {
403
- return formatDecimal(clamp(ctx.value, ctx), ctx);
404
- },
405
- parse: (ctx, value) => {
406
- var _a, _b;
407
- return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
408
- },
409
- format: (ctx, value) => {
410
- var _a, _b;
411
- const _val = value.toString();
412
- return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
413
- },
414
- round: (ctx) => {
415
- return formatDecimal(ctx.value, ctx);
416
- }
417
- };
418
-
419
- // src/number-input.connect.ts
420
- function connect(state, send, normalize) {
421
- const isFocused = state.hasTag("focus");
422
- const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
423
- const isDisabled = !!state.context.disabled;
424
- const isValueEmpty = state.context.isValueEmpty;
425
- const isIncrementDisabled = isDisabled || !state.context.canIncrement;
426
- const isDecrementDisabled = isDisabled || !state.context.canDecrement;
427
- const translations = state.context.translations;
428
- return {
429
- isFocused,
430
- isInvalid,
431
- isValueEmpty,
432
- value: state.context.formattedValue,
433
- valueAsNumber: state.context.valueAsNumber,
434
- setValue(value) {
435
- send({ type: "SET_VALUE", value: value.toString() });
436
- },
437
- clearValue() {
438
- send("CLEAR_VALUE");
439
- },
440
- increment() {
441
- send("INCREMENT");
442
- },
443
- decrement() {
444
- send("DECREMENT");
445
- },
446
- setToMax() {
447
- send({ type: "SET_VALUE", value: state.context.max });
448
- },
449
- setToMin() {
450
- send({ type: "SET_VALUE", value: state.context.min });
451
- },
452
- focus() {
453
- var _a;
454
- (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
455
- },
456
- blur() {
457
- var _a;
458
- (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
459
- },
460
- rootProps: normalize.element({
461
- id: dom.getRootId(state.context),
462
- ...parts.root.attrs,
463
- "data-disabled": dataAttr(isDisabled)
464
- }),
465
- labelProps: normalize.label({
466
- ...parts.label.attrs,
467
- "data-disabled": dataAttr(isDisabled),
468
- "data-invalid": dataAttr(isInvalid),
469
- id: dom.getLabelId(state.context),
470
- htmlFor: dom.getInputId(state.context)
471
- }),
472
- controlProps: normalize.element({
473
- ...parts.control.attrs,
474
- role: "group",
475
- "aria-disabled": isDisabled,
476
- "data-disabled": dataAttr(isDisabled),
477
- "data-invalid": dataAttr(isInvalid),
478
- "aria-invalid": ariaAttr(state.context.invalid)
479
- }),
480
- inputProps: normalize.input({
481
- ...parts.input.attrs,
482
- name: state.context.name,
483
- form: state.context.form,
484
- id: dom.getInputId(state.context),
485
- role: "spinbutton",
486
- defaultValue: state.context.formattedValue,
487
- pattern: state.context.pattern,
488
- inputMode: state.context.inputMode,
489
- "aria-invalid": isInvalid || void 0,
490
- "data-invalid": dataAttr(isInvalid),
491
- disabled: isDisabled,
492
- "data-disabled": dataAttr(isDisabled),
493
- readOnly: !!state.context.readOnly,
494
- autoComplete: "off",
495
- autoCorrect: "off",
496
- spellCheck: "false",
497
- type: "text",
498
- "aria-roledescription": "numberfield",
499
- "aria-valuemin": state.context.min,
500
- "aria-valuemax": state.context.max,
501
- "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
502
- "aria-valuetext": state.context.valueText,
503
- onFocus() {
504
- send("FOCUS");
505
- },
506
- onBlur() {
507
- send("BLUR");
508
- },
509
- onChange(event) {
510
- const evt = getNativeEvent(event);
511
- if (evt.isComposing)
512
- return;
513
- send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
514
- },
515
- onKeyDown(event) {
516
- const evt = getNativeEvent(event);
517
- if (evt.isComposing)
518
- return;
519
- if (!utils.isValidNumericEvent(state.context, event)) {
520
- event.preventDefault();
521
- }
522
- const step = getEventStep(event) * state.context.step;
523
- const keyMap = {
524
- ArrowUp() {
525
- send({ type: "ARROW_UP", step });
526
- },
527
- ArrowDown() {
528
- send({ type: "ARROW_DOWN", step });
529
- },
530
- Home() {
531
- send("HOME");
532
- },
533
- End() {
534
- send("END");
535
- }
536
- };
537
- const exec = keyMap[event.key];
538
- if (exec) {
539
- exec(event);
540
- event.preventDefault();
541
- }
542
- }
543
- }),
544
- decrementTriggerProps: normalize.button({
545
- ...parts.decrementTrigger.attrs,
546
- id: dom.getDecrementTriggerId(state.context),
547
- disabled: isDecrementDisabled,
548
- "data-disabled": dataAttr(isDecrementDisabled),
549
- "aria-label": translations.decrementLabel,
550
- type: "button",
551
- tabIndex: -1,
552
- "aria-controls": dom.getInputId(state.context),
553
- onPointerDown(event) {
554
- if (isDecrementDisabled)
555
- return;
556
- send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
557
- event.preventDefault();
558
- },
559
- onPointerUp() {
560
- send({ type: "PRESS_UP", hint: "decrement" });
561
- },
562
- onPointerLeave() {
563
- if (isDecrementDisabled)
564
- return;
565
- send({ type: "PRESS_UP", hint: "decrement" });
566
- }
567
- }),
568
- incrementTriggerProps: normalize.button({
569
- ...parts.incrementTrigger.attrs,
570
- id: dom.getIncrementTriggerId(state.context),
571
- disabled: isIncrementDisabled,
572
- "data-disabled": dataAttr(isIncrementDisabled),
573
- "aria-label": translations.incrementLabel,
574
- type: "button",
575
- tabIndex: -1,
576
- "aria-controls": dom.getInputId(state.context),
577
- onPointerDown(event) {
578
- if (isIncrementDisabled)
579
- return;
580
- send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
581
- event.preventDefault();
582
- },
583
- onPointerUp() {
584
- send({ type: "PRESS_UP", hint: "increment" });
585
- },
586
- onPointerLeave() {
587
- send({ type: "PRESS_UP", hint: "increment" });
588
- }
589
- }),
590
- scrubberProps: normalize.element({
591
- ...parts.scrubber.attrs,
592
- "data-disabled": dataAttr(isDisabled),
593
- id: dom.getScrubberId(state.context),
594
- role: "presentation",
595
- onMouseDown(event) {
596
- if (isDisabled)
597
- return;
598
- const evt = getNativeEvent(event);
599
- event.preventDefault();
600
- const point = getEventPoint(evt);
601
- point.x = point.x - roundToDevicePixel(7.5);
602
- point.y = point.y - roundToDevicePixel(7.5);
603
- send({ type: "PRESS_DOWN_SCRUBBER", point });
604
- },
605
- style: {
606
- cursor: isDisabled ? void 0 : "ew-resize"
607
- }
608
- })
609
- };
610
- }
611
-
612
- // src/number-input.machine.ts
613
- import { choose, createMachine, guards } from "@zag-js/core";
614
-
615
- // ../../utilities/core/dist/index.mjs
616
- var callAll2 = (...fns) => (...a) => {
617
- fns.forEach(function(fn) {
618
- fn == null ? void 0 : fn(...a);
619
- });
620
- };
621
- var isArray2 = (v) => Array.isArray(v);
622
- var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
623
- function compact(obj) {
624
- if (obj === void 0)
625
- return obj;
626
- return Object.fromEntries(
627
- Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject2(value) ? compact(value) : value])
628
- );
629
- }
630
-
631
- // ../../utilities/form-utils/dist/index.mjs
632
- function getWindow(el) {
633
- var _a;
634
- return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
635
- }
636
- function getDescriptor(el, options) {
637
- var _a;
638
- const { type, property = "value" } = options;
639
- const proto = getWindow(el)[type].prototype;
640
- return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
641
- }
642
- function dispatchInputValueEvent(el, value) {
643
- var _a;
644
- if (!el)
645
- return;
646
- const win = getWindow(el);
647
- if (!(el instanceof win.HTMLInputElement))
648
- return;
649
- const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
650
- (_a = desc.set) == null ? void 0 : _a.call(el, value);
651
- const event = new win.Event("input", { bubbles: true });
652
- el.dispatchEvent(event);
653
- }
654
-
655
- // src/number-input.machine.ts
656
- var { not, and } = guards;
657
- function machine(userContext) {
658
- const ctx = compact(userContext);
659
- return createMachine(
660
- {
661
- id: "number-input",
662
- initial: "unknown",
663
- context: {
664
- dir: "ltr",
665
- focusInputOnChange: true,
666
- clampValueOnBlur: true,
667
- allowOverflow: false,
668
- inputMode: "decimal",
669
- pattern: "[0-9]*(.[0-9]+)?",
670
- hint: null,
671
- value: "",
672
- step: 1,
673
- min: Number.MIN_SAFE_INTEGER,
674
- max: Number.MAX_SAFE_INTEGER,
675
- scrubberCursorPoint: null,
676
- invalid: false,
677
- spinOnPress: true,
678
- ...ctx,
679
- translations: {
680
- incrementLabel: "increment value",
681
- decrementLabel: "decrease value",
682
- ...ctx.translations
683
- }
684
- },
685
- computed: {
686
- isRtl: (ctx2) => ctx2.dir === "rtl",
687
- valueAsNumber: (ctx2) => valueOf(ctx2.value),
688
- isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
689
- isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
690
- isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
691
- isValueEmpty: (ctx2) => ctx2.value === "",
692
- canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
693
- canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
694
- valueText: (ctx2) => {
695
- var _a, _b;
696
- return (_b = (_a = ctx2.translations).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
697
- },
698
- formattedValue: (ctx2) => {
699
- var _a, _b;
700
- return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
701
- }
702
- },
703
- watch: {
704
- value: ["invokeOnChange", "dispatchChangeEvent"],
705
- isOutOfRange: ["invokeOnInvalid"],
706
- scrubberCursorPoint: ["setVirtualCursorPosition"]
707
- },
708
- on: {
709
- SET_VALUE: [
710
- {
711
- guard: "clampOnBlur",
712
- actions: ["setValue", "clampValue", "setHintToSet"]
713
- },
714
- {
715
- actions: ["setValue", "setHintToSet"]
716
- }
717
- ],
718
- CLEAR_VALUE: {
719
- actions: ["clearValue"]
720
- },
721
- INCREMENT: {
722
- actions: ["increment"]
723
- },
724
- DECREMENT: {
725
- actions: ["decrement"]
726
- }
727
- },
728
- states: {
729
- unknown: {
730
- on: {
731
- SETUP: {
732
- target: "idle",
733
- actions: "syncInputValue"
734
- }
735
- }
736
- },
737
- idle: {
738
- exit: "invokeOnFocus",
739
- on: {
740
- PRESS_DOWN: {
741
- target: "before:spin",
742
- actions: ["focusInput", "setHint"]
743
- },
744
- PRESS_DOWN_SCRUBBER: {
745
- target: "scrubbing",
746
- actions: ["focusInput", "setHint", "setCursorPoint"]
747
- },
748
- FOCUS: "focused"
749
- }
750
- },
751
- focused: {
752
- tags: "focus",
753
- entry: "focusInput",
754
- activities: "attachWheelListener",
755
- on: {
756
- PRESS_DOWN: {
757
- target: "before:spin",
758
- actions: ["focusInput", "setHint"]
759
- },
760
- PRESS_DOWN_SCRUBBER: {
761
- target: "scrubbing",
762
- actions: ["focusInput", "setHint", "setCursorPoint"]
763
- },
764
- ARROW_UP: {
765
- actions: "increment"
766
- },
767
- ARROW_DOWN: {
768
- actions: "decrement"
769
- },
770
- HOME: {
771
- actions: "setToMin"
772
- },
773
- END: {
774
- actions: "setToMax"
775
- },
776
- CHANGE: {
777
- actions: ["setValue", "setHint"]
778
- },
779
- BLUR: [
780
- {
781
- guard: "isInvalidExponential",
782
- target: "idle",
783
- actions: ["clearValue", "clearHint", "invokeOnBlur"]
784
- },
785
- {
786
- guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
787
- target: "idle",
788
- actions: ["clampValue", "clearHint", "invokeOnBlur"]
789
- },
790
- {
791
- target: "idle",
792
- actions: ["roundValue", "invokeOnBlur"]
793
- }
794
- ]
795
- }
796
- },
797
- "before:spin": {
798
- tags: "focus",
799
- activities: "trackButtonDisabled",
800
- entry: choose([
801
- { guard: "isIncrementHint", actions: "increment" },
802
- { guard: "isDecrementHint", actions: "decrement" }
803
- ]),
804
- after: {
805
- CHANGE_DELAY: {
806
- target: "spinning",
807
- guard: and("isInRange", "spinOnPress")
808
- }
809
- },
810
- on: {
811
- PRESS_UP: {
812
- target: "focused",
813
- actions: "clearHint"
814
- }
815
- }
816
- },
817
- spinning: {
818
- tags: "focus",
819
- activities: "trackButtonDisabled",
820
- every: [
821
- {
822
- delay: "CHANGE_INTERVAL",
823
- guard: and(not("isAtMin"), "isIncrementHint"),
824
- actions: "increment"
825
- },
826
- {
827
- delay: "CHANGE_INTERVAL",
828
- guard: and(not("isAtMax"), "isDecrementHint"),
829
- actions: "decrement"
830
- }
831
- ],
832
- on: {
833
- PRESS_UP: {
834
- target: "focused",
835
- actions: "clearHint"
836
- }
837
- }
838
- },
839
- scrubbing: {
840
- tags: "focus",
841
- exit: "clearCursorPoint",
842
- activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
843
- on: {
844
- POINTER_UP_SCRUBBER: "focused",
845
- POINTER_MOVE_SCRUBBER: [
846
- {
847
- guard: "isIncrementHint",
848
- actions: ["increment", "setCursorPoint"]
849
- },
850
- {
851
- guard: "isDecrementHint",
852
- actions: ["decrement", "setCursorPoint"]
853
- }
854
- ]
855
- }
856
- }
857
- }
858
- },
859
- {
860
- delays: {
861
- CHANGE_INTERVAL: 50,
862
- CHANGE_DELAY: 300
863
- },
864
- guards: {
865
- clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
866
- isAtMin: (ctx2) => ctx2.isAtMin,
867
- spinOnPress: (ctx2) => !!ctx2.spinOnPress,
868
- isAtMax: (ctx2) => ctx2.isAtMax,
869
- isInRange: (ctx2) => !ctx2.isOutOfRange,
870
- isDecrementHint: (ctx2, evt) => {
871
- var _a;
872
- return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
873
- },
874
- isEmptyValue: (ctx2) => ctx2.isValueEmpty,
875
- isIncrementHint: (ctx2, evt) => {
876
- var _a;
877
- return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
878
- },
879
- isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
880
- },
881
- activities: {
882
- setupVirtualCursor(ctx2) {
883
- return dom.setupVirtualCursor(ctx2);
884
- },
885
- preventTextSelection(ctx2) {
886
- return dom.preventTextSelection(ctx2);
887
- },
888
- trackButtonDisabled(ctx2, _evt, { send }) {
889
- const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
890
- return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
891
- },
892
- attachWheelListener(ctx2, _evt, { send }) {
893
- const input = dom.getInputEl(ctx2);
894
- if (!input)
895
- return;
896
- function onWheel(event) {
897
- const isInputFocused = dom.getDoc(ctx2).activeElement === input;
898
- if (!ctx2.allowMouseWheel || !isInputFocused)
899
- return;
900
- event.preventDefault();
901
- const dir = Math.sign(event.deltaY) * -1;
902
- if (dir === 1) {
903
- send("INCREMENT");
904
- } else if (dir === -1) {
905
- send("DECREMENT");
906
- }
907
- }
908
- return addDomEvent(input, "wheel", onWheel, { passive: false });
909
- },
910
- activatePointerLock(ctx2) {
911
- if (isSafari() || !supportsPointerEvent())
912
- return;
913
- return requestPointerLock(dom.getDoc(ctx2));
914
- },
915
- trackMousemove(ctx2, _evt, { send }) {
916
- const doc = dom.getDoc(ctx2);
917
- function onMousemove(event) {
918
- if (!ctx2.scrubberCursorPoint)
919
- return;
920
- const value = dom.getMousementValue(ctx2, event);
921
- if (!value.hint)
922
- return;
923
- send({
924
- type: "POINTER_MOVE_SCRUBBER",
925
- hint: value.hint,
926
- point: value.point
927
- });
928
- }
929
- function onMouseup() {
930
- send("POINTER_UP_SCRUBBER");
931
- }
932
- return callAll2(
933
- addDomEvent(doc, "mousemove", onMousemove, false),
934
- addDomEvent(doc, "mouseup", onMouseup, false)
935
- );
936
- }
937
- },
938
- actions: {
939
- focusInput(ctx2) {
940
- if (!ctx2.focusInputOnChange)
941
- return;
942
- const input = dom.getInputEl(ctx2);
943
- raf(() => input == null ? void 0 : input.focus());
944
- },
945
- increment(ctx2, evt) {
946
- ctx2.value = utils.increment(ctx2, evt.step);
947
- },
948
- decrement(ctx2, evt) {
949
- ctx2.value = utils.decrement(ctx2, evt.step);
950
- },
951
- clampValue(ctx2) {
952
- ctx2.value = utils.clamp(ctx2);
953
- },
954
- roundValue(ctx2) {
955
- if (ctx2.value !== "") {
956
- ctx2.value = utils.round(ctx2);
957
- }
958
- },
959
- setValue(ctx2, evt) {
960
- var _a, _b;
961
- const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
962
- ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
963
- },
964
- clearValue(ctx2) {
965
- ctx2.value = "";
966
- },
967
- setToMax(ctx2) {
968
- ctx2.value = ctx2.max.toString();
969
- },
970
- setToMin(ctx2) {
971
- ctx2.value = ctx2.min.toString();
972
- },
973
- setHint(ctx2, evt) {
974
- ctx2.hint = evt.hint;
975
- },
976
- clearHint(ctx2) {
977
- ctx2.hint = null;
978
- },
979
- setHintToSet(ctx2) {
980
- ctx2.hint = "set";
981
- },
982
- invokeOnChange(ctx2) {
983
- var _a;
984
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
985
- value: ctx2.value,
986
- valueAsNumber: ctx2.valueAsNumber
987
- });
988
- },
989
- invokeOnFocus(ctx2, evt) {
990
- var _a;
991
- let srcElement = null;
992
- if (evt.type === "PRESS_DOWN") {
993
- srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
994
- } else if (evt.type === "FOCUS") {
995
- srcElement = dom.getInputEl(ctx2);
996
- } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
997
- srcElement = dom.getScrubberEl(ctx2);
998
- }
999
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
1000
- value: ctx2.value,
1001
- valueAsNumber: ctx2.valueAsNumber,
1002
- srcElement
1003
- });
1004
- },
1005
- invokeOnBlur(ctx2) {
1006
- var _a;
1007
- (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
1008
- value: ctx2.value,
1009
- valueAsNumber: ctx2.valueAsNumber
1010
- });
1011
- },
1012
- invokeOnInvalid(ctx2) {
1013
- var _a;
1014
- if (!ctx2.isOutOfRange)
1015
- return;
1016
- const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
1017
- (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
1018
- reason,
1019
- value: ctx2.formattedValue,
1020
- valueAsNumber: ctx2.valueAsNumber
1021
- });
1022
- },
1023
- syncInputValue(ctx2) {
1024
- const input = dom.getInputEl(ctx2);
1025
- if (!input || input.value == ctx2.value)
1026
- return;
1027
- const value = utils.parse(ctx2, input.value);
1028
- ctx2.value = utils.sanitize(ctx2, value);
1029
- },
1030
- setCursorPoint(ctx2, evt) {
1031
- ctx2.scrubberCursorPoint = evt.point;
1032
- },
1033
- clearCursorPoint(ctx2) {
1034
- ctx2.scrubberCursorPoint = null;
1035
- },
1036
- setVirtualCursorPosition(ctx2) {
1037
- const cursor = dom.getCursorEl(ctx2);
1038
- if (!cursor || !ctx2.scrubberCursorPoint)
1039
- return;
1040
- const { x, y } = ctx2.scrubberCursorPoint;
1041
- cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
1042
- },
1043
- dispatchChangeEvent(ctx2) {
1044
- dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
1045
- }
1046
- }
1047
- }
1048
- );
1049
- }
1
+ import {
2
+ connect
3
+ } from "./chunk-TSELS3UE.mjs";
4
+ import {
5
+ anatomy
6
+ } from "./chunk-XHRILSH3.mjs";
7
+ import {
8
+ machine
9
+ } from "./chunk-7E3ZO263.mjs";
10
+ import "./chunk-2SIS62IB.mjs";
11
+ import "./chunk-GWZPUXGU.mjs";
12
+ import "./chunk-DDNK5RLW.mjs";
1050
13
  export {
1051
14
  anatomy,
1052
15
  connect,