Componentes
HibouMark
O símbolo oficial, com o traço exato do imagotipo. Ocioso ele pisca a cada 6 s; trabalhando ganha órbita. É o ícone do agente.
estávelMarcadesde 0.1.0@hiboupay/icons
Exemplos#
brand · parado · idle · working
current sobre noite
Escala · 16 · 24 · 40 · 64
Importar#
tsx
import { HibouMark } from "@hiboupay/icons";
import type { HibouMarkProps } from "@hiboupay/icons";Quando usar#
Use quando
- Representar o agente.
- Vazio (EmptyState).
- Marca compacta no trilho da navegação.
Não use quando
- Decoração repetida.
- Ícone genérico de IA.
Variantes#
tone brand
Degradê oficial sobre papel.
tone current
Herda a cor do texto: noite, botão, ícone.
Anatomia#
- 01Contêiner
- 02SVG da coruja (degradê ou currentColor)
- 03Órbita (working)
Estados#
paradoidle (pisca)working (órbita)
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone | "brand" | "current" | "brand" | Degradê oficial ou cor do texto. |
| state | "idle" | "working" | Sem estado fica parado. | |
| title | string | Nome acessível. Sem title é decorativa. | |
| className | string | Tamanho (h-* w-*). |
Acessibilidade#
Teclado
—Não é interativo.
Leitor de tela
- —Sem title: aria-hidden.
- —Com title: role=img nomeada.
Boas práticas#
Faça
- working enquanto o agente age.
Evite
- Redesenhar, esticar ou recolorir fora do degradê.
- Usar Sparkle ou robô no lugar.
Conteúdo#
- —title: "Agente trabalhando".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.