Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@zag-js/number-input

Package Overview
Dependencies
Maintainers
1
Versions
1034
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/number-input - npm Package Compare versions

Comparing version 0.0.0-dev-20220416152643 to 0.0.0-dev-20220417135151

2

dist/index.d.ts
export { connect } from "./number-input.connect";
export { machine } from "./number-input.machine";
export type { MachineContext, MachineState } from "./number-input.types";
export type { UserDefinedContext as Context } from "./number-input.types";
//# sourceMappingURL=index.d.ts.map

744

dist/index.js
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {

@@ -190,21 +207,21 @@ for (var name in all)

var __defProp2 = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __defProps2 = Object.defineProperties;
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
var __pow = Math.pow;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues2 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp2.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
__defNormalProp2(a, prop, b[prop]);
if (__getOwnPropSymbols2)
for (var prop of __getOwnPropSymbols2(b)) {
if (__propIsEnum2.call(b, prop))
__defNormalProp2(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
var nf = new Intl.NumberFormat("en-US", { style: "decimal" });

@@ -253,3 +270,3 @@ function formatter(n) {

function roundToPrecision(v, o) {
return round(v, getMaxPrecision(__spreadProps(__spreadValues({}, o), { value: v })));
return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
}

@@ -607,378 +624,381 @@ function isAtMax(v, o) {

var { not, and } = import_core.guards;
var machine = (0, import_core.createMachine)({
id: "number-input",
initial: "unknown",
context: {
uid: "",
dir: "ltr",
focusInputOnChange: true,
clampValueOnBlur: true,
allowOverflow: false,
inputMode: "decimal",
pattern: "[0-9]*(.[0-9]+)?",
hint: null,
value: "",
step: 1,
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
precision: 0,
inputSelection: null,
scrubberCursorPoint: null,
invalid: false,
messages: {
incrementLabel: "increment value",
decrementLabel: "decrease value"
}
},
computed: {
isRtl: (ctx) => ctx.dir === "rtl",
valueAsNumber: (ctx) => valueOf(ctx.value),
isAtMin: (ctx) => isAtMin(ctx.value, ctx),
isAtMax: (ctx) => isAtMax(ctx.value, ctx),
isOutOfRange: (ctx) => !isWithinRange(ctx.value, ctx),
canIncrement: (ctx) => ctx.allowOverflow || !ctx.isAtMax,
canDecrement: (ctx) => ctx.allowOverflow || !ctx.isAtMin,
valueText: (ctx) => {
var _a, _b;
return (_b = (_a = ctx.messages).valueText) == null ? void 0 : _b.call(_a, ctx.value);
function machine(ctx = {}) {
return (0, import_core.createMachine)({
id: "number-input",
initial: "unknown",
context: __spreadProps(__spreadValues({
uid: "",
dir: "ltr",
focusInputOnChange: true,
clampValueOnBlur: true,
allowOverflow: false,
inputMode: "decimal",
pattern: "[0-9]*(.[0-9]+)?",
hint: null,
value: "",
step: 1,
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
precision: 0,
inputSelection: null,
scrubberCursorPoint: null,
invalid: false
}, ctx), {
messages: __spreadValues({
incrementLabel: "increment value",
decrementLabel: "decrease value"
}, ctx.messages)
}),
computed: {
isRtl: (ctx2) => ctx2.dir === "rtl",
valueAsNumber: (ctx2) => valueOf(ctx2.value),
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
valueText: (ctx2) => {
var _a, _b;
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
},
formattedValue: (ctx2) => {
var _a, _b;
return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
}
},
formattedValue: (ctx) => {
var _a, _b;
return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, ctx.value).toString()) != null ? _b : ctx.value;
}
},
watch: {
value: ["invokeOnChange"],
isOutOfRange: ["invokeOnInvalid"]
},
entry: ["syncInputValue"],
on: {
SET_VALUE: {
actions: ["setValue", "setHintToSet"]
watch: {
value: ["invokeOnChange"],
isOutOfRange: ["invokeOnInvalid"]
},
INCREMENT: { actions: ["increment"] },
DECREMENT: { actions: ["decrement"] }
},
states: {
unknown: {
on: {
SETUP: {
target: "idle",
actions: "setupDocument"
}
}
entry: ["syncInputValue"],
on: {
SET_VALUE: {
actions: ["setValue", "setHintToSet"]
},
INCREMENT: { actions: ["increment"] },
DECREMENT: { actions: ["decrement"] }
},
idle: {
on: {
PRESS_DOWN: {
target: "before:spin",
actions: ["focusInput", "setHint"]
},
PRESS_DOWN_SCRUBBER: {
target: "scrubbing",
actions: ["focusInput", "setHint", "setCursorPoint"]
},
FOCUS: "focused"
}
},
focused: {
tags: ["focus"],
activities: "attachWheelListener",
on: {
PRESS_DOWN: {
target: "before:spin",
actions: ["focusInput", "setHint"]
},
PRESS_DOWN_SCRUBBER: {
target: "scrubbing",
actions: ["focusInput", "setHint", "setCursorPoint"]
},
ARROW_UP: {
actions: "increment"
},
ARROW_DOWN: {
actions: "decrement"
},
HOME: {
actions: "setToMin"
},
END: {
actions: "setToMax"
},
CHANGE: {
actions: ["setValue", "setSelectionRange", "setHint"]
},
BLUR: [
{
guard: "isInvalidExponential",
states: {
unknown: {
on: {
SETUP: {
target: "idle",
actions: ["clearValue", "clearHint"]
actions: "setupDocument"
}
}
},
idle: {
on: {
PRESS_DOWN: {
target: "before:spin",
actions: ["focusInput", "setHint"]
},
{
guard: and("clampOnBlur", not("isInRange")),
target: "idle",
actions: ["clampValue", "clearHint"]
PRESS_DOWN_SCRUBBER: {
target: "scrubbing",
actions: ["focusInput", "setHint", "setCursorPoint"]
},
{
actions: ["roundValue"]
}
]
}
},
"before:spin": {
tags: ["focus"],
entry: (0, import_core.choose)([
{ guard: "isIncrementHint", actions: "increment" },
{ guard: "isDecrementHint", actions: "decrement" }
]),
after: {
CHANGE_DELAY: {
target: "spinning",
guard: "isInRange"
FOCUS: "focused"
}
},
on: {
PRESS_UP: {
target: "focused",
actions: ["clearHint", "restoreSelection"]
focused: {
tags: ["focus"],
activities: "attachWheelListener",
on: {
PRESS_DOWN: {
target: "before:spin",
actions: ["focusInput", "setHint"]
},
PRESS_DOWN_SCRUBBER: {
target: "scrubbing",
actions: ["focusInput", "setHint", "setCursorPoint"]
},
ARROW_UP: {
actions: "increment"
},
ARROW_DOWN: {
actions: "decrement"
},
HOME: {
actions: "setToMin"
},
END: {
actions: "setToMax"
},
CHANGE: {
actions: ["setValue", "setSelectionRange", "setHint"]
},
BLUR: [
{
guard: "isInvalidExponential",
target: "idle",
actions: ["clearValue", "clearHint"]
},
{
guard: and("clampOnBlur", not("isInRange")),
target: "idle",
actions: ["clampValue", "clearHint"]
},
{
actions: ["roundValue"]
}
]
}
}
},
spinning: {
tags: ["focus"],
activities: "trackButtonDisabled",
every: [
{
delay: "CHANGE_INTERVAL",
guard: and(not("isAtMin"), "isIncrementHint"),
actions: "increment"
},
"before:spin": {
tags: ["focus"],
entry: (0, import_core.choose)([
{ guard: "isIncrementHint", actions: "increment" },
{ guard: "isDecrementHint", actions: "decrement" }
]),
after: {
CHANGE_DELAY: {
target: "spinning",
guard: "isInRange"
}
},
{
delay: "CHANGE_INTERVAL",
guard: and(not("isAtMax"), "isDecrementHint"),
actions: "decrement"
on: {
PRESS_UP: {
target: "focused",
actions: ["clearHint", "restoreSelection"]
}
}
],
on: {
PRESS_UP: {
target: "focused",
actions: ["clearHint", "restoreSelection"]
}
}
},
scrubbing: {
tags: ["focus"],
entry: ["addCustomCursor", "disableTextSelection"],
exit: ["removeCustomCursor", "restoreTextSelection"],
activities: ["activatePointerLock", "trackMousemove"],
on: {
POINTER_UP_SCRUBBER: {
target: "focused",
actions: ["clearCursorPoint"]
},
POINTER_MOVE_SCRUBBER: [
},
spinning: {
tags: ["focus"],
activities: "trackButtonDisabled",
every: [
{
guard: "isIncrementHint",
actions: ["increment", "setCursorPoint", "updateCursor"]
delay: "CHANGE_INTERVAL",
guard: and(not("isAtMin"), "isIncrementHint"),
actions: "increment"
},
{
guard: "isDecrementHint",
actions: ["decrement", "setCursorPoint", "updateCursor"]
delay: "CHANGE_INTERVAL",
guard: and(not("isAtMax"), "isDecrementHint"),
actions: "decrement"
}
]
],
on: {
PRESS_UP: {
target: "focused",
actions: ["clearHint", "restoreSelection"]
}
}
},
scrubbing: {
tags: ["focus"],
entry: ["addCustomCursor", "disableTextSelection"],
exit: ["removeCustomCursor", "restoreTextSelection"],
activities: ["activatePointerLock", "trackMousemove"],
on: {
POINTER_UP_SCRUBBER: {
target: "focused",
actions: ["clearCursorPoint"]
},
POINTER_MOVE_SCRUBBER: [
{
guard: "isIncrementHint",
actions: ["increment", "setCursorPoint", "updateCursor"]
},
{
guard: "isDecrementHint",
actions: ["decrement", "setCursorPoint", "updateCursor"]
}
]
}
}
}
}
}, {
delays: {
CHANGE_INTERVAL: 50,
CHANGE_DELAY: 300
},
guards: {
clampOnBlur: (ctx) => !!ctx.clampValueOnBlur,
isAtMin: (ctx) => ctx.isAtMin,
isAtMax: (ctx) => ctx.isAtMax,
isInRange: (ctx) => !ctx.isOutOfRange,
isDecrementHint: (ctx, evt) => {
var _a;
return ((_a = evt.hint) != null ? _a : ctx.hint) === "decrement";
}, {
delays: {
CHANGE_INTERVAL: 50,
CHANGE_DELAY: 300
},
isIncrementHint: (ctx, evt) => {
var _a;
return ((_a = evt.hint) != null ? _a : ctx.hint) === "increment";
guards: {
clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
isAtMin: (ctx2) => ctx2.isAtMin,
isAtMax: (ctx2) => ctx2.isAtMax,
isInRange: (ctx2) => !ctx2.isOutOfRange,
isDecrementHint: (ctx2, evt) => {
var _a;
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
},
isIncrementHint: (ctx2, evt) => {
var _a;
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
},
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
},
isInvalidExponential: (ctx) => ctx.value.toString().startsWith("e")
},
activities: {
trackButtonDisabled(ctx, _evt, { send }) {
let btnEl = null;
if (ctx.hint === "increment") {
btnEl = dom.getIncButtonEl(ctx);
}
if (ctx.hint === "decrement") {
btnEl = dom.getDecButtonEl(ctx);
}
return observeAttributes(btnEl, "disabled", function onDisable() {
send("PRESS_UP");
});
},
attachWheelListener(ctx) {
const cleanups = [];
cleanups.push(nextTick(() => {
const input = dom.getInputEl(ctx);
if (!input)
activities: {
trackButtonDisabled(ctx2, _evt, { send }) {
let btnEl = null;
if (ctx2.hint === "increment") {
btnEl = dom.getIncButtonEl(ctx2);
}
if (ctx2.hint === "decrement") {
btnEl = dom.getDecButtonEl(ctx2);
}
return observeAttributes(btnEl, "disabled", function onDisable() {
send("PRESS_UP");
});
},
attachWheelListener(ctx2) {
const cleanups = [];
cleanups.push(nextTick(() => {
const input = dom.getInputEl(ctx2);
if (!input)
return;
function onWheel(event) {
const isInputFocused = dom.getDoc(ctx2).activeElement === input;
if (!ctx2.allowMouseWheel || !isInputFocused)
return;
event.preventDefault();
const dir = Math.sign(event.deltaY) * -1;
if (dir === 1)
ctx2.value = utils.increment(ctx2);
else if (dir === -1)
ctx2.value = utils.decrement(ctx2);
}
cleanups.push(addDomEvent(input, "wheel", onWheel, { passive: false }));
}));
return () => cleanups.forEach((c) => c());
},
activatePointerLock(ctx2) {
if (isSafari() || !supportsPointerEvent())
return;
function onWheel(event) {
const isInputFocused = dom.getDoc(ctx).activeElement === input;
if (!ctx.allowMouseWheel || !isInputFocused)
return requestPointerLock(dom.getDoc(ctx2));
},
trackMousemove(ctx2, _evt, { send }) {
const doc = dom.getDoc(ctx2);
function onMousemove(event) {
if (!ctx2.scrubberCursorPoint)
return;
event.preventDefault();
const dir = Math.sign(event.deltaY) * -1;
if (dir === 1)
ctx.value = utils.increment(ctx);
else if (dir === -1)
ctx.value = utils.decrement(ctx);
const value = dom.getMousementValue(ctx2, event);
if (!value.hint)
return;
send({ type: "POINTER_MOVE_SCRUBBER", hint: value.hint, point: value.point });
}
cleanups.push(addDomEvent(input, "wheel", onWheel, { passive: false }));
}));
return () => cleanups.forEach((c) => c());
function onMouseup() {
send("POINTER_UP_SCRUBBER");
}
return pipe2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
}
},
activatePointerLock(ctx) {
if (isSafari() || !supportsPointerEvent())
return;
return requestPointerLock(dom.getDoc(ctx));
},
trackMousemove(ctx, _evt, { send }) {
const doc = dom.getDoc(ctx);
function onMousemove(event) {
if (!ctx.scrubberCursorPoint)
actions: {
setupDocument: (ctx2, evt) => {
if (evt.doc)
ctx2.doc = (0, import_core.ref)(evt.doc);
ctx2.uid = evt.id;
},
focusInput(ctx2) {
if (!ctx2.focusInputOnChange)
return;
const value = dom.getMousementValue(ctx, event);
if (!value.hint)
const input = dom.getInputEl(ctx2);
nextTick(() => input == null ? void 0 : input.focus());
},
increment(ctx2, evt) {
ctx2.value = utils.increment(ctx2, evt.step);
},
decrement(ctx2, evt) {
ctx2.value = utils.decrement(ctx2, evt.step);
},
clampValue(ctx2) {
ctx2.value = utils.clamp(ctx2);
},
roundValue(ctx2) {
ctx2.value = utils.round(ctx2);
},
setValue(ctx2, evt) {
var _a, _b;
const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value));
},
clearValue(ctx2) {
ctx2.value = "";
},
setToMax(ctx2) {
ctx2.value = ctx2.max.toString();
},
setToMin(ctx2) {
ctx2.value = ctx2.min.toString();
},
setHint(ctx2, evt) {
ctx2.hint = evt.hint;
},
clearHint(ctx2) {
ctx2.hint = null;
},
setHintToSet(ctx2) {
ctx2.hint = "set";
},
setSelectionRange(ctx2, evt) {
ctx2.inputSelection = {
start: evt.target.selectionStart,
end: evt.target.selectionEnd
};
},
restoreSelection(ctx2) {
var _a, _b, _c;
const input = dom.getInputEl(ctx2);
if (!input || !ctx2.inputSelection)
return;
send({ type: "POINTER_MOVE_SCRUBBER", hint: value.hint, point: value.point });
input.selectionStart = (_b = ctx2.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
input.selectionEnd = (_c = ctx2.inputSelection.end) != null ? _c : input.selectionStart;
},
invokeOnChange(ctx2) {
var _a;
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value, valueAsNumber: ctx2.valueAsNumber });
},
invokeOnInvalid(ctx2) {
var _a;
if (!ctx2.isOutOfRange)
return;
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { reason, value: ctx2.formattedValue, valueAsNumber: ctx2.valueAsNumber });
},
syncInputValue(ctx2) {
const input = dom.getInputEl(ctx2);
if (!input || input.value == ctx2.value)
return;
const value = utils.parse(ctx2, input.value);
ctx2.value = utils.sanitize(ctx2, value);
},
setCursorPoint(ctx2, evt) {
ctx2.scrubberCursorPoint = evt.point;
},
clearCursorPoint(ctx2) {
ctx2.scrubberCursorPoint = null;
},
updateCursor(ctx2) {
const cursor = dom.getCursorEl(ctx2);
if (!cursor || !ctx2.scrubberCursorPoint)
return;
cursor.style.transform = `translate3d(${ctx2.scrubberCursorPoint.x}px, ${ctx2.scrubberCursorPoint.y}px, 0px)`;
},
addCustomCursor(ctx2) {
if (isSafari() || !supportsPointerEvent())
return;
dom.createVirtualCursor(ctx2);
},
removeCustomCursor(ctx2) {
if (isSafari() || !supportsPointerEvent())
return;
const doc = dom.getDoc(ctx2);
const el = doc.getElementById(dom.getCursorId(ctx2));
el == null ? void 0 : el.remove();
},
disableTextSelection(ctx2) {
const doc = dom.getDoc(ctx2);
doc.body.style.pointerEvents = "none";
doc.documentElement.style.userSelect = "none";
doc.documentElement.style.cursor = "ew-resize";
},
restoreTextSelection(ctx2) {
const doc = dom.getDoc(ctx2);
doc.body.style.pointerEvents = "";
doc.documentElement.style.userSelect = "";
doc.documentElement.style.cursor = "";
}
function onMouseup() {
send("POINTER_UP_SCRUBBER");
}
return pipe2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
}
},
actions: {
setupDocument: (ctx, evt) => {
if (evt.doc)
ctx.doc = (0, import_core.ref)(evt.doc);
ctx.uid = evt.id;
},
focusInput(ctx) {
if (!ctx.focusInputOnChange)
return;
const input = dom.getInputEl(ctx);
nextTick(() => input == null ? void 0 : input.focus());
},
increment(ctx, evt) {
ctx.value = utils.increment(ctx, evt.step);
},
decrement(ctx, evt) {
ctx.value = utils.decrement(ctx, evt.step);
},
clampValue(ctx) {
ctx.value = utils.clamp(ctx);
},
roundValue(ctx) {
ctx.value = utils.round(ctx);
},
setValue(ctx, evt) {
var _a, _b;
const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
ctx.value = utils.sanitize(ctx, utils.parse(ctx, value));
},
clearValue(ctx) {
ctx.value = "";
},
setToMax(ctx) {
ctx.value = ctx.max.toString();
},
setToMin(ctx) {
ctx.value = ctx.min.toString();
},
setHint(ctx, evt) {
ctx.hint = evt.hint;
},
clearHint(ctx) {
ctx.hint = null;
},
setHintToSet(ctx) {
ctx.hint = "set";
},
setSelectionRange(ctx, evt) {
ctx.inputSelection = {
start: evt.target.selectionStart,
end: evt.target.selectionEnd
};
},
restoreSelection(ctx) {
var _a, _b, _c;
const input = dom.getInputEl(ctx);
if (!input || !ctx.inputSelection)
return;
input.selectionStart = (_b = ctx.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
input.selectionEnd = (_c = ctx.inputSelection.end) != null ? _c : input.selectionStart;
},
invokeOnChange(ctx) {
var _a;
(_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value, valueAsNumber: ctx.valueAsNumber });
},
invokeOnInvalid(ctx) {
var _a;
if (!ctx.isOutOfRange)
return;
const reason = ctx.valueAsNumber > ctx.max ? "rangeOverflow" : "rangeUnderflow";
(_a = ctx.onInvalid) == null ? void 0 : _a.call(ctx, { reason, value: ctx.formattedValue, valueAsNumber: ctx.valueAsNumber });
},
syncInputValue(ctx) {
const input = dom.getInputEl(ctx);
if (!input || input.value == ctx.value)
return;
const value = utils.parse(ctx, input.value);
ctx.value = utils.sanitize(ctx, value);
},
setCursorPoint(ctx, evt) {
ctx.scrubberCursorPoint = evt.point;
},
clearCursorPoint(ctx) {
ctx.scrubberCursorPoint = null;
},
updateCursor(ctx) {
const cursor = dom.getCursorEl(ctx);
if (!cursor || !ctx.scrubberCursorPoint)
return;
cursor.style.transform = `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)`;
},
addCustomCursor(ctx) {
if (isSafari() || !supportsPointerEvent())
return;
dom.createVirtualCursor(ctx);
},
removeCustomCursor(ctx) {
if (isSafari() || !supportsPointerEvent())
return;
const doc = dom.getDoc(ctx);
const el = doc.getElementById(dom.getCursorId(ctx));
el == null ? void 0 : el.remove();
},
disableTextSelection(ctx) {
const doc = dom.getDoc(ctx);
doc.body.style.pointerEvents = "none";
doc.documentElement.style.userSelect = "none";
doc.documentElement.style.cursor = "ew-resize";
},
restoreTextSelection(ctx) {
const doc = dom.getDoc(ctx);
doc.body.style.pointerEvents = "";
doc.documentElement.style.userSelect = "";
doc.documentElement.style.cursor = "";
}
}
});
});
}
//# sourceMappingURL=index.js.map

4

dist/number-input.machine.d.ts

@@ -1,3 +0,3 @@

import type { MachineContext, MachineState } from "./number-input.types";
export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types";
export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
//# sourceMappingURL=number-input.machine.d.ts.map

83

dist/number-input.types.d.ts

@@ -1,7 +0,7 @@

import { StateMachine as S } from "@zag-js/core";
import { Context } from "@zag-js/types";
import { Point } from "@zag-js/rect-utils";
import type { StateMachine as S } from "@zag-js/core";
import type { Point } from "@zag-js/rect-utils";
import type { Context, DirectionProperty } from "@zag-js/types";
declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
declare type InputSelection = Record<"start" | "end", number | null>;
declare type IdMap = Partial<{
declare type ElementIds = Partial<{
root: string;

@@ -29,7 +29,7 @@ label: string;

};
export declare type MachineContext = Context<{
declare type PublicContext = DirectionProperty & {
/**
* The ids of the elements in the number input. Useful for composition.
*/
ids?: IdMap;
ids?: ElementIds;
/**

@@ -67,6 +67,2 @@ * The name attribute of the number input. Useful for form submission.

/**
* @computed the value of the input as a number
*/
readonly valueAsNumber: number;
/**
* The minimum value of the number input

@@ -120,6 +116,2 @@ */

/**
* @internal The hint that determines if we're incrementing or decrementing
*/
hint: "increment" | "decrement" | "set" | null;
/**
* Hints at the type of data that might be entered by the user. It also determines

@@ -149,39 +141,64 @@ * the type of keyboard shown to the user on mobile devices

}) => void;
};
export declare type UserDefinedContext = Partial<PublicContext>;
declare type ComputedContext = Readonly<{
/**
* @internal The selection range of the input
* @computed
* The value of the input as a number
*/
inputSelection: InputSelection | null;
valueAsNumber: number;
/**
* @computed Whehter the value is at the min
* @computed
* Whether the value is at the min
*/
readonly isAtMin: boolean;
isAtMin: boolean;
/**
* @computed Whether the value is at the max
* @computed
* Whether the value is at the max
*/
readonly isAtMax: boolean;
isAtMax: boolean;
/**
* @computed Whether the value is out of the min/max range
* @computed
* Whether the value is out of the min/max range
*/
readonly isOutOfRange: boolean;
isOutOfRange: boolean;
/**
* @computed Whether the increment button is enabled
* @computed
* Whether the increment button is enabled
*/
readonly canIncrement: boolean;
canIncrement: boolean;
/**
* @computed Whether the decrement button is enabled
* @computed
* Whether the decrement button is enabled
*/
readonly canDecrement: boolean;
canDecrement: boolean;
/**
* @computed The `aria-valuetext` attribute of the input
* @computed
* The `aria-valuetext` attribute of the input
*/
readonly valueText: string | undefined;
valueText: string | undefined;
/**
* @computed The formatted value of the input
* @computed
* The formatted value of the input
*/
readonly formattedValue: string;
formattedValue: string;
/**
* @computed Whether the writing direction is RTL
* @computed
* Whether the writing direction is RTL
*/
readonly isRtl: boolean;
isRtl: boolean;
}>;
declare type PrivateContext = Context<{
/**
* @internal
* The hint that determines if we're incrementing or decrementing
*/
hint: "increment" | "decrement" | "set" | null;
/**
* @internal
* The selection range of the input
*/
inputSelection: InputSelection | null;
}>;
export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
export declare type MachineState = {

@@ -192,4 +209,4 @@ value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";

export declare type State = S.State<MachineContext, MachineState>;
export declare type Send = (event: S.Event<S.AnyEventObject>) => void;
export declare type Send = S.Send<S.AnyEventObject>;
export {};
//# sourceMappingURL=number-input.types.d.ts.map

14

package.json
{
"name": "@zag-js/number-input",
"version": "0.0.0-dev-20220416152643",
"version": "0.0.0-dev-20220417135151",
"description": "Core logic for the number-input widget implemented as a state machine",

@@ -32,8 +32,8 @@ "keywords": [

"dependencies": {
"@zag-js/core": "^0.0.0-dev-20220416152643",
"@zag-js/dom-utils": "^0.0.0-dev-20220416152643",
"@zag-js/number-utils": "^0.0.0-dev-20220416152643",
"@zag-js/rect-utils": "^0.0.0-dev-20220416152643",
"@zag-js/types": "^0.0.0-dev-20220416152643",
"@zag-js/utils": "^0.0.0-dev-20220416152643"
"@zag-js/core": "^0.0.0-dev-20220417135151",
"@zag-js/dom-utils": "^0.0.0-dev-20220417135151",
"@zag-js/number-utils": "^0.0.0-dev-20220417135151",
"@zag-js/rect-utils": "^0.0.0-dev-20220417135151",
"@zag-js/types": "^0.0.0-dev-20220417135151",
"@zag-js/utils": "^0.0.0-dev-20220417135151"
},

@@ -40,0 +40,0 @@ "scripts": {

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

dist/number-input.machine.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc