Komponen / Tampilan data
StatCard
Angka utama dengan meta, tren baik/buruk, dan pembanding — untuk Beranda, dashboard Direksi, dan kepala daftar dokumen.
Import
tsx
import { StatCard, formatMoney } from '@divistant/circca-react';Props
Dirender sebagai <div role="group"> berlabel `label`. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | ReactNode | — | Nama angka (properti Figma "Label"): "Siap ditagih", "Piutang". |
| value | ReactNode | — | Angka utama (properti Figma "Value"), Metric/Medium. Uang: formatMoney(v, { compact: true }). |
| meta | ReactNode | — | Keterangan di bawah angka (properti Figma "Meta"): "4 PO · Ready to Invoice". |
| needsAttention | boolean | false | Titik warning/emphasis di depan label (properti Figma "Needs attention"); pembaca layar mendengar "Perlu perhatian". |
| trend | { direction: 'up' | 'down' | 'flat'; sentiment?: 'positive' | 'negative' | 'neutral'; value: ReactNode; label?: string } | — | Tren dibanding periode lain. direction → ikon, sentiment (bawaan neutral) → warna success/fg, danger/fg, atau fg/muted. label menimpa kalimat pembaca layar. |
| comparison | string | — | Periode pembanding (properti Figma "Pembanding"): "vs bulan lalu". Tampil hanya bila ada trend. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/stat-card. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.