@arolariu/components/dist/components/ui/input-otp.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps, type SlotProps } from "input-otp";
import * as React from "react";
export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
export type { OTPInputProps, SlotProps };
/**
 * Props for the {@link InputOTP} component.
 */
export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
/**
 * Props for the {@link InputOTPGroup} component.
 */
export type InputOTPGroupProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link InputOTPSlot} component.
 */
export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Zero-based slot index resolved from the shared OTP input context. */
    index: number;
}
/**
 * Props for the {@link InputOTPSeparator} component.
 */
export type InputOTPSeparatorProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Wraps the `input-otp` root component with shared library styling.
 *
 * @remarks
 * - Third-party wrapper component
 * - Styling via CSS Modules with `--ac-*` custom properties
 * - Forwards all supported `input-otp` root props to the underlying primitive
 *
 * @example
 * ```tsx
 * <InputOTP maxLength={6} />
 * ```
 *
 * @param props.maxLength - Required OTP length used to generate the expected number of slots.
 * @param props.pattern - Optional validation pattern forwarded to the underlying input, often paired with
 * `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_CHARS`, or `REGEXP_ONLY_DIGITS_AND_CHARS`.
 * @param props.onComplete - Callback invoked after the user fills all slots with a complete value.
 * @param props.pushPasswordManagerStrategy - Controls how password manager UI is handled inside the input
 * container.
 * @param props.render - Custom render function for complete control over OTP input rendering. Receives
 * slot data array and allows fully custom layouts.
 * @param props.pasteTransformer - Transform pasted text before it is applied. Useful for stripping
 * spaces or dashes from pasted codes.
 * @example
 * ```tsx
 * <InputOTP pasteTransformer={(text) => text.replace(/\D/g, "")} />
 * ```
 * @param props.value - Controlled OTP value. Use with `onChange` for controlled mode.
 * @param props.onChange - Callback fired when the OTP value changes in controlled mode.
 * @param props.containerClassName - Additional CSS class for the outer container element.
 * @param props.noScriptCSSFallback - CSS string to inject for no-JavaScript fallback styling.
 * @param props.textAlign - Sets how typed characters are aligned inside the hidden backing input.
 * @see {@link InputOTPProps} for available props
 * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
 * @see {@link https://github.com/guilhermerodz/input-otp | input-otp API reference}
 */
declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Groups OTP slots into a shared layout row.
 *
 * @remarks
 * - Third-party wrapper component
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputOTPGroup>
 *   <InputOTPSlot index={0} />
 * </InputOTPGroup>
 * ```
 *
 * @see {@link InputOTPGroupProps} for available props
 * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
 */
declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders an individual OTP slot based on shared input context state.
 *
 * @remarks
 * - Third-party wrapper component
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputOTPSlot index={0} />
 * ```
 *
 * @see {@link InputOTPSlotProps} for available props
 * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
 */
declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Displays a visual separator between OTP groups.
 *
 * @remarks
 * - Third-party wrapper component
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputOTPSeparator />
 * ```
 *
 * @see {@link InputOTPSeparatorProps} for available props
 * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
 */
declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
//# sourceMappingURL=input-otp.d.ts.map