Komponen / Navigasi
Tabs
Berpindah antar-bagian dalam satu dokumen — Ringkasan, Item, Dokumen, Riwayat. Di HIG tampil sebagai segmen kapsul di tengah, di atas panel isi.
Import
tsx
import { Tabs } from '@divistant/circca-react';Props · Tabs
Dibangun di atas Radix Tabs; menerima props Root-nya (orientation, dir, activationMode).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Tab aktif (terkendali). |
| defaultValue | string | — | Tab aktif awal (tak terkendali). |
| onValueChange | (value: string) => void | — | Dipanggil saat tab lain diaktifkan. |
| items | { value; label; icon?; count?; disabled? }[] | — | Pintasan: merender Tabs.List otomatis di atas children (yang cukup berisi Tabs.Panel). |
| listLabel | string | — | Nama aksesibel daftar tab saat memakai `items`. |
| activationMode | 'automatic' | 'manual' | 'automatic' | Manual: panah hanya memindah fokus, Enter/Spasi mengaktifkan — untuk panel yang berat dimuat. |
| className | string | — | Kelas tambahan. Root = kolom flex dengan jarak 16 antara daftar tab dan panel. |
Props · Tabs.List
Juga diekspor sebagai TabsList (role="tablist").
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| align | 'center' | 'start' | 'center' | HIG: tengah di atas panel. `start` untuk panel sempit (inspector, kartu). |
| aria-label | string | — | Nama daftar tab, mis. "Bagian PO-2026-0142". |
Props · Tabs.Tab
Juga diekspor sebagai TabsTab (role="tab").
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Nilai unik tab; dipasangkan dengan Tabs.Panel ber-value sama. |
| children | ReactNode | — | Label tab. |
| icon | Visual | — | Ikon 14 sebelum label (Figma: Icon + swap). |
| count | number | string | — | Jumlah isi tab (Figma: Counter → Count), teks Footnote muted. Di atas `countMax` ditulis "99+". |
| countMax | number | 99 | Batas angka sebelum ditulis "<max>+". |
| disabled | boolean | false | Tab nonaktif (opasitas 45%). |
Props · Tabs.Panel
Alias Tabs.Content; juga diekspor sebagai TabsPanel (role="tabpanel").
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Nilai tab pemilik panel. |
| forceMount | boolean | — | Tetap pasang panel saat tidak aktif (mis. untuk menjaga state form). |
Sumber
Kode komponen ada di packages/react/src/components/tabs. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.