@etus/ui 0.1.0

package/src/components/forms/InputOTP/README.md

@@ -0,0 +1,1149 @@
+# InputOTP
+
+## Visão Geral
+
+O **InputOTP** (One-Time Password) e um componente para entrada de codigos de verificacao, senhas temporarias e PINs. Utilizado em fluxos de autenticacao multi-fator (MFA/2FA), verificacao de email/SMS e confirmacao de transacoes. Baseado na biblioteca `input-otp` com estilizacao ETUS.
+
+### Casos de Uso
+
+- Autenticacao de dois fatores (2FA/MFA)
+- Verificacao de numero de telefone via SMS
+- Confirmacao de email com codigo
+- Reset de senha com codigo temporario
+- Validacao de transacoes sensiveis
+- Codigos de convite ou cupons
+
+### Classificacao
+
+**Categoria:** Form Component (Molecule)
+**Dependencias:** `input-otp`, `lucide-react`
+
+---
+
+## Design Specs
+
+### Compound Components
+
+O InputOTP utiliza o padrao de compound components para maxima flexibilidade:
+
+| Componente | Funcao | data-slot |
+|------------|--------|-----------|
+| `InputOTP` | Container principal, gerencia estado | `input-otp` |
+| `InputOTPGroup` | Agrupa slots relacionados | `input-otp-group` |
+| `InputOTPSlot` | Celula individual para digito | `input-otp-slot` |
+| `InputOTPSeparator` | Separador visual entre grupos | `input-otp-separator` |
+
+### Tamanhos
+
+| Tamanho | Altura Slot | Largura Slot | Uso |
+|---------|-------------|--------------|-----|
+| `default` | `h-9` (36px) | `w-9` (36px) | Uso geral |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Borda `border-input`, fundo transparente |
+| Active | `data-active="true"` | Ring de 3px com `ring-ring/50`, borda `border-ring` |
+| Disabled | `disabled` | 50% opacidade via `has-disabled:opacity-50` |
+| Invalid | `aria-invalid` | Borda e ring vermelhos (`border-destructive`) |
+| Filled | - | Exibe caractere digitado |
+| Caret | `hasFakeCaret` | Cursor piscando animado |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--ring             /* Focus ring e borda ativa */
+--ring/50          /* Focus ring com transparencia */
+--border           /* Borda default (border-input) */
+--destructive      /* Estado de erro */
+--destructive/20   /* Ring de erro light mode */
+--destructive/40   /* Ring de erro dark mode */
+--foreground       /* Cor do texto e caret */
+--input/30         /* Background dark mode */
+
+/* Espacamento */
+gap-2              /* Entre grupos */
+
+/* Tipografia */
+text-sm            /* 14px para digitos */
+
+/* Bordas */
+rounded-md         /* Primeiro e ultimo slot */
+border-y border-r  /* Bordas laterais conectadas */
+first:border-l     /* Borda esquerda do primeiro */
+
+/* Transicoes */
+transition-all     /* Animacao suave de estados */
+
+/* Animacoes */
+animate-caret-blink /* Cursor piscando */
+```
+
+### data-slot
+
+```html
+<div data-slot="input-otp">
+  <div data-slot="input-otp-group">
+    <div data-slot="input-otp-slot" data-active="true">1</div>
+    <div data-slot="input-otp-slot">2</div>
+    <div data-slot="input-otp-slot">3</div>
+  </div>
+  <div data-slot="input-otp-separator" role="separator">-</div>
+  <div data-slot="input-otp-group">
+    <div data-slot="input-otp-slot">4</div>
+    <div data-slot="input-otp-slot">5</div>
+    <div data-slot="input-otp-slot">6</div>
+  </div>
+</div>
+```
+
+---
+
+## API
+
+### InputOTP Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `maxLength` | `number` | - | **Obrigatorio.** Numero maximo de caracteres |
+| `value` | `string` | - | Valor controlado |
+| `onChange` | `(value: string) => void` | - | Callback ao alterar valor |
+| `pattern` | `string \| RegExp` | - | Regex para validar entrada |
+| `disabled` | `boolean` | `false` | Desabilita o input |
+| `autoFocus` | `boolean` | `false` | Foca automaticamente ao montar |
+| `className` | `string` | - | Classes CSS para o input oculto |
+| `containerClassName` | `string` | - | Classes CSS para o container |
+| `render` | `(props) => ReactNode` | - | Render prop customizado |
+| `textAlign` | `"left" \| "center" \| "right"` | `"left"` | Alinhamento do texto |
+| `pushPasswordManagerStrategy` | `"none" \| "increase-width"` | `"increase-width"` | Estrategia para gerenciadores de senha |
+| `onComplete` | `(value: string) => void` | - | Callback quando todos os slots sao preenchidos |
+| `children` | `ReactNode` | - | Grupos e slots |
+
+> Herda props de `input-otp` (`OTPInput`)
+
+### InputOTPGroup Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `className` | `string` | - | Classes CSS adicionais |
+| `children` | `ReactNode` | - | Slots do grupo |
+
+> Herda todas as props de `React.ComponentProps<"div">`
+
+### InputOTPSlot Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `index` | `number` | - | **Obrigatorio.** Indice do slot (0-based) |
+| `className` | `string` | - | Classes CSS adicionais |
+
+> Herda todas as props de `React.ComponentProps<"div">`
+
+### InputOTPSeparator Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `className` | `string` | - | Classes CSS adicionais |
+| `children` | `ReactNode` | `<MinusIcon />` | Icone ou elemento separador |
+
+> Herda todas as props de `React.ComponentProps<"div">`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onChange` | `(value: string) => void` | Disparado a cada alteracao |
+| `onComplete` | `(value: string) => void` | Disparado quando todos os slots sao preenchidos |
+| `onFocus` | `(event: FocusEvent) => void` | Disparado ao receber foco |
+| `onBlur` | `(event: FocusEvent) => void` | Disparado ao perder foco |
+
+### Patterns Disponiveis (input-otp)
+
+```typescript
+import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+// Apenas numeros (padrao para OTP)
+REGEXP_ONLY_DIGITS // /^\d+$/
+
+// Apenas letras
+REGEXP_ONLY_CHARS // /^[a-zA-Z]+$/
+
+// Letras e numeros (alfanumerico)
+REGEXP_ONLY_DIGITS_AND_CHARS // /^[a-zA-Z0-9]+$/
+```
+
+### TypeScript
+
+```typescript
+import type { OTPInputProps } from "input-otp"
+
+// Props do InputOTP
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}
+
+// Props do InputOTPSlot
+type InputOTPSlotProps = React.ComponentProps<"div"> & {
+  index: number
+}
+
+// Contexto interno (uso avancado)
+interface SlotContext {
+  char: string | null
+  hasFakeCaret: boolean
+  isActive: boolean
+}
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
+| **OTP Input** | ✓ | ✓ | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | - | - | ✓ |
+| **Compound Components** | ✓ | ✓ | - | - | ✓ | - | - | - | - | - | - | - | - | - | - |
+| **Separator** | ✓ | ✓ | - | - | - | - | ✓ | - | - | - | - | - | - | - | - |
+| **Pattern Validation** | ✓ | ✓ | - | - | - | - | ✓ | - | - | - | - | - | - | - | - |
+| **Controlled/Uncontrolled** | ✓ | ✓ | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | - | - | ✓ |
+| **onComplete** | ✓ | ✓ | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | - | - | ✓ |
+| **Auto Focus** | ✓ | ✓ | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | - | - | ✓ |
+| **Masked Input** | - | - | - | - | - | - | ✓ | - | - | - | - | - | - | - | - |
+| **Tamanhos** | 1 | 1 | - | - | 3 | - | 3 | 2 | - | - | - | - | - | - | 1 |
+| **Variantes** | - | - | - | - | 3 | - | 4 | - | - | - | - | - | - | - | - |
+| **data-slot** | ✓ | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Password Manager** | ✓ | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | Shadcn | Chakra | Mantine | AntD | PrimeReact |
+|------|:----:|:------:|:------:|:-------:|:----:|:----------:|
+| `maxLength` / `length` | `maxLength` | `maxLength` | `otp` | `length` | `length` | `length` |
+| `value` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `onChange` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `onComplete` | ✓ | ✓ | ✓ | ✓ | ✓ | - |
+| `pattern` | ✓ | ✓ | - | - | - | - |
+| `disabled` | ✓ | ✓ | `isDisabled` | ✓ | ✓ | ✓ |
+| `autoFocus` | ✓ | ✓ | `autoFocus` | `autoFocus` | `autoFocus` | `autoFocus` |
+| `size` | - | - | ✓ | ✓ | ✓ | - |
+| `variant` | - | - | ✓ | ✓ | - | - |
+| `mask` / `type` | - | - | - | `mask` | - | - |
+| `separator` | compound | compound | - | `grouping` | - | - |
+
+#### Abordagens de Implementacao
+
+| Design System | Abordagem | Biblioteca Base | Notas |
+|---------------|-----------|-----------------|-------|
+| **ETUS** | Compound components | `input-otp` | Slots flexiveis, separadores customizaveis |
+| **Shadcn/ui** | Compound components | `input-otp` | Mesma base que ETUS |
+| **Chakra UI** | PinInput | Proprio | `PinInput` + `PinInputField` |
+| **Mantine** | Monolitico | Proprio | Props `length`, `grouping` |
+| **Ant Design** | Monolitico | Proprio | `Input.OTP` com `length` |
+| **PrimeReact** | Monolitico | Proprio | `InputOtp` simples |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `role="separator"` | No InputOTPSeparator para screen readers |
+| `aria-invalid` | Quando validacao falha |
+| `aria-disabled` | Quando `disabled={true}` |
+| `aria-label` | Descricao do campo OTP |
+| `aria-describedby` | Referencia ao texto de ajuda |
+| `inputmode="numeric"` | Teclado numerico em mobile |
+| `autocomplete="one-time-code"` | Autocomplete de SMS |
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Move foco para/do componente |
+| `0-9` | Insere digito e avanca |
+| `a-z` | Insere letra (se pattern permitir) |
+| `Backspace` | Remove digito e volta |
+| `Delete` | Remove digito atual |
+| `ArrowLeft` | Move para slot anterior |
+| `ArrowRight` | Move para proximo slot |
+| `Home` | Move para primeiro slot |
+| `End` | Move para ultimo slot |
+| `Ctrl+V` / `Cmd+V` | Cola codigo completo |
+
+### Focus Management
+
+```tsx
+// Focus visible no slot ativo
+data-[active=true]:border-ring
+data-[active=true]:ring-ring/50
+data-[active=true]:ring-[3px]
+
+// Caret animado
+.animate-caret-blink {
+  animation: caret-blink 1s infinite;
+}
+```
+
+### Contraste de Cores
+
+Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
+
+| Estado | Foreground | Background | Ratio |
+|--------|------------|------------|-------|
+| Default | `--foreground` | transparent | >= 4.5:1 |
+| Active | `--foreground` | transparent + ring | >= 4.5:1 |
+| Invalid | `--destructive` | transparent | >= 4.5:1 |
+
+### Screen Readers
+
+- Usar `aria-label` descritivo no InputOTP
+- Anunciar quantidade de digitos esperados
+- Anunciar progresso de preenchimento
+- Separadores tem `role="separator"`
+
+### Reduced Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .animate-caret-blink {
+    animation: none;
+  }
+}
+```
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
+| **Keyboard nav** | ✓ | - | - | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | ✓ |
+| **inputmode** | ✓ | - | - | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | ✓ |
+| **autocomplete** | ✓ | - | - | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | - |
+| **aria-invalid** | ✓ | - | - | - | - | ✓ | - | ✓ | - | - | - | - | - | - |
+| **aria-label** | ✓ | - | - | - | - | ✓ | - | ✓ | - | - | - | - | - | - |
+| **Paste support** | ✓ | - | - | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | ✓ |
+| **Focus visible** | ✓ | - | - | - | - | ✓ | - | ✓ | ✓ | - | - | - | - | ✓ |
+| **Reduced motion** | ✓ | - | - | - | - | ~ | - | ✓ | - | - | - | - | - | - |
+
+**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Nao aplicavel/Nao suportado
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+
+function Example() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+### Com Separador
+
+```tsx
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "@etus/ui"
+
+function OTPWithSeparator() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+
+function ControlledOTP() {
+  const [value, setValue] = useState("")
+
+  return (
+    <div className="space-y-2">
+      <InputOTP
+        maxLength={6}
+        value={value}
+        onChange={(value) => setValue(value)}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+      <p className="text-muted-foreground text-sm text-center">
+        {value === "" ? "Digite o codigo de verificacao" : `Codigo: ${value}`}
+      </p>
+    </div>
+  )
+}
+```
+
+### Com Pattern (Alfanumerico)
+
+```tsx
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+
+function AlphanumericOTP() {
+  return (
+    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+### Com Callback onComplete
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+import { toast } from "sonner"
+
+function OTPWithComplete() {
+  const handleComplete = (value: string) => {
+    toast.success(`Codigo verificado: ${value}`)
+    // Chamar API de verificacao
+  }
+
+  return (
+    <InputOTP maxLength={6} onComplete={handleComplete}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+### Estados
+
+```tsx
+// Desabilitado
+<InputOTP maxLength={6} disabled>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+
+// Invalido (via aria-invalid no form)
+<InputOTP maxLength={6} aria-invalid>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+
+// Com autoFocus
+<InputOTP maxLength={6} autoFocus>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Com Formulario (React Hook Form)
+
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@etus/ui/form"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+import { Button } from "@etus/ui/button"
+
+const formSchema = z.object({
+  pin: z.string().min(6, {
+    message: "O codigo deve ter 6 digitos.",
+  }),
+})
+
+function OTPForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      pin: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    console.log(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="pin"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Codigo de verificacao</FormLabel>
+              <FormControl>
+                <InputOTP maxLength={6} {...field}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl>
+              <FormDescription>
+                Digite o codigo enviado para seu email.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Verificar</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+### Separador Customizado
+
+```tsx
+import { Dot } from "lucide-react"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "@etus/ui"
+
+function CustomSeparator() {
+  return (
+    <InputOTP maxLength={4}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+      </InputOTPGroup>
+      <InputOTPSeparator>
+        <Dot className="size-4" />
+      </InputOTPSeparator>
+      <InputOTPGroup>
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+### PIN de 4 Digitos
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@etus/ui"
+
+function PIN4Digits() {
+  return (
+    <InputOTP maxLength={4}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// InputOTP.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "./InputOTP"
+
+describe("InputOTP", () => {
+  it("renders correct number of slots", () => {
+    render(
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    const slots = screen.getAllByRole("presentation")
+    expect(slots).toHaveLength(6)
+  })
+
+  it("has data-slot attributes", () => {
+    render(
+      <InputOTP maxLength={4}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    expect(screen.getByRole("textbox").closest("[data-slot='input-otp']")).toBeInTheDocument()
+  })
+
+  it("applies custom className", () => {
+    render(
+      <InputOTP maxLength={4} containerClassName="custom-class">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    const container = screen.getByRole("textbox").parentElement
+    expect(container).toHaveClass("custom-class")
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+describe("InputOTP interactions", () => {
+  it("accepts digit input", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <InputOTP maxLength={6} onChange={handleChange}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.type(input, "123456")
+
+    expect(handleChange).toHaveBeenCalledWith("123456")
+  })
+
+  it("calls onComplete when all slots filled", async () => {
+    const user = userEvent.setup()
+    const handleComplete = vi.fn()
+
+    render(
+      <InputOTP maxLength={6} onComplete={handleComplete}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.type(input, "123456")
+
+    expect(handleComplete).toHaveBeenCalledWith("123456")
+  })
+
+  it("respects pattern validation", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <InputOTP maxLength={6} pattern="^[0-9]+$" onChange={handleChange}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.type(input, "abc")
+
+    // Letras nao devem ser aceitas
+    expect(handleChange).not.toHaveBeenCalledWith("abc")
+  })
+
+  it("handles paste correctly", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <InputOTP maxLength={6} onChange={handleChange}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.paste("123456")
+
+    expect(handleChange).toHaveBeenCalledWith("123456")
+  })
+
+  it("handles backspace", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <InputOTP maxLength={6} onChange={handleChange} value="123">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.keyboard("{Backspace}")
+
+    expect(handleChange).toHaveBeenCalledWith("12")
+  })
+
+  it("is disabled when disabled prop is true", () => {
+    render(
+      <InputOTP maxLength={6} disabled>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    expect(screen.getByRole("textbox")).toBeDisabled()
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("InputOTP accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <InputOTP maxLength={6} aria-label="Codigo de verificacao">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("separator has role separator", () => {
+    render(
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    expect(screen.getByRole("separator")).toBeInTheDocument()
+  })
+
+  it("supports aria-label", () => {
+    render(
+      <InputOTP maxLength={6} aria-label="Codigo SMS">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-label", "Codigo SMS")
+  })
+
+  it("can receive focus", () => {
+    render(
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    const input = screen.getByRole("textbox")
+    input.focus()
+    expect(input).toHaveFocus()
+  })
+
+  it("supports keyboard navigation", async () => {
+    const user = userEvent.setup()
+    render(
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    const input = screen.getByRole("textbox")
+    await user.click(input)
+    await user.keyboard("{ArrowRight}{ArrowRight}{ArrowLeft}")
+
+    // Navegacao por setas funciona
+    expect(input).toHaveFocus()
+  })
+})
+```
+
+### Testes de Composicao
+
+```tsx
+import { InputOTPSeparator } from "./InputOTP"
+
+describe("InputOTP composition", () => {
+  it("renders with separator", () => {
+    render(
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    expect(screen.getByRole("separator")).toBeInTheDocument()
+    expect(screen.getAllByRole("presentation")).toHaveLength(6)
+  })
+
+  it("renders multiple groups", () => {
+    render(
+      <InputOTP maxLength={8}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={6} />
+          <InputOTPSlot index={7} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    expect(screen.getAllByRole("separator")).toHaveLength(3)
+    expect(screen.getAllByRole("presentation")).toHaveLength(8)
+  })
+
+  it("renders custom separator content", () => {
+    render(
+      <InputOTP maxLength={4}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+        <InputOTPSeparator>
+          <span data-testid="custom-sep">.</span>
+        </InputOTPSeparator>
+        <InputOTPGroup>
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+
+    expect(screen.getByTestId("custom-sep")).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
+
+### Prioridade Alta
+
+#### `size` Variantes
+
+Suporte a diferentes tamanhos de slots.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  size?: "sm" | "default" | "lg"
+}
+
+// Uso
+<InputOTP maxLength={6} size="lg">...</InputOTP>
+```
+
+**Referencias:** Chakra (3 tamanhos), Mantine (5 tamanhos), AntD (2 tamanhos)
+
+#### `mask` / Password Mode
+
+Ocultar digitos como asteriscos ou pontos.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  mask?: boolean | string
+}
+
+// Uso
+<InputOTP maxLength={6} mask>...</InputOTP>        // Exibe "*"
+<InputOTP maxLength={6} mask="●">...</InputOTP>   // Exibe "●"
+```
+
+**Referencias:** Mantine (`mask`), PrimeReact (prop mask)
+
+### Prioridade Media
+
+#### `variant` Estilos
+
+Variacoes visuais dos slots.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  variant?: "outline" | "filled" | "flushed" | "unstyled"
+}
+
+// Uso
+<InputOTP maxLength={6} variant="filled">...</InputOTP>
+```
+
+**Referencias:** Chakra (3 variantes), Mantine (4 variantes)
+
+#### `loading` Estado
+
+Indicador de loading durante verificacao.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  loading?: boolean
+}
+
+// Uso
+<InputOTP maxLength={6} loading>...</InputOTP>
+```
+
+#### Mensagens de Erro Integradas
+
+Suporte a `errorMessage` prop.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  error?: boolean
+  errorMessage?: string
+}
+
+// Uso
+<InputOTP maxLength={6} error errorMessage="Codigo invalido">
+  ...
+</InputOTP>
+```
+
+### Prioridade Baixa
+
+#### `resend` Timer Integrado
+
+Botao de reenvio com countdown.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  resendButton?: boolean
+  resendDelay?: number // segundos
+  onResend?: () => void
+}
+```
+
+#### Formatacao Automatica
+
+Agrupamento automatico baseado em `maxLength`.
+
+```tsx
+// Proposta de API
+interface InputOTPProps {
+  autoGroup?: boolean | number // Agrupa a cada N digitos
+}
+
+// Uso
+<InputOTP maxLength={6} autoGroup={3} /> // Cria 2 grupos de 3
+```
+
+### Decisoes de Design
+
+| Feature | Recomendacao | Justificativa |
+|---------|--------------|---------------|
+| `size` | Implementar | Alta demanda, UX flexivel |
+| `mask` | Implementar | Seguranca para PINs |
+| `variant` | Avaliar | Compound components ja flexiveis |
+| `loading` | Implementar | Feedback de verificacao |
+| `errorMessage` | Implementar | Integracao com forms |
+| `resend` | Evitar | Melhor como componente separado |
+| `autoGroup` | Evitar | Compound components mais flexiveis |
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentacao | GitHub |
+|---------------|--------------|--------|
+| **Shadcn/ui** | [Input OTP](https://ui.shadcn.com/docs/components/input-otp) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Chakra UI** | [Pin Input](https://chakra-ui.com/docs/components/pin-input) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **Mantine** | [Pin Input](https://mantine.dev/core/pin-input/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Input.OTP](https://ant.design/components/input#inputotp) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **PrimeReact** | [InputOtp](https://primereact.org/inputotp/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+
+### Biblioteca Base
+
+| Biblioteca | Documentacao | GitHub |
+|------------|--------------|--------|
+| **input-otp** | [Docs](https://input-otp.rodz.dev/) | [guilhermerodz/input-otp](https://github.com/guilhermerodz/input-otp) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA APG - Text Input Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/textbox/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+- [autocomplete="one-time-code"](https://developer.apple.com/documentation/webkit/delivering_an_exceptional_experience_with_one-time_codes)
+
+### Ferramentas Utilizadas
+
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/icons/)
+- [input-otp](https://github.com/guilhermerodz/input-otp)