feat(input-otp): introduce input OTP component

.changeset/spotty-flies-jump.md

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

apps/docs/config/routes.json

@@ -273,6 +273,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/allowed-keys.raw.jsx

@@ -0,0 +1,25 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const allowedKeysConfig = [
+    {
+      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">
+      {allowedKeysConfig.map((config, 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">{config.name}</div>
+          <InputOtp allowedKeys={config.value} length={4} />
+        </div>
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/input-otp/allowed-keys.ts

@@ -0,0 +1,9 @@
+import App from "./allowed-keys.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/colors.raw.jsx

@@ -0,0 +1,19 @@
+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} length={4} />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./colors.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/controlled.raw.jsx

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

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

@@ -0,0 +1,9 @@
+import App from "./controlled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/description.raw.jsx

@@ -0,0 +1,9 @@
+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." length={4} />
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./description.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/disabled.raw.jsx

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

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

@@ -0,0 +1,9 @@
+import App from "./disabled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/error-message.raw.jsx

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

apps/docs/content/components/input-otp/error-message.ts

@@ -0,0 +1,9 @@
+import App from "./error-message.raw.jsx?raw";
+
+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 "./error-message";
+import allowedKeys from "./allowed-keys";
+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.raw.jsx

@@ -0,0 +1,9 @@
+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} type="password" />
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./password.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/radius.raw.jsx

@@ -0,0 +1,19 @@
+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 length={4} radius={radius} />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./radius.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/readonly.raw.jsx

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

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

@@ -0,0 +1,9 @@
+import App from "./readonly.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/required.raw.jsx

@@ -0,0 +1,12 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <form
+      className="flex w-full flex-wrap md:flex-nowrap gap-4"
+      onSubmit={(e) => e.preventDefault()}
+    >
+      <InputOtp isRequired aria-label="OTP input field" length={4} placeholder="Enter code" />
+    </form>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./required.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/sizes.raw.jsx

@@ -0,0 +1,19 @@
+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 length={4} size={size} />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./sizes.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/usage.raw.jsx

@@ -0,0 +1,14 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState < string > "";
+
+  return (
+    <div className="flex flex-col items-start gap-4">
+      <InputOtp color="primary" length={4} size="lg" value={value} onValueChange={setValue} />
+      <div className="text-sm">
+        OTP value: <span className="text-md font-medium">{value}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input-otp/variants.raw.jsx

@@ -0,0 +1,19 @@
+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 length={4} variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./variants.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};