Toast

Apresentação

O componente Toast é responsável por exibir notificações temporárias na interface do usuário. Ele é ideal para fornecer feedback sobre ações realizadas, alertas importantes ou mensagens que precisam ser exibidas por um curto período de tempo.

Quando usar

Para confirmar ações realizadas
Para exibir mensagens de erro
Para mostrar notificações de sucesso
Para alertar sobre eventos importantes
Para informar sobre atualizações
Para exibir mensagens temporárias
Para notificar sobre mudanças de estado
Para comunicar informações críticas

Forma básica de uso

import { Toast } from 'eitri-luminus';

// Toast básico
<Toast>
  <Toast.Alert>
    Mensagem de notificação
  </Toast.Alert>
</Toast>

// Toast com classes personalizadas
<Toast className="toast-top toast-end">
  <Toast.Alert className="alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Informação importante</span>
  </Toast.Alert>
</Toast>

// Toast com diferentes variantes
<Toast>
  <Toast.Alert className="alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Operação concluída com sucesso!</span>
  </Toast.Alert>
</Toast>

<Toast>
  <Toast.Alert className="alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Ocorreu um erro!</span>
  </Toast.Alert>
</Toast>

// Toast com posicionamento personalizado
<Toast className="toast-bottom toast-center">
  <Toast.Alert className="alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Aviso importante!</span>
  </Toast.Alert>
</Toast>

Propriedades

Toast

Propriedade	Tipo	Descrição
`className`	`string`	Classes CSS adicionais
`id`	`string`	Identificador único do componente
`topInset`	`boolean \| number \| 'auto'`	Quando ativado, aplica offset automático da barra superior (notch ou status bar). O Toast detecta automaticamente quando `className` contém `toast-top`, mas pode ser sobrescrito explicitamente
`bottomInset`	`boolean \| number \| 'auto'`	Quando ativado, aplica offset automático da barra inferior (menu inferior ou navegação por gestos). O Toast detecta automaticamente quando `className` contém `toast-bottom` ou quando não há classe de posição, mas pode ser sobrescrito explicitamente

Toast.Alert

Propriedade	Tipo	Descrição
`className`	`string`	Classes CSS adicionais
`id`	`string`	Identificador único do componente

Detecção Automática de Insets

O componente Toast possui detecção automática de insets baseada nas classes CSS de posicionamento:

toast-top: Aplica automaticamente topInset={true}
toast-bottom: Aplica automaticamente bottomInset={true} (também é o padrão quando não há classe de posição)
toast-middle: Não aplica insets automaticamente

Você pode sobrescrever o comportamento automático passando topInset ou bottomInset explicitamente nas props.

// Detecção automática - aplica topInset automaticamente
<Toast className="toast-top toast-end">
  <Toast.Alert>Toast no topo com inset automático</Toast.Alert>
</Toast>

// Sobrescrevendo a detecção automática
<Toast className="toast-top toast-end" topInset={false}>
  <Toast.Alert>Toast no topo sem inset</Toast.Alert>
</Toast>

// Inset manual com valor fixo
<Toast bottomInset={50}>
  <Toast.Alert>Toast com offset fixo de 50px</Toast.Alert>
</Toast>

Heranças

Os componentes Toast e Toast.Alert herdam 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 Toast usa a classe 'toast' para estilização base
O Toast.Alert usa a classe 'alert' para estilização base
É possível personalizar a aparência usando classes do Tailwind
Os componentes são responsivos por padrão
Suportam diferentes variantes de estilo (info, success, warning, error)
Podem ser posicionados em diferentes locais da tela
São ideais para feedback visual temporário
Mantêm a semântica HTML apropriada
Podem conter ícones e botões
Suportam conteúdo rico e personalizado
São especialmente úteis para notificações não intrusivas
Podem ser combinados com outros componentes
Detecção automática de insets: O Toast detecta automaticamente a posição baseada nas classes CSS e aplica os insets apropriados para evitar sobreposição com barras do sistema (notch, status bar, menu inferior)
Sobrescrita manual: As propriedades topInset e bottomInset podem ser passadas explicitamente para sobrescrever a detecção automática

Métodos via Ref

O componente Toast expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Toast } from 'eitri-luminus';

function MyComponent() {
  const toastRef = useRef<Toast>(null);

  const handleShow = () => {
    toastRef.current?.show();
  };

  const handleHide = () => {
    toastRef.current?.hide();
  };

  const handleToggle = () => {
    if (toastRef.current?.isVisible()) {
      toastRef.current?.hide();
    } else {
      toastRef.current?.show();
    }
  };

  return (
    <>
      <Toast ref={toastRef}>
        <Toast.Alert>Mensagem de notificação</Toast.Alert>
      </Toast>
      <button onClick={handleShow}>Mostrar</button>
      <button onClick={handleHide}>Ocultar</button>
      <button onClick={handleToggle}>Alternar</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
`show()`	`void`	Exibe o toast
`hide()`	`void`	Oculta o toast
`isVisible()`	`boolean`	Retorna se o toast está visível

Eventos Disponíveis

Evento	Tipo	Descrição
`onShow`	`() => void`	Disparado quando o toast é exibido
`onHide`	`() => void`	Disparado quando o toast é ocultado
`onDismiss`	`() => void`	Disparado quando o toast é descartado
`onClose`	`() => void`	Disparado quando o toast é fechado
`onAutoHide`	`() => void`	Disparado quando o toast é ocultado automaticamente

Apresentação​

Quando usar​

Forma básica de uso​

Propriedades​

Toast​

Toast.Alert​

Detecção Automática de Insets​

Heranças​

Observações​

Métodos via Ref​

Métodos Disponíveis​

Eventos Disponíveis​

Apresentação

Quando usar

Forma básica de uso

Propriedades

Toast

Toast.Alert

Detecção Automática de Insets

Heranças

Observações

Métodos via Ref

Métodos Disponíveis

Eventos Disponíveis