@zag-js/number-input 0.1.12 → 0.1.15

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,3 +1,239 @@
-export { connect } from "./number-input.connect";
-export { machine } from "./number-input.machine";
-export type { UserDefinedContext as Context } from "./number-input.types";
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+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 Value = {
+    value: string;
+    valueAsNumber: number;
+};
+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) => 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;
+};
+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<{}>;
+declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
+declare type MachineState = {
+    value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    tags: "focus";
+};
+declare type State = StateMachine.State<MachineContext, MachineState>;
+declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+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;
+    blur(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    groupProps: T["element"];
+    inputProps: T["input"];
+    decrementButtonProps: T["button"];
+    incrementButtonProps: T["button"];
+    scrubberProps: T["element"];
+};
+
+declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, connect, machine };