@zag-js/number-input 0.82.2 → 1.0.1

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, LocaleProperties, CommonProperties, NormalizeProps } from '@zag-js/types';
+import { LocaleProperties, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
 
@@ -25,22 +26,22 @@ type ElementIds = Partial<{
     decrementTrigger: string;
     scrubber: string;
 }>;
-type IntlTranslations = {
+interface IntlTranslations {
     /**
      * Function that returns the human-readable value.
      * It is used to set the `aria-valuetext` property of the input
      */
-    valueText?: (value: string) => string;
+    valueText?: ((value: string) => string) | undefined;
     /**
      * The label foe the increment button
      */
-    incrementLabel: string;
+    incrementLabel?: string | undefined;
     /**
      * The label for the decrement button
      */
-    decrementLabel: string;
-};
-interface PublicContext extends LocaleProperties, CommonProperties {
+    decrementLabel?: string | undefined;
+}
+interface NumberInputProps extends LocaleProperties, CommonProperties {
     /**
      * The ids of the elements in the number input. Useful for composition.
      */
@@ -74,26 +75,31 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      *
      * @default "[0-9]*(.[0-9]+)?"
      */
-    pattern: string;
+    pattern?: string | undefined;
     /**
-     * The value of the input
+     * The controlled value of the input
      */
-    value: string;
+    value?: string | undefined;
+    /**
+     * The initial value of the input when rendered.
+     * Use when you don't need to control the value of the input.
+     */
+    defaultValue?: string | undefined;
     /**
      * The minimum value of the number input
      * @default Number.MIN_SAFE_INTEGER
      */
-    min: number;
+    min?: number | undefined;
     /**
      * The maximum value of the number input
      * @default Number.MAX_SAFE_INTEGER
      */
-    max: number;
+    max?: number | undefined;
     /**
      * The amount to increment or decrement the value by
      * @default 1
      */
-    step: number;
+    step?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -102,21 +108,21 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      * Whether to allow the value overflow the min/max range
      * @default true
      */
-    allowOverflow: boolean;
+    allowOverflow?: boolean | undefined;
     /**
      * Whether to clamp the value when the input loses focus (blur)
      * @default true
      */
-    clampValueOnBlur: boolean;
+    clampValueOnBlur?: boolean | undefined;
     /**
      * Whether to focus input when the value changes
      * @default true
      */
-    focusInputOnChange: boolean;
+    focusInputOnChange?: boolean | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations | undefined;
     /**
      * The options to pass to the `Intl.NumberFormat` constructor
      */
@@ -126,7 +132,7 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      * the type of keyboard shown to the user on mobile devices
      * @default "decimal"
      */
-    inputMode: InputMode;
+    inputMode?: InputMode | undefined;
     /**
      * Function invoked when the value changes
      */
@@ -145,76 +151,97 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "step" | "translations";
 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 color picker is disabled
      */
     isDisabled: 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;
+    /**
+     * The number i18n formatter
+     */
+    formatter: NumberFormatter;
+    /**
+     * The number i18n parser
+     */
+    parser: NumberParser;
 }>;
+type HintValue = "increment" | "decrement" | "set";
 interface PrivateContext {
+    /**
+     * The hint that determines if we're incrementing or decrementing
+     */
+    hint: HintValue | null;
+    /**
+     * The scrubber cursor position
+     */
+    scrubberCursorPoint: {
+        x: number;
+        y: number;
+    } | null;
+    /**
+     * Whether the checkbox's fieldset is disabled
+     */
+    fieldsetDisabled: boolean;
+    /**
+     * The value of the input
+     */
+    value: string;
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
-    tags: "focus";
+interface NumberInputSchema {
+    state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    tag: "focus";
+    props: RequiredBy<NumberInputProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    action: string;
+    event: EventObject;
+    guard: string;
+    effect: string;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+type NumberInputService = Service<NumberInputSchema>;
+type NumberInputMachine = Machine<NumberInputSchema>;
+interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
      */
@@ -273,8 +300,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getScrubberProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: NumberInputService, normalize: NormalizeProps<T>): NumberInputApi<T>;
+
+declare const machine: _zag_js_core.Machine<NumberInputSchema>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const props: (keyof NumberInputProps)[];
+declare const splitProps: <Props extends Partial<NumberInputProps>>(props: Props) => [Partial<NumberInputProps>, Omit<Props, keyof NumberInputProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine };
+export { type NumberInputApi as Api, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NumberInputMachine as Machine, type NumberInputProps as Props, type NumberInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, LocaleProperties, CommonProperties, NormalizeProps } from '@zag-js/types';
+import { LocaleProperties, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
 
@@ -25,22 +26,22 @@ type ElementIds = Partial<{
     decrementTrigger: string;
     scrubber: string;
 }>;
-type IntlTranslations = {
+interface IntlTranslations {
     /**
      * Function that returns the human-readable value.
      * It is used to set the `aria-valuetext` property of the input
      */
-    valueText?: (value: string) => string;
+    valueText?: ((value: string) => string) | undefined;
     /**
      * The label foe the increment button
      */
-    incrementLabel: string;
+    incrementLabel?: string | undefined;
     /**
      * The label for the decrement button
      */
-    decrementLabel: string;
-};
-interface PublicContext extends LocaleProperties, CommonProperties {
+    decrementLabel?: string | undefined;
+}
+interface NumberInputProps extends LocaleProperties, CommonProperties {
     /**
      * The ids of the elements in the number input. Useful for composition.
      */
@@ -74,26 +75,31 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      *
      * @default "[0-9]*(.[0-9]+)?"
      */
-    pattern: string;
+    pattern?: string | undefined;
     /**
-     * The value of the input
+     * The controlled value of the input
      */
-    value: string;
+    value?: string | undefined;
+    /**
+     * The initial value of the input when rendered.
+     * Use when you don't need to control the value of the input.
+     */
+    defaultValue?: string | undefined;
     /**
      * The minimum value of the number input
      * @default Number.MIN_SAFE_INTEGER
      */
-    min: number;
+    min?: number | undefined;
     /**
      * The maximum value of the number input
      * @default Number.MAX_SAFE_INTEGER
      */
-    max: number;
+    max?: number | undefined;
     /**
      * The amount to increment or decrement the value by
      * @default 1
      */
-    step: number;
+    step?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -102,21 +108,21 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      * Whether to allow the value overflow the min/max range
      * @default true
      */
-    allowOverflow: boolean;
+    allowOverflow?: boolean | undefined;
     /**
      * Whether to clamp the value when the input loses focus (blur)
      * @default true
      */
-    clampValueOnBlur: boolean;
+    clampValueOnBlur?: boolean | undefined;
     /**
      * Whether to focus input when the value changes
      * @default true
      */
-    focusInputOnChange: boolean;
+    focusInputOnChange?: boolean | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations | undefined;
     /**
      * The options to pass to the `Intl.NumberFormat` constructor
      */
@@ -126,7 +132,7 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      * the type of keyboard shown to the user on mobile devices
      * @default "decimal"
      */
-    inputMode: InputMode;
+    inputMode?: InputMode | undefined;
     /**
      * Function invoked when the value changes
      */
@@ -145,76 +151,97 @@ interface PublicContext extends LocaleProperties, CommonProperties {
      */
     spinOnPress?: boolean | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "step" | "translations";
 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 color picker is disabled
      */
     isDisabled: 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;
+    /**
+     * The number i18n formatter
+     */
+    formatter: NumberFormatter;
+    /**
+     * The number i18n parser
+     */
+    parser: NumberParser;
 }>;
+type HintValue = "increment" | "decrement" | "set";
 interface PrivateContext {
+    /**
+     * The hint that determines if we're incrementing or decrementing
+     */
+    hint: HintValue | null;
+    /**
+     * The scrubber cursor position
+     */
+    scrubberCursorPoint: {
+        x: number;
+        y: number;
+    } | null;
+    /**
+     * Whether the checkbox's fieldset is disabled
+     */
+    fieldsetDisabled: boolean;
+    /**
+     * The value of the input
+     */
+    value: string;
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
-    tags: "focus";
+interface NumberInputSchema {
+    state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    tag: "focus";
+    props: RequiredBy<NumberInputProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    action: string;
+    event: EventObject;
+    guard: string;
+    effect: string;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+type NumberInputService = Service<NumberInputSchema>;
+type NumberInputMachine = Machine<NumberInputSchema>;
+interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
      */
@@ -273,8 +300,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getScrubberProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: NumberInputService, normalize: NormalizeProps<T>): NumberInputApi<T>;
+
+declare const machine: _zag_js_core.Machine<NumberInputSchema>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const props: (keyof NumberInputProps)[];
+declare const splitProps: <Props extends Partial<NumberInputProps>>(props: Props) => [Partial<NumberInputProps>, Omit<Props, keyof NumberInputProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine };
+export { type NumberInputApi as Api, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NumberInputMachine as Machine, type NumberInputProps as Props, type NumberInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };