@zag-js/number-input 0.1.12 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,21 +29,23 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.8",
-    "@zag-js/types": "0.2.2"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.4"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.7",
-    "@zag-js/number-utils": "0.1.2",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/dom-utils": "0.1.10",
+    "@zag-js/form-utils": "0.1.0",
+    "@zag-js/number-utils": "0.1.3",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

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

@@ -1,23 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-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;
-    clearValue(): void;
-    increment(): void;
-    decrement(): void;
-    setToMax(): void;
-    setToMin(): void;
-    focus(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    groupProps: T["element"];
-    inputProps: T["input"];
-    decrementButtonProps: T["button"];
-    incrementButtonProps: T["button"];
-    scrubberProps: T["element"];
-};

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

@@ -1,39 +0,0 @@
-import type { MachineContext as Ctx } from "./number-input.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document | ShadowRoot;
-    getDoc: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => HTMLElement;
-    getById: <T_1 = HTMLElement>(ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }, id: string) => T_1;
-} & {
-    getRootId: (ctx: Ctx) => string;
-    getInputId: (ctx: Ctx) => string;
-    getIncButtonId: (ctx: Ctx) => string;
-    getDecButtonId: (ctx: Ctx) => string;
-    getScrubberId: (ctx: Ctx) => string;
-    getCursorId: (ctx: Ctx) => string;
-    getLabelId: (ctx: Ctx) => string;
-    getInputEl: (ctx: Ctx) => HTMLElement;
-    getIncButtonEl: (ctx: Ctx) => HTMLButtonElement;
-    getDecButtonEl: (ctx: Ctx) => HTMLButtonElement;
-    getScrubberEl: (ctx: Ctx) => HTMLElement;
-    getCursorEl: (ctx: Ctx) => HTMLElement;
-    getMousementValue(ctx: Ctx, event: MouseEvent): {
-        hint: string;
-        point: {
-            x: number;
-            y: number;
-        };
-    };
-    createVirtualCursor(ctx: Ctx): void;
-};

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

@@ -1,2 +0,0 @@
-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>;

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

@@ -1,212 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
-declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
-declare type ElementIds = Partial<{
-    root: string;
-    label: string;
-    input: string;
-    incBtn: string;
-    decBtn: string;
-    scrubber: string;
-}>;
-declare type IntlMessages = {
-    /**
-     * 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;
-};
-declare 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;
-    /**
-     * 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
-     */
-    messages: IntlMessages;
-    /**
-     * 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: string;
-        valueAsNumber: number;
-    }) => void;
-    /**
-     * Function invoked when the value overflows or underflows the min/max range
-     */
-    onInvalid?: (details: {
-        reason: ValidityState;
-        value: string;
-        valueAsNumber: number;
-    }) => 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;
-};
-export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
-declare 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;
-}>;
-declare type PrivateContext = Context<{
-    /**
-     * @internal
-     * The hint that determines if we're incrementing or decrementing
-     */
-    hint: "increment" | "decrement" | "set" | null;
-    /**
-     * @internal
-     * The scrubber cursor position
-     */
-    scrubberCursorPoint: {
-        x: number;
-        y: number;
-    } | null;
-}>;
-export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
-export declare type MachineState = {
-    value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
-    tags: "focus";
-};
-export declare type State = S.State<MachineContext, MachineState>;
-export declare type Send = S.Send<S.AnyEventObject>;
-export {};

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

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