@zag-js/number-input 0.2.6 → 0.2.7

package/dist/number-input.machine.mjs

@@ -0,0 +1,9 @@
+import {
+  machine
+} from "./chunk-7E3ZO263.mjs";
+import "./chunk-2SIS62IB.mjs";
+import "./chunk-GWZPUXGU.mjs";
+import "./chunk-DDNK5RLW.mjs";
+export {
+  machine
+};

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

@@ -0,0 +1,217 @@
+import { StateMachine } from '@zag-js/core';
+import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
+
+type ValidityState = "rangeUnderflow" | "rangeOverflow";
+type ElementIds = Partial<{
+    root: string;
+    label: string;
+    input: string;
+    incrementTrigger: string;
+    decrementTrigger: string;
+    scrubber: string;
+}>;
+type IntlTranslations = {
+    /**
+     * Function that returns the human-readable value.
+     * It is used to set the `aria-valuetext` property of the input
+     */
+    valueText?: (value: string) => string;
+    /**
+     * The label foe the increment button
+     */
+    incrementLabel: string;
+    /**
+     * The label for the decrement button
+     */
+    decrementLabel: string;
+};
+type Value = {
+    value: string;
+    valueAsNumber: number;
+};
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the number input. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The name attribute of the number input. Useful for form submission.
+     */
+    name?: string;
+    /**
+     * The associate form of the input element.
+     */
+    form?: string;
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the number input is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the number input value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * The pattern used to check the <input> element's value against
+     *
+     * @default
+     * "[0-9]*(.[0-9]+)?"
+     */
+    pattern: string;
+    /**
+     * The value of the input
+     */
+    value: string;
+    /**
+     * The minimum value of the number input
+     */
+    min: number;
+    /**
+     * The maximum value of the number input
+     */
+    max: number;
+    /**
+     * The amount to increment or decrement the value by
+     */
+    step: number;
+    /**
+     * Whether to allow mouse wheel to change the value
+     */
+    allowMouseWheel?: boolean;
+    /**
+     * Whether to allow the value overflow the min/max range
+     * @default true
+     */
+    allowOverflow: boolean;
+    /**
+     * Whether the pressed key should be allowed in the input.
+     * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
+     */
+    validateCharacter?: (char: string) => boolean;
+    /**
+     * Whether to clamp the value when the input loses focus (blur)
+     * @default true
+     */
+    clampValueOnBlur: boolean;
+    /**
+     * Whether to focus input when the value changes
+     * @default true
+     */
+    focusInputOnChange: boolean;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations: IntlTranslations;
+    /**
+     * If using a custom display format, this converts the custom format to a format `parseFloat` understands.
+     */
+    parse?: (value: string) => string;
+    /**
+     * If using a custom display format, this converts the default format to the custom format.
+     */
+    format?: (value: string) => string | number;
+    /**
+     * Hints at the type of data that might be entered by the user. It also determines
+     * the type of keyboard shown to the user on mobile devices
+     * @default "decimal"
+     */
+    inputMode: "text" | "tel" | "numeric" | "decimal";
+    /**
+     * Function invoked when the value changes
+     */
+    onChange?: (details: Value) => void;
+    /**
+     * Function invoked when the value overflows or underflows the min/max range
+     */
+    onInvalid?: (details: Value & {
+        reason: ValidityState;
+    }) => void;
+    /**
+     * Function invoked when the number input is focused
+     */
+    onFocus?: (details: Value & {
+        srcElement: HTMLElement | null;
+    }) => void;
+    /**
+     * The value of the input when it is blurred
+     */
+    onBlur?: (details: Value) => void;
+    /**
+     * The minimum number of fraction digits to use. Possible values are from 0 to 20
+     */
+    minFractionDigits?: number;
+    /**
+     * The maximum number of fraction digits to use. Possible values are from 0 to 20;
+     */
+    maxFractionDigits?: number;
+    /**
+     * Whether to spin the value when the increment/decrement button is pressed
+     */
+    spinOnPress?: boolean;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * The value of the input as a number
+     */
+    valueAsNumber: number;
+    /**
+     * @computed
+     * Whether the value is at the min
+     */
+    isAtMin: boolean;
+    /**
+     * @computed
+     * Whether the value is at the max
+     */
+    isAtMax: boolean;
+    /**
+     * @computed
+     * Whether the value is out of the min/max range
+     */
+    isOutOfRange: boolean;
+    /**
+     * @computed
+     * Whether the value is empty
+     */
+    isValueEmpty: boolean;
+    /**
+     * @computed
+     * Whether the increment button is enabled
+     */
+    canIncrement: boolean;
+    /**
+     * @computed
+     * Whether the decrement button is enabled
+     */
+    canDecrement: boolean;
+    /**
+     * @computed
+     * The `aria-valuetext` attribute of the input
+     */
+    valueText: string | undefined;
+    /**
+     * @computed
+     * The formatted value of the input
+     */
+    formattedValue: string;
+    /**
+     * @computed
+     * Whether the writing direction is RTL
+     */
+    isRtl: boolean;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    tags: "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+export { MachineContext, MachineState, Send, State, UserDefinedContext };

