# Risk Classification

Widget para percentual de risco, tag somente leitura e análise textual.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Data Display
- Status: stable

## Em cada stack

- HTML e Astro: Classes `itps-*` do CSS Sinapse, com todas as variantes desta página.
- React e Vue: Componentes padrão do shadcn (`card`, `badge`) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes `itps-*` desta página existem só no HTML.

**React/Next (shadcn/ui)**

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

export function RiskClassificationExample() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <div>
          <CardTitle className="text-4xl font-semibold tracking-normal">42%</CardTitle>
          <CardDescription>Aumento moderado em 3 regiões.</CardDescription>
        </div>
        <CardAction>
          <Badge variant="secondary">risco médio</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm leading-normal text-muted-foreground">
          Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
        </p>
      </CardContent>
    </Card>
  )
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<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-full max-w-2xl">
    <CardHeader>
      <div>
        <CardTitle class="text-4xl font-semibold tracking-normal">42%</CardTitle>
        <CardDescription>Aumento moderado em 3 regiões.</CardDescription>
      </div>
      <CardAction>
        <Badge variant="secondary">risco médio</Badge>
      </CardAction>
    </CardHeader>
    <CardContent>
      <p class="text-sm leading-normal text-muted-foreground">
        Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
      </p>
    </CardContent>
  </Card>
</template>
```

**HTML (copy-first)**

```html
<article class="itps-risk-classification itps-risk-classification--alert" aria-labelledby="risk-classification-alert">
  <div class="itps-risk-classification__summary">
    <div class="itps-risk-classification__copy">
      <h3 id="risk-classification-alert" class="itps-risk-classification__metric">42%</h3>
      <p class="itps-risk-classification__body">Aumento moderado em 3 regiões.</p>
    </div>
    <span class="itps-tag itps-tag--alert itps-tag--sm">risco médio</span>
  </div>
  <span class="itps-risk-classification__divider" aria-hidden="true"></span>
  <p class="itps-risk-classification__analysis">
    Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
  </p>
</article>
```

## Instalação

O comando instala o Card e o Badge da sua stack com o tema Sinapse. Configure o registry uma vez por projeto em [Comece por aqui](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/risk-classification
```

**terminal · Vue 3/Nuxt 4**

```sh
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/risk-classification.json
```

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

## Uso

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, componha a superfície com `Card` e mostre a classificação com `Badge`. Esse caminho usa componentes que o CLI do shadcn ou do shadcn-vue instala e evita criar uma API paralela para uma leitura de status simples.

Para HTML ou wrappers finos, use `itps-risk-classification` quando a leitura precisa combinar percentual, tag somente leitura e análise operacional curta. A tag deve continuar textual para que a severidade não dependa somente da cor.

## Exemplos

### Estrutura

| Peça | React/Next e Vue 3/Nuxt 4 | HTML |
|------|--------------------------|------|
| Superfície | `Card` | `itps-risk-classification` |
| Cabeçalho | `CardHeader` | `itps-risk-classification__summary` |
| Métrica | `CardTitle` | `itps-risk-classification__metric` |
| Descrição | `CardDescription` | `itps-risk-classification__body` |
| Classificação | `CardAction` + `Badge` | `itps-tag` |
| Separador | borda/espaçamento do layout | `itps-risk-classification__divider` |
| Análise | `CardContent` | `itps-risk-classification__analysis` |

### Classificações

Use `itps-risk-classification--success`, `itps-risk-classification--alert` ou `itps-risk-classification--danger` para alterar a ênfase da métrica. O estado neutro fica sem modificador e serve para indicadores operacionais que não representam risco baixo, médio ou alto.

**HTML (copy-first)**

```html
<div class="grid w-full gap-4">
  <article class="itps-risk-classification itps-risk-classification--success" aria-labelledby="risk-classification-success">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-success" class="itps-risk-classification__metric">0%</h3>
        <p class="itps-risk-classification__body">Indicadores estáveis nos últimos 30 dias.</p>
      </div>
      <span class="itps-tag itps-tag--success itps-tag--sm">risco baixo</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Sem sinais de surto regional. Movimento dentro do esperado para o período.
    </p>
  </article>

  <article class="itps-risk-classification itps-risk-classification--danger" aria-labelledby="risk-classification-danger">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-danger" class="itps-risk-classification__metric">87%</h3>
        <p class="itps-risk-classification__body">Crescimento acelerado em UPAs.</p>
      </div>
      <span class="itps-tag itps-tag--danger itps-tag--sm">risco alto</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Padrão consistente com início de surto sazonal. Acionar protocolo de resposta regional.
    </p>
  </article>

  <article class="itps-risk-classification" aria-labelledby="risk-classification-baseline">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-baseline" class="itps-risk-classification__metric">124</h3>
        <p class="itps-risk-classification__body">Atendimentos por hora, média semanal.</p>
      </div>
      <span class="itps-tag itps-tag--default itps-tag--sm">estável</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Volume consistente com o mês anterior. Pico previsto entre 14h e 16h.
    </p>
  </article>
</div>
```

## API copy-first

| Classe/atributo | Uso |
|-----------------|-----|
| `itps-risk-classification` | Superfície base para resumo de risco e análise. |
| `itps-risk-classification--success` | Classificação positiva ou risco baixo. |
| `itps-risk-classification--alert` | Classificação intermediária ou risco médio. |
| `itps-risk-classification--danger` | Classificação crítica ou risco alto. |
| `itps-risk-classification__summary` | Agrupa métrica, corpo curto e tag. |
| `itps-risk-classification__copy` | Coluna textual da métrica. |
| `itps-risk-classification__metric` | Valor principal do resumo. |
| `itps-risk-classification__body` | Contexto curto da métrica. |
| `itps-risk-classification__divider` | Separador visual entre resumo e análise. |
| `itps-risk-classification__analysis` | Leitura operacional complementar. |
| `aria-labelledby` | Liga o `article` à métrica visível. |
| `aria-hidden="true"` | Esconde o divisor decorativo. |

## Acessibilidade

Use `article` quando o bloco resume uma avaliação independente e relacione o contêiner com a métrica via `aria-labelledby`. Mantenha a classificação como texto visível em `itps-tag`; ela é somente leitura e não deve virar botão.