@zag-js/number-input 0.0.0-dev-20230220134212 → 0.0.0-dev-20230222120620
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/{chunk-7Q7LBLXZ.mjs → chunk-3O7PA63J.mjs} +12 -138
- package/dist/{chunk-6CS5P7OC.mjs → chunk-AXXDGYUW.mjs} +2 -8
- package/dist/{chunk-GQN3V2LU.mjs → chunk-QYY4CWRS.mjs} +4 -13
- package/dist/{chunk-4ASBTBA5.mjs → chunk-TZOPYT5L.mjs} +7 -43
- package/dist/index.js +65 -326
- package/dist/index.mjs +4 -5
- package/dist/number-input.connect.js +42 -175
- package/dist/number-input.connect.mjs +3 -4
- package/dist/number-input.dom.d.ts +9 -6
- package/dist/number-input.dom.js +9 -65
- package/dist/number-input.dom.mjs +1 -2
- package/dist/number-input.machine.js +40 -266
- package/dist/number-input.machine.mjs +3 -4
- package/dist/number-input.utils.js +9 -54
- package/dist/number-input.utils.mjs +1 -2
- package/package.json +9 -7
- package/dist/chunk-EPCXXTFL.mjs +0 -141
package/dist/index.js
CHANGED
|
@@ -39,266 +39,15 @@ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
|
39
39
|
);
|
|
40
40
|
var parts = anatomy.build();
|
|
41
41
|
|
|
42
|
-
//
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var ariaAttr = (guard) => {
|
|
47
|
-
return guard ? "true" : void 0;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
// ../../utilities/dom/src/constants.ts
|
|
51
|
-
var MAX_Z_INDEX = 2147483647;
|
|
52
|
-
|
|
53
|
-
// ../../utilities/core/src/functions.ts
|
|
54
|
-
var runIfFn = (v, ...a) => {
|
|
55
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
56
|
-
return res ?? void 0;
|
|
57
|
-
};
|
|
58
|
-
var callAll = (...fns) => (...a) => {
|
|
59
|
-
fns.forEach(function(fn) {
|
|
60
|
-
fn?.(...a);
|
|
61
|
-
});
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// ../../utilities/core/src/guard.ts
|
|
65
|
-
var isArray = (v) => Array.isArray(v);
|
|
66
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
67
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
68
|
-
|
|
69
|
-
// ../../utilities/core/src/object.ts
|
|
70
|
-
function compact(obj) {
|
|
71
|
-
if (obj === void 0)
|
|
72
|
-
return obj;
|
|
73
|
-
return Object.fromEntries(
|
|
74
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// ../../utilities/dom/src/platform.ts
|
|
79
|
-
var isDom = () => typeof window !== "undefined";
|
|
80
|
-
function getPlatform() {
|
|
81
|
-
const agent = navigator.userAgentData;
|
|
82
|
-
return agent?.platform ?? navigator.platform;
|
|
83
|
-
}
|
|
84
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
85
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
86
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
87
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
88
|
-
|
|
89
|
-
// ../../utilities/dom/src/query.ts
|
|
90
|
-
function isDocument(el) {
|
|
91
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
92
|
-
}
|
|
93
|
-
function isWindow(value) {
|
|
94
|
-
return value?.toString() === "[object Window]";
|
|
95
|
-
}
|
|
96
|
-
function getDocument(el) {
|
|
97
|
-
if (isWindow(el))
|
|
98
|
-
return el.document;
|
|
99
|
-
if (isDocument(el))
|
|
100
|
-
return el;
|
|
101
|
-
return el?.ownerDocument ?? document;
|
|
102
|
-
}
|
|
103
|
-
function getWindow(el) {
|
|
104
|
-
return el?.ownerDocument.defaultView ?? window;
|
|
105
|
-
}
|
|
106
|
-
function defineDomHelpers(helpers) {
|
|
107
|
-
const dom2 = {
|
|
108
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
109
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
110
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
111
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
112
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
113
|
-
};
|
|
114
|
-
return {
|
|
115
|
-
...dom2,
|
|
116
|
-
...helpers
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// ../../utilities/dom/src/event.ts
|
|
121
|
-
function getNativeEvent(e) {
|
|
122
|
-
return e.nativeEvent ?? e;
|
|
123
|
-
}
|
|
124
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
125
|
-
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
126
|
-
var isLeftClick = (v) => v.button === 0;
|
|
127
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
128
|
-
|
|
129
|
-
// ../../utilities/dom/src/get-event-point.ts
|
|
130
|
-
var fallback = {
|
|
131
|
-
pageX: 0,
|
|
132
|
-
pageY: 0,
|
|
133
|
-
clientX: 0,
|
|
134
|
-
clientY: 0
|
|
135
|
-
};
|
|
136
|
-
function getEventPoint(event, type = "page") {
|
|
137
|
-
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
138
|
-
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
// ../../utilities/dom/src/keyboard-event.ts
|
|
142
|
-
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
143
|
-
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
144
|
-
function getEventStep(event) {
|
|
145
|
-
if (event.ctrlKey || event.metaKey) {
|
|
146
|
-
return 0.1;
|
|
147
|
-
} else {
|
|
148
|
-
const isPageKey = PAGE_KEYS.has(event.key);
|
|
149
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
150
|
-
return isSkipKey ? 10 : 1;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// ../../utilities/dom/src/listener.ts
|
|
155
|
-
var isRef = (v) => hasProp(v, "current");
|
|
156
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
157
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
158
|
-
node?.addEventListener(eventName, handler, options);
|
|
159
|
-
return () => {
|
|
160
|
-
node?.removeEventListener(eventName, handler, options);
|
|
161
|
-
};
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
// ../../utilities/dom/src/mutation-observer.ts
|
|
165
|
-
function observeAttributes(node, attributes, fn) {
|
|
166
|
-
if (!node)
|
|
167
|
-
return;
|
|
168
|
-
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
169
|
-
const win = node.ownerDocument.defaultView || window;
|
|
170
|
-
const obs = new win.MutationObserver((changes) => {
|
|
171
|
-
for (const change of changes) {
|
|
172
|
-
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
173
|
-
fn(change);
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
178
|
-
return () => obs.disconnect();
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
// ../../utilities/dom/src/next-tick.ts
|
|
182
|
-
function raf(fn) {
|
|
183
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
184
|
-
return function cleanup() {
|
|
185
|
-
globalThis.cancelAnimationFrame(id);
|
|
186
|
-
};
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
// ../../utilities/dom/src/pointerlock.ts
|
|
190
|
-
function addPointerlockChangeListener(doc, fn) {
|
|
191
|
-
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
192
|
-
}
|
|
193
|
-
function addPointerlockErrorListener(doc, fn) {
|
|
194
|
-
doc.addEventListener("pointerlockerror", fn, false);
|
|
195
|
-
return function cleanup() {
|
|
196
|
-
doc.removeEventListener("pointerlockerror", fn, false);
|
|
197
|
-
};
|
|
198
|
-
}
|
|
199
|
-
function requestPointerLock(doc, handlers = {}) {
|
|
200
|
-
const { onPointerLock, onPointerUnlock } = handlers;
|
|
201
|
-
const body = doc.body;
|
|
202
|
-
const supported = "pointerLockElement" in doc || "mozPointerLockElement" in doc;
|
|
203
|
-
const locked = !!doc.pointerLockElement;
|
|
204
|
-
function onPointerChange() {
|
|
205
|
-
if (locked)
|
|
206
|
-
onPointerLock?.();
|
|
207
|
-
else
|
|
208
|
-
onPointerUnlock?.();
|
|
209
|
-
}
|
|
210
|
-
function onPointerError(event) {
|
|
211
|
-
if (locked)
|
|
212
|
-
onPointerUnlock?.();
|
|
213
|
-
console.error("PointerLock error occured:", event);
|
|
214
|
-
exit();
|
|
215
|
-
}
|
|
216
|
-
function exit() {
|
|
217
|
-
doc.exitPointerLock();
|
|
218
|
-
}
|
|
219
|
-
if (!supported)
|
|
220
|
-
return;
|
|
221
|
-
try {
|
|
222
|
-
body.requestPointerLock();
|
|
223
|
-
} catch {
|
|
224
|
-
}
|
|
225
|
-
const cleanup = callAll(
|
|
226
|
-
addPointerlockChangeListener(doc, onPointerChange),
|
|
227
|
-
addPointerlockErrorListener(doc, onPointerError)
|
|
228
|
-
);
|
|
229
|
-
return function dispose() {
|
|
230
|
-
if (!supported)
|
|
231
|
-
return;
|
|
232
|
-
cleanup();
|
|
233
|
-
exit();
|
|
234
|
-
};
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
// ../../utilities/number/src/number.ts
|
|
238
|
-
function wrap(num, max) {
|
|
239
|
-
return (num % max + max) % max;
|
|
240
|
-
}
|
|
241
|
-
function roundToDevicePixel(num) {
|
|
242
|
-
if (typeof window === "undefined")
|
|
243
|
-
return Math.round(num);
|
|
244
|
-
const dp = window.devicePixelRatio;
|
|
245
|
-
return Math.floor(num * dp + 0.5) / dp;
|
|
246
|
-
}
|
|
247
|
-
function clamp(v, o) {
|
|
248
|
-
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
249
|
-
}
|
|
250
|
-
function countDecimals(value) {
|
|
251
|
-
if (!Number.isFinite(value))
|
|
252
|
-
return 0;
|
|
253
|
-
let e = 1, p = 0;
|
|
254
|
-
while (Math.round(value * e) / e !== value) {
|
|
255
|
-
e *= 10;
|
|
256
|
-
p += 1;
|
|
257
|
-
}
|
|
258
|
-
return p;
|
|
259
|
-
}
|
|
260
|
-
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
261
|
-
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
262
|
-
function valueOf(v) {
|
|
263
|
-
if (typeof v === "number")
|
|
264
|
-
return v;
|
|
265
|
-
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
266
|
-
return !Number.isNaN(num) ? num : 0;
|
|
267
|
-
}
|
|
268
|
-
function formatDecimal(v, o) {
|
|
269
|
-
return new Intl.NumberFormat("en-US", {
|
|
270
|
-
useGrouping: false,
|
|
271
|
-
style: "decimal",
|
|
272
|
-
minimumFractionDigits: o.minFractionDigits,
|
|
273
|
-
maximumFractionDigits: o.maxFractionDigits
|
|
274
|
-
}).format(valueOf(v));
|
|
275
|
-
}
|
|
276
|
-
function isAtMax(v, o) {
|
|
277
|
-
const val = valueOf(v);
|
|
278
|
-
return val >= o.max;
|
|
279
|
-
}
|
|
280
|
-
function isAtMin(v, o) {
|
|
281
|
-
const val = valueOf(v);
|
|
282
|
-
return val <= o.min;
|
|
283
|
-
}
|
|
284
|
-
function isWithinRange(v, o) {
|
|
285
|
-
const val = valueOf(v);
|
|
286
|
-
return val >= o.min && val <= o.max;
|
|
287
|
-
}
|
|
288
|
-
function decimalOperation(a, op, b) {
|
|
289
|
-
let result = op === "+" ? a + b : a - b;
|
|
290
|
-
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
291
|
-
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
292
|
-
a = Math.round(a * multiplier);
|
|
293
|
-
b = Math.round(b * multiplier);
|
|
294
|
-
result = op === "+" ? a + b : a - b;
|
|
295
|
-
result /= multiplier;
|
|
296
|
-
}
|
|
297
|
-
return result;
|
|
298
|
-
}
|
|
42
|
+
// src/number-input.connect.ts
|
|
43
|
+
var import_dom_event2 = require("@zag-js/dom-event");
|
|
44
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
45
|
+
var import_number_utils3 = require("@zag-js/number-utils");
|
|
299
46
|
|
|
300
47
|
// src/number-input.dom.ts
|
|
301
|
-
var
|
|
48
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
49
|
+
var import_number_utils = require("@zag-js/number-utils");
|
|
50
|
+
var dom = (0, import_dom_query.createScope)({
|
|
302
51
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
303
52
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
304
53
|
getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
|
|
@@ -322,7 +71,7 @@ var dom = defineDomHelpers({
|
|
|
322
71
|
return btnEl;
|
|
323
72
|
},
|
|
324
73
|
setupVirtualCursor(ctx) {
|
|
325
|
-
if (isSafari
|
|
74
|
+
if ((0, import_dom_query.isSafari)())
|
|
326
75
|
return;
|
|
327
76
|
dom.createVirtualCursor(ctx);
|
|
328
77
|
return () => {
|
|
@@ -349,8 +98,8 @@ var dom = defineDomHelpers({
|
|
|
349
98
|
};
|
|
350
99
|
},
|
|
351
100
|
getMousementValue(ctx, event) {
|
|
352
|
-
const x = roundToDevicePixel(event.movementX);
|
|
353
|
-
const y = roundToDevicePixel(event.movementY);
|
|
101
|
+
const x = (0, import_number_utils.roundToDevicePixel)(event.movementX);
|
|
102
|
+
const y = (0, import_number_utils.roundToDevicePixel)(event.movementY);
|
|
354
103
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
355
104
|
if (ctx.isRtl && hint === "increment")
|
|
356
105
|
hint = "decrement";
|
|
@@ -362,8 +111,8 @@ var dom = defineDomHelpers({
|
|
|
362
111
|
};
|
|
363
112
|
const win = dom.getWin(ctx);
|
|
364
113
|
const width = win.innerWidth;
|
|
365
|
-
const half = roundToDevicePixel(7.5);
|
|
366
|
-
point.x = wrap(point.x + half, width) - half;
|
|
114
|
+
const half = (0, import_number_utils.roundToDevicePixel)(7.5);
|
|
115
|
+
point.x = (0, import_number_utils.wrap)(point.x + half, width) - half;
|
|
367
116
|
return { hint, point };
|
|
368
117
|
},
|
|
369
118
|
createVirtualCursor(ctx) {
|
|
@@ -378,7 +127,7 @@ var dom = defineDomHelpers({
|
|
|
378
127
|
pointerEvents: "none",
|
|
379
128
|
left: "0px",
|
|
380
129
|
top: "0px",
|
|
381
|
-
zIndex: MAX_Z_INDEX,
|
|
130
|
+
zIndex: import_dom_query.MAX_Z_INDEX,
|
|
382
131
|
transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
|
|
383
132
|
willChange: "transform"
|
|
384
133
|
});
|
|
@@ -394,11 +143,13 @@ var dom = defineDomHelpers({
|
|
|
394
143
|
});
|
|
395
144
|
|
|
396
145
|
// src/number-input.utils.ts
|
|
146
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
147
|
+
var import_number_utils2 = require("@zag-js/number-utils");
|
|
397
148
|
var utils = {
|
|
398
149
|
isValidNumericEvent: (ctx, event) => {
|
|
399
150
|
if (event.key == null)
|
|
400
151
|
return true;
|
|
401
|
-
const isModifier = isModifiedEvent(event);
|
|
152
|
+
const isModifier = (0, import_dom_event.isModifiedEvent)(event);
|
|
402
153
|
const isSingleKey = event.key.length === 1;
|
|
403
154
|
if (isModifier || !isSingleKey)
|
|
404
155
|
return true;
|
|
@@ -409,15 +160,15 @@ var utils = {
|
|
|
409
160
|
return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
|
|
410
161
|
},
|
|
411
162
|
increment: (ctx, step) => {
|
|
412
|
-
const value = increment(ctx.value, step ?? ctx.step);
|
|
413
|
-
return formatDecimal(clamp(value, ctx), ctx);
|
|
163
|
+
const value = (0, import_number_utils2.increment)(ctx.value, step ?? ctx.step);
|
|
164
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
|
|
414
165
|
},
|
|
415
166
|
decrement: (ctx, step) => {
|
|
416
|
-
const value = decrement(ctx.value, step ?? ctx.step);
|
|
417
|
-
return formatDecimal(clamp(value, ctx), ctx);
|
|
167
|
+
const value = (0, import_number_utils2.decrement)(ctx.value, step ?? ctx.step);
|
|
168
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
|
|
418
169
|
},
|
|
419
170
|
clamp: (ctx) => {
|
|
420
|
-
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
171
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(ctx.value, ctx), ctx);
|
|
421
172
|
},
|
|
422
173
|
parse: (ctx, value) => {
|
|
423
174
|
return ctx.parse?.(value) ?? value;
|
|
@@ -427,7 +178,7 @@ var utils = {
|
|
|
427
178
|
return ctx.format?.(_val) ?? _val;
|
|
428
179
|
},
|
|
429
180
|
round: (ctx) => {
|
|
430
|
-
return formatDecimal(ctx.value, ctx);
|
|
181
|
+
return (0, import_number_utils2.formatDecimal)(ctx.value, ctx);
|
|
431
182
|
}
|
|
432
183
|
};
|
|
433
184
|
|
|
@@ -473,12 +224,12 @@ function connect(state, send, normalize) {
|
|
|
473
224
|
rootProps: normalize.element({
|
|
474
225
|
id: dom.getRootId(state.context),
|
|
475
226
|
...parts.root.attrs,
|
|
476
|
-
"data-disabled": dataAttr(isDisabled)
|
|
227
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled)
|
|
477
228
|
}),
|
|
478
229
|
labelProps: normalize.label({
|
|
479
230
|
...parts.label.attrs,
|
|
480
|
-
"data-disabled": dataAttr(isDisabled),
|
|
481
|
-
"data-invalid": dataAttr(isInvalid),
|
|
231
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
232
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
482
233
|
id: dom.getLabelId(state.context),
|
|
483
234
|
htmlFor: dom.getInputId(state.context)
|
|
484
235
|
}),
|
|
@@ -486,9 +237,9 @@ function connect(state, send, normalize) {
|
|
|
486
237
|
...parts.control.attrs,
|
|
487
238
|
role: "group",
|
|
488
239
|
"aria-disabled": isDisabled,
|
|
489
|
-
"data-disabled": dataAttr(isDisabled),
|
|
490
|
-
"data-invalid": dataAttr(isInvalid),
|
|
491
|
-
"aria-invalid": ariaAttr(state.context.invalid)
|
|
240
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
241
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
242
|
+
"aria-invalid": (0, import_dom_query2.ariaAttr)(state.context.invalid)
|
|
492
243
|
}),
|
|
493
244
|
inputProps: normalize.input({
|
|
494
245
|
...parts.input.attrs,
|
|
@@ -499,10 +250,10 @@ function connect(state, send, normalize) {
|
|
|
499
250
|
defaultValue: state.context.formattedValue,
|
|
500
251
|
pattern: state.context.pattern,
|
|
501
252
|
inputMode: state.context.inputMode,
|
|
502
|
-
"aria-invalid":
|
|
503
|
-
"data-invalid": dataAttr(isInvalid),
|
|
253
|
+
"aria-invalid": (0, import_dom_query2.ariaAttr)(isInvalid),
|
|
254
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
504
255
|
disabled: isDisabled,
|
|
505
|
-
"data-disabled": dataAttr(isDisabled),
|
|
256
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
506
257
|
readOnly: !!state.context.readOnly,
|
|
507
258
|
autoComplete: "off",
|
|
508
259
|
autoCorrect: "off",
|
|
@@ -520,19 +271,19 @@ function connect(state, send, normalize) {
|
|
|
520
271
|
send("BLUR");
|
|
521
272
|
},
|
|
522
273
|
onChange(event) {
|
|
523
|
-
const evt = getNativeEvent(event);
|
|
274
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
524
275
|
if (evt.isComposing)
|
|
525
276
|
return;
|
|
526
277
|
send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
|
|
527
278
|
},
|
|
528
279
|
onKeyDown(event) {
|
|
529
|
-
const evt = getNativeEvent(event);
|
|
280
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
530
281
|
if (evt.isComposing)
|
|
531
282
|
return;
|
|
532
283
|
if (!utils.isValidNumericEvent(state.context, event)) {
|
|
533
284
|
event.preventDefault();
|
|
534
285
|
}
|
|
535
|
-
const step = getEventStep(event) * state.context.step;
|
|
286
|
+
const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
|
|
536
287
|
const keyMap = {
|
|
537
288
|
ArrowUp() {
|
|
538
289
|
send({ type: "ARROW_UP", step });
|
|
@@ -558,7 +309,7 @@ function connect(state, send, normalize) {
|
|
|
558
309
|
...parts.decrementTrigger.attrs,
|
|
559
310
|
id: dom.getDecrementTriggerId(state.context),
|
|
560
311
|
disabled: isDecrementDisabled,
|
|
561
|
-
"data-disabled": dataAttr(isDecrementDisabled),
|
|
312
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDecrementDisabled),
|
|
562
313
|
"aria-label": translations.decrementLabel,
|
|
563
314
|
type: "button",
|
|
564
315
|
tabIndex: -1,
|
|
@@ -566,7 +317,7 @@ function connect(state, send, normalize) {
|
|
|
566
317
|
onPointerDown(event) {
|
|
567
318
|
if (isDecrementDisabled)
|
|
568
319
|
return;
|
|
569
|
-
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
|
|
320
|
+
send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
|
|
570
321
|
event.preventDefault();
|
|
571
322
|
},
|
|
572
323
|
onPointerUp() {
|
|
@@ -582,7 +333,7 @@ function connect(state, send, normalize) {
|
|
|
582
333
|
...parts.incrementTrigger.attrs,
|
|
583
334
|
id: dom.getIncrementTriggerId(state.context),
|
|
584
335
|
disabled: isIncrementDisabled,
|
|
585
|
-
"data-disabled": dataAttr(isIncrementDisabled),
|
|
336
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isIncrementDisabled),
|
|
586
337
|
"aria-label": translations.incrementLabel,
|
|
587
338
|
type: "button",
|
|
588
339
|
tabIndex: -1,
|
|
@@ -590,7 +341,7 @@ function connect(state, send, normalize) {
|
|
|
590
341
|
onPointerDown(event) {
|
|
591
342
|
if (isIncrementDisabled)
|
|
592
343
|
return;
|
|
593
|
-
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
|
|
344
|
+
send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
|
|
594
345
|
event.preventDefault();
|
|
595
346
|
},
|
|
596
347
|
onPointerUp() {
|
|
@@ -602,17 +353,17 @@ function connect(state, send, normalize) {
|
|
|
602
353
|
}),
|
|
603
354
|
scrubberProps: normalize.element({
|
|
604
355
|
...parts.scrubber.attrs,
|
|
605
|
-
"data-disabled": dataAttr(isDisabled),
|
|
356
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
606
357
|
id: dom.getScrubberId(state.context),
|
|
607
358
|
role: "presentation",
|
|
608
359
|
onMouseDown(event) {
|
|
609
360
|
if (isDisabled)
|
|
610
361
|
return;
|
|
611
|
-
const evt = getNativeEvent(event);
|
|
362
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
612
363
|
event.preventDefault();
|
|
613
|
-
const point =
|
|
614
|
-
point.x = point.x - roundToDevicePixel(7.5);
|
|
615
|
-
point.y = point.y - roundToDevicePixel(7.5);
|
|
364
|
+
const point = { x: evt.clientX, y: evt.clientY };
|
|
365
|
+
point.x = point.x - (0, import_number_utils3.roundToDevicePixel)(7.5);
|
|
366
|
+
point.y = point.y - (0, import_number_utils3.roundToDevicePixel)(7.5);
|
|
616
367
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
617
368
|
},
|
|
618
369
|
style: {
|
|
@@ -624,29 +375,15 @@ function connect(state, send, normalize) {
|
|
|
624
375
|
|
|
625
376
|
// src/number-input.machine.ts
|
|
626
377
|
var import_core = require("@zag-js/core");
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
}
|
|
634
|
-
function dispatchInputValueEvent(el, value) {
|
|
635
|
-
if (!el)
|
|
636
|
-
return;
|
|
637
|
-
const win = getWindow(el);
|
|
638
|
-
if (!(el instanceof win.HTMLInputElement))
|
|
639
|
-
return;
|
|
640
|
-
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
641
|
-
desc.set?.call(el, value);
|
|
642
|
-
const event = new win.Event("input", { bubbles: true });
|
|
643
|
-
el.dispatchEvent(event);
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
// src/number-input.machine.ts
|
|
378
|
+
var import_dom_event3 = require("@zag-js/dom-event");
|
|
379
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
380
|
+
var import_form_utils = require("@zag-js/form-utils");
|
|
381
|
+
var import_mutation_observer = require("@zag-js/mutation-observer");
|
|
382
|
+
var import_number_utils4 = require("@zag-js/number-utils");
|
|
383
|
+
var import_utils = require("@zag-js/utils");
|
|
647
384
|
var { not, and } = import_core.guards;
|
|
648
385
|
function machine(userContext) {
|
|
649
|
-
const ctx = compact(userContext);
|
|
386
|
+
const ctx = (0, import_utils.compact)(userContext);
|
|
650
387
|
return (0, import_core.createMachine)(
|
|
651
388
|
{
|
|
652
389
|
id: "number-input",
|
|
@@ -675,10 +412,10 @@ function machine(userContext) {
|
|
|
675
412
|
},
|
|
676
413
|
computed: {
|
|
677
414
|
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
678
|
-
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
679
|
-
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
680
|
-
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
681
|
-
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
415
|
+
valueAsNumber: (ctx2) => (0, import_number_utils4.valueOf)(ctx2.value),
|
|
416
|
+
isAtMin: (ctx2) => (0, import_number_utils4.isAtMin)(ctx2.value, ctx2),
|
|
417
|
+
isAtMax: (ctx2) => (0, import_number_utils4.isAtMax)(ctx2.value, ctx2),
|
|
418
|
+
isOutOfRange: (ctx2) => !(0, import_number_utils4.isWithinRange)(ctx2.value, ctx2),
|
|
682
419
|
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
683
420
|
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
684
421
|
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
@@ -859,7 +596,9 @@ function machine(userContext) {
|
|
|
859
596
|
},
|
|
860
597
|
trackButtonDisabled(ctx2, _evt, { send }) {
|
|
861
598
|
const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
|
|
862
|
-
return observeAttributes(btn, "disabled", () =>
|
|
599
|
+
return (0, import_mutation_observer.observeAttributes)(btn, ["disabled"], () => {
|
|
600
|
+
send("PRESS_UP");
|
|
601
|
+
});
|
|
863
602
|
},
|
|
864
603
|
attachWheelListener(ctx2, _evt, { send }) {
|
|
865
604
|
const input = dom.getInputEl(ctx2);
|
|
@@ -877,12 +616,12 @@ function machine(userContext) {
|
|
|
877
616
|
send("DECREMENT");
|
|
878
617
|
}
|
|
879
618
|
}
|
|
880
|
-
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
619
|
+
return (0, import_dom_event3.addDomEvent)(input, "wheel", onWheel, { passive: false });
|
|
881
620
|
},
|
|
882
621
|
activatePointerLock(ctx2) {
|
|
883
|
-
if (isSafari
|
|
622
|
+
if ((0, import_dom_query3.isSafari)())
|
|
884
623
|
return;
|
|
885
|
-
return requestPointerLock(dom.getDoc(ctx2));
|
|
624
|
+
return (0, import_dom_event3.requestPointerLock)(dom.getDoc(ctx2));
|
|
886
625
|
},
|
|
887
626
|
trackMousemove(ctx2, _evt, { send }) {
|
|
888
627
|
const doc = dom.getDoc(ctx2);
|
|
@@ -901,9 +640,9 @@ function machine(userContext) {
|
|
|
901
640
|
function onMouseup() {
|
|
902
641
|
send("POINTER_UP_SCRUBBER");
|
|
903
642
|
}
|
|
904
|
-
return callAll(
|
|
905
|
-
addDomEvent(doc, "mousemove", onMousemove, false),
|
|
906
|
-
addDomEvent(doc, "mouseup", onMouseup, false)
|
|
643
|
+
return (0, import_utils.callAll)(
|
|
644
|
+
(0, import_dom_event3.addDomEvent)(doc, "mousemove", onMousemove, false),
|
|
645
|
+
(0, import_dom_event3.addDomEvent)(doc, "mouseup", onMouseup, false)
|
|
907
646
|
);
|
|
908
647
|
}
|
|
909
648
|
},
|
|
@@ -912,7 +651,7 @@ function machine(userContext) {
|
|
|
912
651
|
if (!ctx2.focusInputOnChange)
|
|
913
652
|
return;
|
|
914
653
|
const input = dom.getInputEl(ctx2);
|
|
915
|
-
raf(() => input?.focus());
|
|
654
|
+
(0, import_dom_query3.raf)(() => input?.focus());
|
|
916
655
|
},
|
|
917
656
|
increment(ctx2, evt) {
|
|
918
657
|
ctx2.value = utils.increment(ctx2, evt.step);
|
|
@@ -1009,7 +748,7 @@ function machine(userContext) {
|
|
|
1009
748
|
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
1010
749
|
},
|
|
1011
750
|
dispatchChangeEvent(ctx2) {
|
|
1012
|
-
dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
|
|
751
|
+
(0, import_form_utils.dispatchInputValueEvent)(dom.getInputEl(ctx2), ctx2.formattedValue);
|
|
1013
752
|
}
|
|
1014
753
|
}
|
|
1015
754
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-TZOPYT5L.mjs";
|
|
4
4
|
import {
|
|
5
5
|
anatomy
|
|
6
6
|
} from "./chunk-XHRILSH3.mjs";
|
|
7
7
|
import {
|
|
8
8
|
machine
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
11
|
-
import "./chunk-
|
|
12
|
-
import "./chunk-EPCXXTFL.mjs";
|
|
9
|
+
} from "./chunk-3O7PA63J.mjs";
|
|
10
|
+
import "./chunk-QYY4CWRS.mjs";
|
|
11
|
+
import "./chunk-AXXDGYUW.mjs";
|
|
13
12
|
export {
|
|
14
13
|
anatomy,
|
|
15
14
|
connect,
|