grassroot
Install

DocsAPI referenceUI machinesinput-otp

input-otp machine

The public state machine contract for @grassroot/ui-machines/input-otp. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/input-otp

Package

10 exports
View source packages/ui-machines/src/input-otp/index.ts

Service example

input-otp.tsts
import { createService } from "@grassroot/statechart";
import { inputOTPMachine } from "@grassroot/ui-machines/input-otp";
 
const service = createService(inputOTPMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

InputOTPCommand

type
DeclarationView source
InputOTPCommandts
type InputOTPCommand = CommandObject & ({
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: string;
  readonly reason: InputOTPReason;
} | {
  readonly type: "COMPLETE";
  readonly value: string;
});

InputOTPContext

type
DeclarationView source
InputOTPContextts
type InputOTPContext = {
  readonly value: string;
  readonly focusIndex: number;
  readonly mode: BindingMode;
};
Name
Kind
Type
Requirement
focusIndex
property
number
required
mode
property
BindingMode
required
value
property
string
required
Name
focusIndex
Kind
property
Type
number
Requirement
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
value
Kind
property
Type
string
Requirement
required

InputOTPDiagnosticCodes

value
DeclarationView source
InputOTPDiagnosticCodests
export declare const InputOTPDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

InputOTPEvent

type
DeclarationView source
InputOTPEventts
type InputOTPEvent = {
  readonly type: "SET_CHAR";
  readonly index: number;
  readonly value: string;
  readonly reason?: InputOTPReason;
} | {
  readonly type: "PASTE";
  readonly index: number;
  readonly value: string;
} | {
  readonly type: "BACKSPACE";
  readonly index: number;
} | {
  readonly type: "MOVE_FOCUS";
  readonly index: number;
} | {
  readonly type: "RESET";
};

InputOTPInput

type
DeclarationView source
InputOTPInputts
type InputOTPInput = {
  readonly length?: number;
  readonly value?: string;
  readonly defaultValue?: string;
  readonly disabled?: boolean;
};
Name
Kind
Type
Requirement
defaultValue
property
string
optional
disabled
property
boolean
optional
length
property
number
optional
value
property
string
optional
Name
defaultValue
Kind
property
Type
string
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
length
Kind
property
Type
number
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional

inputOTPMachine

value
DeclarationView source
inputOTPMachinets
export declare const inputOTPMachine: Machine<InputOTPInput, "ready", InputOTPContext, InputOTPEvent, InputOTPCommand>;

InputOTPReason

type
DeclarationView source
InputOTPReasonts
type InputOTPReason = "input" | "paste" | "backspace" | "programmatic";

inputOTPReplaySequence

value
DeclarationView source
inputOTPReplaySequencets
export declare const inputOTPReplaySequence: readonly InputOTPEvent[];

inputOTPSelectors

value
DeclarationView source
inputOTPSelectorsts
export declare const inputOTPSelectors: {
  value: (snapshot: InputOTPSnapshot) => string;
  focusIndex: (snapshot: InputOTPSnapshot) => number;
};
Name
Kind
Type
Requirement
focusIndex
property
(snapshot: InputOTPSnapshot) => number
required
value
property
(snapshot: InputOTPSnapshot) => string
required
Name
focusIndex
Kind
property
Type
(snapshot: InputOTPSnapshot) => number
Requirement
required
Name
value
Kind
property
Type
(snapshot: InputOTPSnapshot) => string
Requirement
required

InputOTPSnapshot

type
DeclarationView source
InputOTPSnapshotts
type InputOTPSnapshot = Snapshot<"ready", InputOTPContext>;