import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { useRef, useEffect } from "react";
import { cn } from "@utils";
/**
 * Input component for OTP field
 */
export const Input = ({ value, handleChange, handleKeyDown, focused, index, id, error }) => {
    const inputRef = useRef(null);
    const handleFocus = (event) => event.target.select();
    useEffect(() => {
        if (focused) {
            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
        }
    }, [focused]);
    return (_jsx("input", { id: id, type: "text", inputMode: "numeric", autoComplete: "one-time-code", value: value, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-label": `Enter character ${index + 1}`, maxLength: 1, ref: inputRef, className: cn("w-[2.625rem] px-2 py-[0.625rem] text-center", "border border-gray-200 rounded text-base focus:outline-none focus:ring-1 focus:ring-primary-500", "disabled:bg-gray-50 disabled:text-secondary-200", "dark:border-secondary-500", "dark:bg-iridium", "dark:disabled:bg-secondary-800", "dark:disabled:text-secondary-500", "dark:focus:ring-primary-400", "dark:text-secondary-200", error && "border-error-500 text-error-500 dark:border-error-400 dark:text-error-400") }));
};
Input.displayName = "OtpInput.Input";
//# sourceMappingURL=input.js.map