Komponen / Tata letak
ObjectSummary
Kepala objek untuk inspector, panel samping, dan kartu (seperti Get Info macOS): ikon jenis dokumen dalam kotak berwarna, nama, satu baris meta, dan status.
Import
tsx
import { ObjectSummary } from '@divistant/circca-react';Props
Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| name | ReactNode | — | Nama objek (properti Figma "Name"): "PO-2026-0142", nama customer atau proyek. Headline/Default, membungkus bila panjang. |
| meta | ReactNode | ReactNode[] | — | Keterangan (properti Figma "Meta"). Array digabung dengan " · ". Nominal pakai formatMoney; angka tabular-nums. |
| status | ReactNode | — | Status (properti Figma "Status"): <StateLabel size="sm">. |
| icon | Visual | — | Ikon jenis objek (properti Figma "Icon") dalam kotak 40, radius 10. |
| tone | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'highlight' | 'accent' | Warna kotak ikon (*/subtle + ikon */fg). |
| media | ReactNode | — | Pengganti kotak ikon, mis. <Avatar size={40} shape="square" decorative />. |
| actions | ReactNode | — | Aksi di kanan: IconButton Ghost Small atau Button size="sm". |
| headingLevel | 2 | 3 | 4 | 5 | 6 | false | 2 | Level heading nama. false = paragraf biasa (di dalam kartu yang sudah berjudul). |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/object-summary. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.