@zag-js/pin-input 0.82.2 → 1.0.1

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, Machine, 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,34 @@ 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>;
+type PinInputMachine = Machine<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 +174,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.Machine<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 PinInputMachine as Machine, 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, Machine, 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,34 @@ 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>;
+type PinInputMachine = Machine<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 +174,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.Machine<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 PinInputMachine as Machine, type PinInputProps as Props, type PinInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };