(
17 | <>
18 |
19 | {slots.slice(0, 3).map((slot, idx) => (
20 |
21 | ))}
22 |
23 |
24 |
25 |
26 |
27 | {slots.slice(3).map((slot, idx) => (
28 |
29 | ))}
30 |
31 |
32 | )}
33 | />
34 | )
35 | }
36 |
37 | // Feel free to copy. Uses @shadcn/ui tailwind colors.
38 | function Slot(props: SlotProps) {
39 | return (
40 |
51 | {props.char !== null &&
{props.char}
}
52 | {props.hasFakeCaret &&
}
53 |
6 |
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/apps/website/src/app/(local-pages)/layout.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { Toaster } from '@/components/ui/sonner'
3 | import { AppProvider } from '../../components/provider'
4 | import { fontSans } from '../../lib/fonts'
5 | import { cn } from '../../lib/utils'
6 | import '../globals.css'
7 | export default function RootLayout({
8 | children,
9 | }: Readonly<{
10 | children: React.ReactNode
11 | }>) {
12 | return (
13 |
14 |
20 |
21 |
22 | {/* */}
23 | {children}
24 | {/* */}
25 |
26 |
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/website/src/app/(local-pages)/raw-input/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 |
5 | export default function ShadcnPage() {
6 | const [value, setValue] = React.useState('')
7 |
8 | return (
9 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/apps/website/src/app/(local-pages)/shadcn/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPRenderSlot,
7 | InputOTPSeparator,
8 | InputOTPSlot,
9 | } from '@/components/ui/input-otp'
10 | import React from 'react'
11 |
12 | export default function ShadcnPage() {
13 | const [value, setValue] = React.useState('')
14 |
15 | return (
16 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/apps/website/src/app/(local-pages)/shadcn/pwmb/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPRenderSlot,
7 | InputOTPSeparator,
8 | InputOTPSlot,
9 | } from '@/components/ui/input-otp'
10 | import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
11 | import React from 'react'
12 |
13 | export default function ShadcnPage() {
14 | const [value, setValue] = React.useState('')
15 |
16 | return (
17 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/apps/website/src/app/(local-pages)/shadcn/static/page.tsx:
--------------------------------------------------------------------------------
1 | 'use server'
2 |
3 | import { default as ShadcnPage } from '../page'
4 |
5 | export default async function StaticPage(pageProps: any) {
6 | return (
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/apps/website/src/app/(pages)/(home)/_components/confetti.tsx:
--------------------------------------------------------------------------------
1 | import VFX from 'react-canvas-confetti/dist/presets/explosion'
2 |
3 | export function Confetti({
4 | pageCoords = { x: window.innerWidth / 2, y: window.innerHeight / 2 },
5 | }: {
6 | pageCoords?: {
7 | x: number
8 | y: number
9 | }
10 | }) {
11 | return (
12 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/website/src/app/(pages)/(home)/_components/showcase.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { useMemo } from 'react'
4 | import { toast } from 'sonner'
5 | import dynamic from 'next/dynamic'
6 |
7 | import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
8 | import { cn } from '@/lib/utils'
9 |
10 | const DynamicConfetti = dynamic(() =>
11 | import('./confetti').then(m => m.Confetti),
12 | )
13 |
14 | export function Showcase({ className, ...props }: { className?: string }) {
15 | const [value, setValue] = React.useState('12')
16 | const [disabled, setDisabled] = React.useState(false)
17 |
18 | const [preloadConfetti, setPreloadConfetti] = React.useState(0)
19 | const [hasGuessed, setHasGuessed] = React.useState(false)
20 |
21 | const inputRef = React.useRef(null)
22 |
23 | React.useEffect(() => {
24 | const isMobile = window.matchMedia('(max-width: 1023px)').matches
25 | if (!isMobile) {
26 | setDisabled(true)
27 | }
28 | const t1 = setTimeout(() => {
29 | setDisabled(false)
30 | }, 1_900)
31 | const t2 = setTimeout(
32 | () => {
33 | inputRef.current?.focus()
34 | },
35 | isMobile ? 0 : 2_500,
36 | )
37 |
38 | return () => {
39 | clearTimeout(t1)
40 | clearTimeout(t2)
41 | }
42 | }, [])
43 |
44 | React.useEffect(() => {
45 | if (value.length > 3) {
46 | setPreloadConfetti(p => p + 1)
47 | }
48 | }, [value.length])
49 |
50 | async function onSubmit(e?: React.FormEvent) {
51 | e?.preventDefault?.()
52 |
53 | inputRef.current?.select()
54 | await new Promise(r => setTimeout(r, 1_00))
55 |
56 | if (value === '123456') {
57 | setHasGuessed(true)
58 |
59 | setTimeout(() => {
60 | setHasGuessed(false)
61 | }, 1_000)
62 | } else {
63 | toast('Try guessing the right password 🤔', { position: 'top-right' })
64 | }
65 |
66 | const anchor = document.querySelector(
67 | '#code-example-anchor',
68 | )
69 |
70 | window.scrollTo({
71 | top: anchor?.getBoundingClientRect().top,
72 | behavior: 'smooth',
73 | })
74 |
75 | setValue('')
76 | setTimeout(() => {
77 | inputRef.current?.blur()
78 | }, 20)
79 | }
80 |
81 | return (
82 | <>
83 | {preloadConfetti === 1 && (
84 |
85 |
86 |
87 | )}
88 | {hasGuessed && (
89 |
90 |
94 |
95 | )}
96 |
97 |
141 |
142 | )
143 | }
144 |
145 | function Slot(props: {
146 | char: string | null
147 | isActive: boolean
148 | isFocused: boolean
149 | animateIdx?: number
150 | }) {
151 | const willAnimateChar = props.animateIdx !== undefined && props.animateIdx < 2
152 | const willAnimateCaret = props.animateIdx === 2
153 |
154 | return (
155 |
164 |
171 | {props.char &&
{props.char}
}
172 | {props.char === null && ' '}
173 |
174 |
175 | {props.isActive && props.char === null && (
176 |
181 |
182 |
183 | )}
184 |
39 |
40 | {/*
*/}
41 |
42 |
43 | Stop wasting time building OTP inputs.
44 |
45 |
46 |
52 |
53 |
59 | One-time password input component for React. Accessible. Unstyled.
60 | Customizable. Open Source.
61 |
62 |
63 |
69 |
70 |
71 | npm install input-otp
72 |
73 |
81 |
93 |
GitHub
94 |
95 |
{starCount}
96 |
101 |
102 |
103 |
104 |
Hero Sponsors
105 |
139 |
140 |
141 |
142 |
143 |
144 |
83 |
84 |
85 | {/* */}
86 | {children}
87 | {/* */}
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | )
97 | }
98 |
--------------------------------------------------------------------------------
/apps/website/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guilhermerodz/input-otp/d4aced995b40292cc45bf810ca31d69d23366ca6/apps/website/src/app/favicon.ico
--------------------------------------------------------------------------------
/apps/website/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 240 10% 3.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 240 10% 3.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 240 10% 3.9%;
13 | --primary: 240 5.9% 10%;
14 | --primary-foreground: 0 0% 98%;
15 | --secondary: 240 4.8% 95.9%;
16 | --secondary-foreground: 240 5.9% 10%;
17 | --muted: 240 4.8% 95.9%;
18 | --muted-foreground: 240 3.8% 46.1%;
19 | --accent: 240 4.8% 95.9%;
20 | --accent-foreground: 240 5.9% 10%;
21 | --destructive: 0 72.22% 50.59%;
22 | --destructive-foreground: 0 0% 98%;
23 | --border: 240 5.9% 90%;
24 | --input: 240 5.9% 90%;
25 | --ring: 240 5% 64.9%;
26 | --radius: 0.5rem;
27 | }
28 |
29 | .dark {
30 | --background: 240 10% 3.9%;
31 | --foreground: 0 0% 98%;
32 | --card: 240 10% 3.9%;
33 | --card-foreground: 0 0% 98%;
34 | --popover: 240 10% 3.9%;
35 | --popover-foreground: 0 0% 98%;
36 | --primary: 0 0% 98%;
37 | --primary-foreground: 240 5.9% 10%;
38 | --secondary: 240 3.7% 15.9%;
39 | --secondary-foreground: 0 0% 98%;
40 | --muted: 240 3.7% 15.9%;
41 | --muted-foreground: 240 5% 64.9%;
42 | --accent: 240 3.7% 15.9%;
43 | --accent-foreground: 0 0% 98%;
44 | --destructive: 0 62.8% 30.6%;
45 | --destructive-foreground: 0 85.7% 97.3%;
46 | --border: 240 3.7% 15.9%;
47 | --input: 240 3.7% 15.9%;
48 | --ring: 240 4.9% 83.9%;
49 | }
50 | }
51 |
52 | @layer base {
53 | * {
54 | @apply border-border;
55 | }
56 | body {
57 | /* @apply bg-background text-foreground selection:bg-[#6B2BF4] selection:text-foreground; */
58 | @apply bg-background text-foreground;
59 | /* font-feature-settings: "rlig" 1, "calt" 1; */
60 | font-synthesis-weight: none;
61 | text-rendering: optimizeLegibility;
62 | }
63 | }
64 |
65 | @layer utilities {
66 | }
67 |
68 | [data-highlighted-chars] {
69 | @apply bg-zinc-900 rounded;
70 | box-shadow: 2px 2px 0 2px rgba(139, 139, 148, 0.5);
71 | }
72 | [data-highlighted-chars] .dark {
73 | @apply bg-zinc-700/50 rounded;
74 | box-shadow: 2px 2px 0 2px rgba(139, 139, 148, 0.5);
75 | }
76 | [data-highlighted-chars] * {
77 | @apply !text-white;
78 | }
79 | [data-rehype-pretty-code-figure] pre {
80 | @apply pb-4 pt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-transparent;
81 | }
82 | [data-rehype-pretty-code-figure] [data-line] {
83 | @apply inline-block min-h-4 w-full py-0.5 px-4;
84 | }
85 |
86 | html[class='light'] .code-example-light {
87 | display: unset;
88 | }
89 | html[class='light'] .code-example-dark {
90 | display: none;
91 | }
92 | html[class='dark'] .code-example-dark {
93 | display: unset;
94 | }
95 | html[class='dark'] .code-example-light {
96 | display: none;
97 | }
98 |
--------------------------------------------------------------------------------
/apps/website/src/components/code.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { unified } from 'unified'
3 | import remarkParse from 'remark-parse'
4 | import remarkRehype from 'remark-rehype'
5 | import rehypeStringify from 'rehype-stringify'
6 | import rehypePrettyCode from 'rehype-pretty-code'
7 | import { CopyButton } from './copy-button'
8 |
9 | export async function Code({
10 | code,
11 | toCopy,
12 | dark = true,
13 | }: {
14 | code: string
15 | toCopy?: string
16 | dark?: boolean
17 | }) {
18 | const highlightedCode = await highlightCode(code, dark)
19 | return (
20 |
21 |
26 |
27 | {toCopy && (
28 |
29 |
30 |
31 | )}
32 |
13 | {/*
14 |
*/}
15 |
16 | {/*
17 |
18 |
*/}
19 |
55 |
56 |
57 |
50 |
51 | {slotProps.char ?? slotProps.placeholderChar}
52 |
53 | {slotProps.hasFakeCaret && (
54 |
57 | )}
58 |
77 |
78 | {char ?? placeholderChar}
79 |
80 | {hasFakeCaret && (
81 |
84 | )}
85 |
95 |
96 |
97 | ))
98 | InputOTPSeparator.displayName = 'InputOTPSeparator'
99 |
100 | export {
101 | InputOTP,
102 | InputOTPGroup,
103 | InputOTPRenderSlot,
104 | InputOTPSlot,
105 | InputOTPSeparator,
106 | }
107 |
--------------------------------------------------------------------------------
/apps/website/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const ScrollArea = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, children, ...props }, ref) => (
12 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 |
26 | const ScrollBar = React.forwardRef<
27 | React.ElementRef,
28 | React.ComponentPropsWithoutRef
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |
43 |
44 |
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 |
48 | export { ScrollArea, ScrollBar }
49 |
--------------------------------------------------------------------------------
/apps/website/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useTheme } from 'next-themes'
4 | import { Toaster as Sonner } from 'sonner'
5 |
6 | type ToasterProps = React.ComponentProps
7 |
8 | const Toaster = ({ ...props }: ToasterProps) => {
9 | const { theme = 'system' } = useTheme()
10 |
11 | return (
12 |
30 | )
31 | }
32 |
33 | export { Toaster }
34 |
--------------------------------------------------------------------------------
/apps/website/src/config/site.ts:
--------------------------------------------------------------------------------
1 | export const siteConfig = {
2 | name: 'rodz/input-otp',
3 | url: 'https://input-otp.rodz.dev',
4 | ogImage: 'https://input-otp.rodz.dev/og.jpg',
5 | description:
6 | 'One-time password input component for React. Accessible. Unstyled. Customizable. Open Source. Build your own OTP form effortlessly.',
7 | links: {
8 | twitter: 'https://twitter.com/guilherme_rodz',
9 | github: 'https://github.com/guilhermerodz/input-otp',
10 | },
11 | }
12 |
13 | export type SiteConfig = typeof siteConfig
14 |
--------------------------------------------------------------------------------
/apps/website/src/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | // import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
2 | import { JetBrains_Mono as FontMono } from 'next/font/google'
3 | // import { GeistMono } from "geist/font/mono"
4 | import { GeistSans } from 'geist/font/sans'
5 |
6 | // export const fontSans = FontSans({
7 | // subsets: ["latin"],
8 | // variable: "--font-sans",
9 | // })
10 | export const fontSans = GeistSans
11 |
12 | export const fontMono = FontMono({
13 | subsets: ['latin'],
14 | variable: '--font-mono',
15 | })
16 |
--------------------------------------------------------------------------------
/apps/website/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/apps/website/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 |
3 | const config = {
4 | darkMode: ['class'],
5 | content: [
6 | './pages/**/*.{ts,tsx}',
7 | './components/**/*.{ts,tsx}',
8 | './app/**/*.{ts,tsx}',
9 | './src/**/*.{ts,tsx}',
10 | ],
11 | prefix: '',
12 | theme: {
13 | container: {
14 | center: true,
15 | padding: '2rem',
16 | screens: {
17 | '2xl': '1400px',
18 | },
19 | },
20 | extend: {
21 | animation: {
22 | 'accordion-down': 'accordion-down 0.2s ease-out',
23 | 'accordion-up': 'accordion-up 0.2s ease-out',
24 |
25 | 'caret-blink': 'caret-blink 1.2s ease-out infinite',
26 |
27 | 'fade-in': 'fade-in 0.3s ease-out forwards',
28 | 'fade-up': 'fade-up 1s ease-out forwards',
29 | },
30 | borderRadius: {
31 | lg: 'var(--radius)',
32 | md: 'calc(var(--radius) - 2px)',
33 | sm: 'calc(var(--radius) - 4px)',
34 | },
35 | colors: {
36 | border: 'hsl(var(--border))',
37 | input: 'hsl(var(--input))',
38 | ring: 'hsl(var(--ring))',
39 | background: 'hsl(var(--background))',
40 | foreground: 'hsl(var(--foreground))',
41 | primary: {
42 | DEFAULT: 'hsl(var(--primary))',
43 | foreground: 'hsl(var(--primary-foreground))',
44 | },
45 | secondary: {
46 | DEFAULT: 'hsl(var(--secondary))',
47 | foreground: 'hsl(var(--secondary-foreground))',
48 | },
49 | destructive: {
50 | DEFAULT: 'hsl(var(--destructive))',
51 | foreground: 'hsl(var(--destructive-foreground))',
52 | },
53 | muted: {
54 | DEFAULT: 'hsl(var(--muted))',
55 | foreground: 'hsl(var(--muted-foreground))',
56 | },
57 | accent: {
58 | DEFAULT: 'hsl(var(--accent))',
59 | foreground: 'hsl(var(--accent-foreground))',
60 | },
61 | popover: {
62 | DEFAULT: 'hsl(var(--popover))',
63 | foreground: 'hsl(var(--popover-foreground))',
64 | },
65 | card: {
66 | DEFAULT: 'hsl(var(--card))',
67 | foreground: 'hsl(var(--card-foreground))',
68 | },
69 | },
70 | keyframes: {
71 | 'accordion-down': {
72 | from: { height: '0' },
73 | to: { height: 'var(--radix-accordion-content-height)' },
74 | },
75 | 'accordion-up': {
76 | from: { height: 'var(--radix-accordion-content-height)' },
77 | to: { height: '0' },
78 | },
79 |
80 | 'caret-blink': {
81 | '0%,70%,100%': {
82 | opacity: '1',
83 | },
84 | '20%,50%': {
85 | opacity: '0',
86 | },
87 | },
88 |
89 | 'fade-in': {
90 | from: {
91 | opacity: '0',
92 | },
93 | to: { opacity: '1' },
94 | },
95 | 'fade-up': {
96 | from: {
97 | opacity: '0',
98 | transform: 'translateY(var(--fade-distance, .25rem))',
99 | },
100 | to: { opacity: '1', transform: 'translateY(0)' },
101 | },
102 | },
103 | transitionDelay: {
104 | 1500: '1500ms',
105 | },
106 | transitionTimingFunction: {
107 | 'default': 'ease-out',
108 | }
109 | },
110 | },
111 | plugins: [require('tailwindcss-animate')],
112 | } satisfies Config
113 |
114 | export default config
115 |
--------------------------------------------------------------------------------
/apps/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "skipLibCheck": true,
10 | "strict": true,
11 | "noEmit": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "bundler",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "preserve",
18 | "incremental": true,
19 | "plugins": [
20 | {
21 | "name": "next"
22 | }
23 | ],
24 | "paths": {
25 | "@/*": [
26 | "./src/*"
27 | ]
28 | }
29 | },
30 | "include": [
31 | "next-env.d.ts",
32 | "**/*.ts",
33 | "**/*.tsx",
34 | "website/.next/types/**/*.ts",
35 | ".next/types/**/*.ts"
36 | ],
37 | "exclude": [
38 | "node_modules"
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "root",
3 | "private": true,
4 | "author": "Guilherme Rodz ",
5 | "description": "One-time password input component for React.",
6 | "homepage": "https://input-otp.rodz.dev/",
7 | "workspaces": [
8 | "packages/*",
9 | "apps/*"
10 | ],
11 | "scripts": {
12 | "build": "turbo run build --filter=*",
13 | "build:lib": "turbo run build --filter=input-otp...",
14 | "build:website": "turbo run build --filter=website...",
15 | "clean": "turbo run clean",
16 | "dev": "turbo run dev --filter=*",
17 | "dev:website": "turbo run dev --filter=website...",
18 | "dev:test": "turbo run dev --filter=test...",
19 | "start:website": "pnpm --filter=website start",
20 | "storybook": "turbo run storybook",
21 | "test": "turbo run test --filter=test...",
22 | "test:ui": "turbo run test:ui --filter=test...",
23 | "type-check": "turbo run type-check",
24 | "lint:lib": "turbo run lint --filter=input-otp",
25 | "format": "prettier --write .",
26 | "release": "run-s test build:lib && cd ./packages/input-otp && cp ../../README.md . && pnpm release && rimraf ./README.md && cd ../..",
27 | "release:bypass": "run-s build:lib && cd ./packages/input-otp && cp ../../README.md . && pnpm release && rimraf ./README.md && cd ../..",
28 | "release:beta": "run-s test build:lib && cd ./packages/input-otp && cp ../../README.md . && pnpm release:beta && rimraf ./README.md && cd ../..",
29 | "release:beta:bypass": "run-s build:lib && cd ./packages/input-otp && cp ../../README.md . && pnpm release:beta && rimraf ./README.md && cd ../.."
30 | },
31 | "prettier": {
32 | "tabWidth": 2,
33 | "printWidth": 80,
34 | "useTabs": false,
35 | "semi": false,
36 | "singleQuote": true,
37 | "trailingComma": "all",
38 | "arrowParens": "avoid",
39 | "endOfLine": "lf"
40 | },
41 | "trustedDependencies": [
42 | "npm-run-all"
43 | ],
44 | "devDependencies": {
45 | "@playwright/test": "^1.41.2",
46 | "@types/node": "^20",
47 | "@typescript-eslint/eslint-plugin": "^7.0.2",
48 | "@typescript-eslint/parser": "^7.0.2",
49 | "eslint-config-prettier": "^9.1.0",
50 | "eslint-plugin-import": "^2.29.1",
51 | "eslint-plugin-react": "^7.33.2",
52 | "eslint-plugin-react-hooks": "^4.6.0",
53 | "npm-run-all": "^4.1.5",
54 | "prettier": "^3.2.5",
55 | "rimraf": "^5.0.5",
56 | "tsup": "^8.0.2",
57 | "turbo": "^1.12.4",
58 | "typescript": "^5.3.3"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/packages/input-otp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "input-otp",
3 | "version": "1.4.2",
4 | "author": "Guilherme Rodz ",
5 | "description": "One-time password input component for React.",
6 | "license": "MIT",
7 | "homepage": "https://input-otp.rodz.dev/",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/guilhermerodz/input-otp.git",
11 | "directory": "packages/input-otp"
12 | },
13 | "bugs": {
14 | "url": "https://github.com/guilhermerodz/input-otp/issues"
15 | },
16 | "keywords": [
17 | "react",
18 | "otp",
19 | "input",
20 | "accessible"
21 | ],
22 | "main": "./dist/index.js",
23 | "module": "./dist/index.mjs",
24 | "types": "./dist/index.d.ts",
25 | "files": [
26 | "dist"
27 | ],
28 | "exports": {
29 | ".": {
30 | "types": "./dist/index.d.ts",
31 | "module": "./dist/index.mjs",
32 | "import": "./dist/index.mjs",
33 | "require": "./dist/index.js",
34 | "default": "./dist/index.mjs"
35 | },
36 | "./package.json": "./package.json"
37 | },
38 | "scripts": {
39 | "type-check": "tsc --noEmit",
40 | "copy-readme": "cp ../../README.md ./README.md",
41 | "build": "run-s build:* copy-readme",
42 | "build:tsup": "tsup --dts --minify",
43 | "clean": "rimraf dist",
44 | "dev": "tsup --watch --dts",
45 | "lint": "run-p lint:*",
46 | "lint:eslint": "eslint src --ext .ts",
47 | "lint:eslint:fix": "eslint src --ext .ts --fix",
48 | "lint:format": "prettier --check \"src/**/*.ts\"",
49 | "lint:format:fix": "prettier --check \"src/**/*.ts\" --write",
50 | "lint:tsc": "tsc --project tsconfig.json --noEmit",
51 | "format": "prettier --write .",
52 | "release": "npm publish",
53 | "release:beta": "npm publish --tag beta"
54 | },
55 | "eslintConfig": {
56 | "root": true,
57 | "reportUnusedDisableDirectives": true,
58 | "ignorePatterns": [
59 | "**/build",
60 | "**/coverage",
61 | "**/dist"
62 | ],
63 | "parser": "@typescript-eslint/parser",
64 | "parserOptions": {
65 | "sourceType": "module",
66 | "ecmaVersion": 2020
67 | },
68 | "settings": {
69 | "import/parsers": {
70 | "@typescript-eslint/parser": [
71 | ".ts",
72 | ".tsx"
73 | ]
74 | },
75 | "import/resolver": {
76 | "typescript": true
77 | },
78 | "react": {
79 | "version": "detect"
80 | }
81 | },
82 | "plugins": [
83 | "@typescript-eslint",
84 | "import"
85 | ],
86 | "extends": [
87 | "plugin:react/jsx-runtime",
88 | "plugin:react-hooks/recommended",
89 | "eslint:recommended",
90 | "plugin:@typescript-eslint/recommended",
91 | "plugin:@typescript-eslint/stylistic",
92 | "plugin:import/recommended",
93 | "plugin:import/typescript",
94 | "prettier"
95 | ],
96 | "env": {
97 | "browser": true,
98 | "es2020": true
99 | },
100 | "rules": {
101 | "react/jsx-key": [
102 | "error",
103 | {
104 | "checkFragmentShorthand": true
105 | }
106 | ],
107 | "react-hooks/exhaustive-deps": "error",
108 | "@typescript-eslint/no-explicit-any": "off"
109 | }
110 | },
111 | "devDependencies": {
112 | "@types/react": "^18.2.55",
113 | "@types/react-dom": "^18.2.19",
114 | "react": "^18.2.0",
115 | "react-dom": "^18.2.0",
116 | "typescript": "^5.3.3"
117 | },
118 | "peerDependencies": {
119 | "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
120 | "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/packages/input-otp/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './input'
2 | export * from './regexp'
3 | export { OTPInputProps, SlotProps, RenderProps } from './types'
4 |
--------------------------------------------------------------------------------
/packages/input-otp/src/regexp.ts:
--------------------------------------------------------------------------------
1 | export const REGEXP_ONLY_DIGITS = '^\\d+$'
2 | export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$'
3 | export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$'
4 |
--------------------------------------------------------------------------------
/packages/input-otp/src/sync-timeouts.ts:
--------------------------------------------------------------------------------
1 | export function syncTimeouts(cb: (...args: any[]) => unknown): number[] {
2 | const t1 = setTimeout(cb, 0) // For faster machines
3 | const t2 = setTimeout(cb, 1_0)
4 | const t3 = setTimeout(cb, 5_0)
5 | return [t1, t2, t3]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/input-otp/src/types.ts:
--------------------------------------------------------------------------------
1 | export interface SlotProps {
2 | isActive: boolean
3 | char: string | null
4 | placeholderChar: string | null
5 | hasFakeCaret: boolean
6 | }
7 | export interface RenderProps {
8 | slots: SlotProps[]
9 | isFocused: boolean
10 | isHovering: boolean
11 | }
12 | type OverrideProps = Omit & R
13 | type OTPInputBaseProps = OverrideProps<
14 | React.InputHTMLAttributes,
15 | {
16 | value?: string
17 | onChange?: (newValue: string) => unknown
18 |
19 | maxLength: number
20 |
21 | textAlign?: 'left' | 'center' | 'right'
22 |
23 | onComplete?: (...args: any[]) => unknown
24 | pushPasswordManagerStrategy?: 'increase-width' | 'none'
25 | pasteTransformer?: (pasted: string) => string
26 |
27 | containerClassName?: string
28 |
29 | noScriptCSSFallback?: string | null
30 | }
31 | >
32 | type InputOTPRenderFn = (props: RenderProps) => React.ReactNode
33 | export type OTPInputProps = OTPInputBaseProps &
34 | (
35 | | {
36 | render: InputOTPRenderFn
37 | children?: never
38 | }
39 | | {
40 | render?: never
41 | children: React.ReactNode
42 | }
43 | )
44 |
--------------------------------------------------------------------------------
/packages/input-otp/src/use-previous.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | export function usePrevious(value: T) {
4 | const ref = React.useRef()
5 | React.useEffect(() => {
6 | ref.current = value
7 | })
8 | return ref.current
9 | }
10 |
--------------------------------------------------------------------------------
/packages/input-otp/src/use-pwm-badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { OTPInputProps } from './types'
3 |
4 | const PWM_BADGE_MARGIN_RIGHT = 18
5 | const PWM_BADGE_SPACE_WIDTH_PX = 40
6 | const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const
7 |
8 | const PASSWORD_MANAGERS_SELECTORS = [
9 | '[data-lastpass-icon-root]', // LastPass
10 | 'com-1password-button', // 1Password
11 | '[data-dashlanecreated]', // Dashlane
12 | '[style$="2147483647 !important;"]', // Bitwarden
13 | ].join(',')
14 |
15 | export function usePasswordManagerBadge({
16 | containerRef,
17 | inputRef,
18 | pushPasswordManagerStrategy,
19 | isFocused,
20 | }: {
21 | containerRef: React.RefObject
22 | inputRef: React.RefObject
23 | pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy']
24 | isFocused: boolean
25 | }) {
26 | /** Password managers have a badge
27 | * and I'll use this state to push them
28 | * outside the input */
29 | const [hasPWMBadge, setHasPWMBadge] = React.useState(false)
30 | const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = React.useState(false)
31 | const [done, setDone] = React.useState(false)
32 |
33 | const willPushPWMBadge = React.useMemo(() => {
34 | if (pushPasswordManagerStrategy === 'none') {
35 | return false
36 | }
37 |
38 | const increaseWidthCase =
39 | (pushPasswordManagerStrategy === 'increase-width' ||
40 | // TODO: remove 'experimental-no-flickering' support in 2.0.0
41 | pushPasswordManagerStrategy === 'experimental-no-flickering') &&
42 | hasPWMBadge &&
43 | hasPWMBadgeSpace
44 |
45 | return increaseWidthCase
46 | }, [hasPWMBadge, hasPWMBadgeSpace, pushPasswordManagerStrategy])
47 |
48 | const trackPWMBadge = React.useCallback(() => {
49 | const container = containerRef.current
50 | const input = inputRef.current
51 | if (
52 | !container ||
53 | !input ||
54 | done ||
55 | pushPasswordManagerStrategy === 'none'
56 | ) {
57 | return
58 | }
59 |
60 | const elementToCompare = container
61 |
62 | // Get the top right-center point of the container.
63 | // That is usually where most password managers place their badge.
64 | const rightCornerX =
65 | elementToCompare.getBoundingClientRect().left +
66 | elementToCompare.offsetWidth
67 | const centereredY =
68 | elementToCompare.getBoundingClientRect().top +
69 | elementToCompare.offsetHeight / 2
70 | const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT
71 | const y = centereredY
72 |
73 | // Do an extra search to check for famous password managers
74 | const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS)
75 |
76 | // If no password manager is automatically detect,
77 | // we'll try to dispatch document.elementFromPoint
78 | // to identify badges
79 | if (pmws.length === 0) {
80 | const maybeBadgeEl = document.elementFromPoint(x, y)
81 |
82 | // If the found element is the input itself,
83 | // then we assume it's not a password manager badge.
84 | // We are not sure. Most times that means there isn't a badge.
85 | if (maybeBadgeEl === container) {
86 | return
87 | }
88 | }
89 |
90 | setHasPWMBadge(true)
91 | setDone(true)
92 | }, [containerRef, inputRef, done, pushPasswordManagerStrategy])
93 |
94 | React.useEffect(() => {
95 | const container = containerRef.current
96 | if (!container || pushPasswordManagerStrategy === 'none') {
97 | return
98 | }
99 |
100 | // Check if the PWM area is 100% visible
101 | function checkHasSpace() {
102 | const viewportWidth = window.innerWidth
103 | const distanceToRightEdge =
104 | viewportWidth - container.getBoundingClientRect().right
105 | setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX)
106 | }
107 |
108 | checkHasSpace()
109 | const interval = setInterval(checkHasSpace, 1000)
110 |
111 | return () => {
112 | clearInterval(interval)
113 | }
114 | }, [containerRef, pushPasswordManagerStrategy])
115 |
116 | React.useEffect(() => {
117 | const _isFocused = isFocused || document.activeElement === inputRef.current
118 |
119 | if (pushPasswordManagerStrategy === 'none' || !_isFocused) {
120 | return
121 | }
122 | const t1 = setTimeout(trackPWMBadge, 0)
123 | const t2 = setTimeout(trackPWMBadge, 2000)
124 | const t3 = setTimeout(trackPWMBadge, 5000)
125 | const t4 = setTimeout(() => {
126 | setDone(true)
127 | }, 6000)
128 | return () => {
129 | clearTimeout(t1)
130 | clearTimeout(t2)
131 | clearTimeout(t3)
132 | clearTimeout(t4)
133 | }
134 | }, [inputRef, isFocused, pushPasswordManagerStrategy, trackPWMBadge])
135 |
136 | return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH }
137 | }
138 |
--------------------------------------------------------------------------------
/packages/input-otp/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "target": "es2015",
5 | "moduleResolution": "node",
6 | "esModuleInterop": true,
7 | "lib": ["es2015", "dom"],
8 | "allowUnreachableCode": false,
9 | "allowUnusedLabels": false,
10 | "removeComments": false
11 | },
12 | "include": ["src"]
13 | }
14 |
--------------------------------------------------------------------------------
/packages/input-otp/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup';
2 |
3 | export default defineConfig({
4 | name: 'save input-otp',
5 | entry: ['src/index.ts'],
6 | format: ['cjs', 'esm'],
7 | outDir: 'dist',
8 | clean: true,
9 | sourcemap: true,
10 | });
11 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "outputs": ["dist/**", ".next/**"]
8 | },
9 | "clean": {
10 | "cache": false
11 | },
12 | "dev": {
13 | "cache": false
14 | },
15 | "storybook": {
16 | "cache": false
17 | },
18 | "test#test": {
19 | "dependsOn": ["input-otp#build"],
20 | "cache": false
21 | },
22 | "test:ui": {
23 | "dependsOn": ["input-otp#build"],
24 | "cache": false
25 | },
26 | "type-check": {
27 | "cache": false
28 | },
29 | "lint": {
30 | "cache": false
31 | },
32 | "format": {
33 | "cache": false
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
4 |
5 |