melt/dist/builders/PinInput.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import type { MaybeGetter } from "../types";
export type PinInputError = {
    method: "paste" | "input";
    message: string;
};
export type PinInputProps = {
    /**
     * The value for the Pin Input.
     *
     * When passing a getter, it will be used as source of truth,
     * meaning that the value only changes when the getter returns a new value.
     *
     * Otherwise, if passing a static value, it'll serve as the default value.
     *
     *
     * @default ''
     */
    value?: MaybeGetter<string | undefined>;
    /**
     * Called when the `PinInput` instance tries to change the value.
     */
    onValueChange?: (value: string) => void;
    /**
     * Called when the `PinInput` instance is filled.
     */
    onComplete?: (value: string) => void;
    /**
     * Override the default behavior when pasting a value.
     *
     * @param value The pasted value.
     *
     * @example ```ts
     * const pin = new PinInput({
     *   onPaste(value) {
     *     if (!valid(value)) {
     *       // do something
     *       return
     *     }
     *     pin.value = value
     *   }
     * });
     */
    onPaste?: (value: string) => void;
    /**
     * Called when the PinInput encounters an error.
     */
    onError?: (error: PinInputError) => void;
    /**
     * The amount of digits in the Pin Input.
     *
     * @default 4
     */
    maxLength?: MaybeGetter<number | undefined>;
    /**
     * An optional placeholder to display when the input is empty.
     *
     * @default '○'
     */
    placeholder?: MaybeGetter<string | undefined>;
    /**
     * If `true`, prevents the user from interacting with the input.
     *
     * @default false
     */
    disabled?: MaybeGetter<boolean | undefined>;
    /**
     * If the input should be masked like a password.
     *
     * @default false
     */
    mask?: MaybeGetter<boolean | undefined>;
    /**
     * What characters the input accepts.
     *
     * @default 'text'
     */
    type?: MaybeGetter<"alphanumeric" | "numeric" | "text" | undefined>;
    /**
     * If `true`, allows pasting values from the clipboard.
     *
     * @default true
     */
    allowPaste?: MaybeGetter<boolean | undefined>;
};
export declare class PinInput {
    #private;
    readonly maxLength: number;
    readonly placeholder: string;
    readonly disabled: boolean;
    readonly mask: boolean;
    readonly type: "text" | "numeric" | "alphanumeric";
    readonly allowPaste: boolean;
    readonly isFilled: boolean;
    constructor(props?: PinInputProps);
    get value(): string;
    set value(value: string);
    /** The root element's props. */
    get root(): {
        readonly "data-melt-pin-input-root": "";
        readonly id: string;
        readonly "data-complete": "" | undefined;
    };
    /** An array of props that should be spread to the input elements. */
    get inputs(): {
        readonly "data-melt-pin-input-input": "";
        readonly placeholder: string | undefined;
        readonly disabled: true | undefined;
        readonly type: "text" | "password";
        readonly "data-filled": "" | undefined;
        readonly tabindex: 0 | -1;
        readonly inputmode: "text" | "numeric";
        readonly style: "caret-color: transparent;" | undefined;
        readonly onkeydown: (e: KeyboardEvent) => void;
        readonly onpointerdown: (e: Event) => void;
        readonly onpointerup: (e: Event) => void;
        readonly oninput: (e: Event) => void;
        readonly onfocus: () => void;
        readonly onblur: () => void;
        readonly onpaste: (e: ClipboardEvent & {
            currentTarget: EventTarget & HTMLInputElement;
        }) => void;
    }[];
}