Data Overlay — Sinapse Design System

Atual 128

Movimento dentro do esperado para a regiao monitorada.

import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

export function DataOverlayExample() {
  return (
    <Card className="w-[320px]">
      <CardHeader>
        <CardTitle>Atendimentos</CardTitle>
        <CardDescription>Ultima hora</CardDescription>
        <CardAction>
          <Badge variant="secondary">estavel</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <div className="flex items-end justify-between gap-4">
          <div>
            <p className="text-sm text-muted-foreground">Atual</p>
            <p className="text-3xl font-semibold tracking-normal">128</p>
          </div>
          <p className="inline-flex items-center gap-1 text-sm text-muted-foreground">
            <span aria-hidden="true">↓</span>
            <span className="sr-only">tendencia de baixa</span>
            estavel
          </p>
        </div>
      </CardContent>
    </Card>
  )
}

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card class="w-[320px]">
    <CardHeader>
      <CardTitle>Atendimentos</CardTitle>
      <CardDescription>Ultima hora</CardDescription>
      <CardAction>
        <Badge variant="secondary">estavel</Badge>
      </CardAction>
    </CardHeader>
    <CardContent>
      <div class="flex items-end justify-between gap-4">
        <div>
          <p class="text-sm text-muted-foreground">Atual</p>
          <p class="text-3xl font-semibold tracking-normal">128</p>
        </div>
        <p class="inline-flex items-center gap-1 text-sm text-muted-foreground">
          <span aria-hidden="true">↓</span>
          <span class="sr-only">tendencia de baixa</span>
          estavel
        </p>
      </div>
    </CardContent>
  </Card>
</template>

<article class="itps-data-overlay" aria-labelledby="overlay-atendimentos">
  <header class="itps-data-overlay__header">
    <div class="itps-data-overlay__heading">
      <h3 id="overlay-atendimentos" class="itps-data-overlay__title">Atendimentos</h3>
      <p class="itps-data-overlay__description">Ultima hora</p>
    </div>
    <span class="itps-tag itps-tag--success itps-tag--sm">estavel</span>
  </header>
  <div class="itps-data-overlay__current">
    <span class="itps-data-overlay__label">Atual</span>
    <span class="itps-data-overlay__value">
      <i class="itps-data-overlay__trend ti ti-arrow-down" aria-hidden="true"></i>
      <span class="sr-only">tendencia de baixa</span>
      <span class="itps-data-overlay__number">128</span>
    </span>
  </div>
  <div class="itps-data-overlay__body">
    <p class="text-sm leading-normal text-muted-foreground">
      Movimento dentro do esperado para a regiao monitorada.
    </p>
  </div>
</article>

Instalação

Instale Card e Badge da sua stack e rode o comando individual ITpS em seguida. O comando itps add data-overlay é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add card badge
pnpm dlx github:ITPS/sinapse-ui-cli add data-overlay

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add card badge
pnpm dlx github:ITPS/sinapse-ui-cli add data-overlay

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Card para a superfície e Badge para o estado. Essa composição evita recriar um componente específico quando o objetivo é mostrar um KPI compacto.

Para HTML ou wrappers finos, use itps-data-overlay quando o overlay precisa ficar em cima de mapa, painel lateral ou widget de monitoramento. Mantenha a estrutura pública para que o CSS do pacote resolva espaçamento, status e pin.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Superfície	`Card`	`itps-data-overlay`
Cabeçalho	`CardHeader`	`itps-data-overlay__header`
Título	`CardTitle`	`itps-data-overlay__title`
Descrição	`CardDescription`	`itps-data-overlay__description`
Estado	`CardAction` + `Badge`	`itps-tag`
KPI atual	`CardContent`	`itps-data-overlay__current`
Corpo	`CardContent`	`itps-data-overlay__body`
Pin	composição externa	`itps-data-overlay__pin`

Estados e pin

Use modificadores no container quando a severidade muda a leitura do overlay. Combine itps-data-overlay--alert ou itps-data-overlay--danger com a itps-tag equivalente para que a cor nunca seja o único sinal.

Atual 78

Internacoes 96

Casos novos: 1.284
UTIs: 42
Fila regulacao: 18

