import * as React from 'react';
/**
 * One-time-code field: a row of single-character cells.
 *
 * Wraps Base UI's `OTPField`, which owns everything hard about the behaviour — distributing a paste
 * across the slots, platform SMS autofill, arrow and backspace navigation, and a hidden input so the
 * value participates in form submission and validation.
 *
 * THIS WAS FIRST BUILT BY HAND, and that was a mistake worth recording rather than quietly
 * correcting. The first version rendered one transparent input over presentational cells, on the
 * reasoning that N inputs break autofill, paste and screen-reader announcement. The reasoning was
 * sound and the conclusion was wrong: Base UI renders N real inputs *plus* a hidden validation
 * input, which is the tested solution to those exact problems. Sixteen other components here wrap
 * Base UI. Check for a primitive before reasoning from first principles about one.
 *
 * PORTED FROM FIGMA `.input-otp` (22:3953). Both cell boundaries are now Figma's own — `gray-300`
 * resting at **7.43:1** and `color/brand/white` filled at **19.37:1**, both clean reverts. The
 * binding had declined the resting value with "it passes at 7.43:1, but `--color-border-control` is
 * the shared role and a second working value would fragment it", which is a tidiness argument and
 * not a clause; rule 1 settles a preference in Figma's favour. It was also backwards:
 * `--color-border-control` is the role for controls Figma draws *no atom for*, so using it here is
 * what blurred the distinction.
 *
 * FIGMA'S FOCUS STATE IS A LOGGED CONFLICT, not a decline — the only one this atom has.
 * `Active-focus` removes the border and substitutes a `gray-800` fill measuring **1.39:1** against
 * the page, so the focused cell is *less* distinguishable than the resting one at 7.43:1, against
 * 1.4.11's 3:1 for a focus indicator. Under rule 1 Figma's drawing ships: the border goes
 * transparent and the fill appears, exactly as drawn. What keeps it conformant is the `outline`
 * ring, which Figma never drew at all and which is therefore a rule-4 addition breaking no tie —
 * an a11y addition that does not change what Figma draws is unaffected by the priority order.
 *
 * The Base UI rewrite is what makes that safe: because each cell is a real focused `<input>`, the
 * ring is native `:focus-visible` on the cell itself rather than a `focus-within` ring on the
 * group, so there is no computed "which cell is next" state to get wrong.
 */
declare const otpCellStyles: (props?: ({
    filled?: boolean | null | undefined;
    invalid?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
declare const otpGroupStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export interface OtpInputProps {
    /** How many characters the code has, i.e. how many cells to draw. */
    length?: number;
    /** Controlled value. */
    value?: string;
    /** Initial value when uncontrolled. */
    defaultValue?: string;
    /** Called with the value on every change. */
    onValueChange?: (value: string) => void;
    /** Called once the value is complete. */
    onComplete?: (value: string) => void;
    /**
     * Draws every cell with the error boundary, and marks each input `aria-invalid`.
     * @default false
     */
    invalid?: boolean;
    /** Standard disabled. Every cell leaves the tab order. */
    disabled?: boolean;
    /** Prevent edits while keeping the value readable. */
    readOnly?: boolean;
    /** Require a complete value before the owning form submits. */
    required?: boolean;
    /** Submit the owning form as soon as the code completes. */
    autoSubmit?: boolean;
    /** Mask the characters, for a code that is a secret rather than a one-time token. */
    mask?: boolean;
    /** Form field name, for the hidden input Base UI submits. */
    name?: string;
    /**
     * Id of the **first** cell. Later cells derive theirs (`{id}-2`, `{id}-3`, …), so a
     * `<Label htmlFor={id}>` labels the field.
     */
    id?: string;
    /**
     * Accessible name for cells after the first, e.g. `(i) => \`Digit ${i}\``.
     *
     * The first cell deliberately gets none: Base UI ignores `aria-label` there and warns in
     * development, because a real `<label>` is what names the field.
     * @default (index) => `Digit ${index}`
     */
    cellLabel?: (index: number) => string;
    className?: string;
}
/**
 * A one-time-code field.
 *
 * Label it with a `<Label htmlFor>` pointing at `id`, or wrap it in a Base UI `Field`. An
 * `aria-label` on the field will not work — Base UI ignores it on the first cell and says so in
 * development.
 *
 * @example <Label htmlFor="otp">Verification code</Label><OtpInput id="otp" onComplete={submit} />
 * @example <OtpInput length={4} value={code} onValueChange={setCode} invalid={failed} />
 */
export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
export { otpCellStyles, otpGroupStyles };
export declare const InputOTP: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
export type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
/** A run of cells, for a code that is visually grouped — `123 456`. */
export declare const InputOTPGroup: React.ForwardRefExoticComponent<InputOTPGroupProps & React.RefAttributes<HTMLDivElement>>;
export type InputOTPSlotProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * One cell's box, for a caller building their own arrangement.
 *
 * Presentational only: the real input is Base UI's, and this carries the cell's classes so a
 * composed layout matches the generated one.
 */
export declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
export type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
/** A visual break between groups. `aria-hidden`, because it is punctuation rather than content. */
export declare const InputOTPSeparator: React.ForwardRefExoticComponent<InputOTPSeparatorProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=otp-input.d.ts.map