@zag-js/number-input 0.0.0-dev-20220704151659 → 0.0.0-dev-20220707125149

package/dist/index.js

@@ -50,10 +50,39 @@ var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
 var MAX_Z_INDEX = 2147483647;
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
+var isLeftClick = (v) => v.button === 0;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function observeAttributes(node, attributes, fn) {
   if (!node)
     return;
@@ -69,19 +98,6 @@ function observeAttributes(node, attributes, fn) {
   obs.observe(node, { attributes: true, attributeFilter: attrs });
   return () => obs.disconnect();
 }
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
-  });
-};
 var fallback = {
   pageX: 0,
   pageY: 0,
@@ -224,29 +240,6 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/core/dist/index.mjs
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var vn = (v) => isDom() && v.test(navigator.vendor);
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var isLeftClick = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-var callAll2 = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
-  });
-};
-
 // src/number-input.dom.ts
 var dom = {
   getDoc: (ctx) => {
@@ -383,12 +376,14 @@ function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
   const isDisabled = !!state.context.disabled;
+  const isValueEmpty = state.context.isValueEmpty;
   const isIncrementDisabled = isDisabled || !state.context.canIncrement;
   const isDecrementDisabled = isDisabled || !state.context.canDecrement;
   const messages = state.context.messages;
   return {
     isFocused,
     isInvalid,
+    isValueEmpty,
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
@@ -568,6 +563,15 @@ function connect(state, send, normalize) {
 
 // src/number-input.machine.ts
 var import_core = require("@zag-js/core");
+
+// ../../utilities/core/dist/index.mjs
+var callAll2 = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// src/number-input.machine.ts
 var { not, and } = import_core.guards;
 function machine(ctx = {}) {
   return (0, import_core.createMachine)({
@@ -600,6 +604,7 @@ function machine(ctx = {}) {
       isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
       isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
       isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+      isValueEmpty: (ctx2) => ctx2.value === "",
       canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
       canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
       valueText: (ctx2) => {
@@ -686,7 +691,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -776,6 +781,7 @@ function machine(ctx = {}) {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
       },
+      isEmptyValue: (ctx2) => ctx2.isValueEmpty,
       isIncrementHint: (ctx2, evt) => {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";

package/dist/index.mjs

@@ -26,10 +26,39 @@ var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
 var MAX_Z_INDEX = 2147483647;
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
+var isLeftClick = (v) => v.button === 0;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function observeAttributes(node, attributes, fn) {
   if (!node)
     return;
@@ -45,19 +74,6 @@ function observeAttributes(node, attributes, fn) {
   obs.observe(node, { attributes: true, attributeFilter: attrs });
   return () => obs.disconnect();
 }
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
-  });
-};
 var fallback = {
   pageX: 0,
   pageY: 0,
@@ -200,29 +216,6 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/core/dist/index.mjs
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var vn = (v) => isDom() && v.test(navigator.vendor);
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var isLeftClick = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-var callAll2 = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
-  });
-};
-
 // src/number-input.dom.ts
 var dom = {
   getDoc: (ctx) => {
@@ -359,12 +352,14 @@ function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
   const isDisabled = !!state.context.disabled;
+  const isValueEmpty = state.context.isValueEmpty;
   const isIncrementDisabled = isDisabled || !state.context.canIncrement;
   const isDecrementDisabled = isDisabled || !state.context.canDecrement;
   const messages = state.context.messages;
   return {
     isFocused,
     isInvalid,
+    isValueEmpty,
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
@@ -544,6 +539,15 @@ function connect(state, send, normalize) {
 
 // src/number-input.machine.ts
 import { choose, createMachine, guards, ref } from "@zag-js/core";
+
+// ../../utilities/core/dist/index.mjs
+var callAll2 = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// src/number-input.machine.ts
 var { not, and } = guards;
 function machine(ctx = {}) {
   return createMachine({
@@ -576,6 +580,7 @@ function machine(ctx = {}) {
       isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
       isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
       isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+      isValueEmpty: (ctx2) => ctx2.value === "",
       canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
       canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
       valueText: (ctx2) => {
@@ -662,7 +667,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -752,6 +757,7 @@ function machine(ctx = {}) {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
       },
+      isEmptyValue: (ctx2) => ctx2.isValueEmpty,
       isIncrementHint: (ctx2, evt) => {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";

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

@@ -3,6 +3,7 @@ import type { Send, State } from "./number-input.types";
 export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     isFocused: boolean;
     isInvalid: boolean;
+    isValueEmpty: boolean;
     value: string;
     valueAsNumber: number;
     setValue(value: string | number): void;

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

@@ -149,6 +149,11 @@ declare type ComputedContext = Readonly<{
      * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.0.0-dev-20220704151659",
+  "version": "0.0.0-dev-20220707125149",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,10 +29,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.0.0-dev-20220704151659",
-    "@zag-js/dom-utils": "0.0.0-dev-20220704151659",
+    "@zag-js/core": "0.0.0-dev-20220707125149",
+    "@zag-js/dom-utils": "0.0.0-dev-20220707125149",
     "@zag-js/number-utils": "0.1.2",
-    "@zag-js/types": "0.0.0-dev-20220704151659",
+    "@zag-js/types": "0.0.0-dev-20220707125149",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {