@yamada-ui/react/dist/types/components/pin-input/use-pin-input.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { HTMLProps, PropGetter, RequiredPropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import { Descendant } from "../../hooks/use-descendants/index.js";
import "../../index.js";
import * as react2599 from "react";

//#region src/components/pin-input/use-pin-input.d.ts
declare const PinInputDescendantsContext: react2599.Context<{
    active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLInputElement, {}>[];
    firstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    indexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
    } | undefined) => react2599.RefCallback<HTMLInputElement>;
    unregister: (node?: HTMLInputElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
    values: () => Descendant<HTMLInputElement, {}>[];
  }>, usePinInputDescendant: (props?: {
    disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
  } | undefined) => {
    descendants: {
      active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
      count: () => number;
      destroy: () => void;
      enabledCount: () => number;
      enabledFirstValue: () => Descendant<HTMLInputElement, {}> | undefined;
      enabledIndexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
      enabledLastValue: () => Descendant<HTMLInputElement, {}> | undefined;
      enabledNextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
      enabledPrevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
      enabledValue: (index: number) => Descendant<HTMLInputElement, {}> | undefined;
      enabledValues: () => Descendant<HTMLInputElement, {}>[];
      firstValue: () => Descendant<HTMLInputElement, {}> | undefined;
      indexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
      lastValue: () => Descendant<HTMLInputElement, {}> | undefined;
      nextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
      prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
      register: (props?: {
        disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
      } | undefined) => react2599.RefCallback<HTMLInputElement>;
      unregister: (node?: HTMLInputElement | null | undefined) => void;
      value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
      values: () => Descendant<HTMLInputElement, {}>[];
    };
    register: react2599.RefCallback<HTMLInputElement>;
  }, usePinInputDescendants: () => {
    active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLInputElement, {}>[];
    firstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    indexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
    } | undefined) => react2599.RefCallback<HTMLInputElement>;
    unregister: (node?: HTMLInputElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
    values: () => Descendant<HTMLInputElement, {}>[];
  };
interface UsePinInputProps extends Omit<HTMLProps, "defaultValue" | "mask" | "onChange" | "value">, FieldProps {
  /**
   * The top-level id string that will be applied to the input fields.
   * The index of the input will be appended to this top-level id.
   */
  id?: string;
  /**
   * The type of values the pin-input should allow.
   *
   * @default 'number'
   */
  type?: "alphanumeric" | "number";
  /**
   * If `true`, the pin input receives focus on mount.
   *
   * @default false
   */
  autoFocus?: boolean;
  /**
   * The initial value of the pin input.
   */
  defaultValue?: string;
  /**
   * The number of inputs to display.
   *
   * @default 4
   */
  items?: number;
  /**
   * If `true`, focus will move automatically to the next input once filled.
   *
   * @default true
   */
  manageFocus?: boolean;
  /**
   * If `true`, the input's value will be masked just like `type=password`.
   */
  mask?: boolean;
  /**
   * If `true`, the pin input component signals to its fields that they should.
   */
  otp?: boolean;
  /**
   * The placeholder for the pin input.
   *
   * @default '◯'
   */
  placeholder?: string;
  /**
   * The value of the pin input.
   */
  value?: string;
  /**
   * Function called on input change.
   */
  onChange?: (value: string) => void;
  /**
   * Function called when all inputs have valid values.
   */
  onComplete?: (value: string) => void;
}
declare const usePinInput: (props?: UsePinInputProps) => {
  descendants: {
    active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLInputElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLInputElement, {}>[];
    firstValue: () => Descendant<HTMLInputElement, {}> | undefined;
    indexOf: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLInputElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
    } | undefined) => react2599.RefCallback<HTMLInputElement>;
    unregister: (node?: HTMLInputElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
    values: () => Descendant<HTMLInputElement, {}>[];
  };
  getInputProps: RequiredPropGetter<"input", {
    index: number;
  }, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
};
type UsePinInputReturn = ReturnType<typeof usePinInput>;
//#endregion
export { PinInputDescendantsContext, UsePinInputProps, UsePinInputReturn, usePinInput, usePinInputDescendant, usePinInputDescendants };
//# sourceMappingURL=use-pin-input.d.ts.map