@zag-js/number-input 0.80.0 → 0.81.0

package/dist/index.js

@@ -1,12 +1,10 @@
 'use strict';
 
 var anatomy$1 = require('@zag-js/anatomy');
-var domEvent = require('@zag-js/dom-event');
 var domQuery = require('@zag-js/dom-query');
-var numberUtils = require('@zag-js/number-utils');
+var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
 var formUtils = require('@zag-js/form-utils');
-var utils = require('@zag-js/utils');
 var number = require('@internationalized/number');
 
 // src/number-input.anatomy.ts
@@ -71,8 +69,9 @@ var dom = domQuery.createScope({
     };
   },
   getMousemoveValue(ctx, event) {
-    const x = numberUtils.roundToDevicePixel(event.movementX);
-    const y = numberUtils.roundToDevicePixel(event.movementY);
+    const win = dom.getWin(ctx);
+    const x = utils.roundToDpr(event.movementX, win.devicePixelRatio);
+    const y = utils.roundToDpr(event.movementY, win.devicePixelRatio);
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
     if (ctx.isRtl && hint === "increment") hint = "decrement";
     if (ctx.isRtl && hint === "decrement") hint = "increment";
@@ -80,10 +79,9 @@ var dom = domQuery.createScope({
       x: ctx.scrubberCursorPoint.x + x,
       y: ctx.scrubberCursorPoint.y + y
     };
-    const win = dom.getWin(ctx);
     const width = win.innerWidth;
-    const half = numberUtils.roundToDevicePixel(7.5);
-    point.x = numberUtils.wrap(point.x + half, width) - half;
+    const half = utils.roundToDpr(7.5, win.devicePixelRatio);
+    point.x = utils.wrap(point.x + half, width) - half;
     return { hint, point };
   },
   createVirtualCursor(ctx) {
@@ -242,7 +240,7 @@ function connect(state, send, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if (domQuery.isComposingEvent(event)) return;
-          const step = domEvent.getEventStep(event) * state.context.step;
+          const step = domQuery.getEventStep(event) * state.context.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
@@ -253,12 +251,12 @@ function connect(state, send, normalize) {
               event.preventDefault();
             },
             Home() {
-              if (domEvent.isModifierKey(event)) return;
+              if (domQuery.isModifierKey(event)) return;
               send("INPUT.HOME");
               event.preventDefault();
             },
             End() {
-              if (domEvent.isModifierKey(event)) return;
+              if (domQuery.isModifierKey(event)) return;
               send("INPUT.END");
               event.preventDefault();
             },
@@ -283,7 +281,7 @@ function connect(state, send, normalize) {
         tabIndex: -1,
         "aria-controls": dom.getInputId(state.context),
         onPointerDown(event) {
-          if (isDecrementDisabled || !domEvent.isLeftClick(event)) return;
+          if (isDecrementDisabled || !domQuery.isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
             event.preventDefault();
@@ -313,7 +311,7 @@ function connect(state, send, normalize) {
         tabIndex: -1,
         "aria-controls": dom.getInputId(state.context),
         onPointerDown(event) {
-          if (isIncrementDisabled || !domEvent.isLeftClick(event)) return;
+          if (isIncrementDisabled || !domQuery.isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
             event.preventDefault();
@@ -339,9 +337,11 @@ function connect(state, send, normalize) {
         role: "presentation",
         onMouseDown(event) {
           if (disabled) return;
-          const point = domEvent.getEventPoint(event);
-          point.x = point.x - numberUtils.roundToDevicePixel(7.5);
-          point.y = point.y - numberUtils.roundToDevicePixel(7.5);
+          const point = domQuery.getEventPoint(event);
+          const win = domQuery.getWindow(event.currentTarget);
+          const dpr = win.devicePixelRatio;
+          point.x = point.x - utils.roundToDpr(7.5, dpr);
+          point.y = point.y - utils.roundToDpr(7.5, dpr);
           send({ type: "SCRUBBER.PRESS_DOWN", point });
           event.preventDefault();
         },
@@ -451,9 +451,9 @@ function machine(userContext) {
         isRtl: (ctx2) => ctx2.dir === "rtl",
         valueAsNumber: (ctx2) => parseValue(ctx2, ctx2.value),
         formattedValue: (ctx2) => formatValue(ctx2, ctx2.valueAsNumber),
-        isAtMin: (ctx2) => numberUtils.isAtMin(ctx2.valueAsNumber, ctx2),
-        isAtMax: (ctx2) => numberUtils.isAtMax(ctx2.valueAsNumber, ctx2),
-        isOutOfRange: (ctx2) => !numberUtils.isWithinRange(ctx2.valueAsNumber, ctx2),
+        isAtMin: (ctx2) => utils.isValueAtMin(ctx2.valueAsNumber, ctx2.min),
+        isAtMax: (ctx2) => utils.isValueAtMax(ctx2.valueAsNumber, ctx2.max),
+        isOutOfRange: (ctx2) => !utils.isValueWithinRange(ctx2.valueAsNumber, ctx2.min, ctx2.max),
         isValueEmpty: (ctx2) => ctx2.value === "",
         isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
@@ -663,11 +663,11 @@ function machine(userContext) {
               send("VALUE.DECREMENT");
             }
           }
-          return domEvent.addDomEvent(inputEl, "wheel", onWheel, { passive: false });
+          return domQuery.addDomEvent(inputEl, "wheel", onWheel, { passive: false });
         },
         activatePointerLock(ctx2) {
           if (domQuery.isSafari()) return;
-          return domEvent.requestPointerLock(dom.getDoc(ctx2));
+          return domQuery.requestPointerLock(dom.getDoc(ctx2));
         },
         trackMousemove(ctx2, _evt, { send }) {
           const doc = dom.getDoc(ctx2);
@@ -685,8 +685,8 @@ function machine(userContext) {
             send("SCRUBBER.POINTER_UP");
           }
           return utils.callAll(
-            domEvent.addDomEvent(doc, "mousemove", onMousemove, false),
-            domEvent.addDomEvent(doc, "mouseup", onMouseup, false)
+            domQuery.addDomEvent(doc, "mousemove", onMousemove, false),
+            domQuery.addDomEvent(doc, "mouseup", onMouseup, false)
           );
         }
       },
@@ -698,22 +698,22 @@ function machine(userContext) {
           domQuery.raf(() => inputEl?.focus({ preventScroll: true }));
         },
         increment(ctx2, evt) {
-          const nextValue = numberUtils.increment(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, numberUtils.clamp(nextValue, ctx2));
+          const nextValue = utils.incrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
+          const value = formatValue(ctx2, utils.clampValue(nextValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         decrement(ctx2, evt) {
-          const nextValue = numberUtils.decrement(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, numberUtils.clamp(nextValue, ctx2));
+          const nextValue = utils.decrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
+          const value = formatValue(ctx2, utils.clampValue(nextValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         setClampedValue(ctx2) {
-          const nextValue = numberUtils.clamp(ctx2.valueAsNumber, ctx2);
+          const nextValue = utils.clampValue(ctx2.valueAsNumber, ctx2.min, ctx2.max);
           set.value(ctx2, formatValue(ctx2, nextValue));
         },
         setRawValue(ctx2, evt) {
           const parsedValue = parseValue(ctx2, evt.value);
-          const value = formatValue(ctx2, numberUtils.clamp(parsedValue, ctx2));
+          const value = formatValue(ctx2, utils.clampValue(parsedValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         setValue(ctx2, evt) {

package/dist/index.mjs

@@ -1,10 +1,8 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { getEventStep, isLeftClick, getEventPoint, addDomEvent, requestPointerLock, isModifierKey } from '@zag-js/dom-event';
-import { createScope, isSafari, MAX_Z_INDEX, dataAttr, ariaAttr, isComposingEvent, observeAttributes, raf } from '@zag-js/dom-query';
-import { roundToDevicePixel, wrap, isAtMin, isAtMax, isWithinRange, increment, clamp, decrement } from '@zag-js/number-utils';
+import { createScope, isSafari, MAX_Z_INDEX, dataAttr, ariaAttr, isComposingEvent, getEventStep, isLeftClick, getEventPoint, getWindow, observeAttributes, addDomEvent, requestPointerLock, raf, isModifierKey } from '@zag-js/dom-query';
+import { roundToDpr, wrap, compact, isValueAtMin, isValueAtMax, isValueWithinRange, callAll, incrementValue, clampValue, decrementValue, isEqual } from '@zag-js/utils';
 import { createMachine, choose, ref, guards } from '@zag-js/core';
 import { trackFormControl, setElementValue } from '@zag-js/form-utils';
-import { compact, callAll, isEqual } from '@zag-js/utils';
 import { NumberParser } from '@internationalized/number';
 
 // src/number-input.anatomy.ts
@@ -69,8 +67,9 @@ var dom = createScope({
     };
   },
   getMousemoveValue(ctx, event) {
-    const x = roundToDevicePixel(event.movementX);
-    const y = roundToDevicePixel(event.movementY);
+    const win = dom.getWin(ctx);
+    const x = roundToDpr(event.movementX, win.devicePixelRatio);
+    const y = roundToDpr(event.movementY, win.devicePixelRatio);
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
     if (ctx.isRtl && hint === "increment") hint = "decrement";
     if (ctx.isRtl && hint === "decrement") hint = "increment";
@@ -78,9 +77,8 @@ var dom = createScope({
       x: ctx.scrubberCursorPoint.x + x,
       y: ctx.scrubberCursorPoint.y + y
     };
-    const win = dom.getWin(ctx);
     const width = win.innerWidth;
-    const half = roundToDevicePixel(7.5);
+    const half = roundToDpr(7.5, win.devicePixelRatio);
     point.x = wrap(point.x + half, width) - half;
     return { hint, point };
   },
@@ -338,8 +336,10 @@ function connect(state, send, normalize) {
         onMouseDown(event) {
           if (disabled) return;
           const point = getEventPoint(event);
-          point.x = point.x - roundToDevicePixel(7.5);
-          point.y = point.y - roundToDevicePixel(7.5);
+          const win = getWindow(event.currentTarget);
+          const dpr = win.devicePixelRatio;
+          point.x = point.x - roundToDpr(7.5, dpr);
+          point.y = point.y - roundToDpr(7.5, dpr);
           send({ type: "SCRUBBER.PRESS_DOWN", point });
           event.preventDefault();
         },
@@ -449,9 +449,9 @@ function machine(userContext) {
         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),
+        isAtMin: (ctx2) => isValueAtMin(ctx2.valueAsNumber, ctx2.min),
+        isAtMax: (ctx2) => isValueAtMax(ctx2.valueAsNumber, ctx2.max),
+        isOutOfRange: (ctx2) => !isValueWithinRange(ctx2.valueAsNumber, ctx2.min, ctx2.max),
         isValueEmpty: (ctx2) => ctx2.value === "",
         isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
@@ -696,22 +696,22 @@ function machine(userContext) {
           raf(() => inputEl?.focus({ preventScroll: true }));
         },
         increment(ctx2, evt) {
-          const nextValue = increment(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, clamp(nextValue, ctx2));
+          const nextValue = incrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
+          const value = formatValue(ctx2, clampValue(nextValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         decrement(ctx2, evt) {
-          const nextValue = decrement(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, clamp(nextValue, ctx2));
+          const nextValue = decrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
+          const value = formatValue(ctx2, clampValue(nextValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         setClampedValue(ctx2) {
-          const nextValue = clamp(ctx2.valueAsNumber, ctx2);
+          const nextValue = clampValue(ctx2.valueAsNumber, ctx2.min, ctx2.max);
           set.value(ctx2, formatValue(ctx2, nextValue));
         },
         setRawValue(ctx2, evt) {
           const parsedValue = parseValue(ctx2, evt.value);
-          const value = formatValue(ctx2, clamp(parsedValue, ctx2));
+          const value = formatValue(ctx2, clampValue(parsedValue, ctx2.min, ctx2.max));
           set.value(ctx2, value);
         },
         setValue(ctx2, evt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,12 @@
   },
   "dependencies": {
     "@internationalized/number": "3.6.0",
-    "@zag-js/anatomy": "0.80.0",
-    "@zag-js/core": "0.80.0",
-    "@zag-js/dom-event": "0.80.0",
-    "@zag-js/dom-query": "0.80.0",
-    "@zag-js/form-utils": "0.80.0",
-    "@zag-js/number-utils": "0.80.0",
-    "@zag-js/types": "0.80.0",
-    "@zag-js/utils": "0.80.0"
+    "@zag-js/anatomy": "0.81.0",
+    "@zag-js/core": "0.81.0",
+    "@zag-js/dom-query": "0.81.0",
+    "@zag-js/form-utils": "0.81.0",
+    "@zag-js/types": "0.81.0",
+    "@zag-js/utils": "0.81.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"