npm - @etus/ui - Versions diffs - 0.1.1 → 0.1.3 - Mend

@etus/ui 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1080) hide show

package/src/components/forms/TextInput/README.md DELETED Viewed

@@ -1,871 +0,0 @@
-# TextInput
-## Visão Geral
-### Proposito
-O componente `TextInput` (exportado como `Input`) e um campo de entrada de texto reutilizavel, construido sobre o elemento HTML `<input>` nativo. Segue o padrao React 19 com ref como prop nativa e utiliza Tailwind CSS v4 para estilizacao.
-### Quando Usar
-| Cenario                                          | Recomendado                      |
-| ------------------------------------------------ | -------------------------------- |
-| Formularios de login/cadastro                    | Sim                              |
-| Campos de busca                                  | Sim                              |
-| Entrada de dados simples (nome, email, telefone) | Sim                              |
-| Upload de arquivos                               | Sim (type="file")                |
-| Entrada de texto longo (multiplas linhas)        | Nao - use `Textarea`             |
-| Selecao entre opcoes                             | Nao - use `Select` ou `Combobox` |
-| Entrada numerica com incremento                  | Considere `NumberInput`          |
-### Comparacao com Design Systems
-| Design System   | Nome do Componente | Caracteristicas Principais                    |
-| --------------- | ------------------ | --------------------------------------------- |
-| **Shadcn/ui**   | Input              | Base deste componente. Unstyled, customizavel |
-| **Radix UI**    | -                  | Nao possui Input nativo (usa primitivos)      |
-| **React Aria**  | TextField          | Acessibilidade robusta, hooks composables     |
-| **Chakra UI**   | Input              | Variantes size/variant, addons integrados     |
-| **MUI**         | TextField          | Outlined/filled/standard, helper text nativo  |
-| **Mantine**     | TextInput          | Secoes (icon, rightSection), error nativo     |
-| **Ant Design**  | Input              | Addon before/after, password toggle           |
-| **NextUI**      | Input              | Animacoes, cores vibrantes, variants          |
-| **Headless UI** | -                  | Nao possui (focado em modais/menus)           |
-| **Ariakit**     | Input              | Composable, store pattern                     |
-| **Fluent UI**   | TextField          | Microsoft Design Language                     |
-| **Carbon**      | TextInput          | IBM Design, helper text, character count      |
-| **Blueprint**   | InputGroup         | Left/right elements, async validation         |
-| **PrimeReact**  | InputText          | Temas, floating label, icons                  |
-### Diferenciais do ETUS
-- **React 19 nativo**: Ref como prop, sem `forwardRef`
-- **Tailwind v4**: Usa `@theme` directive e OKLCH colors
-- **CVA-ready**: Estrutura preparada para variantes via class-variance-authority
-- **data-slot**: Atributo para estilizacao contextual via CSS parent selectors
----
-## Design Specs
-### Tokens de Design
-```css
-/* Cores (OKLCH - tokens.css) */
---input: oklch(88.60% 0.0046 78.30);           /* Borda default */
---ring: oklch(64.44% 0.1647 149.79);           /* Focus ring */
---primary: oklch(81.06% 0.2032 150.12);        /* Selection background */
---muted-foreground: oklch(65.05% 0.0063 84.57);/* Placeholder */
---destructive: oklch(56.65% 0.1994 21.83);     /* Estado de erro */
---foreground: oklch(19.53% 0.0020 106.58);     /* Texto */
-/* Dark Mode */
-.dark --input: oklch(100.00% 0.0000 0 / 15.0%);
-.dark --ring: oklch(88.23% 0.2057 138.41);
-.dark --destructive: oklch(66.49% 0.1475 16.22);
-```
-### Dimensoes
-| Propriedade         | Valor               | Token               |
-| ------------------- | ------------------- | ------------------- |
-| Altura              | `h-9` (36px)        | -                   |
-| Padding horizontal  | `px-3` (12px)       | -                   |
-| Padding vertical    | `py-1` (4px)        | -                   |
-| Border radius       | `rounded-md`        | `--radius-md` (4px) |
-| Border width        | `border` (1px)      | -                   |
-| Font size (mobile)  | `text-base` (16px)  | -                   |
-| Font size (desktop) | `md:text-sm` (14px) | -                   |
-### Estados
-```
-┌─────────────────────────────────────────────────────────────┐
-│ DEFAULT                                                      │
-│ ┌─────────────────────────────────────────────────────────┐ │
-│ │ Placeholder text...                                     │ │
-│ └─────────────────────────────────────────────────────────┘ │
-│ border-input, bg-transparent                                │
-├─────────────────────────────────────────────────────────────┤
-│ FOCUS                                                        │
-│ ┌═════════════════════════════════════════════════════════┐ │
-│ ║ User input|                                             ║ │
-│ └═════════════════════════════════════════════════════════┘ │
-│ border-ring, ring-ring/50, ring-[3px]                       │
-├─────────────────────────────────────────────────────────────┤
-│ DISABLED                                                     │
-│ ┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐ │
-│ │ Disabled text                                           │ │
-│ └─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘ │
-│ opacity-50, cursor-not-allowed, pointer-events-none         │
-├─────────────────────────────────────────────────────────────┤
-│ INVALID (aria-invalid="true")                               │
-│ ┌─────────────────────────────────────────────────────────┐ │
-│ │ Invalid input                                           │ │
-│ └─────────────────────────────────────────────────────────┘ │
-│ border-destructive, ring-destructive/20                     │
-└─────────────────────────────────────────────────────────────┘
-```
-### Padrão de Tokens com Tailwind v4
-O componente TextInput utiliza tokens de design definidos em `@etus/tokens`. No Tailwind v4, variáveis CSS que contêm cores OKLCH precisam do prefixo `color:` para serem interpretadas corretamente.
-#### Tokens Disponíveis
-```css
-/* Gerados em packages/tokens/styles/tokens.css */
-/* Cores */
---input-bg-default
---input-bg-disabled
---input-border-default
---input-border-focus
---input-border-error
---input-border-width
---input-fg-default
---input-fg-placeholder
---input-fg-disabled
---input-fg-icon
---input-radius
-/* Tamanhos */
---input-size-xs-h
---input-size-xs-px
---input-size-xs-py
---input-size-xs-text
---input-size-sm-h
---input-size-sm-px
---input-size-sm-py
---input-size-sm-text
---input-size-md-h
---input-size-md-px
---input-size-md-py
---input-size-md-text
---input-size-lg-h
---input-size-lg-px
---input-size-lg-py
---input-size-lg-text
---input-size-xl-h
---input-size-xl-px
---input-size-xl-py
---input-size-xl-text
-/* Ícones */
---input-icon-size-xs
---input-icon-size-sm
---input-icon-size-md
---input-icon-size-lg
---input-icon-size-xl
---input-icon-padding-xs
---input-icon-padding-sm
---input-icon-padding-md
---input-icon-padding-lg
---input-icon-padding-xl
---input-icon-position-xs
---input-icon-position-sm
---input-icon-position-md
---input-icon-position-lg
---input-icon-position-xl
-```
-#### Sintaxe Tailwind v4
-```tsx
-// ✅ CORRETO - cores precisam do prefixo color:
-bg-[color:var(--input-bg-default)]
-border-[color:var(--input-border-default)]
-border-[color:var(--input-border-focus)]
-text-[color:var(--input-fg-default)]
-placeholder:text-[color:var(--input-fg-placeholder)]
-// ✅ CORRETO - dimensões não precisam de prefixo
-h-[var(--input-size-md-h)]
-px-[var(--input-size-md-px)]
-py-[var(--input-size-md-py)]
-rounded-[var(--input-radius)]
-// ✅ CORRETO - font-size precisa do prefixo length:
-text-[length:var(--input-size-md-text)]
-// ❌ INCORRETO - nunca usar hsl() ou omitir prefixo para cores
-bg-[hsl(var(--input-bg-default))]
-bg-[var(--input-bg-default)]
-```
-#### Por que usar `color:` e `length:`?
-Os tokens de cor do Seven usam OKLCH (e.g., `oklch(81.06% 0.2032 150.12)`). O Tailwind v4 precisa do type hint `color:` para cores e `length:` para font-size quando usando a classe `text-[]`.
-### Variantes (Proposta para CVA)
-```typescript
-// Variantes sugeridas para implementacao futura
-const inputVariants = cva("base-classes", {
-  variants: {
-    size: {
-      sm: "h-8 px-2 text-xs",
-      md: "h-9 px-3 text-sm",
-      lg: "h-10 px-4 text-base",
-    },
-    variant: {
-      default: "border-input bg-transparent",
-      filled: "border-transparent bg-muted",
-      outline: "border-2 border-input bg-transparent",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-  },
-});
-```
----
-## API
-### Props
-```typescript
-import { type ComponentProps } from "react";
-interface InputProps extends ComponentProps<"input"> {
-  // Herda todas as props nativas de <input>
-  // Incluindo: type, placeholder, disabled, required, etc.
-}
-// Nota: React 19 - ref e uma prop nativa, nao precisa de forwardRef
-```
-### Props Herdadas Relevantes
-| Prop               | Tipo                       | Default  | Descricao                                                |
-| ------------------ | -------------------------- | -------- | -------------------------------------------------------- |
-| `type`             | `string`                   | `'text'` | Tipo do input: text, email, password, number, file, etc. |
-| `placeholder`      | `string`                   | -        | Texto de placeholder                                     |
-| `disabled`         | `boolean`                  | `false`  | Desabilita o input                                       |
-| `required`         | `boolean`                  | `false`  | Campo obrigatorio                                        |
-| `readOnly`         | `boolean`                  | `false`  | Somente leitura                                          |
-| `value`            | `string \| number`         | -        | Valor controlado                                         |
-| `defaultValue`     | `string \| number`         | -        | Valor inicial (nao controlado)                           |
-| `onChange`         | `(e: ChangeEvent) => void` | -        | Handler de mudanca                                       |
-| `onBlur`           | `(e: FocusEvent) => void`  | -        | Handler de blur                                          |
-| `onFocus`          | `(e: FocusEvent) => void`  | -        | Handler de focus                                         |
-| `name`             | `string`                   | -        | Nome para formularios                                    |
-| `id`               | `string`                   | -        | ID para labels                                           |
-| `autoComplete`     | `string`                   | -        | Tipo de autocomplete                                     |
-| `autoFocus`        | `boolean`                  | `false`  | Focus automatico                                         |
-| `minLength`        | `number`                   | -        | Tamanho minimo                                           |
-| `maxLength`        | `number`                   | -        | Tamanho maximo                                           |
-| `pattern`          | `string`                   | -        | Regex de validacao                                       |
-| `aria-invalid`     | `boolean`                  | -        | Estado de erro (aciona estilos)                          |
-| `aria-describedby` | `string`                   | -        | ID da descricao/erro                                     |
-| `className`        | `string`                   | -        | Classes CSS adicionais                                   |
-| `ref`              | `Ref<HTMLInputElement>`    | -        | Ref para o elemento (React 19)                           |
-### Retorno
-Renderiza um elemento `<input>` HTML nativo com estilos Tailwind aplicados.
----
-## Acessibilidade (A11y)
-### Conformidade WCAG 2.1 AA
-| Criterio                     | Status  | Implementacao                            |
-| ---------------------------- | ------- | ---------------------------------------- |
-| 1.3.1 Info and Relationships | Parcial | Requer `<Label>` associado via `htmlFor` |
-| 1.4.3 Contrast (Minimum)     | Sim     | Tokens OKLCH garantem contraste adequado |
-| 1.4.11 Non-text Contrast     | Sim     | Borda e focus ring visiveis              |
-| 2.1.1 Keyboard               | Sim     | Focusable nativamente                    |
-| 2.4.7 Focus Visible          | Sim     | Focus ring de 3px com cor do ring token  |
-| 3.2.1 On Focus               | Sim     | Sem mudanca de contexto                  |
-| 3.3.1 Error Identification   | Parcial | Via `aria-invalid`, requer mensagem      |
-| 3.3.2 Labels or Instructions | Parcial | Requer componente Label                  |
-| 4.1.2 Name, Role, Value      | Sim     | Elemento input nativo                    |
-### Atributos ARIA Suportados
-```tsx
-// Estado de erro
-<Input
-  aria-invalid={hasError}
-  aria-describedby="error-message"
-/>
-<span id="error-message">Mensagem de erro</span>
-// Campo obrigatorio
-<Input
-  required
-  aria-required="true"
-/>
-// Com label
-<Label htmlFor="email">Email</Label>
-<Input id="email" type="email" />
-```
-### Navegacao por Teclado
-| Tecla             | Acao                                          |
-| ----------------- | --------------------------------------------- |
-| `Tab`             | Move o foco para o proximo elemento focusable |
-| `Shift + Tab`     | Move o foco para o elemento anterior          |
-| `Enter` (em form) | Submete o formulario                          |
-| Qualquer tecla    | Insere caractere (comportamento nativo)       |
-### Checklist de Implementacao
-- [ ] Sempre associe um `<Label>` com `htmlFor` correspondente ao `id` do input
-- [ ] Use `aria-describedby` para conectar mensagens de erro/ajuda
-- [ ] Use `aria-invalid="true"` para estados de erro
-- [ ] Nao remova o focus ring (`outline-none` e compensado pelo ring)
-- [ ] Para inputs obrigatorios, use tanto `required` quanto indicador visual
-- [ ] Placeholder nao substitui label
----
-## Exemplos
-### Uso Basico
-```tsx
-import { Input } from "@etus/ui";
-function BasicExample() {
-  return <Input type="text" placeholder="Digite seu nome" />;
-}
-```
-### Com Label (Padrao Recomendado)
-```tsx
-import { Input, Label } from "@etus/ui";
-function LabeledInput() {
-  return (
-    <div className="flex flex-col gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input
-        id="email"
-        type="email"
-        placeholder="seu@email.com"
-        autoComplete="email"
-      />
-    </div>
-  );
-}
-```
-### Estado de Erro
-```tsx
-import { Input, Label } from "@etus/ui";
-function ErrorState() {
-  const [error, setError] = useState<string | null>("Email invalido");
-  return (
-    <div className="flex flex-col gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input
-        id="email"
-        type="email"
-        aria-invalid={!!error}
-        aria-describedby={error ? "email-error" : undefined}
-        className={error ? "border-destructive" : ""}
-      />
-      {error && (
-        <span id="email-error" className="text-sm text-destructive">
-          {error}
-        </span>
-      )}
-    </div>
-  );
-}
-```
-### Com React Hook Form + Zod
-```tsx
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Input, Label, Button } from "@etus/ui";
-const schema = z.object({
-  email: z.string().email("Email invalido"),
-  password: z.string().min(8, "Minimo 8 caracteres"),
-});
-type FormData = z.infer<typeof schema>;
-function LoginForm() {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormData>({
-    resolver: zodResolver(schema),
-  });
-  const onSubmit = (data: FormData) => {
-    console.log(data);
-  };
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="email">Email</Label>
-        <Input
-          id="email"
-          type="email"
-          {...register("email")}
-          aria-invalid={!!errors.email}
-          aria-describedby={errors.email ? "email-error" : undefined}
-        />
-        {errors.email && (
-          <span id="email-error" className="text-sm text-destructive">
-            {errors.email.message}
-          </span>
-        )}
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="password">Senha</Label>
-        <Input
-          id="password"
-          type="password"
-          {...register("password")}
-          aria-invalid={!!errors.password}
-          aria-describedby={errors.password ? "password-error" : undefined}
-        />
-        {errors.password && (
-          <span id="password-error" className="text-sm text-destructive">
-            {errors.password.message}
-          </span>
-        )}
-      </div>
-      <Button type="submit">Entrar</Button>
-    </form>
-  );
-}
-```
-### Controlado vs Nao-Controlado
-```tsx
-// Controlado - voce gerencia o estado
-function ControlledInput() {
-  const [value, setValue] = useState("");
-  return (
-    <Input
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      placeholder="Controlado"
-    />
-  );
-}
-// Nao-controlado - DOM gerencia o estado
-function UncontrolledInput() {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const handleSubmit = () => {
-    console.log(inputRef.current?.value);
-  };
-  return (
-    <>
-      <Input
-        ref={inputRef}
-        defaultValue="Valor inicial"
-        placeholder="Nao-controlado"
-      />
-      <Button onClick={handleSubmit}>Obter valor</Button>
-    </>
-  );
-}
-```
-### Upload de Arquivo
-```tsx
-function FileInput() {
-  return (
-    <div className="flex flex-col gap-2">
-      <Label htmlFor="avatar">Foto de perfil</Label>
-      <Input
-        id="avatar"
-        type="file"
-        accept="image/*"
-        className="file:mr-4 file:rounded-md file:border-0 file:bg-primary file:px-4 file:py-2 file:text-primary-foreground file:font-medium hover:file:bg-primary/90"
-      />
-    </div>
-  );
-}
-```
-### Com Icones (Usando Wrapper)
-```tsx
-import { Search, Mail } from "lucide-react";
-import { Input } from "@etus/ui";
-function InputWithIcon() {
-  return (
-    <div className="relative">
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input type="search" placeholder="Buscar..." className="pl-9" />
-    </div>
-  );
-}
-function InputWithRightIcon() {
-  return (
-    <div className="relative">
-      <Input type="email" placeholder="seu@email.com" className="pr-9" />
-      <Mail className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-    </div>
-  );
-}
-```
-### Dark Mode (Automatico)
-```tsx
-// O componente ja suporta dark mode atraves dos tokens CSS
-// dark:bg-input/30 e aplicado automaticamente
-function DarkModeExample() {
-  return (
-    <div className="dark rounded-lg bg-background p-4">
-      <Input placeholder="Input em dark mode" />
-    </div>
-  );
-}
-```
----
-## Testes
-### Configuracao
-```typescript
-// vitest.config.ts
-import { defineConfig } from "vitest/config";
-export default defineConfig({
-  test: {
-    environment: "jsdom",
-    setupFiles: "./src/test/setup.ts",
-    globals: true,
-  },
-});
-// src/test/setup.ts
-import "@testing-library/jest-dom";
-```
-### Casos de Teste
-```typescript
-// TextInput.test.tsx
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Input } from './TextInput'
-describe('Input', () => {
-  // ==========================================
-  // Renderizacao
-  // ==========================================
-  describe('Renderizacao', () => {
-    it('deve renderizar um input', () => {
-      render(<Input data-testid="input" />)
-      expect(screen.getByTestId('input')).toBeInTheDocument()
-    })
-    it('deve renderizar com placeholder', () => {
-      render(<Input placeholder="Digite aqui" />)
-      expect(screen.getByPlaceholderText('Digite aqui')).toBeInTheDocument()
-    })
-    it('deve aplicar className customizada', () => {
-      render(<Input className="custom-class" data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveClass('custom-class')
-    })
-    it('deve ter data-slot="input"', () => {
-      render(<Input data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('data-slot', 'input')
-    })
-  })
-  // ==========================================
-  // Tipos de Input
-  // ==========================================
-  describe('Tipos', () => {
-    it.each([
-      'text',
-      'email',
-      'password',
-      'number',
-      'tel',
-      'url',
-      'search',
-      'file',
-    ])('deve aceitar type="%s"', (type) => {
-      render(<Input type={type} data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('type', type)
-    })
-  })
-  // ==========================================
-  // Interacao
-  // ==========================================
-  describe('Interacao', () => {
-    it('deve aceitar entrada de texto', async () => {
-      const user = userEvent.setup()
-      render(<Input data-testid="input" />)
-      const input = screen.getByTestId('input')
-      await user.type(input, 'Hello World')
-      expect(input).toHaveValue('Hello World')
-    })
-    it('deve chamar onChange ao digitar', async () => {
-      const handleChange = vi.fn()
-      const user = userEvent.setup()
-      render(<Input onChange={handleChange} data-testid="input" />)
-      await user.type(screen.getByTestId('input'), 'a')
-      expect(handleChange).toHaveBeenCalled()
-    })
-    it('deve chamar onFocus ao receber foco', async () => {
-      const handleFocus = vi.fn()
-      const user = userEvent.setup()
-      render(<Input onFocus={handleFocus} data-testid="input" />)
-      await user.click(screen.getByTestId('input'))
-      expect(handleFocus).toHaveBeenCalled()
-    })
-    it('deve chamar onBlur ao perder foco', async () => {
-      const handleBlur = vi.fn()
-      const user = userEvent.setup()
-      render(<Input onBlur={handleBlur} data-testid="input" />)
-      const input = screen.getByTestId('input')
-      await user.click(input)
-      await user.tab()
-      expect(handleBlur).toHaveBeenCalled()
-    })
-  })
-  // ==========================================
-  // Estados
-  // ==========================================
-  describe('Estados', () => {
-    it('deve estar desabilitado quando disabled=true', () => {
-      render(<Input disabled data-testid="input" />)
-      expect(screen.getByTestId('input')).toBeDisabled()
-    })
-    it('nao deve aceitar entrada quando desabilitado', async () => {
-      const user = userEvent.setup()
-      render(<Input disabled data-testid="input" />)
-      const input = screen.getByTestId('input')
-      await user.type(input, 'teste')
-      expect(input).toHaveValue('')
-    })
-    it('deve estar somente leitura quando readOnly=true', () => {
-      render(<Input readOnly data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('readonly')
-    })
-    it('deve ser obrigatorio quando required=true', () => {
-      render(<Input required data-testid="input" />)
-      expect(screen.getByTestId('input')).toBeRequired()
-    })
-  })
-  // ==========================================
-  // Acessibilidade
-  // ==========================================
-  describe('Acessibilidade', () => {
-    it('deve suportar aria-invalid', () => {
-      render(<Input aria-invalid="true" data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('aria-invalid', 'true')
-    })
-    it('deve suportar aria-describedby', () => {
-      render(
-        <>
-          <Input aria-describedby="helper" data-testid="input" />
-          <span id="helper">Texto de ajuda</span>
-        </>
-      )
-      expect(screen.getByTestId('input')).toHaveAttribute('aria-describedby', 'helper')
-    })
-    it('deve ser acessivel via label', () => {
-      render(
-        <>
-          <label htmlFor="test-input">Label</label>
-          <Input id="test-input" />
-        </>
-      )
-      expect(screen.getByLabelText('Label')).toBeInTheDocument()
-    })
-    it('deve ser focusable via teclado', async () => {
-      const user = userEvent.setup()
-      render(
-        <>
-          <button>Before</button>
-          <Input data-testid="input" />
-        </>
-      )
-      await user.tab()
-      await user.tab()
-      expect(screen.getByTestId('input')).toHaveFocus()
-    })
-  })
-  // ==========================================
-  // Ref (React 19)
-  // ==========================================
-  describe('Ref (React 19)', () => {
-    it('deve expor ref para o elemento input', () => {
-      const ref = { current: null }
-      render(<Input ref={ref} />)
-      expect(ref.current).toBeInstanceOf(HTMLInputElement)
-    })
-    it('deve permitir focus via ref', () => {
-      const ref = { current: null as HTMLInputElement | null }
-      render(<Input ref={ref} data-testid="input" />)
-      ref.current?.focus()
-      expect(screen.getByTestId('input')).toHaveFocus()
-    })
-  })
-  // ==========================================
-  // Valor Controlado vs Nao-Controlado
-  // ==========================================
-  describe('Controlado vs Nao-Controlado', () => {
-    it('deve funcionar como controlado com value', async () => {
-      const ControlledInput = () => {
-        const [value, setValue] = React.useState('')
-        return (
-          <Input
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            data-testid="input"
-          />
-        )
-      }
-      const user = userEvent.setup()
-      render(<ControlledInput />)
-      await user.type(screen.getByTestId('input'), 'teste')
-      expect(screen.getByTestId('input')).toHaveValue('teste')
-    })
-    it('deve funcionar como nao-controlado com defaultValue', () => {
-      render(<Input defaultValue="inicial" data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveValue('inicial')
-    })
-  })
-  // ==========================================
-  // Validacao
-  // ==========================================
-  describe('Validacao', () => {
-    it('deve respeitar minLength', () => {
-      render(<Input minLength={5} data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('minlength', '5')
-    })
-    it('deve respeitar maxLength', () => {
-      render(<Input maxLength={10} data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('maxlength', '10')
-    })
-    it('deve respeitar pattern', () => {
-      render(<Input pattern="[0-9]+" data-testid="input" />)
-      expect(screen.getByTestId('input')).toHaveAttribute('pattern', '[0-9]+')
-    })
-  })
-})
-```
-### Executando os Testes
-```bash
-# Executar todos os testes
-pnpm test
-# Executar testes do Input especificamente
-pnpm test -- TextInput.test.tsx
-# Executar com cobertura
-pnpm test -- --coverage
-# Modo watch
-pnpm test -- --watch
-```
-### Cobertura Esperada
-| Metrica    | Minimo Recomendado |
-| ---------- | ------------------ |
-| Statements | > 90%              |
-| Branches   | > 85%              |
-| Functions  | > 90%              |
-| Lines      | > 90%              |
----
-## Changelog
-| Versao | Data | Mudancas                               |
-| ------ | ---- | -------------------------------------- |
-| 1.0.0  | -    | Versao inicial baseada no Shadcn Input |
-## Recursos Adicionais
-- [Shadcn/ui Input](https://ui.shadcn.com/docs/components/input)
-- [MDN: input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-- [WCAG 2.1 - Forms](https://www.w3.org/WAI/tutorials/forms/)
-- [React 19 - Ref as Prop](https://react.dev/blog/2024/04/25/react-19#ref-as-a-prop)