StatCard

StatCard é o átomo de qualquer dashboard com métricas. Renderiza um label, um valor grande tabular-nums, e (opcionalmente) um delta com seta direcional + período de comparação.

'use client';
import { StatCard } from '@uranus-workspace/blocks';
import { TrendingUp } from 'lucide-react';

export default function StatCardDefault() {
  return (
    <div className="w-full max-w-sm">
      <StatCard
        label="Receita"
        value="R$ 42.180"
        icon={<TrendingUp className="size-4" aria-hidden />}
        delta={{ value: '+8%', direction: 'up', label: 'mês' }}
      />
    </div>
  );
}

Uso

import { StatCard } from '@uranus-workspace/blocks';
import { TrendingUp } from 'lucide-react';

<StatCard
  label="Receita recorrente (MRR)"
  value="R$ 48.200"
  icon={<TrendingUp className="size-4" aria-hidden />}
  delta={{ value: '+12%', direction: 'up', label: 'vs. mês anterior' }}
/>

Props

• label — texto curto, geralmente em text-sm text-muted-foreground.
• value — formate antes de passar (use Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })).
• delta.direction — 'up' | 'down' | 'neutral'. Define a cor e o ícone.
• intent — borda do card (default | positive | negative | warning).
• sparkline — slot livre, geralmente um ChartContainer do @uranus-workspace/design-system.

Diretrizes

• Mantenha o value significativo sozinho — leitores de tela podem pular o delta.
• Use intent: negative quando o número é ruim (churn alto, erros), não quando o delta é negativo.
• Para mais de uma métrica em grade, use StatGrid.