# Circca HIG Design System (Divistant)

> Design system untuk aplikasi bisnis Divistant (BizOps, IntegraCI). Gaya Apple HIG, React + Tailwind v4, teks Bahasa Indonesia.

## Aturan utama

- Pakai komponen `@divistant/circca-react` dan kelas token Circca (bg-*, text-*, border-*, type-*); jangan warna/spasi mentah.
- Ikon: `@phosphor-icons/react` (Server Component: `@phosphor-icons/react/ssr`).
- Satu tombol Primary per layar. Status selalu berupa teks + tone StateLabel.
- Tema lewat `data-theme` di <html>: light, dark, light-contrast, dark-contrast, system.

## Pola

- [Form dokumen](https://localhost:3000/pola/form-dokumen): Membuat dan mengajukan dokumen: letak aksi, bagian bernomor, ringkasan nilai, kelengkapan, dan mode baca setelah diajukan.
- [Validasi & pesan error](https://localhost:3000/pola/validasi): Kapan memeriksa isian, cara menulis pesan error, dan ringkasan kesalahan di atas form.
- [Status & tahap dokumen](https://localhost:3000/pola/status-dokumen): Status sebagai teks + tone, tahap proses dengan StagePath, dan penanda "perlu tindakan Anda".
- [Perubahan belum disimpan](https://localhost:3000/pola/perubahan-belum-disimpan): Mencegah pekerjaan hilang saat pengguna meninggalkan form atau berpindah perusahaan sebelum menyimpan.
- [Angka, uang & tanggal](https://localhost:3000/pola/angka-uang-tanggal): Format Rupiah penuh dan ringkas, terbilang, persen, dan tanggal Bahasa Indonesia.

## Komponen siap di React

- [Button](https://localhost:3000/md/button): Tombol untuk menjalankan aksi. Label berupa kata kerja: "Simpan", "Terbitkan BAST".
- [StateLabel](https://localhost:3000/md/state-label): Label status dokumen/record. Tone menyatakan makna, bukan dekorasi — satu aturan untuk semua modul.
- [FormField](https://localhost:3000/md/form-field): Label + kontrol + teks bantuan/error. Selalu dipakai untuk isian form agar label, tanda wajib, dan pesan error konsisten serta terhubung.
- [Input](https://localhost:3000/md/input): Kolom isian satu baris. Bungkus dengan FormField agar selalu punya label.
- [Textarea](https://localhost:3000/md/textarea): Isian teks panjang (catatan, alasan penolakan, syarat pembayaran). Tinggi minimal ±3 baris, tumbuh mengikuti isi lalu scroll.
- [AmountInput](https://localhost:3000/md/amount-input): Isian nominal uang: mata uang di kiri, angka rata kanan dengan pemisah ribuan (id-ID), tanpa desimal untuk Rupiah. Saat fokus tampil angka mentah, saat blur diformat.
- [Select](https://localhost:3000/md/select): Memilih satu nilai dari daftar pendek (≤ ±15 opsi). Lebih dari itu pakai Combobox (dengan pencarian).
- [Checkbox](https://localhost:3000/md/checkbox): Pilihan independen (boleh lebih dari satu) atau persetujuan tunggal. Klik label ikut mengubah nilai.
- [Radio](https://localhost:3000/md/radio): Satu pilihan dari 2–5 opsi yang semuanya perlu terlihat. Selalu dalam RadioGroup dengan satu opsi default bila memungkinkan.
- [Switch](https://localhost:3000/md/switch): Mengaktifkan/menonaktifkan pengaturan yang LANGSUNG berlaku (tanpa tombol Simpan). Untuk pilihan di dalam form yang disimpan belakangan, pakai Checkbox.
- [StagePath](https://localhost:3000/md/stage-path): Perjalanan dokumen atau deal per tahap, lengkap dengan tanggal · pelaku. Berbeda dengan Steps (wizard form): StagePath adalah status proses bisnis yang berjalan berhari-hari.
- [Dialog](https://localhost:3000/md/dialog): Sheet modal untuk konfirmasi dan form singkat. Menghentikan pekerjaan sampai pengguna memutuskan — pakai seperlunya.
- [Banner](https://localhost:3000/md/banner): Pesan di dalam halaman yang tetap terlihat sampai keadaannya berubah: dokumen dikembalikan, data belum lengkap, sinkronisasi gagal.
- [Badge](https://localhost:3000/md/badge): Angka kecil penanda jumlah di ikon, item menu, atau tab: persetujuan menunggu, invoice jatuh tempo, notifikasi belum dibaca.
- [Avatar](https://localhost:3000/md/avatar): Inisial atau foto orang dan perusahaan. AvatarGroup menumpuk beberapa avatar dan meringkas sisanya menjadi "+n".
- [ProgressBar](https://localhost:3000/md/progress-bar): Bar kapsul tipis untuk progres atau kapasitas yang terukur: termin terbayar, jam proyek terpakai, kuota lisensi.
- [Skeleton](https://localhost:3000/md/skeleton): Placeholder berdenyut yang meniru tata letak isi selagi data dimuat, agar layar tidak melompat saat data tiba.
- [Tooltip](https://localhost:3000/md/tooltip): Teks singkat yang muncul saat kontrol di-hover atau difokus untuk menjelaskan fungsinya. Tanpa caret, sesuai HIG.
- [IconButton](https://localhost:3000/md/icon-button): Tombol bulat berisi ikon saja untuk toolbar dan baris tabel. Label aksesibel wajib dan otomatis tampil sebagai tooltip.
- [Toast](https://localhost:3000/md/toast): HUD gelap singkat di bawah tengah layar untuk konfirmasi setelah aksi ("PO-2026-0142 disimpan"), dengan aksi Urungkan opsional. Hilang sendiri tanpa menghentikan pekerjaan.
- [Alert](https://localhost:3000/md/alert): Peringatan sistem ringkas ala macOS/iOS di tengah layar: judul, pesan, dan satu–dua tombol. Untuk keputusan cepat yang tidak bisa ditunda — hapus, sesi berakhir, koneksi terputus.
- [EmptyState](https://localhost:3000/md/empty-state): Isi pengganti saat area data kosong: belum ada data, tidak ada hasil pencarian, atau tidak punya izin — selalu dengan penjelasan dan langkah berikutnya.
- [Popover](https://localhost:3000/md/popover): Panel melayang non-modal untuk detail ringkas atau filter tanpa meninggalkan layar: filter daftar PO, detail singkat customer, ringkasan termin.
- [Breadcrumbs](https://localhost:3000/md/breadcrumbs): Jejak lokasi halaman dalam hierarki modul: "Order & pengadaan › PO Customer". Biasanya dipakai di dalam PageHeader, di atas judul.
- [PageHeader](https://localhost:3000/md/page-header): Kepala halaman/dokumen BizOps: jejak, judul + label status di satu baris, baris meta, dan aksi di kanan atas.
- [Card](https://localhost:3000/md/card): Wadah isi berjudul di halaman detail dan dashboard: judul + keterangan, aksi di kanan header, isi bebas, dan footer. Contoh: kartu Item, Termin pembayaran, dan "Perlu tindakan Anda" di detail PO.
- [DescriptionList](https://localhost:3000/md/description-list): Pasangan label–nilai untuk detail dokumen: customer, nomor PO, cara penagihan, project, pemilik. Gaya inset grouped — kartu putih radius 12, baris dipisah garis tipis — dirender semantik sebagai <dl>/<dt>/<dd>.
- [SegmentedControl](https://localhost:3000/md/segmented-control): Pengalih 2–5 tampilan yang saling eksklusif untuk isi yang sama: Daftar / Board, Minggu / Bulan / Kuartal. Pilihan langsung berlaku.
- [Tabs](https://localhost:3000/md/tabs): Berpindah antar-bagian dalam satu dokumen — Ringkasan, Item, Dokumen, Riwayat. Di HIG tampil sebagai segmen kapsul di tengah, di atas panel isi.
- [DataTable](https://localhost:3000/md/data-table): Tabel ERP untuk daftar dokumen (PO, invoice) dan tabel item dokumen: angka rata kanan, urut, seleksi baris, sel editable, pohon, baris total, keadaan kosong & memuat, dan paginasi.
- [TotalsSummary](https://localhost:3000/md/totals-summary): Subtotal, diskon, DPP, PPN, dan total di bawah tabel item atau di kolom kanan form PO dan invoice.
- [StatCard](https://localhost:3000/md/stat-card): Angka utama dengan meta, tren baik/buruk, dan pembanding — untuk Beranda, dashboard Direksi, dan kepala daftar dokumen.
- [DueDate](https://localhost:3000/md/due-date): Tenggat dengan status aman, dekat, terlambat, atau selesai: jatuh tempo termin invoice, batas BAST, perpanjangan lisensi.
- [Timeline](https://localhost:3000/md/timeline): Riwayat aktivitas dokumen — siapa, melakukan apa, kapan — dengan penanda jenis: persetujuan, penolakan, menunggu, komentar.
- [Checklist](https://localhost:3000/md/checklist): Daftar tugas ala Reminders dengan tenggat dan penanggung jawab: langkah serah terima, kelengkapan sebelum diajukan, tindakan yang menunggu Anda.
- [SearchField](https://localhost:3000/md/search-field): Kolom pencarian kapsul dengan tombol hapus: cari PO, invoice, atau customer di atas daftar dan di dalam panel.
- [Stepper](https://localhost:3000/md/stepper): Menambah/mengurangi angka kecil: qty lisensi, jumlah termin, durasi kontrak. Field angka dengan kotak panah naik/turun ala macOS; tetap bisa diketik langsung.
- [DatePicker](https://localhost:3000/md/date-picker): Field tanggal tertutup dengan kalender pop-up: tanggal PO, jatuh tempo termin, tanggal kick-off. Bisa diketik langsung ("29/09/2026") atau dipilih dari kalender yang minggunya mulai Senin.
- [MultiSelect](https://localhost:3000/md/multi-select): Memilih beberapa nilai dari daftar dengan pencarian — penanggung jawab tugas, tim proyek, reviewer BAST, tag. Nilai terpilih tampil sebagai Token di dalam field.
- [Combobox](https://localhost:3000/md/combobox): Pilihan tunggal dengan pencarian untuk daftar panjang — customer, item lisensi, distributor — dengan aksi "Buat baru" opsional bila data belum ada.
- [FileUpload](https://localhost:3000/md/file-upload): Area unggah lampiran (PO customer, BAST, faktur) dengan daftar file dan progres per file.
- [Token](https://localhost:3000/md/token): Nilai terpilih yang bisa dihapus di dalam MultiSelect atau baris filter aktif: assignee, tag, kriteria filter.
- [FilterChip](https://localhost:3000/md/filter-chip): Filter daftar berbentuk chip kapsul: "Status ▾" saat kosong, "Status: Draft" saat aktif, dengan tombol × untuk menghapus.
- [FilterBar](https://localhost:3000/md/filter-bar): Baris pencarian + filter + jumlah hasil di atas daftar dokumen (PO, invoice, BAST).

## Komponen yang baru ada desainnya (Figma, belum di React)

- PullDownButton: Tombol yang membuka menu aksi terkait (Ekspor ▾, Aksi lain ▾).
- ActionMenu: Menu aksi pop-up dengan grup, pemisah, dan aksi merusak.
- NavList: Navigasi sidebar ala macOS, gaya Symbol atau Tile (System Settings).
- Steps: Langkah wizard pengisian form multi-halaman.
- Toolbar: Bar judul + pencarian + aksi utama; kaca hanya di kelompok kontrol.
- AppHeader: Header aplikasi: pencarian global, notifikasi, pengalih perusahaan.
- CompanySwitcher: Berpindah antar-perusahaan (Divistant, Dikstra) dalam satu aplikasi.
- TabBar: Navigasi utama di ponsel, melayang di atas tepi bawah.
- NavigationBar: Bar atas di ponsel: kembali, judul besar/kecil, aksi.
- SplitView: Kerangka layar: sidebar kaca, isi, dan inspector opsional.
- GroupedList: Daftar berkelompok inset ala Settings untuk pengaturan dan form ringkas.
- ObjectSummary: Ringkasan objek: ikon, nama, meta, status — untuk inspector dan kartu.
- Drawer: Panel inspector di kanan yang menyatu dengan layar.
- Notification: Panel notifikasi dengan titik biru belum dibaca ala Mail.
- ChartCard: Kartu grafik dengan judul, filter periode, dan legenda.
- Chart: Bagian grafik: batang, legenda, tooltip, garis target.
- Gantt: Jadwal proyek dengan milestone dan termin pembayaran.
- Kanban: Board pipeline deal dan tugas proyek.
- CommentBox: Kolom komentar dengan @mention; ⌘ Return untuk kirim.
- Timesheet: Grid jam kerja per tugas per hari; lebih jam ditandai oranye.
- ProductMark: Logo produk (Divistant, BizOps, IntegraCI) untuk header sidebar.