OTP field

'use client'

import { useState } from 'react'
import { Alert } from '@/components/ui/alert'
import { Field } from '@/components/ui/field'
import { OTPField } from '@/components/ui/otp-field'
import { DemoColumn, DemoStage } from './_kit'

const EXPECTED = '481902'

export default function OTPFieldDemo() {
  const [status, setStatus] = useState<'idle' | 'valid' | 'invalid'>('idle')

  return (
    <DemoStage>
      <DemoColumn width="lg">
        <Field
          name="code"
          label="Verification code"
          hint={`Six digits. For this demo the correct code is ${EXPECTED} — try pasting it.`}
          error={status === 'invalid' ? 'That code is incorrect or has expired.' : null}
          success={status === 'valid' ? 'Code accepted.' : null}
        >
          {(field) => (
            <OTPField
              id={field.id}
              name={field.name}
              aria-describedby={field['aria-describedby']}
              invalid={status === 'invalid'}
              onValueChange={() => setStatus('idle')}
              onComplete={(code) => setStatus(code === EXPECTED ? 'valid' : 'invalid')}
            />
          )}
        </Field>

        <Alert tone="neutral" title="Template demo">
          No code is sent anywhere. Validation runs entirely in the browser.
        </Alert>

        <Field name="code-disabled" label="Locked code entry">
          {(field) => <OTPField id={field.id} name={field.name} disabled />}
        </Field>
      </DemoColumn>
    </DemoStage>
  )
}

'use client'

import { useRef, useState, type ClipboardEvent, type KeyboardEvent } from 'react'
import { cn } from '@/lib/cn'

/**
 * OTPField
 *
 * A segmented one-time-code entry. The behaviour people actually expect is
 * fiddly, so it is all handled here: typing advances, Backspace on an empty box
 * steps back, arrow keys move without editing, and pasting a full code fills
 * every box at once instead of dropping six characters into the first one.
 *
 * `autoComplete="one-time-code"` on the first box lets iOS and Android offer
 * the SMS code, and a visually hidden label describes each position.
 */
export interface OTPFieldProps {
  length?: number
  name?: string
  onComplete?: (code: string) => void
  onValueChange?: (code: string) => void
  disabled?: boolean
  invalid?: boolean
  'aria-describedby'?: string
  className?: string
  id?: string
}

export function OTPField({
  length = 6,
  name = 'code',
  onComplete,
  onValueChange,
  disabled,
  invalid,
  className,
  id = 'otp',
  ...aria
}: OTPFieldProps) {
  const [digits, setDigits] = useState<string[]>(() => Array.from({ length }, () => ''))
  const refs = useRef<Array<HTMLInputElement | null>>([])

  const commit = (next: string[]) => {
    setDigits(next)
    const code = next.join('')
    onValueChange?.(code)
    if (code.length === length && !next.includes('')) onComplete?.(code)
  }

  const focusAt = (index: number) => {
    const target = refs.current[Math.max(0, Math.min(length - 1, index))]
    target?.focus()
    target?.select()
  }

  const handleChange = (index: number, raw: string) => {
    const char = raw.replace(/\D/g, '').slice(-1)
    const next = [...digits]
    next[index] = char
    commit(next)
    if (char) focusAt(index + 1)
  }

  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Backspace') {
      if (digits[index]) {
        const next = [...digits]
        next[index] = ''
        commit(next)
        return
      }
      event.preventDefault()
      const next = [...digits]
      next[Math.max(0, index - 1)] = ''
      commit(next)
      focusAt(index - 1)
    } else if (event.key === 'ArrowLeft') {
      event.preventDefault()
      focusAt(index - 1)
    } else if (event.key === 'ArrowRight') {
      event.preventDefault()
      focusAt(index + 1)
    }
  }

  const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {
    event.preventDefault()
    const pasted = event.clipboardData.getData('text').replace(/\D/g, '')
    if (!pasted) return
    const next = [...digits]
    for (let i = 0; i < pasted.length && index + i < length; i += 1) {
      next[index + i] = pasted[i] ?? ''
    }
    commit(next)
    focusAt(index + pasted.length)
  }

  return (
    <div
      className={cn('flex items-center gap-2', className)}
      role="group"
      aria-label="One-time code"
    >
      {digits.map((digit, index) => (
        <div key={index} className="contents">
          {index === Math.floor(length / 2) && length % 2 === 0 ? (
            <span className="px-1 text-ink-subtle" aria-hidden="true">
              –
            </span>
          ) : null}
          <input
            ref={(el) => {
              refs.current[index] = el
            }}
            id={index === 0 ? id : `${id}-${index}`}
            name={`${name}-${index + 1}`}
            inputMode="numeric"
            autoComplete={index === 0 ? 'one-time-code' : 'off'}
            maxLength={1}
            value={digit}
            disabled={disabled}
            aria-label={`Digit ${index + 1} of ${length}`}
            aria-invalid={invalid || undefined}
            aria-describedby={index === 0 ? aria['aria-describedby'] : undefined}
            onChange={(event) => handleChange(index, event.target.value)}
            onKeyDown={(event) => handleKeyDown(index, event)}
            onPaste={(event) => handlePaste(index, event)}
            onFocus={(event) => event.target.select()}
            className={cn(
              'size-11 rounded-md border bg-surface text-center font-mono text-lg text-ink',
              'transition-colors duration-150 ease-standard',
              'disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-ink-subtle',
              invalid ? 'border-danger bg-danger-soft' : 'border-line hover:border-line-strong',
            )}
          />
        </div>
      ))}
    </div>
  )
}