@gemafajarramadhan/dynamic-ui 1.1.12 → 1.1.14

package/README.md

@@ -1318,6 +1318,1149 @@ export {}
 
 ---
 
+## Referensi Props Komponen
+
+Berikut adalah dokumentasi lengkap props untuk setiap komponen yang tersedia.
+
+---
+
+### `DataTable`
+
+Komponen tabel data yang mendukung mode API (fetch otomatis) maupun data statis, dengan pagination, sorting, filtering, dan action button.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `columns` | `TableColumn[]` | `[]` | Definisi kolom tabel |
+| `data` | `any[]` | `[]` | Data statis (mode non-API) |
+| `perPage` | `number` | `10` | Jumlah baris per halaman |
+| `loading` | `boolean` | `false` | Status loading eksternal |
+| `hasActions` | `boolean` | `false` | Tampilkan kolom aksi baris |
+| `nested` | `boolean` | `false` | Mode nested (tampilan kompak tanpa header search) |
+| `apiModule` | `string` | — | Module API untuk fetch data |
+| `apiAction` | `string` | `'list'` | Action API |
+| `apiMethod` | `string` | — | HTTP method (`GET`/`POST`) |
+| `apiUrl` | `string` | — | URL endpoint API langsung |
+| `apiParams` | `object` | `{}` | Parameter tambahan untuk request API |
+| `tableConfig` | `any` | — | Konfigurasi JSON lengkap tabel (dari backend) |
+| `dynamicColumns` | `boolean` | `false` | Gunakan kolom dinamis dari response API |
+| `enableQuickSearch` | `boolean` | `true` | Aktifkan pencarian cepat (debounce) |
+| `showPagination` | `boolean` | `true` | Tampilkan pagination |
+| `ignorePermissions` | `boolean` | `false` | Abaikan cek permission |
+| `permissionBase` | `string` | — | Base path untuk permission check |
+
+```vue
+<template>
+  <!-- Mode API -->
+  <DataTable
+    api-url="/api/users"
+    api-method="POST"
+    :columns="[
+      { key: 'name', label: 'Nama', sortable: true },
+      { key: 'email', label: 'Email' },
+    ]"
+    :per-page="25"
+  />
+
+  <!-- Mode data statis -->
+  <DataTable
+    :data="myData"
+    :columns="columns"
+  />
+</template>
+```
+
+---
+
+### `DCodeButton`
+
+Tombol dengan berbagai variant, warna kustom, ikon Lucide, dan tooltip.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `text` | `string` | `''` | Teks tombol |
+| `icon` | `string` | — | Nama ikon Lucide (e.g. `'Save'`, `'Trash2'`) |
+| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'\|'tonal'\|'elevated'` | `'default'` | Variant tampilan |
+| `size` | `'default'\|'sm'\|'lg'\|'icon'` | `'default'` | Ukuran tombol |
+| `tooltip` | `string` | `''` | Teks tooltip |
+| `bgColor` | `string` | `''` | Warna background kustom (tailwind/hex) |
+| `textColor` | `string` | `''` | Warna teks kustom |
+| `hoverBgColor` | `string` | `''` | Warna background saat hover |
+| `borderColor` | `string` | `''` | Warna border kustom |
+| `disabled` | `boolean` | `false` | Nonaktifkan tombol |
+| `type` | `'button'\|'submit'\|'reset'` | `'button'` | Tipe HTML button |
+| `visible` | `boolean` | `true` | Tampilkan/sembunyikan tombol |
+| `skeleton` | `boolean` | `false` | Tampilkan skeleton loading |
+
+```vue
+<template>
+  <DCodeButton text="Simpan" icon="Save" variant="default" />
+  <DCodeButton text="Hapus" icon="Trash2" variant="destructive" tooltip="Hapus data ini" />
+  <DCodeButton text="Submit" type="submit" :disabled="isLoading" />
+</template>
+```
+
+---
+
+### `DCodeTextField`
+
+Input teks dengan banyak fitur: filter karakter, transformasi case, clearable, password toggle.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `string\|number\|null` | — | Value input (v-model) |
+| `prependInner` | `string` | — | Teks/ikon di sisi kiri input |
+| `clearable` | `boolean` | — | Tampilkan tombol clear |
+| `hideClearWhenEmpty` | `boolean` | — | Sembunyikan tombol clear saat kosong |
+| `textCase` | `'none'\|'uppercase'\|'lowercase'\|'titlecase'\|'sentencecase'` | `'none'` | Transformasi huruf |
+| `applyTextCaseToValue` | `boolean` | `true` | Terapkan transformasi ke v-model |
+| `valueType` | `'free'\|'number'\|'letter'\|'letternumber'\|'email'\|'password'` | `'free'` | Filter jenis karakter yang diperbolehkan |
+| `allowSpaces` | `boolean` | — | Izinkan spasi |
+| `allowChars` | `string\|string[]` | — | Karakter tambahan yang diizinkan |
+| `pattern` | `RegExp` | — | Regex validasi |
+| `visible` | `boolean` | `true` | Tampilkan/sembunyikan |
+| `skeleton` | `boolean` | `false` | Tampilkan skeleton |
+| `returnNumber` | `boolean` | — | Emit nilai sebagai number |
+| `error` | `string\|null` | — | Pesan error validasi |
+
+```vue
+<template>
+  <DCodeTextField
+    v-model="form.name"
+    label="Nama Lengkap"
+    placeholder="Masukkan nama..."
+    text-case="titlecase"
+    clearable
+  />
+  <DCodeTextField
+    v-model="form.email"
+    label="Email"
+    value-type="email"
+    :error="errors.email"
+  />
+  <DCodeTextField
+    v-model="form.password"
+    label="Password"
+    value-type="password"
+  />
+</template>
+```
+
+---
+
+### `DCodeTextarea`
+
+Textarea dengan karakter counter, filter, dan transformasi case.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `string\|number\|null` | — | Value (v-model) |
+| `clearable` | `boolean` | — | Tombol clear |
+| `hideClearWhenEmpty` | `boolean` | `true` | Sembunyikan clear saat kosong |
+| `textCase` | `'none'\|'uppercase'\|'lowercase'\|'titlecase'\|'sentencecase'` | `'none'` | Transformasi huruf |
+| `applyTextCaseToValue` | `boolean` | `true` | Terapkan ke v-model |
+| `valueType` | `'free'\|'number'\|'letter'\|'letternumber'` | `'free'` | Filter karakter |
+| `allowSpaces` | `boolean` | `true` | Izinkan spasi |
+| `allowChars` | `string\|string[]` | — | Karakter tambahan |
+| `pattern` | `RegExp` | — | Regex validasi |
+| `visible` | `boolean` | `true` | Tampilkan/sembunyikan |
+| `skeleton` | `boolean` | `false` | Skeleton loading |
+| `showCharCount` | `boolean` | `true` | Tampilkan counter karakter |
+| `returnNumber` | `boolean` | `false` | Emit sebagai number |
+| `error` | `string\|null` | `null` | Pesan error |
+
+```vue
+<template>
+  <DCodeTextarea
+    v-model="form.description"
+    label="Deskripsi"
+    placeholder="Masukkan deskripsi..."
+    :show-char-count="true"
+    maxlength="500"
+  />
+</template>
+```
+
+---
+
+### `DCodeAutoComplete`
+
+Dropdown autocomplete dengan fetch API otomatis dan pencarian.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any` | — | Value terpilih (v-model) |
+| `endpoint` | `{ apiUrl?, apiMethod?, apiModule?, apiAction? }` | — | Konfigurasi endpoint API |
+| `apiParams` | `object` | `{}` | Parameter tambahan request |
+| `fetchItems` | `Function` | — | Fungsi custom fetch (alternatif endpoint) |
+| `itemTitle` | `string\|Function` | `'name'` | Field label item |
+| `itemValue` | `string\|Function` | `'id'` | Field nilai item |
+| `returnObject` | `boolean` | `false` | Return objek penuh |
+| `autoFetchOnOpen` | `boolean` | `true` | Fetch saat dropdown terbuka |
+| `autoFetchOnMount` | `boolean` | `false` | Fetch saat mount |
+| `clearable` | `boolean` | `false` | Tombol clear |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `visible` | `boolean` | `true` | Tampilkan/sembunyikan |
+| `skeleton` | `boolean` | `false` | Skeleton loading |
+| `error` | `string\|null` | `null` | Pesan error |
+| `icon` | `Component` | — | Ikon kiri input |
+
+```vue
+<template>
+  <DCodeAutoComplete
+    v-model="form.departemenId"
+    label="Departemen"
+    :endpoint="{ apiUrl: '/api/master/departemen' }"
+    item-title="nama"
+    item-value="id"
+    clearable
+  />
+</template>
+```
+
+---
+
+### `DCodeInfiniteAutoComplete`
+
+Autocomplete dengan pagination infinite scroll (load more saat scroll ke bawah).
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any` | — | Value (v-model) |
+| `endpoint` | `{ apiUrl?, apiMethod? }` | — | Endpoint API |
+| `apiParams` | `object` | `{}` | Parameter tambahan |
+| `fetchItems` | `Function` | — | Custom fetch |
+| `itemTitle` | `string\|Function` | `'name'` | Field label |
+| `itemValue` | `string\|Function` | `'id'` | Field nilai |
+| `itemSubtitle` | `string\|Function` | — | Field subtitle item |
+| `returnObject` | `boolean` | `false` | Return objek penuh |
+| `autoFetchOnOpen` | `boolean` | `true` | Fetch saat buka |
+| `refreshOnOpen` | `boolean` | `false` | Refresh data setiap buka |
+| `clearable` | `boolean` | `false` | Tombol clear |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `visible` | `boolean` | `true` | Tampilkan |
+| `skeleton` | `boolean` | `false` | Skeleton |
+| `error` | `string\|null` | `null` | Error message |
+| `icon` | `Component` | — | Ikon prefix |
+| `pageSize` | `number` | `20` | Jumlah item per halaman |
+
+```vue
+<template>
+  <DCodeInfiniteAutoComplete
+    v-model="form.userId"
+    label="Pilih User"
+    :endpoint="{ apiUrl: '/api/users', apiMethod: 'GET' }"
+    item-title="fullName"
+    item-value="id"
+    :page-size="15"
+  />
+</template>
+```
+
+---
+
+### `DCodeMultiSelect`
+
+Dropdown multi-pilihan dengan chip tags dan search.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any[]` | — | Array nilai terpilih (v-model) |
+| `items` | `object[]` | `[]` | Data statis |
+| `endpoint` | `{ apiUrl?, apiMethod?, apiOptions? }` | — | Endpoint API |
+| `fetchItems` | `Function` | — | Custom fetch |
+| `autoFetchOnOpen` | `boolean` | `true` | Fetch saat buka |
+| `autoFetchOnMount` | `boolean` | `false` | Fetch saat mount |
+| `refreshOnOpen` | `boolean` | `false` | Refresh setiap buka |
+| `label` | `string` | `''` | Label dropdown |
+| `placeholder` | `string` | `'Pilih data…'` | Placeholder |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `clearable` | `boolean` | `false` | Tombol clear |
+| `searchable` | `boolean` | `false` | Aktifkan search |
+| `searchPlaceholder` | `string` | `'Cari…'` | Placeholder search |
+| `visible` | `boolean` | `true` | Tampilkan |
+| `skeleton` | `boolean` | `false` | Skeleton |
+| `maxChips` | `number\|null` | `2` | Maks chip ditampilkan |
+| `maxSelected` | `number\|null` | `3` | Maks pilihan |
+| `itemTitle` | `string\|Function` | — | Field label |
+| `itemValue` | `string\|Function` | — | Field nilai |
+| `returnObject` | `boolean` | — | Return objek penuh |
+| `error` | `string\|null` | — | Error message |
+
+```vue
+<template>
+  <DCodeMultiSelect
+    v-model="form.tags"
+    label="Tags"
+    :items="availableTags"
+    item-title="name"
+    item-value="id"
+    :max-selected="5"
+    searchable
+  />
+</template>
+```
+
+---
+
+### `DCodeDatePicker`
+
+Date picker atau date range picker dengan berbagai format.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `string\|[string,string]\|null` | — | Value tanggal (v-model) |
+| `range` | `boolean` | `true` | Mode range (pilih 2 tanggal) |
+| `autoRangeDays` | `number\|null` | `null` | Otomatis set range N hari |
+| `disablePast` | `boolean` | `false` | Nonaktifkan tanggal masa lalu |
+| `maxDaysAhead` | `number\|null` | `null` | Maks hari ke depan |
+| `placeholder` | `string` | `'Pilih tanggal'` | Placeholder |
+| `label` | `string` | — | Label |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `clearable` | `boolean` | `true` | Tombol clear |
+| `displayFormat` | `string` | `'dd/MM/yyyy'` | Format tampilan |
+| `modelType` | `string` | `'yyyy-MM-dd'` | Format v-model |
+| `locale` | `'id'\|'en'` | `'en'` | Bahasa kalender |
+| `placement` | `string` | `'bottom-start'` | Posisi dropdown |
+| `prependInner` | `string` | — | Teks prefix |
+| `error` | `string\|null` | `null` | Error message |
+| `tone` | `string` | `'primary'` | Warna tema kalender |
+| `skeleton` | `boolean` | `false` | Skeleton loading |
+
+```vue
+<template>
+  <!-- Single date -->
+  <DCodeDatePicker
+    v-model="form.tanggal"
+    label="Tanggal Lahir"
+    :range="false"
+    display-format="dd MMMM yyyy"
+    locale="id"
+  />
+
+  <!-- Date range -->
+  <DCodeDatePicker
+    v-model="form.periode"
+    label="Periode"
+    :range="true"
+  />
+</template>
+```
+
+---
+
+### `DCodeDateRangePicker`
+
+Date range picker sederhana berbasis popover input.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `{ start, end }\|null` | — | Range tanggal (v-model) |
+| `placeholder` | `string` | `'YYYY-MM-DD - YYYY-MM-DD'` | Placeholder |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `clearable` | `boolean` | `true` | Tombol clear |
+| `returnType` | `'date'\|'iso'\|'yyyy-mm-dd'` | `'yyyy-mm-dd'` | Format return |
+| `requireBoth` | `boolean` | `false` | Wajib isi keduanya |
+
+```vue
+<template>
+  <DCodeDateRangePicker
+    v-model="form.periode"
+    placeholder="Pilih periode..."
+    return-type="yyyy-mm-dd"
+  />
+</template>
+```
+
+---
+
+### `DCodeCurrencyField`
+
+Input angka dengan format mata uang otomatis.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `number\|null` | — | Nilai angka (v-model) |
+| `currency` | `string` | `'IDR'` | Kode mata uang (`'IDR'`, `'USD'`) |
+| `locale` | `string` | `'en-US'` | Locale format angka |
+| `label` | `string` | — | Label field |
+| `placeholder` | `string` | — | Placeholder |
+| `error` | `string\|null` | — | Error message |
+| `disabled` | `boolean` | — | Nonaktifkan |
+| `readonly` | `boolean` | — | Read-only |
+| `clearable` | `boolean` | — | Tombol clear |
+| `hideClearWhenEmpty` | `boolean` | `true` | Sembunyikan clear jika kosong |
+| `prependInner` | `string` | — | Override simbol mata uang |
+| `skeleton` | `boolean` | `false` | Skeleton loading |
+
+```vue
+<template>
+  <DCodeCurrencyField
+    v-model="form.harga"
+    label="Harga"
+    currency="IDR"
+    clearable
+    :error="errors.harga"
+  />
+</template>
+```
+
+---
+
+### `DCodeCheckbox`
+
+Checkbox dengan label dan dukungan indeterminate state.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `boolean\|null` | — | Nilai checkbox (v-model) |
+| `visible` | `boolean` | `true` | Tampilkan |
+| `skeleton` | `boolean` | `false` | Skeleton |
+| `indeterminate` | `boolean` | `false` | State indeterminate |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+
+Gunakan attr `label` untuk teks di samping checkbox.
+
+```vue
+<template>
+  <DCodeCheckbox
+    v-model="form.setuju"
+    label="Saya setuju dengan syarat & ketentuan"
+    required
+  />
+</template>
+```
+
+---
+
+### `DCodeSwitch`
+
+Toggle switch dengan berbagai ukuran, warna, dan tooltip.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `boolean` | `false` | Status switch (v-model) |
+| `label` | `string` | `''` | Label teks |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `size` | `'small'\|'medium'\|'large'` | `'medium'` | Ukuran switch |
+| `color` | `'primary'\|'success'\|'warning'\|'danger'` | `'primary'` | Warna aktif |
+| `loading` | `boolean` | `false` | Status loading |
+| `labelPosition` | `'left'\|'right'` | `'right'` | Posisi label |
+| `required` | `boolean` | `false` | Required |
+| `showTooltip` | `boolean` | `false` | Tampilkan tooltip |
+| `tooltipActiveText` | `string` | `'Aktif'` | Teks tooltip saat aktif |
+| `tooltipInactiveText` | `string` | `'Tidak Aktif'` | Teks tooltip saat nonaktif |
+
+```vue
+<template>
+  <DCodeSwitch
+    v-model="form.isActive"
+    label="Status Aktif"
+    color="success"
+    size="medium"
+    :show-tooltip="true"
+  />
+</template>
+```
+
+---
+
+### `DCodeRadio`
+
+Grup radio button yang bisa fetch opsi dari API.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any` | — | Value terpilih (v-model) |
+| `label` | `string` | `'name'` | Key field label dari opsi |
+| `options` | `any[]` | `[]` | Opsi data statis |
+| `apiUrl` | `string` | `''` | URL endpoint API untuk fetch opsi |
+| `apiMethod` | `'GET'\|'POST'` | `'GET'` | HTTP method |
+| `dataPath` | `string` | `''` | Path ke array data dalam response |
+| `layout` | `boolean` | `true` | Layout horizontal (true) / vertikal |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `required` | `boolean` | `false` | Required |
+| `error` | `string\|null` | `null` | Error message |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | Ukuran radio |
+| `color` | `string` | `'blue'` | Warna accent |
+| `model` | `string` | `'id'` | Key field nilai dari opsi |
+
+```vue
+<template>
+  <!-- Dengan opsi statis -->
+  <DCodeRadio
+    v-model="form.gender"
+    :options="[
+      { id: 'L', name: 'Laki-laki' },
+      { id: 'P', name: 'Perempuan' },
+    ]"
+  />
+
+  <!-- Dengan API -->
+  <DCodeRadio
+    v-model="form.statusId"
+    api-url="/api/master/status"
+    label="nama"
+    model="id"
+  />
+</template>
+```
+
+---
+
+### `DCodeRadioCustom`
+
+Radio button dengan tampilan card kustom dan ikon.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any` | — | Value (v-model) |
+| `icon` | `string` | — | Nama ikon Lucide untuk setiap card |
+| `label` | `string` | `'name'` | Key field label |
+| `options` | `any[]` | `[]` | Opsi statis |
+| `apiUrl` | `string` | `''` | URL API |
+| `apiMethod` | `'GET'\|'POST'` | `'GET'` | HTTP method |
+| `dataPath` | `string` | `''` | Path data dalam response |
+| `layout` | `boolean` | `true` | Horizontal layout |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `required` | `boolean` | `false` | Required |
+| `error` | `string\|null` | `null` | Error message |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | Ukuran |
+| `color` | `string` | `'blue'` | Warna highlight |
+| `model` | `string` | `'id'` | Key field nilai |
+
+```vue
+<template>
+  <DCodeRadioCustom
+    v-model="form.plan"
+    :options="[
+      { id: 'basic', name: 'Basic', icon: 'Star' },
+      { id: 'pro', name: 'Pro', icon: 'Zap' },
+    ]"
+    label="name"
+    model="id"
+  />
+</template>
+```
+
+---
+
+### `DCodeOtpInput`
+
+Input OTP digit-per-digit dengan submit otomatis ke API.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `string` | `''` | Nilai OTP (v-model) |
+| `totalInput` | `number` | `6` | Jumlah digit OTP |
+| `default` | `string` | `''` | Default nilai awal |
+| `label` | `string` | `''` | Label |
+| `endpoint` | `{ apiMethod?, apiUrl? }` | — | Endpoint untuk submit OTP |
+| `submitFn` | `Function` | — | Custom submit function |
+
+Events: `complete` (OTP penuh), `success`, `error`, `loading`
+
+```vue
+<template>
+  <DCodeOtpInput
+    v-model="otp"
+    :total-input="6"
+    label="Kode OTP"
+    :endpoint="{ apiUrl: '/api/auth/verify-otp', apiMethod: 'POST' }"
+    @complete="handleOtpComplete"
+  />
+</template>
+```
+
+---
+
+### `DCodeFileField`
+
+Upload file dengan validasi tipe & ukuran, preview, dan upload ke API.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `File\|null` | — | File terpilih (v-model) |
+| `label` | `string` | `'Upload File'` | Label |
+| `hint` | `string` | — | Teks petunjuk |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `previewHeight` | `number` | `190` | Tinggi preview (px) |
+| `previewWidth` | `number` | — | Lebar preview (px) |
+| `allowedTypes` | `string\|null` | `null` | Tipe file diizinkan (e.g. `'pdf,doc'`) |
+| `accept` | `string` | — | Attribute accept HTML |
+| `minSizeMb` | `number\|null` | `null` | Ukuran file minimum (MB) |
+| `maxSizeMb` | `number` | `5` | Ukuran file maksimum (MB) |
+| `endpoint` | `{ apiMethod?, apiUrl? }` | — | Endpoint upload |
+| `uploadFn` | `Function` | — | Custom upload function |
+
+```vue
+<template>
+  <DCodeFileField
+    v-model="form.dokumen"
+    label="Upload Dokumen"
+    allowed-types="pdf,doc,docx"
+    :max-size-mb="10"
+    :endpoint="{ apiUrl: '/api/upload', apiMethod: 'POST' }"
+    @uploaded="handleUploaded"
+    @error="handleError"
+  />
+</template>
+```
+
+---
+
+### `DCodeImageField`
+
+Upload gambar dengan crop/resize dialog terintegrasi.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `File\|null` | — | File gambar (v-model) |
+| `label` | `string` | `'Upload Gambar'` | Label |
+| `hint` | `string` | `'Drag & drop atau klik area ini'` | Petunjuk |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `allowedTypes` | `string\|null` | `null` | Tipe gambar diizinkan |
+| `accept` | `string` | `'image/*'` | Accept HTML |
+| `minSizeMb` | `number\|null` | `null` | Min ukuran (MB) |
+| `maxSizeMb` | `number` | `2` | Maks ukuran (MB) |
+| `title` | `string` | `'Hasil Gambar'` | Judul preview |
+| `description` | `string` | `''` | Deskripsi preview |
+| `previewWidth` | `number` | `360` | Lebar preview |
+| `previewHeight` | `number` | `220` | Tinggi preview |
+| `aspectRatio` | `number\|null` | `null` | Rasio aspek crop |
+| `outputWidth` | `number\|null` | `null` | Lebar output (px) |
+| `outputHeight` | `number\|null` | `null` | Tinggi output (px) |
+| `quality` | `number` | `0.92` | Kualitas output (0-1) |
+| `autoOpenEditor` | `boolean` | `true` | Buka editor saat file dipilih |
+| `minWidth` | `number\|null` | `null` | Min lebar gambar |
+| `minHeight` | `number\|null` | `null` | Min tinggi gambar |
+| `maxWidth` | `number\|null` | `null` | Maks lebar gambar |
+| `maxHeight` | `number\|null` | `null` | Maks tinggi gambar |
+| `endpoint` | `{ apiMethod?, apiUrl? }` | — | Endpoint upload |
+| `uploadFn` | `Function` | — | Custom upload |
+| `editUseOriginal` | `boolean` | `false` | Edit dari foto asli (bukan ter-crop) |
+
+```vue
+<template>
+  <DCodeImageField
+    v-model="form.foto"
+    label="Foto Profil"
+    :aspect-ratio="1"
+    :output-width="300"
+    :output-height="300"
+    :max-size-mb="2"
+  />
+</template>
+```
+
+---
+
+### `DCodeDropzone`
+
+Area drag-and-drop untuk upload file.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `label` | `string` | `'Upload File'` | Label |
+| `hint` | `string` | `'Drag & drop file di sini atau klik area ini'` | Petunjuk |
+| `accept` | `string` | `'image/*'` | Tipe file diterima |
+| `maxSizeMb` | `number` | `2` | Maks ukuran (MB) |
+| `mode` | `'single'\|'multiple'` | `'single'` | Mode pilih satu/banyak |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `showSelected` | `boolean` | `true` | Tampilkan nama file terpilih |
+| `error` | `string\|null` | `null` | Error message |
+
+Events: `picked` (File), `picked:multiple` (File[]), `error` (string)
+
+```vue
+<template>
+  <DCodeDropzone
+    label="Upload CSV"
+    accept=".csv,.xlsx"
+    :max-size-mb="5"
+    mode="single"
+    @picked="handleFile"
+  />
+</template>
+```
+
+---
+
+### `DCodeUploadFile`
+
+Komponen upload file sederhana dengan tombol browse.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `any` | — | File (v-model) |
+| `label` | `string` | — | Label |
+| `accept` | `string` | — | Tipe file diterima |
+| `errorMessage` | `string` | — | Pesan error |
+
+```vue
+<template>
+  <DCodeUploadFile
+    v-model="form.file"
+    label="Upload Berkas"
+    accept=".pdf,.doc"
+  />
+</template>
+```
+
+---
+
+### `DCodeFileResult`
+
+Menampilkan preview file yang sudah dipilih dengan opsi edit/replace/remove.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `file` | `File\|null` | — | File untuk ditampilkan |
+| `title` | `string` | `'File Terpilih'` | Judul card |
+| `description` | `string` | `''` | Deskripsi |
+| `disabled` | `boolean` | `false` | Nonaktifkan aksi |
+| `previewHeight` | `number` | `190` | Tinggi preview |
+| `previewWidth` | `number` | `220` | Lebar preview |
+| `showEdit` | `boolean` | `true` | Tampilkan tombol Edit |
+| `showReplace` | `boolean` | `true` | Tampilkan tombol Ganti |
+| `showRemove` | `boolean` | `true` | Tampilkan tombol Hapus |
+| `forceFileIcon` | `boolean` | `false` | Selalu tampilkan ikon file (bukan preview gambar) |
+
+Events: `edit`, `replace`, `remove`
+
+```vue
+<template>
+  <DCodeFileResult
+    :file="uploadedFile"
+    title="Dokumen Saya"
+    :show-edit="false"
+    @replace="handleReplace"
+    @remove="handleRemove"
+  />
+</template>
+```
+
+---
+
+### `DCodeImageResult`
+
+Menampilkan preview gambar yang sudah dipilih.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `file` | `File\|null` | — | File gambar |
+| `title` | `string` | `'Hasil Gambar'` | Judul card |
+| `description` | `string` | `''` | Deskripsi |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `previewHeight` | `number` | `190` | Tinggi preview |
+| `previewWidth` | `number` | `220` | Lebar preview |
+| `showEdit` | `boolean` | `true` | Tombol edit |
+| `showReplace` | `boolean` | `true` | Tombol ganti |
+| `showRemove` | `boolean` | `true` | Tombol hapus |
+
+Events: `edit`, `replace`, `remove`
+
+```vue
+<template>
+  <DCodeImageResult
+    :file="imageFile"
+    title="Foto Profil"
+    @edit="openCropper"
+    @remove="clearImage"
+  />
+</template>
+```
+
+---
+
+### `DCodeImageCropperDialog`
+
+Dialog crop / resize gambar menggunakan Uppy + ImageEditor.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `boolean` | — | Status dialog (v-model) |
+| `file` | `File\|null` | — | File gambar sumber |
+| `title` | `string` | `'Resize & Crop Gambar'` | Judul dialog |
+| `description` | `string` | `''` | Deskripsi |
+| `aspectRatio` | `number\|null` | `null` | Rasio aspek (e.g. `16/9`) |
+| `outputWidth` | `number\|null` | `null` | Lebar output (px) |
+| `outputHeight` | `number\|null` | `null` | Tinggi output (px) |
+| `quality` | `number` | `0.92` | Kualitas gambar output |
+| `autoOpenEditor` | `boolean` | `false` | Buka editor otomatis |
+
+Events: `update:modelValue`, `done` (File), `cancel`
+
+```vue
+<template>
+  <DCodeImageCropperDialog
+    v-model="cropperOpen"
+    :file="selectedFile"
+    :aspect-ratio="16/9"
+    :output-width="1280"
+    :output-height="720"
+    @done="handleCropDone"
+  />
+</template>
+```
+
+---
+
+### `DCodeDialog`
+
+Modal dialog yang dapat dikonfigurasi dengan slot.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `boolean` | `false` | Status buka/tutup (v-model) |
+| `title` | `string` | `''` | Judul dialog |
+| `icon` | `string` | `''` | Nama ikon Lucide di header |
+| `maxWidth` | `string\|number` | `500` | Lebar maksimum (px atau string CSS) |
+| `persistent` | `boolean` | `true` | Tidak tutup saat klik di luar |
+| `contentClass` | `string` | `'p-5'` | Class pada area konten |
+| `contentStyle` | `object\|string` | `{}` | Style tambahan konten |
+
+```vue
+<template>
+  <DCodeDialog v-model="dialogOpen" title="Konfirmasi Hapus" icon="Trash2" :max-width="400">
+    <p>Apakah Anda yakin ingin menghapus data ini?</p>
+    <template #footer>
+      <DCodeButton text="Batal" variant="outline" @click="dialogOpen = false" />
+      <DCodeButton text="Hapus" variant="destructive" @click="confirmDelete" />
+    </template>
+  </DCodeDialog>
+</template>
+```
+
+---
+
+### `DCodeDialogCloseBtn`
+
+Tombol close berbentuk lingkaran untuk digunakan di dalam dialog.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `icon` | `string` | `'X'` | Nama ikon Lucide |
+| `iconSize` | `string\|number` | `22` | Ukuran ikon |
+
+```vue
+<template>
+  <DCodeDialogCloseBtn @click="dialogOpen = false" />
+</template>
+```
+
+---
+
+### `DCodeIconDropdown`
+
+Dropdown untuk memilih ikon dari library Lucide.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `string\|null` | — | Nama ikon terpilih (v-model) |
+| `label` | `string` | — | Label field |
+| `placeholder` | `string` | `'Pilih icon…'` | Placeholder |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `required` | `boolean` | `false` | Required |
+| `clearable` | `boolean` | `true` | Tombol clear |
+| `columns` | `number` | `4` | Jumlah kolom grid ikon |
+| `maxHeight` | `string` | `'335px'` | Tinggi maksimum dropdown |
+| `iconSize` | `number` | `20` | Ukuran ikon dalam grid (px) |
+| `pageSize` | `number` | `120` | Jumlah ikon per halaman |
+
+```vue
+<template>
+  <DCodeIconDropdown
+    v-model="form.icon"
+    label="Pilih Ikon Menu"
+    :columns="5"
+    clearable
+  />
+</template>
+```
+
+---
+
+### `DCodeLabel`
+
+Label teks dengan ikon opsional dan berbagai ukuran.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `label` | `string` | — | Teks label (alias dari `text`) |
+| `text` | `string` | — | Teks label |
+| `textSize` | `'xs'\|'sm'\|'base'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|'5xl'\|'6xl'` | `'xs'` | Ukuran teks |
+| `textType` | `'BOLD'\|'ITALIC'\|'REGULAR'` | `'REGULAR'` | Gaya teks |
+| `icon` | `string` | — | Nama ikon Lucide |
+| `iconClass` | `string` | — | Class tambahan untuk ikon |
+
+```vue
+<template>
+  <DCodeLabel label="Total Transaksi" text-size="lg" text-type="BOLD" />
+  <DCodeLabel text="Info" icon="Info" text-size="sm" />
+</template>
+```
+
+---
+
+### `DCodeCard`
+
+Kontainer kartu dengan header, subtitle, actions slot, dan footer slot.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `level` | `1\|2\|3` | `1` | Level nesting (mempengaruhi background) |
+| `title` | `string` | — | Judul card |
+| `subtitle` | `string` | — | Subtitle card |
+| `shadow` | `boolean` | `false` | Tambahkan drop shadow |
+| `border` | `boolean` | `true` | Tampilkan border |
+| `padding` | `string` | `'p-6'` | Class padding (tailwind) |
+
+Slots: `default` (konten), `header`, `actions`, `footer`
+
+```vue
+<template>
+  <DCodeCard title="Data Pengguna" subtitle="Daftar semua user" shadow>
+    <template #actions>
+      <DCodeButton text="Tambah" icon="Plus" />
+    </template>
+
+    <!-- Konten -->
+    <p>Isi card di sini...</p>
+
+    <template #footer>
+      <span class="text-sm text-gray-500">Updated 5 minutes ago</span>
+    </template>
+  </DCodeCard>
+</template>
+```
+
+---
+
+### `DCodeProgressBar`
+
+Progress bar global yang biasanya dipasang di layout untuk indikator loading API.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `isApiLoading` | `boolean` | `false` | Tampilkan progress bar |
+| `apiProgress` | `number` | `0` | Persentase progress (0-100) |
+
+```vue
+<template>
+  <!-- Biasanya di App.vue atau Layout -->
+  <DCodeProgressBar :is-api-loading="isLoading" :api-progress="loadingProgress" />
+</template>
+```
+
+---
+
+### `DCodeProgress`
+
+Progress bar inline yang bisa digunakan di dalam konten.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `number` | `0` | Nilai progress (v-model) |
+| `max` | `number` | `100` | Nilai maksimum |
+| `label` | `string` | `''` | Label teks |
+| `showValue` | `boolean` | `false` | Tampilkan persentase |
+| `color` | `string` | `'blue'` | Warna bar (`'blue'`, `'green'`, `'red'`, `'yellow'`, `'purple'`, `'gray'`) |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | Ketebalan bar |
+| `striped` | `boolean` | `false` | Tampilan garis-garis |
+| `animated` | `boolean` | `false` | Animasi gerak |
+
+```vue
+<template>
+  <DCodeProgress
+    :model-value="75"
+    label="Progress Upload"
+    color="green"
+    size="lg"
+    :show-value="true"
+    animated
+  />
+</template>
+```
+
+---
+
+### `DCodeSlider`
+
+Input slider (range) dengan label, min/max, dan mark.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `modelValue` | `number` | `0` | Nilai slider (v-model) |
+| `min` | `number` | `0` | Nilai minimum |
+| `max` | `number` | `100` | Nilai maksimum |
+| `step` | `number` | `1` | Langkah perubahan |
+| `disabled` | `boolean` | `false` | Nonaktifkan |
+| `label` | `string` | `''` | Label |
+| `required` | `boolean` | `false` | Required |
+| `error` | `string\|null` | `null` | Error message |
+| `showValue` | `boolean` | `true` | Tampilkan nilai saat ini |
+| `valuePrefix` | `string` | `''` | Prefix nilai (e.g. `'Rp'`) |
+| `valueSuffix` | `string` | `''` | Suffix nilai (e.g. `'%'`) |
+| `marks` | `{ value: number; label: string }[]` | `[]` | Mark pada slider |
+| `color` | `string` | `'blue'` | Warna slider |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | Ukuran track |
+
+```vue
+<template>
+  <DCodeSlider
+    v-model="form.diskon"
+    label="Diskon"
+    :min="0"
+    :max="100"
+    :step="5"
+    value-suffix="%"
+    color="green"
+    :marks="[
+      { value: 0, label: '0%' },
+      { value: 50, label: '50%' },
+      { value: 100, label: '100%' },
+    ]"
+  />
+</template>
+```
+
+---
+
+### `DCodeChart`
+
+Komponen chart berbasis Chart.js yang mendukung berbagai tipe grafik.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `type` | `string` | `'line'` | Tipe chart: `'line'`, `'bar'`, `'pie'`, `'doughnut'` |
+| `modelValue` | `any` | — | Data chart (v-model) – format Chart.js |
+| `data` | `any` | — | Data chart (alternatif v-model) |
+| `options` | `any` | — | Opsi Chart.js custom |
+| `width` | `number` | `400` | Lebar canvas |
+| `height` | `number` | `300` | Tinggi canvas (px) |
+| `loading` | `boolean` | `false` | Status loading |
+| `error` | `string\|null` | `null` | Pesan error |
+| `showInfo` | `boolean` | `false` | Tampilkan info dataset/datapoints |
+| `responsive` | `boolean` | `true` | Responsif |
+| `maintainAspectRatio` | `boolean` | `false` | Pertahankan rasio aspek |
+| `theme` | `string` | `'light'` | Tema: `'light'` / `'dark'` |
+| `colors` | `string[]` | 10 warna default | Palet warna |
+| `label` | `string` | — | Label di atas chart |
+| `required` | `boolean` | `false` | Required indicator |
+
+Events: `click`, `hover`, `ready`
+
+```vue
+<script setup>
+const chartData = {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei'],
+  datasets: [{
+    label: 'Penjualan',
+    data: [120, 190, 300, 250, 400],
+  }]
+}
+</script>
+
+<template>
+  <DCodeChart
+    type="bar"
+    :model-value="chartData"
+    :height="350"
+    label="Laporan Penjualan"
+    theme="light"
+  />
+</template>
+```
+
+---
+
+### `DCodeWizard`
+
+Komponen wizard/stepper multi-langkah dengan navigasi dan loading data per tab.
+
+| Prop | Tipe | Default | Deskripsi |
+|------|------|---------|-----------|
+| `tabs` | `WizardTab[]` | — | **Required.** Definisi tab/langkah |
+| `modelValue` | `number\|string` | — | Index/key tab aktif (v-model) |
+| `defaultTab` | `number` | — | Tab default yang aktif |
+| `allowTabClick` | `boolean` | — | Izinkan klik langsung ke tab |
+| `disabled` | `boolean` | — | Nonaktifkan navigasi |
+| `cache` | `boolean` | — | Cache data tab yang sudah dimuat |
+| `autoFetchOnMount` | `boolean` | — | Fetch data tab aktif saat mount |
+| `apiOptions` | `object\|Function` | — | Opsi API tambahan |
+| `isVertical` | `boolean` | — | Layout vertical |
+| `isWizard` | `boolean` | — | Mode wizard (step-by-step, tidak bisa loncat) |
+| `typeWizard` | `'number'\|'icon'\|'none'\|null` | — | Tipe indikator langkah |
+| `showNavigation` | `boolean` | — | Tampilkan tombol navigasi Prev/Next |
+| `submitText` | `string` | — | Teks tombol submit di langkah terakhir |
+| `loading` | `boolean` | — | Loading eksternal |
+
+**`WizardTab` type:**
+```ts
+type WizardTab = {
+  key: string
+  title: string
+  description?: string
+  icon?: Component
+  disabled?: boolean
+  endpoint?: { apiUrl?, apiMethod?, apiModule?, apiAction? }
+  fetchData?: () => Promise<any>
+  isDataTable?: boolean
+}
+```
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const steps = [
+  { key: 'info', title: 'Info Dasar' },
+  { key: 'detail', title: 'Detail' },
+  { key: 'review', title: 'Review' },
+]
+const activeStep = ref(0)
+</script>
+
+<template>
+  <DCodeWizard
+    v-model="activeStep"
+    :tabs="steps"
+    is-wizard
+    type-wizard="number"
+    :show-navigation="true"
+    submit-text="Selesai"
+    @submit="handleSubmit"
+  >
+    <template #info>
+      <!-- Konten step Info Dasar -->
+    </template>
+    <template #detail>
+      <!-- Konten step Detail -->
+    </template>
+    <template #review>
+      <!-- Konten step Review -->
+    </template>
+  </DCodeWizard>
+</template>
+```
+
+---
+
+### `DCodeTimelineWithIcons`
+
+Komponen timeline interaktif dengan berbagai tipe item (flight, interview, dll.).
+
+Komponen ini merender timeline visual dari array item yang sudah terdefinisi di dalamnya. Cocok digunakan untuk menampilkan riwayat proses, activity log, atau alur perjalanan.
+
+> ℹ️ Komponen ini tidak memiliki props eksternal — data dan tampilan dikonfigurasi secara internal. Gunakan sebagai komponen display/demo timeline.
+
+```vue
+<template>
+  <DCodeTimelineWithIcons />
+</template>
+```
+
+---
+
 ## Lisensi
 
 MIT © [Gema Fajar Ramadhan](https://github.com/gemafajarramadhan)