Risk Classification — Sinapse Design System

Statuses

Quatro variantes — default azul (baseline), success verde (baixo), alert amarelo (médio), danger coral (alto).

Indicadores estáveis nos últimos 30 dias.

risco baixo

Sem sinais de surto regional. Movimento de farmácias dentro do esperado.

42%

Aumento moderado em 3 regiões.

risco médio

Movimento acima da média. Recomenda monitoramento intensivo nos próximos 7 dias.

87%

Crescimento acelerado em UPAs.

risco alto

Padrão consistente com início de surto sazonal. Acionar protocolo de resposta regional.

<RiskClassification status="success" headline="0%" tag="risco baixo">
<Fragment slot="body">Indicadores estáveis nos últimos 30 dias.</Fragment>
<Fragment slot="analysis">Sem sinais de surto regional. Movimento de farmácias dentro do esperado para o período.</Fragment>
</RiskClassification>

<template>
<div class="itps-card flex items-stretch gap-6">
  <div class="flex flex-col items-start gap-2 pr-6 border-r border-border">
    <span class="text-5xl font-semibold text-success">0%</span>
    <span class="itps-chip itps-chip--success">risco baixo</span>
  </div>
  <div class="flex-1 grid gap-3">
    <p class="text-sm">Indicadores estáveis nos últimos 30 dias.</p>
    <p class="text-sm text-muted-foreground">Sem sinais de surto regional. Movimento de farmácias dentro do esperado para o período.</p>
  </div>
</div>
</template>

<div className="itps-card flex items-stretch gap-6">
<div className="flex flex-col items-start gap-2 pr-6 border-r border-border">
  <span className="text-5xl font-semibold text-success">0%</span>
  <span className="itps-chip itps-chip--success">risco baixo</span>
</div>
<div className="flex-1 grid gap-3">
  <p className="text-sm">Indicadores estáveis nos últimos 30 dias.</p>
  <p className="text-sm text-muted-foreground">Sem sinais de surto regional. Movimento de farmácias dentro do esperado para o período.</p>
</div>
</div>

<div class="itps-card flex items-stretch gap-6">
<div class="flex flex-col items-start gap-2 pr-6 border-r border-border">
  <span class="text-5xl font-semibold text-success">0%</span>
  <span class="itps-chip itps-chip--success">risco baixo</span>
</div>
<div class="flex-1 grid gap-3">
  <p class="text-sm">Indicadores estáveis nos últimos 30 dias.</p>
  <p class="text-sm text-muted-foreground">Sem sinais de surto regional. Movimento de farmácias dentro do esperado para o período.</p>
</div>
</div>

Default (baseline)

Sem classificação semântica — uso em métricas neutras.

124

Atendimentos por hora — média semanal.

estável

Volume consistente com mês anterior. Pico previsto entre 14h e 16h.

<RiskClassification status="default" headline="124" tag="estável">
<Fragment slot="body">Atendimentos por hora — média semanal.</Fragment>
<Fragment slot="analysis">Volume consistente com mês anterior. Pico previsto entre 14h e 16h.</Fragment>
</RiskClassification>

Quando usar

Sinapse epidemiologia — surveillance regional
Dashboard farmácias — risco de movimento atípico
Relatórios UPA/hospital — KPI risco + análise lado a lado

Componente domain-specific: não é genérico de DS. Use quando o produto for Sinapse ou derivados.

Props

Prop	Tipo	Default	Descrição
`status`	`'default' \| 'success' \| 'alert' \| 'danger'`	`'default'`	Variante semântica.
`headline`	`string`	obrigatório	Número/% grande à esquerda.
`tag`	`string`	obrigatório	Texto da tag pill abaixo.
`class`	`string`	—	Classes adicionais.

Slots

Slot	Descrição
`body`	Texto descritivo abaixo do headline.
`analysis`	Análise textual à direita do divider.