@zag-js/pin-input 0.82.2 → 1.0.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
 
@@ -23,7 +23,7 @@ type ElementIds = Partial<{
     control: string;
     input(id: string): string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface PinInputProps extends DirectionProperty, CommonProperties {
     /**
      * The name of the input element. Useful for form submission.
      */
@@ -71,9 +71,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     otp?: boolean | undefined;
     /**
-     * The value of the the pin input.
+     * The controlled value of the the pin input.
      */
-    value: string[];
+    value?: string[] | undefined;
+    /**
+     * The initial value of the the pin input when rendered.
+     * Use when you don't need to control the value of the pin input.
+     */
+    defaultValue?: string[] | undefined;
     /**
      * The type of value the pin-input should allow
      * @default "numeric"
@@ -106,49 +111,33 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * The number of inputs
-     */
-    valueLength: number;
-    /**
-     * @computed
-     * The number of inputs that are not empty
-     */
-    filledValueLength: number;
-    /**
-     * @computed
-     * Whether all input values are valid
-     */
-    isValueComplete: boolean;
-    /**
-     * @computed
-     * The string representation of the input values
-     */
-    valueAsString: string;
-    /**
-     * @computed
-     * The value at focused index
-     */
-    focusedValue: string;
-}>;
-interface PrivateContext {
+    translations?: IntlTranslations | undefined;
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+interface PinInputSchema {
+    state: "idle" | "focused";
+    props: RequiredBy<PinInputProps, PropsWithDefault>;
+    context: {
+        value: string[];
+        focusedIndex: number;
+    };
+    computed: {
+        valueLength: number;
+        filledValueLength: number;
+        isValueComplete: boolean;
+        valueAsString: string;
+        focusedValue: string;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle" | "focused";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type PinInputService = Service<PinInputSchema>;
 interface InputProps {
     index: number;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface PinInputApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the input as an array of strings.
      */
@@ -184,8 +173,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getInputProps(props: InputProps): T["input"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<PinInputSchema>, normalize: NormalizeProps<T>): PinInputApi<T>;
+
+declare const machine: _zag_js_core.MachineConfig<PinInputSchema>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const props: (keyof PinInputProps)[];
+declare const splitProps: <Props extends Partial<PinInputProps>>(props: Props) => [Partial<PinInputProps>, Omit<Props, keyof PinInputProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type InputProps, type IntlTranslations, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine };
+export { type PinInputApi as Api, type ElementIds, type InputProps, type IntlTranslations, type PinInputProps as Props, type PinInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
 
@@ -23,7 +23,7 @@ type ElementIds = Partial<{
     control: string;
     input(id: string): string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface PinInputProps extends DirectionProperty, CommonProperties {
     /**
      * The name of the input element. Useful for form submission.
      */
@@ -71,9 +71,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     otp?: boolean | undefined;
     /**
-     * The value of the the pin input.
+     * The controlled value of the the pin input.
      */
-    value: string[];
+    value?: string[] | undefined;
+    /**
+     * The initial value of the the pin input when rendered.
+     * Use when you don't need to control the value of the pin input.
+     */
+    defaultValue?: string[] | undefined;
     /**
      * The type of value the pin-input should allow
      * @default "numeric"
@@ -106,49 +111,33 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * The number of inputs
-     */
-    valueLength: number;
-    /**
-     * @computed
-     * The number of inputs that are not empty
-     */
-    filledValueLength: number;
-    /**
-     * @computed
-     * Whether all input values are valid
-     */
-    isValueComplete: boolean;
-    /**
-     * @computed
-     * The string representation of the input values
-     */
-    valueAsString: string;
-    /**
-     * @computed
-     * The value at focused index
-     */
-    focusedValue: string;
-}>;
-interface PrivateContext {
+    translations?: IntlTranslations | undefined;
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+interface PinInputSchema {
+    state: "idle" | "focused";
+    props: RequiredBy<PinInputProps, PropsWithDefault>;
+    context: {
+        value: string[];
+        focusedIndex: number;
+    };
+    computed: {
+        valueLength: number;
+        filledValueLength: number;
+        isValueComplete: boolean;
+        valueAsString: string;
+        focusedValue: string;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle" | "focused";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type PinInputService = Service<PinInputSchema>;
 interface InputProps {
     index: number;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface PinInputApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the input as an array of strings.
      */
@@ -184,8 +173,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getInputProps(props: InputProps): T["input"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<PinInputSchema>, normalize: NormalizeProps<T>): PinInputApi<T>;
+
+declare const machine: _zag_js_core.MachineConfig<PinInputSchema>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const props: (keyof PinInputProps)[];
+declare const splitProps: <Props extends Partial<PinInputProps>>(props: Props) => [Partial<PinInputProps>, Omit<Props, keyof PinInputProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type InputProps, type IntlTranslations, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine };
+export { type PinInputApi as Api, type ElementIds, type InputProps, type IntlTranslations, type PinInputProps as Props, type PinInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };