Komponen / Tampilan data
Checklist
Daftar tugas ala Reminders dengan tenggat dan penanggung jawab: langkah serah terima, kelengkapan sebelum diajukan, tindakan yang menunggu Anda.
Import
tsx
import { Checklist } from '@divistant/circca-react';Props · Checklist
Daftar <ul> dibungkus <div>; menerima atribut <div>. Beri aria-label atau aria-labelledby ke judul kartu.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| summary | boolean | ReactNode | false | "x dari y selesai" di atas daftar. true = dihitung dari Checklist.Item langsung; isi teks sendiri untuk kalimat lain. |
| today | Date | — | Acuan "hari ini" untuk tenggat semua item (tes, contoh, render server). |
| soonDays | number | 3 | Ambang "dekat" tenggat semua item. |
| readOnly | boolean | false | Semua item hanya baca (dokumen sudah diajukan atau centang diturunkan dari data). |
| className | string | — | Kelas tambahan. Pakai -mx-2.5 agar lingkaran sejajar dengan isi kartu. |
Props · Checklist.Item
Centang = checkbox Radix (role="checkbox"); menerima atribut tombolnya (name, value, disabled).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Teks tugas (properti Figma "Label"). |
| checked | boolean | — | Selesai (properti Figma "Status" = Done). Terkendali. |
| defaultChecked | boolean | — | Nilai awal untuk mode tak terkendali. |
| onCheckedChange | (checked: boolean) => void | — | Dipanggil saat centang berubah. |
| readOnly | boolean | mengikuti Checklist | Centang dibekukan tanpa dipudarkan. |
| due | Date | string | number | — | Tenggat (properti Figma "Due date") → DueDate; Done otomatis saat dicentang. |
| dueProps | Omit<DueDateProps, 'date'> | — | Pengaturan DueDate tambahan, mis. relative atau state. |
| assignee | string | — | Nama penanggung jawab (properti Figma "Assignee") → Avatar Circle 20 dengan nama terbaca pembaca layar. |
| disabled | boolean | false | Nonaktif (dipudarkan). Jelaskan alasannya di dekat daftar. |
Sumber
Kode komponen ada di packages/react/src/components/checklist. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.