Data Overlay — Sinapse Design System

Default

Header tinted azul + atual row com trend down. Slot livre para chart/lista.

Atendimentos

Última hora

estável

Atual 128

<DataOverlay
title="Atendimentos"
description="Última hora"
tag="estável"
label="Atual"
value="128"
trend="down"
/>

<template>
<div class="w-80 rounded-card border border-border bg-card overflow-hidden shadow-medium">
  <header class="bg-secondary-100 p-4">
    <div class="flex items-start justify-between">
      <div>
        <p class="font-semibold">Atendimentos</p>
        <p class="text-xs text-muted-foreground">Última hora</p>
      </div>
      <span class="itps-chip">estável</span>
    </div>
  </header>
  <div class="p-4 flex items-baseline justify-between">
    <span class="text-sm text-muted-foreground">Atual</span>
    <div class="flex items-baseline gap-1">
      <span class="text-2xl font-semibold">128</span>
      <span class="material-symbols-outlined text-success" style="font-size:18px">trending_down</span>
    </div>
  </div>
</div>
</template>

<div className="w-80 rounded-card border border-border bg-card overflow-hidden shadow-medium">
<header className="bg-secondary-100 p-4">
  <div className="flex items-start justify-between">
    <div>
      <p className="font-semibold">Atendimentos</p>
      <p className="text-xs text-muted-foreground">Última hora</p>
    </div>
    <span className="itps-chip">estável</span>
  </div>
</header>
<div className="p-4 flex items-baseline justify-between">
  <span className="text-sm text-muted-foreground">Atual</span>
  <div className="flex items-baseline gap-1">
    <span className="text-2xl font-semibold">128</span>
    <span className="material-symbols-outlined text-success" style={{fontSize:18}}>trending_down</span>
  </div>
</div>
</div>

<div class="w-80 rounded-card border border-border bg-card overflow-hidden shadow-medium">
<header class="bg-secondary-100 p-4">
  <div class="flex items-start justify-between">
    <div>
      <p class="font-semibold">Atendimentos</p>
      <p class="text-xs text-muted-foreground">Última hora</p>
    </div>
    <span class="itps-chip">estável</span>
  </div>
</header>
<div class="p-4 flex items-baseline justify-between">
  <span class="text-sm text-muted-foreground">Atual</span>
  <div class="flex items-baseline gap-1">
    <span class="text-2xl font-semibold">128</span>
    <span class="material-symbols-outlined text-success" style="font-size:18px">trending_down</span>
  </div>
</div>
</div>

Statuses

alert (cream amarelo) e danger (rosa coral) sinalizam atenção/crítico.

Movimento

Última hora

baixo

Atual 42

Movimento

Última hora

médio

Atual 78

Movimento

Última hora

alto

Atual 142

<DataOverlay status="default" title="Movimento" description="Última hora" tag="baixo" label="Atual" value="42" trend="down" />
<DataOverlay status="alert" title="Movimento" description="Última hora" tag="médio" label="Atual" value="78" trend="up" />
<DataOverlay status="danger" title="Movimento" description="Última hora" tag="alto" label="Atual" value="142" trend="up" />

Sem atual row

showAtual={false} esconde a linha de KPI. Header + slot apenas.

Indicadores

Capital - Maio 2026

atualizado

Casos novos: 1.284
Internações: 96
UTIs: 42

<DataOverlay title="Indicadores epidemiológicos" description="Capital - Maio 2026" tag="atualizado" showAtual={false}>
<ul class="text-sm text-default p-4">
  <li>Casos novos: 1.284</li>
  <li>Internações: 96</li>
  <li>UTIs: 42</li>
</ul>
</DataOverlay>

Quando usar

Dashboards — KPI compacto com tag de classificação
Map pins — overlay sobre mapa com showArrow apontando pra região
Widgets monitoramento — empilhados em sidebar ou grid

Props

Prop	Tipo	Default	Descrição
`status`	`'default' \| 'alert' \| 'danger'`	`'default'`	Variante semântica + cor de tag.
`title`	`string`	obrigatório	Título do header.
`description`	`string`	—	Subtítulo do header.
`tag`	`string`	—	Texto da tag de classificação.
`label`	`string`	—	Label da linha atual (ex: “Atual”).
`value`	`string`	—	Valor numérico/textual.
`trend`	`'up' \| 'down'`	`'down'`	Direção da seta.
`showAtual`	`boolean`	`true`	Esconde linha de KPI.
`showArrow`	`boolean`	`false`	Pin/arrow inferior (uso em mapas).
`class`	`string`	—	Classes adicionais.