(
17 | <>
18 |
19 | {slots.slice(0, 3).map((slot, idx) => (
20 |
23 |
24 |
27 | {slots.slice(3).map((slot, idx) => (
28 |
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 |
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 | (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 |
87 | )}
88 | {hasGuessed && (
89 |
90 |
92 | )}
93 |
94 |
138 |
139 | )
140 | }
141 |
142 | function Slot(props: {
143 | char: string | null
144 | isActive: boolean
145 | isFocused: boolean
146 | animateIdx?: number
147 | }) {
148 | const willAnimateChar = props.animateIdx !== undefined && props.animateIdx < 2
149 | const willAnimateCaret = props.animateIdx === 2
150 |
151 | return (
152 |
161 |
168 | {props.char &&
{props.char}
}
169 | {props.char === null && ' '}
170 |
171 |
172 | {props.isActive && props.char === null && (
173 |
178 |
180 | )}
181 |
38 |
39 |
40 | Stop wasting time building OTP inputs.
41 |
42 |
43 |
56 | One-time password input component for React. Accessible. Unstyled.
57 | Customizable. Open Source.
58 |
59 |
60 |
66 |
67 |
68 | npm install input-otp
69 |
70 |
78 |
90 |
Github
91 |
92 |
{starCount}
93 |
96 |
97 |
98 |
99 |
82 |
83 | */}
86 | {children}
87 | {/* */}
88 |
89 |
91 |
92 |
93 |
21 |
26 |
27 | {toCopy && (
28 |
29 |
31 | )}
32 |
{
18 | value: string
19 | src?: string
20 | }
21 |
22 | export async function copyToClipboardWithMeta(value: string) {
23 | window && window.isSecureContext && navigator.clipboard.writeText(value)
24 | }
25 |
26 | export function CopyButton({
27 | value,
28 | className,
29 | src,
30 | ...props
31 | }: CopyButtonProps) {
32 | const [hasCopied, setHasCopied] = React.useState(false)
33 |
34 | React.useEffect(() => {
35 | setTimeout(() => {
36 | setHasCopied(false)
37 | }, 2000)
38 | }, [hasCopied])
39 |
40 | return (
41 | {
49 | copyToClipboardWithMeta(value)
50 | setHasCopied(true)
51 | }}
52 | {...props}
53 | >
54 | Copy
55 | {hasCopied ? (
56 |
61 | )
62 | }
63 |
64 | interface CopyWithClassNamesProps extends DropdownMenuTriggerProps {
65 | value: string
66 | classNames: string
67 | className?: string
68 | }
69 |
70 | export function CopyWithClassNames({
71 | value,
72 | classNames,
73 | className,
74 | ...props
75 | }: CopyWithClassNamesProps) {
76 | const [hasCopied, setHasCopied] = React.useState(false)
77 |
78 | React.useEffect(() => {
79 | setTimeout(() => {
80 | setHasCopied(false)
81 | }, 2000)
82 | }, [hasCopied])
83 |
84 | const copyToClipboard = React.useCallback((value: string) => {
85 | copyToClipboardWithMeta(value)
86 | setHasCopied(true)
87 | }, [])
88 |
89 | return (
90 |
91 |
92 |
100 | {hasCopied ? (
101 | Copy
106 |
107 |
108 |
109 | copyToClipboard(value)}>
110 | Component
111 |
112 | copyToClipboard(classNames)}>
113 | Classname
114 |
115 |
116 |
117 | )
118 | }
119 |
120 | interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {
121 | commands: {
122 | __npmCommand__: string
123 | __yarnCommand__: string
124 | __pnpmCommand__: string
125 | __bunCommand__: string
126 | }
127 | }
128 |
129 | export function CopyNpmCommandButton({
130 | commands,
131 | className,
132 | ...props
133 | }: CopyNpmCommandButtonProps) {
134 | const [hasCopied, setHasCopied] = React.useState(false)
135 |
136 | React.useEffect(() => {
137 | setTimeout(() => {
138 | setHasCopied(false)
139 | }, 2000)
140 | }, [hasCopied])
141 |
142 | const copyCommand = React.useCallback(
143 | (value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => {
144 | copyToClipboardWithMeta(value)
145 | setHasCopied(true)
146 | },
147 | [],
148 | )
149 |
150 | return (
151 |
152 |
153 |
161 | {hasCopied ? (
162 | Copy
167 |
168 |
169 |
170 | copyCommand(commands.__npmCommand__, 'npm')}
172 | >
173 | npm
174 |
175 | copyCommand(commands.__yarnCommand__, 'yarn')}
177 | >
178 | yarn
179 |
180 | copyCommand(commands.__pnpmCommand__, 'pnpm')}
182 | >
183 | pnpm
184 |
185 | copyCommand(commands.__bunCommand__, 'bun')}
187 | >
188 | bun
189 |
190 |
191 |
192 | )
193 | }
194 |
--------------------------------------------------------------------------------
/apps/website/src/components/icons.tsx:
--------------------------------------------------------------------------------
1 | type IconProps = React.HTMLAttributes
2 |
3 | export const Icons = {
4 | logo: (props: IconProps) => (
5 |
6 |
30 | ),
31 | twitter: (props: IconProps) => (
32 |
39 |
41 | ),
42 | gitHub: (props: IconProps) => (
43 |
44 |
49 | ),
50 | radix: (props: IconProps) => (
51 |
52 |
62 | ),
63 | aria: (props: IconProps) => (
64 |
65 |
67 | ),
68 | npm: (props: IconProps) => (
69 |
70 |
75 | ),
76 | yarn: (props: IconProps) => (
77 |
78 |
83 | ),
84 | pnpm: (props: IconProps) => (
85 |
86 |
91 | ),
92 | react: (props: IconProps) => (
93 |
94 |
99 | ),
100 | tailwind: (props: IconProps) => (
101 |
102 |
107 | ),
108 | google: (props: IconProps) => (
109 |
110 |
115 | ),
116 | apple: (props: IconProps) => (
117 |
118 |
123 | ),
124 | paypal: (props: IconProps) => (
125 |
126 |
131 | ),
132 | spinner: (props: IconProps) => (
133 |
145 |
147 | ),
148 | }
149 |
--------------------------------------------------------------------------------
/apps/website/src/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
5 | import { useTheme } from "next-themes"
6 |
7 | import { Button } from "@/components/ui/button"
8 | import {
9 | DropdownMenu,
10 | DropdownMenuContent,
11 | DropdownMenuItem,
12 | DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu"
14 |
15 | export function ModeToggle() {
16 | const { setTheme } = useTheme()
17 |
18 | return (
19 |
20 |
21 |
22 | Toggle theme
25 |
26 |
27 |
28 | setTheme("light")}>
29 | Light
30 |
31 | setTheme("dark")}>
32 | Dark
33 |
34 | setTheme("system")}>
35 | System
36 |
37 |
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/apps/website/src/components/page-header.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "../lib/utils"
2 |
3 | function PageHeader({
4 | className,
5 | children,
6 | ...props
7 | }: React.HTMLAttributes) {
8 | return (
9 |
18 | )
19 | }
20 |
21 | function PageHeaderHeading({
22 | className,
23 | ...props
24 | }: React.HTMLAttributes) {
25 | return (
26 | ) {
40 | return (
41 |
48 | )
49 | }
50 |
51 | function PageActions({
52 | className,
53 | ...props
54 | }: React.HTMLAttributes) {
55 | return (
56 |
63 | )
64 | }
65 |
66 | export { PageHeader, PageHeaderHeading, PageHeaderDescription, PageActions }
--------------------------------------------------------------------------------
/apps/website/src/components/provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { ThemeProvider } from 'next-themes'
4 |
5 | export function AppProvider({
6 | children,
7 | ...props
8 | }: React.PropsWithChildren<{}>) {
9 | return (
10 |
16 | {children}
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/website/src/components/site-footer.tsx:
--------------------------------------------------------------------------------
1 | import { siteConfig } from "../config/site"
2 |
3 | export function SiteFooter() {
4 | return (
5 |
30 | )
31 | }
--------------------------------------------------------------------------------
/apps/website/src/components/site-header.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import { siteConfig } from "../config/site"
4 | import { cn } from "../lib/utils"
5 | import { buttonVariants } from "./ui/button"
6 | import { Icons } from "./icons"
7 | import { ModeToggle } from "./mode-toggle"
8 |
9 | export function SiteHeader() {
10 | return (
11 |
12 |
13 | {/*
14 |
*/}
15 |
16 | {/*
17 |
*/}
19 |
20 |
33 | GitHub
35 |
36 |
37 |
50 | Twitter
52 |
53 |
54 |
55 |
56 |
57 |
59 | )
60 | }
--------------------------------------------------------------------------------
/apps/website/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "../../lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes,
38 | VariantProps {
39 | asChild?: boolean
40 | }
41 |
42 | const Button = React.forwardRef(
43 | ({ className, variant, size, asChild = false, ...props }, ref) => {
44 | const Comp = asChild ? Slot : "button"
45 | return (
46 | ,
23 | React.ComponentPropsWithoutRef & {
24 | inset?: boolean
25 | }
26 | >(({ className, inset, children, ...props }, ref) => (
27 |
36 | {children}
37 |
39 | ))
40 | DropdownMenuSubTrigger.displayName =
41 | DropdownMenuPrimitive.SubTrigger.displayName
42 |
43 | const DropdownMenuSubContent = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef
46 | >(({ className, ...props }, ref) => (
47 | ,
61 | React.ComponentPropsWithoutRef
62 | >(({ className, sideOffset = 4, ...props }, ref) => (
63 |
64 |
74 | ))
75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
76 |
77 | const DropdownMenuItem = React.forwardRef<
78 | React.ElementRef,
79 | React.ComponentPropsWithoutRef & {
80 | inset?: boolean
81 | }
82 | >(({ className, inset, ...props }, ref) => (
83 | ,
97 | React.ComponentPropsWithoutRef
98 | >(({ className, children, checked, ...props }, ref) => (
99 |
108 |
109 |
110 |
112 |
113 | {children}
114 |
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 | DropdownMenuPrimitive.CheckboxItem.displayName
118 |
119 | const DropdownMenuRadioItem = React.forwardRef<
120 | React.ElementRef,
121 | React.ComponentPropsWithoutRef
122 | >(({ className, children, ...props }, ref) => (
123 |
131 |
132 |
133 |
135 |
136 | {children}
137 |
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 |
141 | const DropdownMenuLabel = React.forwardRef<
142 | React.ElementRef,
143 | React.ComponentPropsWithoutRef & {
144 | inset?: boolean
145 | }
146 | >(({ className, inset, ...props }, ref) => (
147 | ,
161 | React.ComponentPropsWithoutRef
162 | >(({ className, ...props }, ref) => (
163 | ) => {
175 | return (
176 | ,
11 | React.ComponentPropsWithoutRef
12 | >(({ containerClassName, className, ...props }, ref) => (
13 |
30 | ))
31 | InputOTPGroup.displayName = 'InputOTPGroup'
32 |
33 | type InputOTPSlotProps = { index: number }
34 | const InputOTPSlot = React.forwardRef<
35 | React.ElementRef<'div'>,
36 | React.ComponentPropsWithoutRef<'div'> & InputOTPSlotProps
37 | >(({ index, className, ...props }, ref) => {
38 | const inputContext = React.useContext(OTPInputContext)
39 | const slotProps = inputContext.slots[index]
40 | return (
41 |
50 | {slotProps.char}
51 | {slotProps.hasFakeCaret && (
52 |
55 | )}
56 |
75 | {char}
76 | {hasFakeCaret && (
77 |
80 | )}
81 |
91 |
93 | ))
94 | InputOTPSeparator.displayName = 'InputOTPSeparator'
95 |
96 | export {
97 | InputOTP,
98 | InputOTPGroup,
99 | InputOTPRenderSlot,
100 | InputOTPSlot,
101 | InputOTPSeparator,
102 | }
103 |
--------------------------------------------------------------------------------
/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 |
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 |
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 | ",
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.2.4",
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",
120 | "react-dom": "^16.8 || ^17.0 || ^18.0"
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 | hasFakeCaret: boolean
5 | }
6 | export interface RenderProps {
7 | slots: SlotProps[]
8 | isFocused: boolean
9 | isHovering: boolean
10 | }
11 | type OverrideProps = Omit & R
12 | type OTPInputBaseProps = OverrideProps<
13 | React.InputHTMLAttributes,
14 | {
15 | value?: string
16 | onChange?: (newValue: string) => unknown
17 |
18 | maxLength: number
19 |
20 | textAlign?: 'left' | 'center' | 'right'
21 |
22 | onComplete?: (...args: any[]) => unknown
23 | pushPasswordManagerStrategy?: 'increase-width' | 'none'
24 |
25 | containerClassName?: string
26 |
27 | noScriptCSSFallback?: string | null
28 | }
29 | >
30 | type InputOTPRenderFn = (props: RenderProps) => React.ReactNode
31 | export type OTPInputProps = OTPInputBaseProps &
32 | (
33 | | {
34 | render: InputOTPRenderFn
35 | children?: never
36 | }
37 | | {
38 | render?: never
39 | children: React.ReactNode
40 | }
41 | )
42 |
--------------------------------------------------------------------------------
/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 | // Metadata for instant updates (not React state)
27 | const pwmMetadata = React.useRef<{
28 | done: boolean
29 | refocused: boolean
30 | }>({
31 | done: false,
32 | refocused: false,
33 | })
34 |
35 | /** Password managers have a badge
36 | * and I'll use this state to push them
37 | * outside the input */
38 | const [hasPWMBadge, setHasPWMBadge] = React.useState(false)
39 | const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = React.useState(false)
40 | const [done, setDone] = React.useState(false)
41 |
42 | const willPushPWMBadge = React.useMemo(() => {
43 | if (pushPasswordManagerStrategy === 'none') {
44 | return false
45 | }
46 |
47 | const increaseWidthCase =
48 | (pushPasswordManagerStrategy === 'increase-width' ||
49 | // TODO: remove 'experimental-no-flickering' support in 2.0.0
50 | pushPasswordManagerStrategy === 'experimental-no-flickering') &&
51 | hasPWMBadge &&
52 | hasPWMBadgeSpace
53 |
54 | return increaseWidthCase
55 | }, [hasPWMBadge, hasPWMBadgeSpace, pushPasswordManagerStrategy])
56 |
57 | const trackPWMBadge = React.useCallback(() => {
58 | const container = containerRef.current
59 | const input = inputRef.current
60 | if (
61 | !container ||
62 | !input ||
63 | done ||
64 | pushPasswordManagerStrategy === 'none'
65 | ) {
66 | return
67 | }
68 |
69 | const elementToCompare = container
70 |
71 | // Get the top right-center point of the container.
72 | // That is usually where most password managers place their badge.
73 | const rightCornerX =
74 | elementToCompare.getBoundingClientRect().left +
75 | elementToCompare.offsetWidth
76 | const centereredY =
77 | elementToCompare.getBoundingClientRect().top +
78 | elementToCompare.offsetHeight / 2
79 | const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT
80 | const y = centereredY
81 |
82 | // Do an extra search to check for famous password managers
83 | const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS)
84 |
85 | // If no password manager is automatically detect,
86 | // we'll try to dispatch document.elementFromPoint
87 | // to identify badges
88 | if (pmws.length === 0) {
89 | const maybeBadgeEl = document.elementFromPoint(x, y)
90 |
91 | // If the found element is the input itself,
92 | // then we assume it's not a password manager badge.
93 | // We are not sure. Most times that means there isn't a badge.
94 | if (maybeBadgeEl === container) {
95 | return
96 | }
97 | }
98 |
99 | setHasPWMBadge(true)
100 | setDone(true)
101 |
102 | // For specific password managers,
103 | // the input has to be re-focused
104 | // to trigger a re-position of the badge.
105 | if (!pwmMetadata.current.refocused && document.activeElement === input) {
106 | const sel = [input.selectionStart, input.selectionEnd]
107 | input.blur()
108 | input.focus()
109 | // Recover the previous selection
110 | input.setSelectionRange(sel[0], sel[1])
111 |
112 | pwmMetadata.current.refocused = true
113 | }
114 | }, [containerRef, inputRef, done, pushPasswordManagerStrategy])
115 |
116 | React.useEffect(() => {
117 | const container = containerRef.current
118 | if (!container || pushPasswordManagerStrategy === 'none') {
119 | return
120 | }
121 |
122 | // Check if the PWM area is 100% visible
123 | function checkHasSpace() {
124 | const viewportWidth = window.innerWidth
125 | const distanceToRightEdge =
126 | viewportWidth - container.getBoundingClientRect().right
127 | setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX)
128 | }
129 |
130 | checkHasSpace()
131 | const interval = setInterval(checkHasSpace, 1000)
132 |
133 | return () => {
134 | clearInterval(interval)
135 | }
136 | }, [containerRef, pushPasswordManagerStrategy])
137 |
138 | React.useEffect(() => {
139 | const _isFocused = isFocused || document.activeElement === inputRef.current
140 |
141 | if (pushPasswordManagerStrategy === 'none' || !_isFocused) {
142 | return
143 | }
144 | const t1 = setTimeout(trackPWMBadge, 0)
145 | const t2 = setTimeout(trackPWMBadge, 2000)
146 | const t3 = setTimeout(trackPWMBadge, 5000)
147 | const t4 = setTimeout(() => {
148 | setDone(true)
149 | }, 6000)
150 | return () => {
151 | clearTimeout(t1)
152 | clearTimeout(t2)
153 | clearTimeout(t3)
154 | clearTimeout(t4)
155 | }
156 | }, [inputRef, isFocused, pushPasswordManagerStrategy, trackPWMBadge])
157 |
158 | return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH }
159 | }
160 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
179 |
180 | - **This feature is optional and it's enabled by default. You can disable this optimization by adding `pushPasswordManagerStrategy="none"`.**
181 | - **This feature does not cause visible layout shift.**
182 |
183 | ### Auto tracks if the input has space in the right side for the badge
184 |
185 | https://github.com/guilhermerodz/input-otp/assets/10366880/bf01af88-1f82-463e-adf4-54a737a92f59
186 |
187 | 