<div class="grid w-full gap-4 lg:grid-cols-2"> <div class="flex min-h-52 items-center justify-center rounded-lg border border-border bg-secondary/30 p-4 sm:p-8"> <article class="itps-data-overlay itps-data-overlay--alert" aria-labelledby="overlay-territorio"> <header class="itps-data-overlay__header"> <div class="itps-data-overlay__heading"> <h3 id="overlay-territorio" class="itps-data-overlay__title">Territorio norte</h3> <p class="itps-data-overlay__description">Mapa operacional</p> </div> <span class="itps-tag itps-tag--alert itps-tag--sm">atencao</span> </header> <div class="itps-data-overlay__current"> <span class="itps-data-overlay__label">Atual</span> <span class="itps-data-overlay__value"> <i class="itps-data-overlay__trend ti ti-arrow-up" aria-hidden="true"></i> <span class="sr-only">tendencia de alta</span> <span class="itps-data-overlay__number">78</span> </span> </div> <span class="itps-data-overlay__pin" aria-hidden="true"></span> </article> </div> <article class="itps-data-overlay itps-data-overlay--danger" aria-labelledby="overlay-indicadores"> <header class="itps-data-overlay__header"> <div class="itps-data-overlay__heading"> <h3 id="overlay-indicadores" class="itps-data-overlay__title">Indicadores</h3> <p class="itps-data-overlay__description">Capital - Maio 2026</p> </div> <span class="itps-tag itps-tag--danger itps-tag--sm">alto</span> </header> <div class="itps-data-overlay__current"> <span class="itps-data-overlay__label">Internacoes</span> <span class="itps-data-overlay__value"> <i class="itps-data-overlay__trend ti ti-arrow-up" aria-hidden="true"></i> <span class="sr-only">tendencia de alta</span> <span class="itps-data-overlay__number">96</span> </span> </div> <div class="itps-data-overlay__body"> <ul class="space-y-1 text-sm leading-normal text-foreground"> <li>Casos novos: 1.284</li> <li>UTIs: 42</li> <li>Fila regulacao: 18</li> </ul> </div> </article> </div>

<div class="grid w-full gap-4 lg:grid-cols-2">
  <div class="flex min-h-52 items-center justify-center rounded-lg border border-border bg-secondary/30 p-4 sm:p-8">
    <article class="itps-data-overlay itps-data-overlay--alert" aria-labelledby="overlay-territorio">
      <header class="itps-data-overlay__header">
        <div class="itps-data-overlay__heading">
          <h3 id="overlay-territorio" class="itps-data-overlay__title">Territorio norte</h3>
          <p class="itps-data-overlay__description">Mapa operacional</p>
        </div>
        <span class="itps-tag itps-tag--alert itps-tag--sm">atencao</span>
      </header>
      <div class="itps-data-overlay__current">
        <span class="itps-data-overlay__label">Atual</span>
        <span class="itps-data-overlay__value">
          <i class="itps-data-overlay__trend ti ti-arrow-up" aria-hidden="true"></i>
          <span class="sr-only">tendencia de alta</span>
          <span class="itps-data-overlay__number">78</span>
        </span>
      </div>
      <span class="itps-data-overlay__pin" aria-hidden="true"></span>
    </article>
  </div>

  <article class="itps-data-overlay itps-data-overlay--danger" aria-labelledby="overlay-indicadores">
    <header class="itps-data-overlay__header">
      <div class="itps-data-overlay__heading">
        <h3 id="overlay-indicadores" class="itps-data-overlay__title">Indicadores</h3>
        <p class="itps-data-overlay__description">Capital - Maio 2026</p>
      </div>
      <span class="itps-tag itps-tag--danger itps-tag--sm">alto</span>
    </header>
    <div class="itps-data-overlay__current">
      <span class="itps-data-overlay__label">Internacoes</span>
      <span class="itps-data-overlay__value">
        <i class="itps-data-overlay__trend ti ti-arrow-up" aria-hidden="true"></i>
        <span class="sr-only">tendencia de alta</span>
        <span class="itps-data-overlay__number">96</span>
      </span>
    </div>
    <div class="itps-data-overlay__body">
      <ul class="space-y-1 text-sm leading-normal text-foreground">
        <li>Casos novos: 1.284</li>
        <li>UTIs: 42</li>
        <li>Fila regulacao: 18</li>
      </ul>
    </div>
  </article>
</div>

API copy-first

Classe/atributo	Uso
`itps-data-overlay`	Superfície compacta para KPI ou widget contextual.
`itps-data-overlay--alert`	Estado intermediário de atenção.
`itps-data-overlay--danger`	Estado crítico ou de maior severidade.
`itps-data-overlay__header`	Agrupa título, descrição e tag.
`itps-data-overlay__current`	Linha numérica principal do overlay.
`itps-data-overlay__trend`	Ícone decorativo de tendência.
`itps-data-overlay__body`	Conteúdo complementar curto.
`itps-data-overlay__pin`	Marcador visual para overlays posicionados em mapa.
`aria-labelledby`	Liga o `article` ao título visível.
`sr-only`	Expõe tendência textual quando a seta é decorativa.

Acessibilidade

Use article com aria-labelledby quando o overlay representa um widget autônomo. A tendência precisa de texto sr-only, porque o ícone sozinho não comunica direção para leitores de tela. Quando houver status visual, mantenha também o texto da tag.