Modal

Apresentação

O componente Modal é responsável por criar janelas de diálogo temporárias que aparecem acima da interface principal da aplicação. Ele suporta backdrop opcional e pode ser usado para exibir conteúdo importante, formulários ou confirmações que requerem atenção do usuário.

Quando usar

• Para exibir formulários importantes
• Para mostrar confirmações de ações
• Para exibir detalhes de conteúdo
• Para criar diálogos de configuração
• Para mostrar mensagens de erro
• Para exibir previews de conteúdo
• Para criar wizards de configuração
• Para mostrar informações detalhadas

Forma básica de uso

import { Modal, Text, View, Button } from 'eitri-luminus';

// Modal básico
<Modal>
  <Text render="h3">Modal Básico</Text>
  <Text>Conteúdo do modal</Text>
</Modal>

// Modal sem backdrop
<Modal backdrop={false}>
  <Text render="h3">Modal sem Backdrop</Text>
  <Text>Este modal não pode ser fechado clicando fora</Text>
</Modal>

// Modal com classes personalizadas
<Modal className="modal-bottom sm:modal-middle">
  <View className="modal-box">
    <Text render="h3">Modal Personalizado</Text>
    <Text>Conteúdo com estilos personalizados</Text>
    <View className="modal-action">
      <Button>Fechar</Button>
    </View>
  </View>
</Modal>

// Modal responsivo
<Modal className="w-full md:w-auto">
  <View className="modal-box">
    <Text render="h3">Modal Responsivo</Text>
    <Text>Conteúdo que se adapta ao tamanho da tela</Text>
  </View>
</Modal>

// Modal com identificador
<Modal id="modal-configuracao">
  <View className="modal-box">
    <Text render="h3">Configurações</Text>
    <Text>Configurações da aplicação</Text>
  </View>
</Modal>

// Modal com layout flexível
<Modal>
  <View className="modal-box">
    <View className="flex flex-col gap-4">
      <Text render="h3">Modal Flexível</Text>
      <Text>Conteúdo organizado</Text>
      <Button className="btn-primary">Ação</Button>
    </View>
  </View>
</Modal>

// Modal com formulário
<Modal>
  <View className="modal-box">
    <Text render="h3">Formulário</Text>
    <View>
      <TextInput placeholder="Nome" className="input-bordered w-full" />
      <TextInput placeholder="Email" className="input-bordered w-full mt-2" />
      <View className="modal-action">
        <Button className="btn-primary">Enviar</Button>
        <Button>Cancelar</Button>
      </View>
    </View>
  </View>
</Modal>

// Modal com confirmação
<Modal>
  <View className="modal-box">
    <Text render="h3">Confirmar Ação</Text>
    <Text>Tem certeza que deseja continuar?</Text>
    <View className="modal-action">
      <Button className="btn-error">Confirmar</Button>
      <Button>Cancelar</Button>
    </View>
  </View>
</Modal>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do modal
backdrop	boolean	Habilita/desabilita o backdrop (padrão: true)
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Modal 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 tag semântica <dialog> do HTML
• O backdrop pode ser desabilitado para modais que não devem ser fechados clicando fora
• Mantém a semântica HTML apropriada
• É 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 tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para diálogos e confirmações
• Suporta classes CSS
• Pode ser usado para formulários importantes
• Funciona bem com teclado e mouse
• Suporta navegação por teclado