Stat Card

Dadosserver safe

Card de destaque para um valor numérico com rótulo, variação opcional (alta ou baixa) e descrição de apoio.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { StatCard } from "@trdr/ui/stat-card"

Uso

import { StatCard, StatCardTrend } from "@trdr/ui/stat-card"

export function Exemplo() {
  return <StatCard />
}

Variantes

GrupoValoresPadrão
tone
defaultbrand
default

Props

StatCardPropsestende Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof statCardVariants>
PropTipoDescrição
labelstringRotulo curto acima do valor.
valuestring | numberValor grande de destaque. Aceita string ja formatada: o componente nao formata numero.
description?stringTexto de apoio abaixo do valor.
trend?StatCardTrendVariacao (delta) associada ao valor, com sentido de alta ou baixa.

Quando usar

Use o StatCard para destacar um numero unico e importante: um saldo, o resultado do dia, uma metrica de risco. Ele e a peca certa quando o valor precisa se destacar visualmente (fonte grande) e vem acompanhado de um rotulo curto e, opcionalmente, de uma variacao (alta ou baixa) e de uma descricao de apoio.

Quando nao usar

Nao use StatCard para uma tabela de varios ativos lado a lado: para isso existe o QuoteTable, que alinha colunas numericas de verdade. Nao use para um bloco de conteudo geral com titulo, acao e rodape: para isso, componha direto com Card.

Anatomia

StatCard e fechado (poucas props, sem partes), composto por cima do primitivo Card: herda borda, fundo e cantos arredondados dele, e so ajusta espacamento interno.

  • Raiz (data-slot="stat-card"): aceita label, value, description e trend.
  • Rotulo (data-slot="stat-card-label"): texto curto acima do valor.
  • Valor (data-slot="stat-card-value"): o numero de destaque. Sempre font-mono (CONTRACT secao 6: numero e sempre Roboto Mono, mesmo em tamanho de heading).
  • Tendencia (data-slot="stat-card-trend", opcional): o campo trend recebe { value, direction }, onde direction e "up" ou "down". A cor usa text-context-trading-up/down (preco, nao sucesso/erro de UI).
  • Descricao (data-slot="stat-card-description", opcional): texto de apoio abaixo do valor.

Tone

  • tone="default" (padrao): fundo neutro do Card.
  • tone="brand": realce de marca (borda e fundo com o token content-brand/surface-brand), equivalente ao trdr-stat-card-accent do legado.

Migracao do componente legado

O StatCard do Hub antigo (src/components/ui/StatCard.tsx) tinha um accent?: boolean solto. Aqui virou a variante tone (cva), no vocabulario que o CONTRACT pede (variant/size/tone) em vez de um booleano avulso. O campo trend e novo: o legado nao tinha um jeito estruturado de mostrar variacao dentro do card, cada tela que precisava disso reimplementava por fora.

Acessibilidade

O sinal (+/-) do texto de trend.value ja carrega parte da informacao, mas a cor sozinha nunca e a unica pista: um texto visualmente oculto ("Alta de"/"Queda de") precede o valor para quem usa leitor de tela. StatCard e composto so por elementos nao interativos (div/span): se o card inteiro precisar navegar, envolva-o num link por fora, como no Card.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="stat-card"][data-slot="stat-card-description"][data-slot="stat-card-label"][data-slot="stat-card-trend"][data-slot="stat-card-value"]
11 tokens usados
bg-surface-brandborder-content-brandtext-b4text-b5text-content-brandtext-content-primarytext-content-secondarytext-content-tertiarytext-context-trading-downtext-context-trading-uptext-h5