@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/OTPInput/OtpInput.spec.native.js

@@ -0,0 +1,665 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_Button = require("../../Button/index.native.js");
+var import_index = require("./index.native.js");
+(0, import_vitest.describe)("OTPInput", function () {
+  (0, import_vitest.describe)("basic rendering", function () {
+    (0, import_vitest.it)("should render with default props", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+    (0, import_vitest.it)("should render with custom length", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 6
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+    (0, import_vitest.it)("should render with label", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Enter OTP"
+      }));
+      var labelElement = result.container.querySelector('[role="label"]') || Array.from(result.container.querySelectorAll("*")).find(function (el) {
+        var _el_textContent;
+        return (_el_textContent = el.textContent) === null || _el_textContent === void 0 ? void 0 : _el_textContent.includes("Enter OTP");
+      });
+      (0, import_vitest.expect)(labelElement).toBeTruthy();
+    });
+    (0, import_vitest.it)("should render with helper text", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        helperText: "Enter the code sent to your phone"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Enter the code sent to your phone")).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("input behavior", function () {
+    (0, import_vitest.it)("should move focus to next input on entry", async function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        inputs[0].focus();
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)(document.activeElement).toBe(inputs[1]);
+    });
+    (0, import_vitest.it)("should move focus to previous input on backspace", async function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        inputs[1].focus();
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.keyDown(inputs[1], {
+          key: "Backspace"
+        });
+      });
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      (0, import_vitest.expect)(inputs[0]).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle paste-like input by filling all digits", async function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[2], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[3], {
+          target: {
+            value: "4"
+          }
+        });
+      });
+      await (0, import_react.waitFor)(function () {
+        var _updatedInputs_, _updatedInputs_1, _updatedInputs_2, _updatedInputs_3;
+        var updatedInputs = result.container.querySelectorAll("input");
+        (0, import_vitest.expect)((_updatedInputs_ = updatedInputs[0]) === null || _updatedInputs_ === void 0 ? void 0 : _updatedInputs_.value).toBe("1");
+        (0, import_vitest.expect)((_updatedInputs_1 = updatedInputs[1]) === null || _updatedInputs_1 === void 0 ? void 0 : _updatedInputs_1.value).toBe("2");
+        (0, import_vitest.expect)((_updatedInputs_2 = updatedInputs[2]) === null || _updatedInputs_2 === void 0 ? void 0 : _updatedInputs_2.value).toBe("3");
+        (0, import_vitest.expect)((_updatedInputs_3 = updatedInputs[3]) === null || _updatedInputs_3 === void 0 ? void 0 : _updatedInputs_3.value).toBe("4");
+      });
+    });
+    (0, import_vitest.it)("should only accept numeric input when type is number", async function () {
+      var _inputs_, _inputs_1;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "numeric"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "a"
+          }
+        });
+      });
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "5"
+          }
+        });
+      });
+      (0, import_vitest.expect)((_inputs_1 = inputs[0]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("5");
+    });
+  });
+  (0, import_vitest.describe)("value handling", function () {
+    (0, import_vitest.it)("should handle initial value", function () {
+      var _inputs_, _inputs_1, _inputs_2, _inputs_3;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "1234"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("1");
+      (0, import_vitest.expect)((_inputs_1 = inputs[1]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("2");
+      (0, import_vitest.expect)((_inputs_2 = inputs[2]) === null || _inputs_2 === void 0 ? void 0 : _inputs_2.value).toBe("3");
+      (0, import_vitest.expect)((_inputs_3 = inputs[3]) === null || _inputs_3 === void 0 ? void 0 : _inputs_3.value).toBe("4");
+    });
+    (0, import_vitest.it)("should handle partial value", function () {
+      var _inputs_, _inputs_1, _inputs_2, _inputs_3;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "12"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("1");
+      (0, import_vitest.expect)((_inputs_1 = inputs[1]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("2");
+      (0, import_vitest.expect)((_inputs_2 = inputs[2]) === null || _inputs_2 === void 0 ? void 0 : _inputs_2.value).toBe("");
+      (0, import_vitest.expect)((_inputs_3 = inputs[3]) === null || _inputs_3 === void 0 ? void 0 : _inputs_3.value).toBe("");
+    });
+    (0, import_vitest.it)("should handle onChange callback", async function () {
+      var onChange = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalledWith("1");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalledWith("12");
+    });
+    (0, import_vitest.it)("should handle onComplete callback", async function () {
+      var onComplete = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 4,
+        onComplete
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[2], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[3], {
+          target: {
+            value: "4"
+          }
+        });
+      });
+      await (0, import_react.waitFor)(function () {
+        (0, import_vitest.expect)(onComplete).toHaveBeenCalledWith("1234");
+      });
+    });
+    (0, import_vitest.it)("should clear value with clearable prop", async function () {
+      var _inputs_, _inputs_1, _inputs_2, _inputs_3;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "1234",
+        clearable: true
+      }));
+      var clearButton = result.container.querySelector('[aria-label="Clear"]');
+      (0, import_vitest.expect)(clearButton).toBeTruthy();
+      if (clearButton) {
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.click(clearButton);
+        });
+      }
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("");
+      (0, import_vitest.expect)((_inputs_1 = inputs[1]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("");
+      (0, import_vitest.expect)((_inputs_2 = inputs[2]) === null || _inputs_2 === void 0 ? void 0 : _inputs_2.value).toBe("");
+      (0, import_vitest.expect)((_inputs_3 = inputs[3]) === null || _inputs_3 === void 0 ? void 0 : _inputs_3.value).toBe("");
+    });
+  });
+  (0, import_vitest.describe)("styling and theming", function () {
+    (0, import_vitest.it)("should apply custom separator", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        separator: "-"
+      }));
+      var separators = Array.from(result.container.querySelectorAll("*")).filter(function (el) {
+        return el.textContent === "-";
+      });
+      (0, import_vitest.expect)(separators.length).toBeGreaterThan(0);
+    });
+  });
+  (0, import_vitest.describe)("form integration", function () {
+    (0, import_vitest.describe)("with form context", function () {
+      (0, import_vitest.it)("should handle value prop", function () {
+        var _inputs_, _inputs_1, _inputs_2, _inputs_3;
+        var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+          formOptions: {
+            defaultValues: {
+              otp: ""
+            }
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+            name: "otp",
+            value: "5678"
+          })
+        }));
+        var inputs = result.container.querySelectorAll("input");
+        (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("5");
+        (0, import_vitest.expect)((_inputs_1 = inputs[1]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("6");
+        (0, import_vitest.expect)((_inputs_2 = inputs[2]) === null || _inputs_2 === void 0 ? void 0 : _inputs_2.value).toBe("7");
+        (0, import_vitest.expect)((_inputs_3 = inputs[3]) === null || _inputs_3 === void 0 ? void 0 : _inputs_3.value).toBe("8");
+      });
+      (0, import_vitest.it)("should update form value", async function () {
+        var onSubmit = import_vitest.vi.fn();
+        var FormExample = function FormExample2() {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            formOptions: {
+              defaultValues: {
+                otp: ""
+              }
+            },
+            onSubmit: async function onSubmit1(value) {
+              await onSubmit(value);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              name: "otp"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Submit"
+            })]
+          });
+        };
+        var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {}));
+        var inputs = result.container.querySelectorAll("input");
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.change(inputs[0], {
+            target: {
+              value: "1"
+            }
+          });
+          import_react.fireEvent.change(inputs[1], {
+            target: {
+              value: "2"
+            }
+          });
+          import_react.fireEvent.change(inputs[2], {
+            target: {
+              value: "3"
+            }
+          });
+          import_react.fireEvent.change(inputs[3], {
+            target: {
+              value: "4"
+            }
+          });
+        });
+        var submitButton = result.getSubmitButton();
+        if (submitButton) {
+          await (0, import_react.act)(async function () {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(function () {
+          (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+            otp: "1234"
+          });
+        });
+      });
+      (0, import_vitest.it)("should handle partial input and submit", async function () {
+        var onSubmit = import_vitest.vi.fn();
+        var FormExample = function FormExample2() {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            formOptions: {
+              defaultValues: {
+                otp: "1234"
+              }
+            },
+            onSubmit: async function onSubmit1(value) {
+              await onSubmit(value);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              name: "otp"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Submit"
+            })]
+          });
+        };
+        var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {}));
+        var inputs = result.container.querySelectorAll("input");
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.change(inputs[4], {
+            target: {
+              value: "5"
+            }
+          });
+          import_react.fireEvent.change(inputs[5], {
+            target: {
+              value: "6"
+            }
+          });
+        });
+        var submitButton = result.getSubmitButton();
+        if (submitButton) {
+          await (0, import_react.act)(async function () {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(function () {
+          (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+            otp: "123456"
+          });
+        });
+      });
+    });
+    (0, import_vitest.describe)("with useForm hook", function () {
+      (0, import_vitest.it)("should work with useForm", async function () {
+        var onSubmitMock = import_vitest.vi.fn();
+        var TestComponent = function TestComponent2() {
+          var form = (0, import_react_form.useForm)({
+            defaultValues: {
+              verificationCode: "654321"
+            },
+            onSubmit: async function onSubmit(param) {
+              var {
+                value
+              } = param;
+              onSubmitMock(value);
+            }
+          });
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            form,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              label: "Verification Code",
+              name: "verificationCode",
+              length: 6
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Verify"
+            })]
+          });
+        };
+        var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+        var submitButton = result.getSubmitButton();
+        (0, import_vitest.expect)(submitButton === null || submitButton === void 0 ? void 0 : submitButton.textContent).toContain("Verify");
+        if (submitButton) {
+          await (0, import_react.act)(async function () {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(function () {
+          (0, import_vitest.expect)(onSubmitMock).toHaveBeenCalledWith({
+            verificationCode: "654321"
+          });
+        });
+      });
+    });
+  });
+  (0, import_vitest.describe)("field integration", function () {
+    (0, import_vitest.it)("should handle field with no errors", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_test_utils.TestProviders, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp"
+        })
+      }));
+      var errorElement = result.container.querySelector('[role="alert"]');
+      (0, import_vitest.expect)(errorElement).toBeFalsy();
+    });
+    (0, import_vitest.it)("should handle field with errors", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_test_utils.TestProviders, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp",
+          error: "Invalid OTP"
+        })
+      }));
+      var errorEl = result.findTextElement("Invalid OTP");
+      (0, import_vitest.expect)(errorEl !== void 0 || result.container.querySelectorAll("input").length > 0).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("input types", function () {
+    (0, import_vitest.it)("should accept alphanumeric characters when type is alphanumeric", async function () {
+      var _inputs_;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "alphanumeric"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "A"
+          }
+        });
+      });
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("A");
+    });
+  });
+  (0, import_vitest.describe)("accessibility", function () {
+    (0, import_vitest.it)("should have proper ARIA attributes", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Verification Code",
+        required: true
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      var withRequired = Array.from(inputs).filter(function (input) {
+        return input.getAttribute("aria-required") === "true" || input.hasAttribute("required");
+      });
+      (0, import_vitest.expect)(withRequired.length).toBeGreaterThanOrEqual(0);
+    });
+    (0, import_vitest.it)("should handle keyboard navigation", async function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        inputs[0].focus();
+        import_react.fireEvent.keyDown(inputs[0], {
+          key: "Tab"
+        });
+      });
+      await (0, import_react.act)(async function () {
+        inputs[1].focus();
+        import_react.fireEvent.keyDown(inputs[1], {
+          key: "ArrowLeft"
+        });
+      });
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      (0, import_vitest.expect)(document.activeElement === inputs[0] || document.activeElement === inputs[1]).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("edge cases", function () {
+    (0, import_vitest.it)("should handle very long initial value", function () {
+      var _inputs_, _inputs_1, _inputs_2, _inputs_3;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "123456789",
+        length: 4
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("1");
+      (0, import_vitest.expect)((_inputs_1 = inputs[1]) === null || _inputs_1 === void 0 ? void 0 : _inputs_1.value).toBe("2");
+      (0, import_vitest.expect)((_inputs_2 = inputs[2]) === null || _inputs_2 === void 0 ? void 0 : _inputs_2.value).toBe("3");
+      (0, import_vitest.expect)((_inputs_3 = inputs[3]) === null || _inputs_3 === void 0 ? void 0 : _inputs_3.value).toBe("4");
+    });
+    (0, import_vitest.it)("should handle empty onChange", async function () {
+      var _inputs_;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("1");
+    });
+    (0, import_vitest.it)("should handle rapid input changes", async function () {
+      var onChange = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "2"
+          }
+        });
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalled();
+    });
+    (0, import_vitest.it)("should handle special characters", async function () {
+      var _inputs_;
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "alphanumeric"
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "@"
+          }
+        });
+      });
+      (0, import_vitest.expect)((_inputs_ = inputs[0]) === null || _inputs_ === void 0 ? void 0 : _inputs_.value).toBe("");
+    });
+  });
+  (0, import_vitest.describe)("disabled state", function () {
+    (0, import_vitest.it)("should handle disabled prop", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        disabled: true
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      inputs.forEach(function (input) {
+        var isDisabled = input.hasAttribute("disabled") || input.getAttribute("aria-disabled") === "true";
+        (0, import_vitest.expect)(isDisabled).toBeTruthy();
+      });
+    });
+  });
+  (0, import_vitest.describe)("form validation", function () {
+    (0, import_vitest.it)("should show error state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        error: "Code is required"
+      }));
+      var errorElement = Array.from(result.container.querySelectorAll("*")).find(function (el) {
+        var _el_textContent;
+        return (_el_textContent = el.textContent) === null || _el_textContent === void 0 ? void 0 : _el_textContent.includes("Code is required");
+      });
+      (0, import_vitest.expect)(errorElement).toBeTruthy();
+    });
+    (0, import_vitest.it)("should show required indicator", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Code",
+        required: true
+      }));
+      var labelElement = Array.from(result.container.querySelectorAll("*")).find(function (el) {
+        var _el_textContent, _el_textContent1;
+        return ((_el_textContent = el.textContent) === null || _el_textContent === void 0 ? void 0 : _el_textContent.includes("Code")) && ((_el_textContent1 = el.textContent) === null || _el_textContent1 === void 0 ? void 0 : _el_textContent1.includes("*"));
+      });
+      (0, import_vitest.expect)(labelElement).toBeTruthy();
+    });
+  });
+  (0, import_vitest.describe)("performance", function () {
+    (0, import_vitest.it)("should handle large length efficiently", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 10
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(10);
+    });
+    (0, import_vitest.it)("should debounce onChange calls", async function () {
+      var onChange = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async function () {
+        for (var i = 0; i < 10; i++) {
+          import_react.fireEvent.change(inputs[0], {
+            target: {
+              value: String(i)
+            }
+          });
+        }
+      });
+      (0, import_vitest.expect)(onChange.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+  (0, import_vitest.describe)("responsive behavior", function () {
+    (0, import_vitest.it)("should render all digits in small container", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          width: 220
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp",
+          length: 6
+        })
+      }));
+      var inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+  });
+});
+//# sourceMappingURL=OtpInput.spec.native.js.map