@etus/ui 0.1.0 → 0.1.2

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

@@ -1,845 +0,0 @@
-# InputGroup
-
-## Visão Geral
-
-O **InputGroup** e um componente composto que permite agrupar campos de entrada (input/textarea) com elementos auxiliares como icones, botoes, texto ou badges. Como molecula de formulario, ele encapsula a logica de layout e foco compartilhado entre o campo e seus addons.
-
-### Casos de Uso
-
-- Campos de busca com icone de lupa e botao de limpar
-- Inputs monetarios com simbolo de moeda (R$, $, EUR)
-- Campos de URL com prefixo "https://"
-- Inputs de senha com botao de mostrar/ocultar
-- Campos com atalhos de teclado (kbd) como indicador
-- Textareas com contador de caracteres ou botoes de acao
-
-### Classificacao
-
-**Categoria:** Molecule (Forms)
-**Dependencias:** `Button`, `Input`, `Textarea`, `class-variance-authority`
-
----
-
-## Design Specs
-
-### Alinhamento dos Addons (`align`)
-
-| Alinhamento | Uso | Layout |
-|-------------|-----|--------|
-| `inline-start` | Icone/texto antes do input | Flex row, addon a esquerda |
-| `inline-end` | Botao/acao apos o input | Flex row, addon a direita |
-| `block-start` | Label/contexto acima do input | Flex column, addon no topo |
-| `block-end` | Contador/acao abaixo do input | Flex column, addon embaixo |
-
-### Tamanhos do Botao (`size`)
-
-| Tamanho | Altura | Padding | Uso |
-|---------|--------|---------|-----|
-| `xs` | `h-6` | `px-2` | Botoes pequenos inline |
-| `sm` | `h-8` | `px-2.5` | Botoes medios inline |
-| `icon-xs` | `size-6` | `p-0` | Icone pequeno sem texto |
-| `icon-sm` | `size-8` | `p-0` | Icone medio sem texto |
-
-### Estados
-
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Borda `border-input`, sombra leve |
-| Focus | `focus-visible` no control | Ring de 3px com `ring-ring/50`, borda `border-ring` |
-| Disabled | `data-disabled="true"` | 50% opacidade nos addons |
-| Error | `aria-invalid="true"` | Borda e ring `destructive` |
-
-### Tokens Utilizados
-
-```css
-/* Cores */
---color-input: /* cor da borda padrao */
---color-ring: /* cor do ring de foco */
---color-destructive: /* cor de erro */
---color-muted-foreground: /* cor do texto dos addons */
-
-/* Espacamento */
---spacing-1.5: 0.375rem  /* py do addon */
---spacing-2: 0.5rem      /* px do botao xs */
---spacing-3: 0.75rem     /* px do addon */
-
-/* Tipografia */
---font-size-sm: 0.875rem /* texto dos addons */
---font-weight-medium: 500
-
-/* Bordas */
---radius: /* radius padrao, usado em calculos */
---border-width: 1px
-
-/* Transicoes */
-transition-[color,box-shadow]
-```
-
-### data-slot
-
-```html
-<div data-slot="input-group" role="group">
-  <div data-slot="input-group-addon" data-align="inline-start">...</div>
-  <input data-slot="input-group-control" />
-  <div data-slot="input-group-addon" data-align="inline-end">...</div>
-</div>
-```
-
----
-
-## API
-
-### InputGroup
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Addons e control (Input/Textarea) |
-| `ref` | `Ref<HTMLDivElement>` | - | Referencia ao elemento DOM |
-
-> Herda todas as props de `React.ComponentProps<"div">`
-
-### InputGroupAddon
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` | Posicao do addon |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Conteudo (icones, texto, botoes) |
-
-> Herda todas as props de `React.ComponentProps<"div">`
-
-### InputGroupButton
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `size` | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"` | Tamanho do botao |
-| `variant` | `ButtonVariant` | `"ghost"` | Variante visual do botao |
-| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Tipo HTML do botao |
-
-> Herda todas as props de `Button` exceto `size`
-
-### InputGroupText
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Texto ou elementos decorativos |
-
-> Herda todas as props de `React.ComponentProps<"span">`
-
-### InputGroupInput
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais |
-
-> Herda todas as props de `React.ComponentProps<"input">`
-
-### InputGroupTextarea
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais |
-
-> Herda todas as props de `React.ComponentProps<"textarea">`
-
-### TypeScript
-
-```typescript
-import { type VariantProps } from "class-variance-authority"
-
-// Variants do Addon
-const inputGroupAddonVariants = cva(/* ... */, {
-  variants: {
-    align: {
-      "inline-start": "...",
-      "inline-end": "...",
-      "block-start": "...",
-      "block-end": "...",
-    },
-  },
-  defaultVariants: { align: "inline-start" },
-})
-
-// Variants do Button
-const inputGroupButtonVariants = cva(/* ... */, {
-  variants: {
-    size: {
-      xs: "...",
-      sm: "...",
-      "icon-xs": "...",
-      "icon-sm": "...",
-    },
-  },
-  defaultVariants: { size: "xs" },
-})
-
-// Tipos derivados
-type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end"
-type InputGroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm"
-```
-
-### 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 |
-|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
-| Addon inline-start | &#10003; | ~ | - | - | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | - | - | &#10003; | - | &#10003; | &#10003; |
-| Addon inline-end | &#10003; | ~ | - | - | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | - | - | &#10003; | - | &#10003; | &#10003; |
-| Addon block (vertical) | &#10003; | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| Botao integrado | &#10003; | - | - | - | ~ | - | - | ~ | - | - | - | - | - | - | - |
-| Foco compartilhado | &#10003; | - | - | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | - | - | &#10003; | - | &#10003; | &#10003; |
-| Textarea support | &#10003; | - | - | - | - | &#10003; | - | - | - | - | - | - | - | - | - |
-| Click-to-focus addon | &#10003; | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| data-slot pattern | &#10003; | &#10003; | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| CVA variants | &#10003; | &#10003; | - | - | - | - | - | - | - | - | - | - | - | - | - |
-
-#### Comparativo de Props por Design System
-
-| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent |
-|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|
-| `leftElement` | `InputGroupAddon align="inline-start"` | `InputLeftElement` | `startAdornment` | `leftSection` | `addonBefore` | `startContent` | `contentBefore` |
-| `rightElement` | `InputGroupAddon align="inline-end"` | `InputRightElement` | `endAdornment` | `rightSection` | `addonAfter` | `endContent` | `contentAfter` |
-| `topElement` | `InputGroupAddon align="block-start"` | - | - | - | - | - | - |
-| `bottomElement` | `InputGroupAddon align="block-end"` | - | - | - | - | - | - |
-
-**Analise:** O ETUS InputGroup e o unico que oferece alinhamento vertical (block-start/block-end) alem do horizontal. A maioria dos DS usa propriedades separadas (leftElement/rightElement) enquanto ETUS usa um unico componente com prop `align`.
-
----
-
-## Acessibilidade (A11y)
-
-### ARIA Attributes
-
-| Atributo | Uso |
-|----------|-----|
-| `role="group"` | Container e addons agrupam elementos relacionados |
-| `aria-invalid="true"` | Indica estado de erro no control |
-| `aria-describedby` | Conecta mensagens de erro/ajuda ao input |
-
-### Suporte a Teclado
-
-| Tecla | Acao |
-|-------|------|
-| `Tab` | Move foco para o input/textarea ou botoes interativos |
-| `Shift+Tab` | Move foco para o elemento anterior |
-| `Enter` | Ativa botoes dentro do addon |
-| `Space` | Ativa botoes dentro do addon |
-
-### Focus Management
-
-```tsx
-// O InputGroup delega foco ao control interno
-// Clicar no addon (exceto em botoes) foca o input
-
-// Focus visible apenas para navegacao por teclado
-has-[[data-slot=input-group-control]:focus-visible]:border-ring
-has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50
-has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]
-```
-
-### Contraste de Cores
-
-Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
-
-| Elemento | Foreground | Background | Ratio |
-|----------|------------|------------|-------|
-| Addon text | `muted-foreground` | `background` | 4.5:1+ |
-| Input text | `foreground` | `input/30` | 7:1+ |
-| Error border | `destructive` | `background` | 4.5:1+ |
-
-### Screen Readers
-
-- O `role="group"` anuncia que os elementos estao agrupados
-- Labels devem ser associados ao `InputGroupInput` via `htmlFor`/`id`
-- Icones decorativos devem ter `aria-hidden="true"`
-- Botoes de acao devem ter `aria-label` descritivo
-
-### Reduced Motion
-
-```tsx
-// Transicoes respeitam preferencia do usuario
-motion-reduce:transition-none
-```
-
-### Comparativo A11y (14 Design Systems)
-
-| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
-| role="group" | &#10003; | &#10003; | - | &#10003; | - | &#10003; | &#10003; | &#10003; | ~ | &#10003; | &#10003; | &#10003; | ~ | ~ |
-| Focus delegation | &#10003; | &#10003; | - | &#10003; | - | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | ~ | &#10003; | &#10003; |
-| Error ARIA | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | ~ | &#10003; | &#10003; | &#10003; | &#10003; | ~ |
-| Keyboard nav | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; |
-| Screen reader tested | ~ | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | &#10003; | ~ | ~ | &#10003; | &#10003; | &#10003; | ~ | ~ |
-
-**Legenda:** &#10003; = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
-
----
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@etus/ui"
-import { Search } from "lucide-react"
-
-function SearchInput() {
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <Search className="size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Buscar..." />
-    </InputGroup>
-  )
-}
-```
-
-### Addon nos Dois Lados
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupButton,
-} from "@etus/ui"
-import { Mail, X } from "lucide-react"
-
-function EmailInput() {
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <Mail className="size-4" />
-      </InputGroupAddon>
-      <InputGroupInput type="email" placeholder="seu@email.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton size="icon-xs" aria-label="Limpar">
-          <X className="size-3.5" />
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
-### Com Texto Prefixo/Sufixo
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@etus/ui"
-
-function UrlInput() {
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupText>https://</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="meusite.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>.com.br</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
-### Campo de Senha com Toggle
-
-```tsx
-import { useState } from "react"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupButton,
-} from "@etus/ui"
-import { Eye, EyeOff, Lock } from "lucide-react"
-
-function PasswordInput() {
-  const [show, setShow] = useState(false)
-
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <Lock className="size-4" />
-      </InputGroupAddon>
-      <InputGroupInput
-        type={show ? "text" : "password"}
-        placeholder="Sua senha"
-      />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton
-          size="icon-xs"
-          onClick={() => setShow(!show)}
-          aria-label={show ? "Ocultar senha" : "Mostrar senha"}
-        >
-          {show ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
-### Com Atalho de Teclado (kbd)
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@etus/ui"
-import { Search } from "lucide-react"
-import { Kbd } from "@etus/ui"
-
-function SearchWithShortcut() {
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <Search className="size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Buscar..." />
-      <InputGroupAddon align="inline-end">
-        <Kbd>&#8984;K</Kbd>
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
-### Layout Vertical (Block)
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupTextarea,
-  InputGroupText,
-  InputGroupButton,
-} from "@etus/ui"
-import { Send } from "lucide-react"
-
-function CommentBox() {
-  const [text, setText] = useState("")
-  const maxLength = 280
-
-  return (
-    <InputGroup>
-      <InputGroupAddon align="block-start">
-        <InputGroupText>Escreva seu comentario</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupTextarea
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        placeholder="O que voce esta pensando?"
-        rows={3}
-      />
-      <InputGroupAddon align="block-end" className="justify-between">
-        <InputGroupText>
-          {text.length}/{maxLength}
-        </InputGroupText>
-        <InputGroupButton size="sm">
-          <Send className="size-4" />
-          Enviar
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
-### Estado de Erro
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@etus/ui"
-import { AlertCircle, User } from "lucide-react"
-
-function ErrorInput() {
-  return (
-    <div className="space-y-2">
-      <InputGroup>
-        <InputGroupAddon>
-          <User className="size-4" />
-        </InputGroupAddon>
-        <InputGroupInput
-          aria-invalid="true"
-          aria-describedby="username-error"
-          placeholder="Nome de usuario"
-        />
-        <InputGroupAddon align="inline-end">
-          <AlertCircle className="size-4 text-destructive" />
-        </InputGroupAddon>
-      </InputGroup>
-      <p id="username-error" className="text-sm text-destructive">
-        Este nome de usuario ja esta em uso.
-      </p>
-    </div>
-  )
-}
-```
-
-### Integrado com React Hook Form
-
-```tsx
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-} from "@etus/ui"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@etus/ui"
-import { DollarSign } from "lucide-react"
-
-const schema = z.object({
-  amount: z.string().min(1, "Valor obrigatorio"),
-})
-
-function MoneyForm() {
-  const form = useForm({
-    resolver: zodResolver(schema),
-    defaultValues: { amount: "" },
-  })
-
-  return (
-    <Form {...form}>
-      <FormField
-        control={form.control}
-        name="amount"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Valor</FormLabel>
-            <FormControl>
-              <InputGroup>
-                <InputGroupAddon>
-                  <DollarSign className="size-4" />
-                </InputGroupAddon>
-                <InputGroupInput
-                  {...field}
-                  type="number"
-                  step="0.01"
-                  placeholder="0,00"
-                />
-              </InputGroup>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  )
-}
-```
-
----
-
-## Testes
-
-### Testes Unitarios
-
-```tsx
-// InputGroup.test.tsx
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupButton,
-  InputGroupText,
-} from "./InputGroup"
-
-describe("InputGroup", () => {
-  it("renders with correct data-slot", () => {
-    render(
-      <InputGroup>
-        <InputGroupInput data-testid="input" />
-      </InputGroup>
-    )
-    expect(screen.getByRole("group")).toHaveAttribute("data-slot", "input-group")
-  })
-
-  it("renders input with correct slot", () => {
-    render(
-      <InputGroup>
-        <InputGroupInput data-testid="input" />
-      </InputGroup>
-    )
-    expect(screen.getByTestId("input")).toHaveAttribute(
-      "data-slot",
-      "input-group-control"
-    )
-  })
-
-  it("renders addon with correct alignment", () => {
-    render(
-      <InputGroup>
-        <InputGroupAddon align="inline-end" data-testid="addon">
-          Test
-        </InputGroupAddon>
-        <InputGroupInput />
-      </InputGroup>
-    )
-    expect(screen.getByTestId("addon")).toHaveAttribute("data-align", "inline-end")
-  })
-})
-```
-
-### Testes de Interacao
-
-```tsx
-describe("InputGroup interactions", () => {
-  it("focuses input when clicking on addon", async () => {
-    const user = userEvent.setup()
-
-    render(
-      <InputGroup>
-        <InputGroupAddon data-testid="addon">Icon</InputGroupAddon>
-        <InputGroupInput data-testid="input" />
-      </InputGroup>
-    )
-
-    await user.click(screen.getByTestId("addon"))
-    expect(screen.getByTestId("input")).toHaveFocus()
-  })
-
-  it("does not steal focus when clicking button in addon", async () => {
-    const user = userEvent.setup()
-    const onClick = vi.fn()
-
-    render(
-      <InputGroup>
-        <InputGroupAddon>
-          <InputGroupButton onClick={onClick} data-testid="btn">
-            Click
-          </InputGroupButton>
-        </InputGroupAddon>
-        <InputGroupInput data-testid="input" />
-      </InputGroup>
-    )
-
-    await user.click(screen.getByTestId("btn"))
-    expect(onClick).toHaveBeenCalledTimes(1)
-    expect(screen.getByTestId("input")).not.toHaveFocus()
-  })
-
-  it("button has correct default type", () => {
-    render(
-      <InputGroup>
-        <InputGroupAddon>
-          <InputGroupButton>Click</InputGroupButton>
-        </InputGroupAddon>
-        <InputGroupInput />
-      </InputGroup>
-    )
-
-    expect(screen.getByRole("button")).toHaveAttribute("type", "button")
-  })
-})
-```
-
-### Testes de Acessibilidade
-
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-
-expect.extend(toHaveNoViolations)
-
-describe("InputGroup accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <InputGroup>
-        <InputGroupAddon>
-          <span aria-hidden="true">@</span>
-        </InputGroupAddon>
-        <InputGroupInput aria-label="Username" />
-      </InputGroup>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it("has correct role", () => {
-    render(
-      <InputGroup>
-        <InputGroupInput />
-      </InputGroup>
-    )
-    expect(screen.getByRole("group")).toBeInTheDocument()
-  })
-
-  it("propagates aria-invalid to styling", () => {
-    render(
-      <InputGroup>
-        <InputGroupInput aria-invalid="true" data-testid="input" />
-      </InputGroup>
-    )
-
-    // O grupo deve ter estilos de erro aplicados via has selector
-    const group = screen.getByRole("group")
-    expect(group).toBeInTheDocument()
-    expect(screen.getByTestId("input")).toHaveAttribute("aria-invalid", "true")
-  })
-
-  it("supports aria-describedby for error messages", () => {
-    render(
-      <>
-        <InputGroup>
-          <InputGroupInput
-            aria-invalid="true"
-            aria-describedby="error-msg"
-          />
-        </InputGroup>
-        <span id="error-msg">Error message</span>
-      </>
-    )
-
-    expect(screen.getByRole("textbox")).toHaveAttribute(
-      "aria-describedby",
-      "error-msg"
-    )
-  })
-})
-```
-
-### Testes de Composicao
-
-```tsx
-describe("InputGroup composition", () => {
-  it("renders multiple addons", () => {
-    render(
-      <InputGroup>
-        <InputGroupAddon data-testid="left">Left</InputGroupAddon>
-        <InputGroupInput />
-        <InputGroupAddon data-testid="right" align="inline-end">
-          Right
-        </InputGroupAddon>
-      </InputGroup>
-    )
-
-    expect(screen.getByTestId("left")).toBeInTheDocument()
-    expect(screen.getByTestId("right")).toBeInTheDocument()
-  })
-
-  it("works with textarea", () => {
-    render(
-      <InputGroup>
-        <InputGroupTextarea data-testid="textarea" />
-      </InputGroup>
-    )
-
-    expect(screen.getByTestId("textarea")).toBeInTheDocument()
-    expect(screen.getByTestId("textarea")).toHaveAttribute(
-      "data-slot",
-      "input-group-control"
-    )
-  })
-
-  it("renders InputGroupText correctly", () => {
-    render(
-      <InputGroup>
-        <InputGroupAddon>
-          <InputGroupText>https://</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupInput />
-      </InputGroup>
-    )
-
-    expect(screen.getByText("https://")).toBeInTheDocument()
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
-
-### Prioridade Alta
-
-- [ ] **Prop `disabled` no InputGroup**: Propagar estado disabled para todos os filhos automaticamente
-- [ ] **Prop `size`**: Tamanhos consistentes (sm, md, lg) que afetam Input e Addons
-- [ ] **InputGroupSelect**: Variante do Select otimizada para uso no grupo
-
-### Prioridade Media
-
-- [ ] **Addon com separador visual**: Borda entre addon e input (estilo MUI/AntD)
-- [ ] **Loading state**: Spinner integrado substituindo addon
-- [ ] **Prop `variant`**: outline, filled, flushed (como Chakra)
-
-### Prioridade Baixa
-
-- [ ] **Addon colapsivel**: Mostrar/ocultar addon em telas pequenas
-- [ ] **Animacao de foco**: Transicao suave ao focar (Framer Motion)
-- [ ] **InputGroupMenu**: Dropdown integrado ao grupo
-
-### Decisoes de Design
-
-| Feature | Recomendacao | Justificativa |
-|---------|--------------|---------------|
-| `asChild` no InputGroup | Nao implementar | Container sempre deve ser div para layout |
-| Props separadas (leftElement/rightElement) | Manter `align` | API unificada, mais flexivel com 4 direcoes |
-| Controlled state | Delegar ao Input | InputGroup e apenas container visual |
-| Theming | Via CSS variables | Consistente com design system ETUS |
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System | Componente Equivalente | Documentacao |
-|---------------|------------------------|--------------|
-| **Shadcn/ui** | Input (sem InputGroup) | [Input](https://ui.shadcn.com/docs/components/input) |
-| **Radix UI** | - | - |
-| **React Aria** | TextField | [TextField](https://react-spectrum.adobe.com/react-aria/TextField.html) |
-| **Chakra UI** | InputGroup | [InputGroup](https://chakra-ui.com/docs/components/input#add-elements-inside-input) |
-| **MUI** | TextField + InputAdornment | [TextField](https://mui.com/material-ui/react-text-field/) |
-| **Mantine** | Input (sections) | [Input](https://mantine.dev/core/input/) |
-| **Ant Design** | Input.Group / Input (addons) | [Input](https://ant.design/components/input) |
-| **NextUI** | Input (startContent/endContent) | [Input](https://nextui.org/docs/components/input) |
-| **Headless UI** | - | - |
-| **Ariakit** | - | - |
-| **Fluent UI** | Input (contentBefore/After) | [Input](https://react.fluentui.dev/?path=/docs/components-input--default) |
-| **Carbon** | TextInput | [TextInput](https://carbondesignsystem.com/components/text-input/usage/) |
-| **Blueprint** | InputGroup | [InputGroup](https://blueprintjs.com/docs/#core/components/input-group) |
-| **PrimeReact** | InputGroup | [InputGroup](https://primereact.org/inputgroup/) |
-
-### Especificacoes e Padroes
-
-- [WAI-ARIA APG - Form Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/form/)
-- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
-- [MDN - role="group"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role)
-
-### Ferramentas Utilizadas
-
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS v4](https://tailwindcss.com/docs)
-- [Lucide Icons](https://lucide.dev/icons/)