@divistant/circca-react
v0.1.0
Published
Komponen React Circca HIG (Radix + Tailwind v4), selaras dengan library Figma Circca HIG · Components
Readme
@divistant/circca-react
Komponen React Circca HIG: Radix primitives + Tailwind v4 + cva. Gaya mengikuti library Figma Circca HIG · Components
(gB8XoZluSF7nwSTLZ13RnR); nama komponen, prop, dan varian sama dengan properti Figma. Ikon: Phosphor (@phosphor-icons/react),
set yang sama dengan Figma Circca HIG · Icons.
Circca klasik (gaya Primer, ikon Tabler) dibekukan di tag git circca-classic-v0.1.
| Komponen | Status kode |
|---|---|
| Button | Beta |
| StateLabel | Beta |
| FormField | Beta |
| Input | Beta |
| Textarea | Beta |
| AmountInput (+ terbilang) | Beta |
| Select | Beta |
| Checkbox | Beta |
| RadioGroup / Radio | Beta |
| Switch | Beta |
| StagePath | Beta |
| Dialog | Beta |
| Banner | Beta |
| IconButton | Beta |
| Badge | Beta |
| Avatar / AvatarGroup | Beta |
| ProgressBar | Beta |
| Skeleton | Beta |
| Tooltip | Beta |
| Toast | Beta |
| Alert | Beta |
| EmptyState | Beta |
| Popover | Beta |
| Breadcrumbs | Beta |
| PageHeader | Beta |
| Card | Beta |
| DescriptionList | Beta |
| DataTable | Beta |
| TotalsSummary | Beta |
| StatCard | Beta |
| DueDate | Beta |
| Timeline | Beta |
| Checklist | Beta |
| SearchField | Beta |
| Stepper | Beta |
| DatePicker | Beta |
| MultiSelect | Beta |
| Combobox | Beta |
| FileUpload | Beta |
| Token | Beta |
| FilterChip | Beta |
| FilterBar | Beta |
| NavList | Beta |
| Steps | Beta |
| Toolbar | Beta |
| AppHeader | Beta |
| CompanySwitcher | Beta |
| SplitView | Beta |
| Drawer | Beta |
| GroupedList | Beta |
| ObjectSummary | Beta |
| ActionMenu | Beta |
| PullDownButton | Beta |
| Notification | Beta |
| TabBar | Beta |
| NavigationBar | Beta |
| CommentBox | Beta |
| ProductMark | Beta |
| ChartCard | Beta |
| DonutChart | Beta |
| ActivityRings | Beta |
| ColumnChart | Beta |
| BarList | Beta |
| LollipopChart | Beta |
| ProportionBar | Beta |
| Treemap | Beta |
| WaffleChart | Beta |
| HeatmapGrid | Beta |
| EventTimeline | Beta |
| SegmentedControl | Beta |
| Tabs | Beta |
npm run dev # tsc --watch (dipakai `npm run dev` di root bersama situs dokumentasi)
npm run build # dist/ (ESM + .d.ts) + styles.css
npm test # uji utilitas (terbilang, format angka)Next.js App Router
Semua komponen interaktif bertanda 'use client'. Dari Server Component, oper ikon sebagai elemen dari
@phosphor-icons/react/ssr: leadingVisual={<Plus />}. Bentuk komponen (leadingVisual={Plus}) hanya bisa dari Client Component.
Aturan kontribusi komponen
- Hanya token (kelas Tailwind Circca). Tidak boleh ada warna, spasi, atau radius mentah.
- Nama prop & varian sama dengan properti komponen Figma.
- Kontrol form membaca konteks
FormField(useFieldProps) agar label, error, dan aria terhubung otomatis. - Setiap komponen punya halaman di
apps/docs: contoh untuk semua varian & state, props, pedoman, aksesibilitas. - Label & teks contoh dalam Bahasa Indonesia sesuai konteks bisnis (PO, BAST, Invoice).