function MainComponent({ length = 6, onComplete }) { const [otp, setOtp] = useState(Array(length).fill("")); const refs = Array(length).fill().map(()=>useRef()); const handleChange = (index, value)=>{ if (isNaN(value)) return; const newOtp = [ ...otp ]; newOtp[index] = value; setOtp(newOtp); if (value && index < length - 1) { refs[index + 1].current.focus(); } if (newOtp.every((digit)=>digit) && onComplete) { onComplete(newOtp.join("")); } }; const handleKeyDown = (index, e)=>{ if (e.key === "Backspace" && !otp[index] && index > 0) { refs[index - 1].current.focus(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-center items-center p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, otp.map((digit, idx)=>/*#__PURE__*/ React.createElement("input", { key: idx, ref: refs[idx], type: "text", maxLength: 1, value: digit, onChange: (e)=>handleChange(idx, e.target.value), onKeyDown: (e)=>handleKeyDown(idx, e), className: "w-12 h-12 text-center text-2xl border-2 rounded-lg focus:border-blue-500 focus:outline-none", name: `otp-${idx}`, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const handleComplete = (otp)=>{ console.log("OTP entered:", otp); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Default 6-digit OTP"), /*#__PURE__*/ React.createElement(MainComponent, { onComplete: handleComplete, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "4-digit OTP"), /*#__PURE__*/ React.createElement(MainComponent, { length: 4, onComplete: handleComplete, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }))); }