@stanfordspezi/spezi-web-design-system/dist/src/components/InputOTP/InputOTP.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { OTPInput } from 'input-otp';
import { ComponentProps } from 'react';
/**
 * Root component for the OTP input.
 *
 * Provides the main container and context for the OTP input fields.
 * Controls behavior like focusing, keyboard navigation, and value management.
 *
 * @example
 * ```tsx
 * <InputOTPRoot maxLength={2}>
 *   <InputOTPGroup>
 *     <InputOTPSlot index={0} />
 *     <InputOTPSlot index={1} />
 *   </InputOTPGroup>
 * </InputOTPRoot>
 * ```
 */
export declare const InputOTPRoot: ({ className, containerClassName, ...props }: ComponentProps<typeof OTPInput>) => import("react").JSX.Element;
/**
 * Group component for OTP input slots.
 *
 * Used to organize OTP input slots into logical groups.
 * Useful for formatting OTP codes with visual separators between groups.
 *
 * @example
 * ```tsx
 * <InputOTPRoot maxLength={6}>
 *   <InputOTPGroup>
 *     <InputOTPSlot index={0} />
 *     <InputOTPSlot index={1} />
 *     <InputOTPSlot index={2} />
 *   </InputOTPGroup>
 *   <InputOTPSeparator />
 *   <InputOTPGroup>
 *     <InputOTPSlot index={3} />
 *     <InputOTPSlot index={4} />
 *     <InputOTPSlot index={5} />
 *   </InputOTPGroup>
 * </InputOTPRoot>
 * ```
 */
export declare const InputOTPGroup: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
type InputOTPSlotProps = ComponentProps<"div"> & {
    index: number;
};
/**
 * Individual input slot for a single character in the OTP input.
 *
 * Displays the entered character and visual feedback when active.
 * Shows a blinking caret when the slot is focused but empty.
 * Automatically applies border radius to the first and last slots in a group.
 *
 * @example
 * ```tsx
 * <InputOTPSlot index={0} />
 * ```
 */
export declare const InputOTPSlot: ({ index, className, ...props }: InputOTPSlotProps) => import("react").JSX.Element;
/**
 * Visual separator component for OTP input groups.
 *
 * Used to visually separate groups of OTP input slots.
 * Includes proper accessibility attributes for screen readers.
 *
 * @example
 * ```tsx
 * <InputOTPRoot>
 *   <InputOTPGroup>
 *     ...
 *   </InputOTPGroup>
 *   <InputOTPSeparator />
 *   <InputOTPGroup>
 *     ...
 *   </InputOTPGroup>
 * </InputOTPRoot>
 * ```
 */
export declare const InputOTPSeparator: ({ ...props }: ComponentProps<"div">) => import("react").JSX.Element;
type InputOTPProps = Omit<ComponentProps<typeof OTPInput>, "render">;
/**
 * A component for handling one-time password (OTP) input.
 * Built on top of [input-otp](https://github.com/guilhermerodz/input-otp#otpinput).
 *
 * @example
 * ```tsx
 * // Basic usage
 * <InputOTP
 *   maxLength={6}
 *   onComplete={(code) => verifyCode(code)}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With separator
 * <InputOTPRoot maxLength={6}>
 *   <InputOTPGroup>
 *     <InputOTPSlot index={0} />
 *     <InputOTPSlot index={1} />
 *     <InputOTPSlot index={2} />
 *   </InputOTPGroup>
 *   <InputOTPSeparator />
 *   <InputOTPGroup>
 *     <InputOTPSlot index={3} />
 *     <InputOTPSlot index={4} />
 *     <InputOTPSlot index={5} />
 *   </InputOTPGroup>
 * </InputOTPRoot>
 * ```
 */
export declare const InputOTP: ({ maxLength, ...props }: InputOTPProps) => import("react").JSX.Element;
export {};