package/dist/number-input.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var number_input_types_exports = {};
+module.exports = __toCommonJS(number_input_types_exports);

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

@@ -0,0 +1,17 @@
+import { JSX } from '@zag-js/types';
+import { MachineContext } from './number-input.types.js';
+import '@zag-js/core';
+
+declare const utils: {
+    isValidNumericEvent: (ctx: MachineContext, event: JSX.KeyboardEvent) => boolean;
+    isFloatingPoint: (v: string) => boolean;
+    sanitize: (ctx: MachineContext, value: string) => string;
+    increment: (ctx: MachineContext, step?: number) => string;
+    decrement: (ctx: MachineContext, step?: number) => string;
+    clamp: (ctx: MachineContext) => string;
+    parse: (ctx: MachineContext, value: string) => string;
+    format: (ctx: MachineContext, value: string | number) => string | number;
+    round: (ctx: MachineContext) => string;
+};
+
+export { utils };

package/dist/number-input.utils.js

@@ -0,0 +1,116 @@
+"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.utils.ts
+var number_input_utils_exports = {};
+__export(number_input_utils_exports, {
+  utils: () => utils
+});
+module.exports = __toCommonJS(number_input_utils_exports);
+
+// ../../utilities/dom/src/event.ts
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
+// ../../utilities/number/src/number.ts
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function formatDecimal(v, o) {
+  return new Intl.NumberFormat("en-US", {
+    useGrouping: false,
+    style: "decimal",
+    minimumFractionDigits: o.minFractionDigits,
+    maximumFractionDigits: o.maxFractionDigits
+  }).format(valueOf(v));
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+
+// src/number-input.utils.ts
+var utils = {
+  isValidNumericEvent: (ctx, event) => {
+    var _a, _b;
+    if (event.key == null)
+      return true;
+    const isModifier = isModifiedEvent(event);
+    const isSingleKey = event.key.length === 1;
+    if (isModifier || !isSingleKey)
+      return true;
+    return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
+  },
+  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
+  sanitize: (ctx, value) => {
+    var _a;
+    return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
+  },
+  increment: (ctx, step) => {
+    const value = increment(ctx.value, step != null ? step : ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  decrement: (ctx, step) => {
+    const value = decrement(ctx.value, step != null ? step : ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  clamp: (ctx) => {
+    return formatDecimal(clamp(ctx.value, ctx), ctx);
+  },
+  parse: (ctx, value) => {
+    var _a, _b;
+    return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
+  },
+  format: (ctx, value) => {
+    var _a, _b;
+    const _val = value.toString();
+    return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
+  },
+  round: (ctx) => {
+    return formatDecimal(ctx.value, ctx);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  utils
+});

package/dist/number-input.utils.mjs

@@ -0,0 +1,7 @@
+import {
+  utils
+} from "./chunk-GWZPUXGU.mjs";
+import "./chunk-DDNK5RLW.mjs";
+export {
+  utils
+};

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Core logic for the number-input widget implemented as a state machine",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "machine",
@@ -29,20 +26,33 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.1.2",
-    "@zag-js/core": "0.2.3",
-    "@zag-js/types": "0.3.1"
+    "@zag-js/anatomy": "0.1.3",
+    "@zag-js/core": "0.2.4",
+    "@zag-js/types": "0.3.2"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.2.1",
-    "@zag-js/form-utils": "0.2.2",
-    "@zag-js/number-utils": "0.2.1",
-    "@zag-js/utils": "0.3.1"
+    "clean-package": "2.2.0",
+    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/form-utils": "0.2.3",
+    "@zag-js/number-utils": "0.2.2",
+    "@zag-js/utils": "0.3.2"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",