Katalog Komponen

Direktori komponen antarmuka open-source Majalengka Design System — lengkap, teruji, aksesibel, dan framework-agnostic.

Selamat datang di direktori komponen Majalengka Design System, proyek open-source untuk ekosistem web Majalengka.tech. Seluruh komponen di bawah ini dirancang mematuhi standar aksesibilitas WCAG 2.1 Level AA, prinsip ergonomi Kumo UI, serta kaidah Hukum UX & Psikologi Kognitif.

Dapat digunakan langsung di framework apa pun melalui CSS Murni (@majalengka/css), UnoCSS (presetMajalengka), Tailwind CSS, maupun Vue 3 (@majalengka/vue).

1. Elemen Dasar (Primitives)

Fondasi interaksi visual dan identitas antarmuka:

Button (Tombol)

Tombol tindakan berukuran proporsional (32/40/48px) dengan 5 varian aksi.

Badge (Lencana Status)

Penanda status permohonan dengan varian pill dan indikator dot.

Avatar & AvatarGroup

Penampil foto warga, inisial petugas, dan tumpukan tim verifikator.

Kbd (Tombol Keyboard)

Penampil tombol keyboard untuk shortcut pencarian dan instruksi.

Chip (Notifikasi)

Titik atau angka counter notifikasi di pojok atas elemen.

Skeleton (Pemuat Shimmer)

Placeholder pemuatan data halus yang mematuhi ambang batas Doherty (< 400ms).

Progress Bar

Indikator persentase pemenuhan berkas untuk efek psikologis Goal-Gradient.

User (Identitas)

Format identitas terpadu: avatar + nama + jabatan dalam satu baris.

Icon

Standarisasi dimensi ikon Lucide yang mewarisi warna teks induk.

Spinner

Indikator pemrosesan server dan pengunggahan berkas.

Divider

Garis pemisah seksi konten biasa maupun berlabel tengah.

2. Formulir & Masukan

Wadah pengumpulan data permohonan warga yang toleran terhadap kesalahan input:

FormField

Pembungkus label wajib, teks petunjuk (hint), dan pesan validasi.

Input Teks & NIK

Kolom isian NIK 16 digit, telepon seluler, dan teks umum.

InputGroup & ButtonGroup

Menggabungkan input dengan tombol cari atau addon prefix mata uang.

PinInput (Kode OTP)

Kotak kode verifikasi per kotak mematuhi Hukum Miller & Chunking.

Switch (Toggle Sakelar)

Pengaturan biner aktif/nonaktif yang berlaku instan.

Slider

Kontrol penggeser nilai untuk menentukan radius zonasi atau batas jangkauan.

Textarea

Area teks laporan pengaduan dengan pembatas karakter.

Select Dropdown

Menu pilihan kecamatan, kelurahan, dan kategori izin.

Checkbox & Radio

Pilihan persetujuan berkas dan opsi metode pengambilan dokumen.

FileUpload

Dropzone pengunggahan foto KTP, KK, dan berkas persyaratan.

3. Navigasi & Struktur

Penunjuk arah dan struktur hierarki informasi:

TrustBanner

Pita identitas pengelola situs, teksnya diisi sendiri oleh pemakai.

SkipLink

Tautan pintas langsung ke konten untuk pengguna keyboard.

Stepper

Penunjuk tahapan alur permohonan layanan multi-langkah.

Tabs

Navigasi panel tab bergaya underline dan pil kapsul.

Breadcrumb

Jejak navigasi hierarki halaman dari beranda.

Pagination

Kontrol penomoran halaman untuk tabel data publik.

4. Umpan Balik & Dialog

Komunikasi status sistem dan konfirmasi tindakan:

Alert

Spanduk status sukses, peringatan, info, dan kesalahan teknis.

Toast

Notifikasi mengambang di pojok layar setelah tindakan dieksekusi.

Modal Dialog

Kotak dialog konfirmasi sebelum tindakan penting.

Drawer & Slideover

Panel samping geser untuk formulir detail dan filter mendalam.

Tooltip

Petunjuk teks melayang murni CSS saat kursor diarahkan.

EmptyState

Tampilan informatif ketika data permohonan masih kosong.

5. Tampilan Data

Penyajian data statistik dan riwayat kronologis layanan publik:

Table Responsif

Tabel data permohonan ramah layar sentuh ponsel dengan angka tabular.

StatCard

Kartu metrik statistik capaian layanan dengan indikator tren.

Timeline

Pelacak kronologis perjalanan berkas di meja verifikator.

Card Layanan

Kartu katalog layanan kependudukan dan ringkasan informasi.

Accordion (FAQ)

Daftar lipat tanya jawab umum seputar perizinan.

Ubah halaman iniatauLaporkan masalah

Anggaran Ukuran CSS & Performa

Batas ukuran berkas paket CSS dan waktu muat di koneksi pedesaan.

Button (Tombol)

Tombol interaktif untuk memicu aksi utama, navigasi alur, pengiriman formulir, dan konfirmasi permohonan layanan.