@dinefy/react-textarea

Um componente textarea completo e acessível para o design system Dinefy, construído com Ark UI e Vanilla Extract.

Instalação

bun add @dinefy/react-textarea

Uso Básico

import { Textarea } from "@dinefy/react-textarea";

export function MyComponent() {
  return (
    <Textarea.Root>
      <Textarea.Label>Mensagem</Textarea.Label>
      <Textarea.Field placeholder="Digite sua mensagem..." />
      <Textarea.HelperText>Digite sua mensagem aqui</Textarea.HelperText>
    </Textarea.Root>
  );
}

Componentes

Textarea.Root

Container principal que gerencia o estado do textarea usando Ark UI Field.

Props:

• disabled?: boolean - Desabilita o textarea
• invalid?: boolean - Marca o textarea como inválido
• readOnly?: boolean - Torna o textarea somente leitura

Textarea.Field

O campo textarea principal com todas as funcionalidades.

Props:

• resize?: "none" | "both" | "horizontal" | "vertical" - Tipo de redimensionamento (padrão: "vertical")
• resizable?: boolean - Permite redimensionamento (padrão: true)
• autoResize?: boolean - Redimensionamento automático baseado no conteúdo (padrão: false)
• minRows?: number - Número mínimo de linhas para auto-resize (padrão: 3)
• maxRows?: number - Número máximo de linhas para auto-resize
• textAlign?: "left" | "center" | "right" - Alinhamento do texto (padrão: left)
• maxLength?: number - Limite máximo de caracteres

Nota sobre Tamanho: O componente não possui props de tamanho predefinidas. Use CSS, Tailwind ou qualquer sistema de estilo para controlar width, height, min-height, padding, font-size, etc.

Textarea.Label

Label do textarea com variants coloridas.

Props:

• variant?: "default" | "success" | "error" | "warning" - Variant da cor (padrão: "default")

Textarea.HelperText

Texto auxiliar com variants coloridas.

Props:

• variant?: "default" | "success" | "error" | "warning" - Variant da cor (padrão: "default")

Textarea.ErrorText

Texto de erro integrado com Ark UI.

Textarea.CharacterCount

Contador de caracteres opcional.

Props:

• maxLength?: number - Limite máximo para mostrar progresso
• showCount?: boolean - Mostra a contagem atual (padrão: true)
• value?: string - Valor atual para calcular a contagem

Exemplos

Tamanhos Customizados via CSS

<Textarea.Root>
  <Textarea.Label>Pequeno</Textarea.Label>
  <Textarea.Field 
    placeholder="Textarea pequeno..." 
    style={{ minHeight: "80px", fontSize: "14px", padding: "8px 12px" }}
  />
</Textarea.Root>

<Textarea.Root>
  <Textarea.Label>Grande</Textarea.Label>
  <Textarea.Field 
    placeholder="Textarea grande..." 
    style={{ minHeight: "200px", fontSize: "18px", padding: "16px 20px" }}
  />
</Textarea.Root>

Auto-Resize

<Textarea.Root>
  <Textarea.Label>Auto Resize</Textarea.Label>
  <Textarea.Field 
    autoResize={true}
    minRows={3}
    maxRows={8}
    placeholder="Cresce automaticamente..."
  />
</Textarea.Root>

Não Redimensionável

<Textarea.Root>
  <Textarea.Label>Fixo</Textarea.Label>
  <Textarea.Field 
    resizable={false}
    placeholder="Não pode ser redimensionado..."
  />
</Textarea.Root>

Com Contador de Caracteres

<Textarea.Root>
  <Textarea.Label>Com Limite</Textarea.Label>
  <Textarea.Field 
    maxLength={280}
    placeholder="Máximo 280 caracteres..."
  />
  <Textarea.CharacterCount maxLength={280} />
</Textarea.Root>

Estados de Erro

<Textarea.Root invalid>
  <Textarea.Label>Mensagem</Textarea.Label>
  <Textarea.Field placeholder="Campo com erro..." />
  <Textarea.ErrorText>Este campo é obrigatório</Textarea.ErrorText>
</Textarea.Root>

Funcionalidades

• ✅ Flexibilidade de Tamanho: Controle total via CSS/Tailwind (sem props de tamanho)
• ✅ Redimensionamento: Controle completo sobre resize (none, both, horizontal, vertical)
• ✅ Auto-Resize: Cresce automaticamente baseado no conteúdo
• ✅ Alinhamento de Texto: left, center, right
• ✅ Estados Visuais: Normal, hover, focus, disabled, readonly, invalid
• ✅ Acessibilidade: Integração completa com Ark UI Field
• ✅ Contador de Caracteres: Opcional com limite máximo
• ✅ Reset CSS: Normalização cross-browser completa
• ✅ Design Tokens: Integração com @dinefy/theme-web
• ✅ TypeScript: Tipagem completa e segura

Dependências

• @ark-ui/react: Sistema de Field para gerenciamento de estado
• @dinefy/theme-web: Design tokens e temas
• react: 19+
• react-dom: 19+