Swap

Apresentação

O componente Swap é responsável por criar elementos que alternam a visibilidade entre dois estados diferentes. Ele permite que você defina dois conteúdos distintos que são exibidos alternadamente baseado no estado de um checkbox, oferecendo uma experiência de usuário fluida para alternâncias visuais.

Quando usar

• Para alternar entre temas claro/escuro
• Para mostrar/esconder conteúdo
• Para alternar entre ícones
• Para mudar estados visuais
• Para alternar entre modos de visualização
• Para mostrar diferentes versões de conteúdo
• Para alternar entre layouts
• Para mudar estados de interface

Forma básica de uso

import { Swap, Image, View, Text } from 'eitri-luminus';

// Swap básico com ícones
<Swap>
  <Swap.On>🌙</Swap.On>
  <Swap.Off>☀️</Swap.Off>
</Swap>

// Swap com onChange
<Swap onChange={(e) => console.log('Estado:', e.target.checked)}>
  <Swap.On>Ativo</Swap.On>
  <Swap.Off>Inativo</Swap.Off>
</Swap>

// Swap com classes personalizadas
<Swap className="swap-primary">
  <Swap.On className="text-green-500">✓</Swap.On>
  <Swap.Off className="text-red-500">✗</Swap.Off>
</Swap>

// Swap para alternar tema
<Swap onChange={(e) => setTema(e.target.checked ? 'escuro' : 'claro')}>
  <Swap.On>🌙 Modo Escuro</Swap.On>
  <Swap.Off>☀️ Modo Claro</Swap.Off>
</Swap>

// Swap com imagens
<Swap>
  <Swap.On>
    <Image src="/imagem1.jpg" alt="Imagem 1" />
  </Swap.On>
  <Swap.Off>
    <Image src="/imagem2.jpg" alt="Imagem 2" />
  </Swap.Off>
</Swap>

// Swap com conteúdo complexo
<Swap onChange={(e) => setModo(e.target.checked)}>
  <Swap.On>
    <View className="p-4 bg-blue-100">
      <Text>Modo Detalhado</Text>
      <Text>Informações completas</Text>
    </View>
  </Swap.On>
  <Swap.Off>
    <View className="p-4 bg-gray-100">
      <Text>Modo Simples</Text>
      <Text>Informações básicas</Text>
    </View>
  </Swap.Off>
</Swap>

// Swap com ícones de toggle
<Swap>
  <Swap.On>👁️</Swap.On>
  <Swap.Off>👁️‍🗨️</Swap.Off>
</Swap>

// Swap para alternar visibilidade
<Swap onChange={(e) => setVisivel(e.target.checked)}>
  <Swap.On>🔓 Visível</Swap.On>
  <Swap.Off>🔒 Oculto</Swap.Off>
</Swap>

// Swap para alternar layout
<Swap onChange={(e) => setLayout(e.target.checked ? 'grid' : 'lista')}>
  <Swap.On>⊞ Grid</Swap.On>
  <Swap.Off>☰ Lista</Swap.Off>
</Swap>

// Swap com id personalizado
<Swap id="toggle-visibilidade">
  <Swap.On>Mostrar</Swap.On>
  <Swap.Off>Ocultar</Swap.Off>
</Swap>

// Swap para alternar estados
<Swap onChange={(e) => setEstado(e.target.checked ? 'ligado' : 'desligado')}>
  <Swap.On>🟢 Ligado</Swap.On>
  <Swap.Off>🔴 Desligado</Swap.Off>
</Swap>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do swap (Swap.On e Swap.Off)
onChange	function	Função chamada quando o estado muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Swap.On

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo exibido quando ativo
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Swap.Off

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo exibido quando inativo
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Swap 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 'swap' para estilização base
• Swap.On usa a classe 'swap-on'
• Swap.Off usa a classe 'swap-off'
• Mantém a semântica HTML apropriada com <label> e <input>
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para alternâncias visuais
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de toggle
• Funciona bem com temas e modos
• Facilita a alternância de estados
• Suporta conteúdo complexo
• Interface intuitiva e familiar