@zag-js/number-input 1.43.1 → 1.43.2

package/dist/number-input.connect.js

@@ -38,6 +38,7 @@ var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var import_number_input = require("./number-input.anatomy.js");
 var dom = __toESM(require("./number-input.dom.js"));
+var import_number_input2 = require("./number-input.translations.js");
 function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
   const focused = state.hasTag("focus");
@@ -49,7 +50,7 @@ function connect(service, normalize) {
   const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
-  const translations = prop("translations");
+  const translations = (0, import_utils.mergeWithDefault)(import_number_input2.defaultTranslations, prop("translations"));
   return {
     focused,
     invalid,

package/dist/number-input.connect.mjs

@@ -11,10 +11,11 @@ import {
   raf,
   setCaretToEnd
 } from "@zag-js/dom-query";
-import { roundToDpr } from "@zag-js/utils";
+import { mergeWithDefault, roundToDpr } from "@zag-js/utils";
 import { recordCursor } from "./cursor.mjs";
 import { parts } from "./number-input.anatomy.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
   const focused = state.hasTag("focus");
@@ -26,7 +27,7 @@ function connect(service, normalize) {
   const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
-  const translations = prop("translations");
+  const translations = mergeWithDefault(defaultTranslations, prop("translations"));
   return {
     focused,
     invalid,

package/dist/number-input.machine.js

@@ -38,12 +38,13 @@ var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var dom = __toESM(require("./number-input.dom.js"));
-var import_number_input = require("./number-input.utils.js");
+var import_number_input = require("./number-input.translations.js");
+var import_number_input2 = require("./number-input.utils.js");
 var { choose, guards, createMachine } = (0, import_core.setup)();
 var { not, and } = guards;
 var machine = createMachine({
   props({ props }) {
-    const step = (0, import_number_input.getDefaultStep)(props.step, props.formatOptions);
+    const step = (0, import_number_input2.getDefaultStep)(props.step, props.formatOptions);
     return {
       dir: "ltr",
       locale: "en-US",
@@ -59,12 +60,7 @@ var machine = createMachine({
       spinOnPress: true,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
-      smallStep: props.smallStep ?? step / 10,
-      translations: {
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value",
-        ...props.translations
-      }
+      smallStep: props.smallStep ?? step / 10
     };
   },
   initialState() {
@@ -77,7 +73,7 @@ var machine = createMachine({
         value: prop("value"),
         onChange(value) {
           const computed = getComputed();
-          const valueAsNumber = (0, import_number_input.parseValue)(value, { computed, prop });
+          const valueAsNumber = (0, import_number_input2.parseValue)(value, { computed, prop });
           prop("onValueChange")?.({ value, valueAsNumber });
         }
       })),
@@ -93,8 +89,8 @@ var machine = createMachine({
   },
   computed: {
     isRtl: ({ prop }) => prop("dir") === "rtl",
-    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input.parseValue)(context.get("value"), { computed, prop }),
-    formattedValue: ({ computed, prop }) => (0, import_number_input.formatValue)(computed("valueAsNumber"), { computed, prop }),
+    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input2.parseValue)(context.get("value"), { computed, prop }),
+    formattedValue: ({ computed, prop }) => (0, import_number_input2.formatValue)(computed("valueAsNumber"), { computed, prop }),
     isAtMin: ({ computed, prop }) => (0, import_utils.isValueAtMin)(computed("valueAsNumber"), prop("min")),
     isAtMax: ({ computed, prop }) => (0, import_utils.isValueAtMax)(computed("valueAsNumber"), prop("max")),
     isOutOfRange: ({ computed, prop }) => !(0, import_utils.isValueWithinRange)(computed("valueAsNumber"), prop("min"), prop("max")),
@@ -102,14 +98,17 @@ var machine = createMachine({
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
     canIncrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMax"),
     canDecrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMin"),
-    valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
+    valueText: ({ prop, context }) => {
+      const translations = (0, import_utils.mergeWithDefault)(import_number_input.defaultTranslations, prop("translations"));
+      return translations.valueText?.(context.get("value"));
+    },
     formatter: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createFormatter)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createFormatter)(locale, formatOptions)
     ),
     parser: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createParser)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createParser)(locale, formatOptions)
     )
   },
   watch({ track, action, context, computed, prop }) {
@@ -363,21 +362,21 @@ var machine = createMachine({
       increment({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.incrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.decrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
         const nextValue = (0, import_utils.clampValue)(computed("valueAsNumber"), prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input.parseValue)(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input2.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 }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setValue({ context, event }) {
         const value = event.target?.value ?? event.value;
@@ -387,11 +386,11 @@ var machine = createMachine({
         context.set("value", "");
       },
       incrementToMax({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("max"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("max"), { computed, prop });
         context.set("value", value);
       },
       decrementToMin({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("min"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("min"), { computed, prop });
         context.set("value", value);
       },
       setHint({ context, event }) {

package/dist/number-input.machine.mjs

@@ -16,10 +16,12 @@ import {
   incrementValue,
   isValueAtMax,
   isValueAtMin,
-  isValueWithinRange
+  isValueWithinRange,
+  mergeWithDefault
 } from "@zag-js/utils";
 import { recordCursor, restoreCursor } from "./cursor.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 import { createFormatter, createParser, formatValue, getDefaultStep, parseValue } from "./number-input.utils.mjs";
 var { choose, guards, createMachine } = setup();
 var { not, and } = guards;
@@ -41,12 +43,7 @@ var machine = createMachine({
       spinOnPress: true,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
-      smallStep: props.smallStep ?? step / 10,
-      translations: {
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value",
-        ...props.translations
-      }
+      smallStep: props.smallStep ?? step / 10
     };
   },
   initialState() {
@@ -84,7 +81,10 @@ var machine = createMachine({
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
     canIncrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMax"),
     canDecrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMin"),
-    valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
+    valueText: ({ prop, context }) => {
+      const translations = mergeWithDefault(defaultTranslations, prop("translations"));
+      return translations.valueText?.(context.get("value"));
+    },
     formatter: memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
       ([locale, formatOptions]) => createFormatter(locale, formatOptions)

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

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.mjs';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

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

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.js';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

package/dist/number-input.translations.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.translations.ts
+var number_input_translations_exports = {};
+__export(number_input_translations_exports, {
+  defaultTranslations: () => defaultTranslations
+});
+module.exports = __toCommonJS(number_input_translations_exports);
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultTranslations
+});

package/dist/number-input.translations.mjs

@@ -0,0 +1,8 @@
+// src/number-input.translations.ts
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+export {
+  defaultTranslations
+};

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

@@ -1,6 +1,6 @@
 import { NumberParser } from '@internationalized/number';
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
+import { PropTypes, Partial, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
 
 interface ValueChangeDetails {
     value: string;
@@ -22,21 +22,21 @@ type ElementIds = Partial<{
     decrementTrigger: string;
     scrubber: string;
 }>;
-interface IntlTranslations {
+type IntlTranslations = Partial<{
     /**
      * Function that returns the human-readable value.
      * It is used to set the `aria-valuetext` property of the input
      */
-    valueText?: ((value: string) => string) | undefined;
+    valueText: (value: string) => string;
     /**
      * The label foe the increment button
      */
-    incrementLabel?: string | undefined;
+    incrementLabel: string;
     /**
      * The label for the decrement button
      */
-    decrementLabel?: string | undefined;
-}
+    decrementLabel: string;
+}>;
 interface NumberInputProps extends LocaleProperties, CommonProperties {
     /**
      * The ids of the elements in the number input. Useful for composition.
@@ -161,7 +161,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number

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

@@ -1,6 +1,6 @@
 import { NumberParser } from '@internationalized/number';
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
+import { PropTypes, Partial, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
 
 interface ValueChangeDetails {
     value: string;
@@ -22,21 +22,21 @@ type ElementIds = Partial<{
     decrementTrigger: string;
     scrubber: string;
 }>;
-interface IntlTranslations {
+type IntlTranslations = Partial<{
     /**
      * Function that returns the human-readable value.
      * It is used to set the `aria-valuetext` property of the input
      */
-    valueText?: ((value: string) => string) | undefined;
+    valueText: (value: string) => string;
     /**
      * The label foe the increment button
      */
-    incrementLabel?: string | undefined;
+    incrementLabel: string;
     /**
      * The label for the decrement button
      */
-    decrementLabel?: string | undefined;
-}
+    decrementLabel: string;
+}>;
 interface NumberInputProps extends LocaleProperties, CommonProperties {
     /**
      * The ids of the elements in the number input. Useful for composition.
@@ -161,7 +161,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "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.43.1",
+  "version": "1.43.2",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@internationalized/number": "3.6.7",
-    "@zag-js/anatomy": "1.43.1",
-    "@zag-js/core": "1.43.1",
-    "@zag-js/dom-query": "1.43.1",
-    "@zag-js/types": "1.43.1",
-    "@zag-js/utils": "1.43.1"
+    "@zag-js/anatomy": "1.43.2",
+    "@zag-js/core": "1.43.2",
+    "@zag-js/dom-query": "1.43.2",
+    "@zag-js/types": "1.43.2",
+    "@zag-js/utils": "1.43.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"