@zag-js/number-input 1.41.1 → 1.42.0

package/dist/number-input.connect.js

@@ -181,7 +181,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if ((0, import_dom_query.isComposingEvent)(event)) return;
-          const step = (0, import_dom_query.getEventStep)(event) * prop("step");
+          const step = (0, import_dom_query.getEventStepValue)(event, {
+            step: prop("step"),
+            largeStep: prop("largeStep"),
+            smallStep: prop("smallStep")
+          });
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });

package/dist/number-input.connect.mjs

@@ -3,7 +3,7 @@ import {
   ariaAttr,
   dataAttr,
   getEventPoint,
-  getEventStep,
+  getEventStepValue,
   getWindow,
   isComposingEvent,
   isLeftClick,
@@ -158,7 +158,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if (isComposingEvent(event)) return;
-          const step = getEventStep(event) * prop("step");
+          const step = getEventStepValue(event, {
+            step: prop("step"),
+            largeStep: prop("largeStep"),
+            smallStep: prop("smallStep")
+          });
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });

package/dist/number-input.machine.js

@@ -58,6 +58,8 @@ var machine = createMachine({
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
       ...props,
+      largeStep: props.largeStep ?? 10 * step,
+      smallStep: props.smallStep ?? step / 10,
       translations: {
         incrementLabel: "increment value",
         decrementLabel: "decrease value",
@@ -373,7 +375,7 @@ var machine = createMachine({
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = (0, import_number_input.parseValue)(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input.parseValue)(event.value, { computed, prop });
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },

package/dist/number-input.machine.mjs

@@ -40,6 +40,8 @@ var machine = createMachine({
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
       ...props,
+      largeStep: props.largeStep ?? 10 * step,
+      smallStep: props.smallStep ?? step / 10,
       translations: {
         incrementLabel: "increment value",
         decrementLabel: "decrease value",
@@ -355,7 +357,7 @@ var machine = createMachine({
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = parseValue(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : parseValue(event.value, { computed, prop });
         if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },

package/dist/number-input.props.js

@@ -40,6 +40,7 @@ var props = (0, import_types.createProps)()([
   "ids",
   "inputMode",
   "invalid",
+  "largeStep",
   "locale",
   "max",
   "min",
@@ -51,6 +52,7 @@ var props = (0, import_types.createProps)()([
   "pattern",
   "required",
   "readOnly",
+  "smallStep",
   "spinOnPress",
   "step",
   "translations",

package/dist/number-input.props.mjs

@@ -15,6 +15,7 @@ var props = createProps()([
   "ids",
   "inputMode",
   "invalid",
+  "largeStep",
   "locale",
   "max",
   "min",
@@ -26,6 +27,7 @@ var props = createProps()([
   "pattern",
   "required",
   "readOnly",
+  "smallStep",
   "spinOnPress",
   "step",
   "translations",

package/dist/number-input.types.d.mts

@@ -96,6 +96,16 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
+    /**
+     * The amount to increment or decrement the value by when the `Shift` key is held.
+     * @default 10 * step
+     */
+    largeStep?: number | undefined;
+    /**
+     * The amount to increment or decrement the value by when the `Alt` key is held.
+     * @default step / 10
+     */
+    smallStep?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -151,7 +161,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "step" | "translations";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number

package/dist/number-input.types.d.ts

@@ -96,6 +96,16 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
+    /**
+     * The amount to increment or decrement the value by when the `Shift` key is held.
+     * @default 10 * step
+     */
+    largeStep?: number | undefined;
+    /**
+     * The amount to increment or decrement the value by when the `Alt` key is held.
+     * @default step / 10
+     */
+    smallStep?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -151,7 +161,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "step" | "translations";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "1.41.1",
+  "version": "1.42.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/number-input",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/number-input"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@internationalized/number": "3.6.6",
-    "@zag-js/anatomy": "1.41.1",
-    "@zag-js/core": "1.41.1",
-    "@zag-js/dom-query": "1.41.1",
-    "@zag-js/types": "1.41.1",
-    "@zag-js/utils": "1.41.1"
+    "@internationalized/number": "3.6.7",
+    "@zag-js/anatomy": "1.42.0",
+    "@zag-js/core": "1.42.0",
+    "@zag-js/dom-query": "1.42.0",
+    "@zag-js/types": "1.42.0",
+    "@zag-js/utils": "1.42.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"