extraído de climatempo
Aviso
Mensagem de status (info, sucesso, alerta ou erro) com ícone e rótulo escrito, para não depender só da cor.
Variações
Playground
Props
Geradas dos tipos TypeScript do componente; a descrição vem dos comentários /** */.
<Aviso>
Mensagem de status com ícone e rótulo escrito além da cor, para não depender só dela.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tipo | "info" | "sucesso" | "alerta" | "erro" | "info" | |
| rotulo | string | — | Substitui o rótulo padrão do tipo ("Atenção", "Erro"...). |
| childrenobrigatória | ReactNode | — |
Código
stories.tsx tem os exemplos usados no preview e no playground.
aviso/Aviso.tsx
import type { ReactNode } from "react";
const ESTILO = {
info: { rotulo: "Info", cor: "text-accent", icone: "info" },
sucesso: { rotulo: "Pronto", cor: "text-success", icone: "ok" },
alerta: { rotulo: "Atenção", cor: "text-warning", icone: "triangulo" },
erro: { rotulo: "Erro", cor: "text-critical", icone: "triangulo" },
} as const;
export type TipoDeAviso = keyof typeof ESTILO;
/** Mensagem de status com ícone e rótulo escrito além da cor, para não depender só dela. */
export function Aviso({
tipo = "info",
rotulo,
children,
}: {
tipo?: TipoDeAviso;
/** Substitui o rótulo padrão do tipo ("Atenção", "Erro"...). */
rotulo?: string;
children: ReactNode;
}) {
const estilo = ESTILO[tipo];
return (
<div role={tipo === "erro" ? "alert" : "status"} className="flex items-start gap-3 rounded-xl bg-surface p-5">
<svg
aria-hidden="true"
viewBox="0 0 24 24"
className={`mt-0.5 h-5 w-5 shrink-0 ${estilo.cor}`}
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
{estilo.icone === "triangulo" && (
<>
<path d="M12 3 2.5 20h19L12 3z" />
<path d="M12 10v4" />
<path d="M12 17.5h.01" />
</>
)}
{estilo.icone === "info" && (
<>
<circle cx="12" cy="12" r="9" />
<path d="M12 11v5" />
<path d="M12 7.5h.01" />
</>
)}
{estilo.icone === "ok" && (
<>
<circle cx="12" cy="12" r="9" />
<path d="m8 12.5 2.5 2.5L16 9.5" />
</>
)}
</svg>
<p>
<strong>{rotulo ?? estilo.rotulo}:</strong> {children}
</p>
</div>
);
}
aviso/stories.tsx
import { defineStories } from "@/registry/stories";
import { Aviso, type TipoDeAviso } from "./Aviso";
export default defineStories({
args: { tipo: "info", rotulo: "", texto: "Os dados são atualizados todo dia às 6h." },
controls: {
tipo: { type: "select", options: ["info", "sucesso", "alerta", "erro"] },
rotulo: { type: "text", label: "rotulo (vazio = padrão do tipo)" },
texto: { type: "text", label: "children" },
},
render: (a) => (
<div className="w-full max-w-xl">
<Aviso tipo={a.tipo as TipoDeAviso} rotulo={a.rotulo || undefined}>
{a.texto}
</Aviso>
</div>
),
stories: [
{ name: "Info" },
{
name: "Todos os tipos",
render: () => (
<div className="flex w-full max-w-xl flex-col gap-3">
<Aviso>Os dados são atualizados todo dia às 6h.</Aviso>
<Aviso tipo="sucesso">Alterações salvas.</Aviso>
<Aviso tipo="alerta">Selecione ao menos um filtro para ver o relatório.</Aviso>
<Aviso tipo="erro">Não foi possível ler o arquivo de dados.</Aviso>
</div>
),
},
{ name: "Sucesso", args: { tipo: "sucesso", texto: "Alterações salvas." } },
{ name: "Alerta", args: { tipo: "alerta", texto: "Selecione ao menos um filtro para ver o relatório." } },
{
name: "Erro com rótulo próprio",
args: { tipo: "erro", rotulo: "Falha ao carregar", texto: "Não foi possível ler o arquivo de dados." },
},
],
});
Para usar em outro projeto, copie também
Os componentes de que este depende e o tema. O CSS do tema é um arquivo só: importe depois do Tailwind.
Tema escolhido no cabeçalho (com a ponte para o Tailwind)
Ver o CSS do tema
tema-editorial.css · Editorial
/* Tema "Editorial", gerado no Component Vault.
Importe depois de @import "tailwindcss". Carregue as fontes "Archivo" e "Inter" no projeto. */
@theme inline {
--color-page: var(--page);
--color-surface: var(--surface);
--color-track: var(--track);
--color-grid: var(--grid);
--color-ink: var(--ink);
--color-ink-2: var(--ink-2);
--color-muted: var(--muted);
--color-rule: var(--rule);
--color-rule-strong: var(--rule-strong);
--color-axis: var(--axis);
--color-accent: var(--accent);
--color-success: var(--success);
--color-warning: var(--warning);
--color-critical: var(--critical);
--font-display: var(--fonte-titulo);
--shadow-flutuante: var(--sombra-flutuante);
}
:root {
color-scheme: light dark;
--page: light-dark(#ffffff, #0f0f0e);
--surface: light-dark(#f5f5f5, #1a1a19);
--track: light-dark(#f0f0f0, #262624);
--grid: light-dark(#ededed, #232321);
--ink: light-dark(#111111, #f0efec);
--ink-2: light-dark(#4a4a4a, #c3c2b7);
--muted: light-dark(#666666, #a3a29a);
--rule: light-dark(#e3e3e3, #2c2c2a);
--rule-strong: light-dark(#111111, #f0efec);
--axis: light-dark(#9a9a9a, #6b6a64);
--accent: light-dark(#1a56db, #7aa2f7);
--success: light-dark(#13865c, #3fc48f);
--warning: #fab219;
--critical: #d03b3b;
--series-1: light-dark(#2a78d6, #3987e5);
--series-2: light-dark(#eb6834, #d95926);
--series-3: light-dark(#1baf7a, #199e70);
--series-4: light-dark(#eda100, #c98500);
--series-5: light-dark(#e87ba4, #d55181);
--series-6: #008300;
--series-7: light-dark(#6250d6, #9085e9);
--series-8: light-dark(#e34948, #e66767);
--fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--spacing: 0.25rem;
--text-xs: 0.8rem;
--text-sm: 0.8944rem;
--text-base: 1rem;
--text-lg: 1.118rem;
--text-xl: 1.25rem;
--text-2xl: 1.5625rem;
--text-3xl: 1.9531rem;
--text-4xl: 2.4414rem;
--text-5xl: 3.0518rem;
--text-6xl: 3.8147rem;
--text-7xl: 4.7684rem;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-4xl: 32px;
--sombra-flutuante: 0 8px 24px -6px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08);
color: var(--ink);
font-family: var(--fonte-texto);
}
Na vitrine, a ponte com o Tailwind fica em src/themes/tokens.css:
src/themes/tokens.css
/* Ponte entre os tokens do tema e o Tailwind.
Os componentes da biblioteca usam classes comuns do Tailwind (p-5, text-sm,
rounded-xl...) e as cores semânticas abaixo (bg-page, text-ink...). Dentro de
[data-theme="vault"], o tema redefine as variáveis que essas classes leem:
--spacing, --text-*, --radius-* e as cores. Os valores vêm do tema escolhido
na vitrine (src/themes/presets.ts) e são gerados por themeCss(). */
@theme inline {
--color-page: var(--page);
--color-surface: var(--surface);
--color-ink: var(--ink);
--color-ink-2: var(--ink-2);
--color-muted: var(--muted);
--color-rule: var(--rule);
--color-rule-strong: var(--rule-strong);
--color-track: var(--track);
--color-grid: var(--grid);
--color-axis: var(--axis);
--color-accent: var(--accent);
--color-success: var(--success);
--color-warning: var(--warning);
--color-critical: var(--critical);
--font-display: var(--fonte-titulo);
--shadow-flutuante: var(--sombra-flutuante);
}