Skip to content

Commit

Permalink
Merge pull request #3748 from macci001/macci001/add-input-otp-component
Browse files Browse the repository at this point in the history
feat(input-otp): Adding Input OTP component
  • Loading branch information
macci001 authored Nov 14, 2024
2 parents c6326d1 + 9385097 commit bafa07f
Show file tree
Hide file tree
Showing 50 changed files with 2,138 additions and 93 deletions.
6 changes: 6 additions & 0 deletions .changeset/spotty-flies-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@nextui-org/input-otp": minor
"@nextui-org/theme": minor
---

Adding new input-otp component.
7 changes: 7 additions & 0 deletions apps/docs/config/routes.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Empty file.
1 change: 1 addition & 0 deletions apps/docs/content/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
22 changes: 22 additions & 0 deletions apps/docs/content/components/input-otp/allowed-keys.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
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} length={4} />
</div>
))}
</div>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/allowed-keys.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./allowed-keys.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
19 changes: 19 additions & 0 deletions apps/docs/content/components/input-otp/colors.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./colors.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
13 changes: 13 additions & 0 deletions apps/docs/content/components/input-otp/controlled.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/controlled.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./controlled.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/description.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/description.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./description.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/disabled.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/disabled.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./disabled.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
13 changes: 13 additions & 0 deletions apps/docs/content/components/input-otp/error-message.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/error-message.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./error-message.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
29 changes: 29 additions & 0 deletions apps/docs/content/components/input-otp/index.ts
Original file line number Diff line number Diff line change
@@ -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,
};
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/password.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/password.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./password.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
19 changes: 19 additions & 0 deletions apps/docs/content/components/input-otp/radius.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/radius.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./radius.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/readonly.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/readonly.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./readonly.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/required.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/required.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./required.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
19 changes: 19 additions & 0 deletions apps/docs/content/components/input-otp/sizes.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/sizes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./sizes.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
14 changes: 14 additions & 0 deletions apps/docs/content/components/input-otp/usage.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {InputOtp} from "@nextui-org/react";

export default function App() {
const [value, setValue] = React.useState("");

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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/usage.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./usage.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
19 changes: 19 additions & 0 deletions apps/docs/content/components/input-otp/variants.raw.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions apps/docs/content/components/input-otp/variants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import App from "./variants.raw.jsx?raw";

const react = {
"/App.jsx": App,
};

export default {
...react,
};
Loading

0 comments on commit bafa07f

Please sign in to comment.