function Button({ text, icon, onClick, className }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded-[8px] hover:bg-gray-200 transition-colors duration-200 " + className, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} ${text ? "mr-2" : ""}`, __source: { fileName: "", lineNumber: 11, columnNumber: 18 }, __self: this }), text)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Sign in", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { icon: "fa-shopping-cart", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent({ length = 4, onChange, value = "", error }) { const [pins, setPins] = useState(new Array(length).fill("")); const inputRefs = Array(length).fill(0).map(()=>useRef(null)); const handleChange = (index, value)=>{ if (isNaN(value)) return; const newPins = [ ...pins ]; newPins[index] = value; setPins(newPins); if (value && index < length - 1) { inputRefs[index + 1].current.focus(); } onChange?.(newPins.join("")); }; const handleKeyDown = (index, e)=>{ if (e.key === "Backspace" && !pins[index] && index > 0) { inputRefs[index - 1].current.focus(); } }; const handlePaste = (e)=>{ e.preventDefault(); const pasteData = e.clipboardData.getData("text").slice(0, length); if (!/^\d+$/.test(pasteData)) return; const newPins = [ ...pins ]; pasteData.split("").forEach((value, index)=>{ newPins[index] = value; }); setPins(newPins); onChange?.(newPins.join("")); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, pins.map((pin, index)=>/*#__PURE__*/ React.createElement("input", { key: index, ref: inputRefs[index], type: "password", inputMode: "numeric", maxLength: 1, value: pin, onChange: (e)=>handleChange(index, e.target.value), onKeyDown: (e)=>handleKeyDown(index, e), onPaste: handlePaste, className: `w-12 h-12 text-center border-2 rounded-lg text-xl font-bold ${error ? "border-red-500" : "border-gray-300"} focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }))), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, error)); } function StoryComponent() { const [value, setValue] = useState(""); const [error, setError] = useState(""); const handleChange = (pin)=>{ setValue(pin); setError(pin.length < 4 ? "Please enter all digits" : ""); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-col gap-8", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Default PIN Input (4 digits)"), /*#__PURE__*/ React.createElement(MainComponent, { onChange: handleChange, error: error, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Longer PIN Input (6 digits)"), /*#__PURE__*/ React.createElement(MainComponent, { length: 6, onChange: console.log, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "With Error State"), /*#__PURE__*/ React.createElement(MainComponent, { error: "Invalid PIN", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }))); }