chore(input-otp): updating the docs according to the latest format

apps/docs/content/components/input-otp/allowedKeys.ts → apps/docs/content/components/input-otp/allowed-keys.raw.jsx

@@ -1,27 +1,22 @@
-const App = `import {InputOtp} from "@nextui-org/react";
+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]*$"}
+    {
+      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} />
+          <InputOtp allowedKeys={exp.value} length={4} />
         </div>
-      ))}  
+      ))}
     </div>
   );
-}`;
-
-const react = {
-  "/App.jsx": App,
-};
-
-export default {
-  ...react,
-};
+}

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

@@ -1,18 +1,4 @@
-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>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -1,18 +1,4 @@
-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>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -1,12 +1,4 @@
-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>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -1,12 +1,4 @@
-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>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -7,8 +7,8 @@ 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 errorMessage from "./error-message";
+import allowedKeys from "./allowed-keys";
 import controlled from "./controlled";
 import password from "./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

@@ -1,12 +1,4 @@
-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>
-  );
-}`;
+import App from "./password.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -1,18 +1,4 @@
-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>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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={1234} length={4} />
+    </div>
+  );
+}

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

@@ -1,12 +1,4 @@
-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>
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/input-otp/required.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 isRequired length={4} />
+    </div>
+  );
+}

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

@@ -1,12 +1,4 @@
-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>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -1,18 +1,4 @@
-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>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

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