Komponen / Tata letak
GroupedList
Daftar berkelompok inset ala Settings untuk halaman pengaturan, inspector, dan form ringkas di ponsel: judul grup, kartu berisi baris label + nilai/kontrol, dan keterangan di bawahnya.
Import
tsx
import { GroupedList } from '@divistant/circca-react';Props · GroupedList
Wadah grup (<div>, jarak antargrup 24). Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| className | string | — | Kelas tambahan, mis. lebar maksimum. |
Props · GroupedList.Section
Dirender sebagai <section aria-labelledby> + <ul> di dalam kartu bg/default radius 12.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul grup (Headline/Default). Tanpa judul, beri aria-label pada Section. |
| footer | ReactNode | — | Keterangan di bawah kartu (Footnote fg/muted); terhubung lewat aria-describedby. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level heading judul grup. |
Props · GroupedList.Row
Dirender sebagai <li>. Jenis baris (properti Figma "Type") ditentukan dari props: href/onClick/asChild → Navigation; control → Switch/Input; selain itu Value.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | ReactNode | — | Nama pengaturan (properti Figma "Label"), mengisi sisa lebar dan tidak terjepit (min 112 px). |
| description | ReactNode | — | Keterangan Footnote di bawah label. |
| value | ReactNode | — | Nilai di kanan (properti Figma "Value"), fg/muted; terpotong dengan elipsis bila terlalu panjang. |
| numeric | boolean | false | Angka sejajar (tabular-nums) untuk nominal dan jumlah. |
| control | ReactElement | — | Kontrol di kanan: <Switch size="sm" />, <Select size="sm" />, <Input size="sm" className="w-40" />. Label dikaitkan via <label htmlFor>; id kontrol diisi otomatis bila kosong. |
| icon | Visual | — | Ikon gaya Tile (kotak 22, radius 6) di kiri label. |
| iconTone | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'highlight' | 'accent' | Warna tile ikon. |
| href | string | — | Baris navigasi sebagai tautan <a> penuh baris dengan chevron. |
| onClick | MouseEventHandler | — | Baris navigasi sebagai <button> penuh baris (mis. membuka Dialog). |
| asChild | boolean | false | Isi baris disisipkan ke elemen anak, mis. Next <Link href>. |
| className | string | — | Kelas tambahan untuk <li>. |
Sumber
Kode komponen ada di packages/react/src/components/grouped-list. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.