Komponen / Tampilan data
DueDate
Tenggat dengan status aman, dekat, terlambat, atau selesai: jatuh tempo termin invoice, batas BAST, perpanjangan lisensi.
Import
tsx
import { DueDate } from '@divistant/circca-react';Props
Juga menerima atribut <span>. Fungsi bantu `getDueDateState`, `daysUntil`, dan `formatDueRelative` ikut diekspor untuk menyortir atau memfilter tenggat.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| date | Date | string | number | — | Tanggal jatuh tempo. |
| state | 'normal' | 'soon' | 'overdue' | 'done' | — | Paksa status (properti Figma "State"). Kosong = dihitung dari `date` vs `today`. |
| done | boolean | false | Tugas/termin sudah selesai → Done, tanpa teks relatif. |
| soonDays | number | 3 | Ambang "dekat" dalam hari kalender. |
| today | Date | new Date() | Acuan "hari ini". Isi tanggal tetap untuk tes, contoh, dan render server agar tidak terjadi hydration mismatch. |
| relative | boolean | 'auto' | 'auto' | Teks relatif sebelum tanggal. 'auto' = hanya Soon & Overdue; true = selalu (kecuali Done); false = tanggal saja. |
| label | ReactNode | formatDate(date) | Ganti teks tanggal (properti Figma "Label"), mis. "Hari ini" di header kartu. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/due-date. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.