'use client';


import { cn } from "../../utils/cn.mjs";
import { useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/Input/CodeInput.tsx
const CodeInput = ({ length = 6, onValueChange, defaultValue = "", value: controlledValue, disabled = false, containerClassName, slotClassName, "aria-invalid": ariaInvalid }) => {
	const isControlled = controlledValue !== void 0;
	const [internalValue, setInternalValue] = useState(defaultValue);
	const value = isControlled ? controlledValue : internalValue;
	const inputRefs = useRef([]);
	const handleChange = (index, newValue) => {
		const digit = newValue.replace(/\D/g, "").slice(-1);
		const newCode = value.split("");
		while (newCode.length < length) newCode.push("");
		newCode[index] = digit;
		const finalValue = newCode.join("");
		if (!isControlled) setInternalValue(finalValue);
		onValueChange?.(finalValue);
		if (digit && index < length - 1) inputRefs.current[index + 1]?.focus();
	};
	const handleKeyDown = (index, e) => {
		if (e.key === "Backspace") {
			const newCode = value.split("");
			if (!newCode[index] && index > 0) {
				e.preventDefault();
				newCode[index - 1] = "";
				const finalValue = newCode.join("");
				if (!isControlled) setInternalValue(finalValue);
				onValueChange?.(finalValue);
				inputRefs.current[index - 1]?.focus();
			} else if (newCode[index]) {
				newCode[index] = "";
				const finalValue = newCode.join("");
				if (!isControlled) setInternalValue(finalValue);
				onValueChange?.(finalValue);
			}
		} else if (e.key === "ArrowLeft" && index > 0) {
			e.preventDefault();
			inputRefs.current[index - 1]?.focus();
		} else if (e.key === "ArrowRight" && index < length - 1) {
			e.preventDefault();
			inputRefs.current[index + 1]?.focus();
		}
	};
	const handlePaste = (e) => {
		e.preventDefault();
		const newCode = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length).split("");
		while (newCode.length < length) newCode.push("");
		const finalValue = newCode.join("");
		if (!isControlled) setInternalValue(finalValue);
		onValueChange?.(finalValue);
		const nextEmptyIndex = newCode.findIndex((digit) => !digit);
		const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
		inputRefs.current[focusIndex]?.focus();
	};
	const digits = value.split("");
	while (digits.length < length) digits.push("");
	return /* @__PURE__ */ jsx("div", {
		className: cn("flex items-center gap-2", disabled && "opacity-50", containerClassName),
		children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx("input", {
			ref: (el) => {
				inputRefs.current[index] = el;
			},
			type: "text",
			inputMode: "numeric",
			pattern: "[0-9]*",
			maxLength: 1,
			value: digits[index] || "",
			onChange: (e) => handleChange(index, e.target.value),
			onKeyDown: (e) => handleKeyDown(index, e),
			onPaste: handlePaste,
			disabled,
			"aria-invalid": ariaInvalid,
			className: cn("relative flex h-12 w-12 items-center justify-center rounded-md border border-input bg-neutral-50 text-center text-base font-medium shadow-xs outline-none transition-all", "focus:z-10 focus:border-ring focus:ring-[3px] focus:ring-ring/50", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-input/30", ariaInvalid && "border-destructive focus:border-destructive focus:ring-destructive/20 dark:focus:ring-destructive/40", slotClassName)
		}, index))
	});
};

//#endregion
export { CodeInput };
//# sourceMappingURL=CodeInput.mjs.map