chore(nits): nnits

apps/docs/content/components/input-otp/allowedKeys.ts

@@ -2,7 +2,7 @@ const App = `import {InputOtp} from "@nextui-org/react";
 
 export default function App() {
   const exps = [
-    {name: "For below InputOtp, only small alphabets (a to z) are alllowed:", value: "^[a-z]*$"} , 
+    {name: "For below InputOtp, only small alphabets (a to z) are allowed:", value: "^[a-z]*$"} , 
     {name: "For below InputOtp, only big alphabets(A to Z) are allowed:", value: "^[A-Z]*$"}
   ];
 

apps/docs/content/components/input-otp/usage.ts

@@ -1,10 +1,27 @@
-const App = `import {InputOtp} from "@nextui-org/react";
+const App = `import {InputOtp, Button} from "@nextui-org/react";
 
 export default function App() {
+  const [value, setValue] = React.useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Submitted OTP:", value);
+    alert("Submitted OTP: " + value);
+  };
+
   return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <InputOtp length={4} />
-    </div>
+    <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4">
+      <InputOtp
+        length={4}
+        value={value}
+        onValueChange={setValue}
+        color="primary"
+        size="lg"
+      />
+      <Button type="submit" color="primary">
+        Verify OTP
+      </Button>
+    </form>
   );
 }`;
 

packages/components/input-otp/README.md

@@ -6,8 +6,6 @@ This package contains the InputOTPcomponent.
 
 Please refer to the [documentation](https://nextui.org/docs/components/input-otp) for more information.
 
-> This is an internal utility, not intended for public usage.
-
 ## Installation
 
 ```sh

packages/components/input-otp/__tests__/input-otp.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {act, fireEvent, render, renderHook} from "@testing-library/react";
+import {act, render, renderHook} from "@testing-library/react";
 import {useForm} from "react-hook-form";
 import userEvent, {UserEvent} from "@testing-library/user-event";
 
@@ -208,10 +208,7 @@ describe("InputOtp", () => {
   });
 
   it("should call onFill callback when inputOtp is completely filled", async () => {
-    let testVar = 0;
-    const onFill = () => {
-      testVar = 1;
-    };
+    const onFill = jest.fn();
 
     render(<InputOtp length={4} onFill={onFill} />);
 
@@ -226,7 +223,7 @@ describe("InputOtp", () => {
       await user.paste("1234");
     });
 
-    expect(testVar).toBe(1);
+    expect(onFill).toHaveBeenCalledTimes(1);
   });
 });
 
@@ -236,6 +233,11 @@ describe("InputOtp with react hook form", () => {
   let inputOtp3: Element;
   let submitButton: HTMLButtonElement;
   let onSubmit: () => void;
+  let user: UserEvent;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
 
   beforeEach(() => {
     const {result} = renderHook(() =>
@@ -279,17 +281,13 @@ describe("InputOtp with react hook form", () => {
   });
 
   it("should not submit form when required field is empty", async () => {
-    const user = userEvent.setup();
-
     await user.click(submitButton);
 
     expect(onSubmit).toHaveBeenCalledTimes(0);
   });
 
   it("should submit form when required field is not empty", async () => {
-    fireEvent.change(inputOtp3, {target: {value: "1234"}});
-
-    const user = userEvent.setup();
+    await user.type(inputOtp3, "1234");
 
     await user.click(submitButton);
 

packages/components/input-otp/src/input-otp.tsx

@@ -34,7 +34,7 @@ const InputOtp = forwardRef<"div", InputOtpProps>((props, ref) => {
         ))}
       </div>
     );
-  }, [getSegmentWrapperProps]);
+  }, [length, getSegmentWrapperProps]);
 
   const inputSection = useMemo(() => {
     return (
@@ -65,6 +65,7 @@ const InputOtp = forwardRef<"div", InputOtpProps>((props, ref) => {
     description,
     getHelperWrapperProps,
     getErrorMessageProps,
+    getDescriptionProps,
   ]);
 
   return (

packages/components/input-otp/src/use-input-otp.ts

@@ -115,7 +115,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         onFill(value);
       }
     },
-    [onValueChange],
+    [onValueChange, onFill, length],
   );
 
   const [value, setValue] = useControlledState(
@@ -137,10 +137,10 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
   const onKeyDownCapture = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const key = e.key;
 
-    if (key == "Backspace") {
+    if (key === "Backspace") {
       return;
     }
-    if (key == "ArrowLeft" || key == "ArrowRight") {
+    if (key === "ArrowLeft" || key === "ArrowRight") {
       e.stopPropagation();
       e.preventDefault();
 

packages/core/theme/src/components/input-otp.ts

@@ -87,13 +87,13 @@ const inputOtp = tv({
         segment: "rounded-none",
       },
       sm: {
-        segment: "rounded-small",
+        segment: "rounded-sm",
       },
       md: {
-        segment: "rounded-medium",
+        segment: "rounded-md",
       },
       lg: {
-        segment: "rounded-large",
+        segment: "rounded-lg",
       },
       full: {
         segment: "rounded-full",