TextInput

Apresentação

O componente TextInput é responsável por criar campos de entrada de texto que permitem aos usuários inserir e editar texto. Ele suporta diferentes variantes, incluindo texto simples e texto com máscara, além de permitir a adição de elementos internos (ícones, botões, etc) à esquerda e à direita do campo.

Quando usar

• Para campos de texto simples
• Para campos com máscara (telefone, CPF, etc)
• Para campos de busca
• Para campos de senha
• Para campos de email
• Para campos numéricos
• Para campos de data
• Para campos de hora
• Para campos de moeda
• Para campos com validação

Forma básica de uso

import { TextInput } from 'eitri-luminus';

// TextInput básico
<TextInput placeholder="Digite seu texto" />

// TextInput com valor inicial
<TextInput 
  placeholder="Digite seu texto"
  defaultValue="Texto inicial"
/>

// TextInput com evento onChange
<TextInput 
  placeholder="Digite seu texto"
  onChange={(e) => console.log(e.target.value)}
/>

// TextInput com classes personalizadas
<TextInput 
  placeholder="Digite seu texto"
  className="input-primary"
/>

// TextInput desabilitado
<TextInput 
  placeholder="Digite seu texto"
  disabled
/>

// TextInput com valor controlado
const [value, setValue] = useState('');
<TextInput 
  placeholder="Digite seu texto"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// TextInput com elementos internos
<TextInput 
  placeholder="Digite seu texto"
  insideLeft={<span>🔍</span>}
  insideRight={<button>Limpar</button>}
/>

// TextInput com máscara
<TextInput 
  placeholder="Digite seu telefone"
  mask="(99) 99999-9999"
  variant="mask"
/>

// TextInput com múltiplas máscaras
<TextInput 
  placeholder="Digite seu CPF ou CNPJ"
  mask={['999.999.999-99', '99.999.999/9999-99']}
  variant="mask"
/>

// TextInput com label
<div className="flex flex-col gap-2">
  <label htmlFor="nome">Nome</label>
  <TextInput 
    id="nome"
    placeholder="Digite seu nome"
  />
</div>

Propriedades

Propriedade	Tipo	Descrição
placeholder	string	Texto exibido quando o campo está vazio
value	string	Valor atual (controlado)
defaultValue	string	Valor inicial
disabled	boolean	Desabilita o input
onChange	function	Função chamada quando o valor muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente
name	string	Nome do campo no formulário
insideLeft	ReactNode	Elemento a ser exibido à esquerda
insideRight	ReactNode	Elemento a ser exibido à direita
onClear	function	Função chamada para limpar o campo
mask	string | string[]	Padrão de máscara ou array de padrões
variant	InputVariant	Variante do input (text ou mask)

Heranças

O componente TextInput herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'input' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta elementos internos
• Suporta máscaras de entrada
• Pode ser usado em layouts flexíveis