feat(input-otp): adding the functionality

.changeset/spotty-flies-jump.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/input-otp": minor
+"@nextui-org/theme": minor
+---
+
+Adding new input-otp component.

apps/docs/config/routes.json

@@ -258,6 +258,13 @@
           "keywords": "input, text box, form field, data entry",
           "path": "/docs/components/input.mdx"
         },
+        {
+          "key": "input-otp",
+          "title": "Input OTP",
+          "keywords": "input, otp, auth",
+          "path": "/docs/components/input-otp.mdx",
+          "newPost": true
+        },
         {
           "key": "kbd",
           "title": "Kbd",

apps/docs/content/components/index.ts

@@ -18,6 +18,7 @@ export * from "./user";
 export * from "./skeleton";
 export * from "./snippet";
 export * from "./input";
+export * from "./input-otp";
 export * from "./textarea";
 export * from "./image";
 export * from "./radio-group";

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

@@ -0,0 +1,27 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const exps = [
+    {name: "For below InputOtp, only lower-case alphabets (a to z) are allowed:", value: "^[a-z]*$"} , 
+    {name: "For below InputOtp, only upper-case alphabets(A to Z) are allowed:", value: "^[A-Z]*$"}
+  ];
+
+  return (
+    <div className="w-full flex flex-wrap gap-6">
+      {exps.map((exp, idx) => (
+        <div key={idx} className="flex w-full flex-col flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-foreground/60">{exp.name}</div>
+          <InputOtp allowedKeys={exp.value} />
+        </div>
+      ))}  
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default" , "primary", "secondary", "success", "warning" ,"danger"];
+  return (
+    <div className="w-full flex flex-wrap gap-6">
+      {colors.map((color) => (
+        <div key={color} className="inline-flex flex-col flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-foreground/60">color: {color}</div>
+          <InputOtp color={color} />
+        </div>
+      ))}  
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <InputOtp
+        value={value}
+        onValueChange={setValue}
+      />
+      <p className="text-default-500 text-small">InputOtp value: {value}</p>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp description="This is description to the OTP component." />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp length={4} isDisabled defaultValue="123" />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp errorMessage="This is custom error message for the OTP component." isInvalid />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,29 @@
+import usage from "./usage";
+import disabled from "./disabled";
+import readonly from "./readonly";
+import required from "./required";
+import sizes from "./sizes";
+import colors from "./colors";
+import variants from "./variants";
+import radius from "./radius";
+import description from "./description";
+import errorMessage from "./errorMessage";
+import allowedKeys from "./allowedKeys";
+import controlled from "./controlled";
+import password from "./password";
+
+export const inputOtpContent = {
+  usage,
+  disabled,
+  readonly,
+  required,
+  sizes,
+  colors,
+  variants,
+  radius,
+  description,
+  errorMessage,
+  allowedKeys,
+  controlled,
+  password,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp type="password" />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+   const radiusValues = ["none", "sm", "md", "lg", "full"];  
+   return (
+    <div className="w-full flex flex-wrap gap-6">
+      {radiusValues.map((radius) => (
+        <div key={radius} className="inline-flex flex-col flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-foreground/60">radius: {radius}</div>
+          <InputOtp radius={radius} />
+        </div>
+      ))}  
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp length={4} isReadOnly defaultValue={1234} />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,17 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp length={4} isRequired />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm" , "md", "lg"];
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex flex-col w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-foreground/60">size: {size}</div>
+          <InputOtp size={size} />
+        </div>
+      ))}  
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,34 @@
+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 (
+    <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>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+const App = `import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+   const variants = ["flat", "bordered", "underlined", "faded"];  
+   return (
+    <div className="w-full flex flex-wrap gap-6">
+      {variants.map((variant) => (
+        <div key={variant} className="inline-flex flex-col flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-foreground/60">variant: {variant}</div>
+          <InputOtp variant={variant} />
+        </div>
+      ))}  
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};