@herca/rn-kit 0.1.7 → 0.1.9

package/README.md

@@ -82,6 +82,8 @@ const App = () => {
     <Provider>
       <YoyrCode>
     </Provider>
+  )
+}
 ```
 ---
 
@@ -102,16 +104,16 @@ import { Button } from '@herca/rn-kit';
 Komponen untuk mengumpulkan input dari pengguna.
 
 - [Button](./src/Button/README.md)
-- [Checkbox](./src/Checkbox/README_CHECKBOX.md)
-- [Checkbox](./src/Checkbox/README_CHECKBOXLIST.md)
+- [Checkbox](./src/CheckBox/README_CHECKBOX.md)
+- [Checkbox List](./src/CheckBox/README_CHECKBOXLIST.md)
 - [Chip-(Select)](./src/Chip/README.md)
-- [DatePicker](./src/DatePicker/README.md)
+- [DatePicker](./src/DatePicker/README_DATEPICKER.md)
 - [DropDown](./src/DropDown/README.md)
 - [Input](./src/Input/README.md)
-- [Input Month](./src/InputMonth/README.md)
+- [Input Month](./src/Datepicker/README_MONTHPICKER.md)
 - [Input Password](./src/InputPassword/README.md)
-- [Input Time](./src/InputTime/README.md)
-- [Input Year](./src/InputYear/README.md)
+- [Input Time](./src/Datepicker/README_TIMEPICKER.md)
+- [Input Year](./src/Datepicker/README_YEARPICKER.md)
 - [Radio Button](./src/RadioButton/README.md)
 - [Select](./src/Select/README.md)
 - [Switch](./src/Switch/README.md)
@@ -134,6 +136,7 @@ Komponen untuk menyembunyikan atau menampilkan konten.
 
 - [Accordion](./src/Accordion/README.md)
 - [Step](./src/Step/README.md)
+- [Tab](./src/Tab/README.md)
 
 ---
 
@@ -155,9 +158,11 @@ Komponen untuk menampilkan informasi atau elemen visual.
 - [AvatarGroup](./src/Alert/README_AVATARGROUP.md)
 - [Calendar](./src/Calendar/README.md)
 - [Color](./src/Color/README.md)
+- [Container](./src/Ui/README_CONTAINER.md)
 - [Card](./src/Ui/README_CARD.md)
+- [Devider](./src/Ui/README_DEVIDER.md)
 - [Drawing](./src/Drawing/README.md)
-- [Footer](./src/Footer/README.md)
+- [Footer](./src/Ui/README_FOOTER.md)
 - [List](./src/List/README.md)
 - [Timeline](./src/Timeline/README.md)
 - [Typography](./src/Typography/README.md)

package/lib/module/Accordion/README.md

@@ -1,6 +1,7 @@
 # 📂 Accordion
 
 Komponen **Accordion** digunakan untuk menyembunyikan atau menampilkan konten secara dinamis. Biasanya digunakan untuk struktur seperti FAQ atau daftar konten bertingkat.
+
 <img src="../../assets/doc/Accordion/Accordion.gif" alt="Deskripsi Alt" width="200" />
 
 ## 📦 USAGE

package/lib/module/Alert/README.md

@@ -1,6 +1,7 @@
 # 📢 Alert Component
 
 Komponen `Alert` digunakan untuk menampilkan pesan notifikasi dengan ikon, judul, dan pesan yang dapat dikustomisasi warnanya sesuai konteks (seperti *success*, *info*, *warning*, dll).
+
 <img src="../../assets/doc/Alert/Alert.png" alt="Deskripsi Alt" width="200" />
 
 ## ✨ Fitur

package/lib/module/Avatar/README_AVATAR.md

@@ -1,7 +1,7 @@
 # 🧑‍🎨 Avatar Component
 
 Komponen `Avatar` digunakan untuk menampilkan foto pengguna atau inisial nama jika foto tidak tersedia.
-![Deskripsi Alt](../../assets/doc/Avatar/Avatar.png)
+<img src="../../assets/doc/Avatar/Avatar.png" width=200>
 
 ## ✨ Fitur
 

package/lib/module/Avatar/README_AVATARGROUP.md

@@ -2,7 +2,9 @@
 # AvatarGroup Component (React Native)
 
 The `AvatarGroup` component displays a group of user avatars. It supports image avatars, initials-based avatars, and a fallback icon. If there are more avatars than the maximum visible count, it displays a "+X" bubble.
-![Deskripsi Alt](../../assets/doc/Avatar/AvatarGroup.png)
+
+<img src="../../assets/doc/Avatar/AvatarGroup.png" width=200>
+
 ---
 
 ## 📦 Props

package/lib/module/BottomSheet/README.md

@@ -1,8 +1,8 @@
 # ⬆️ BottomSheet Component
 
 Komponen `BottomSheet` adalah modal bawah (slide-up) untuk menampilkan konten dinamis, form, konfirmasi, dll, dengan berbagai fitur interaktif seperti gesture drag, keyboard-aware, dan customizable height.
-![Deskripsi Alt](../../assets/doc/BottomSheet/BottomSheet.gif)
 
+<img src="../../assets/doc/BottomSheet/BottomSheet.gif" width=200>
 ---
 
 ## 📦 Props

package/lib/module/Button/README.md

@@ -2,7 +2,9 @@
 # 🔘 Komponen Button (React Native)
 
 Komponen `Button` ini adalah tombol serbaguna untuk aplikasi React Native. Mendukung berbagai ukuran, varian, warna, dan status seperti `disabled` dan `loading`.
-![Deskripsi Alt](../../assets/doc/Button/Button.png)
+
+
+<img src="../../assets/doc/Button/Button.png" width=200>
 
 ---
 

package/lib/module/Calendar/README.md

@@ -1,6 +1,7 @@
 # 📆 Komponen Kalender Kustom (React Native)
 
 Komponen kalender ini dibuat menggunakan React Native dan memungkinkan pengguna untuk memilih tanggal tunggal maupun rentang tanggal, serta mendukung fitur penandaan dan pembatasan tanggal.
+<img src="../../assets/doc/Calendar/Calendar.png" width=200>
 
 ---
 

package/lib/module/CheckBox/README_CHECKBOXLIST.md

@@ -29,6 +29,7 @@ export default function App() {
     </View>
   );
 }
+```
 
 ## ⚙️ Props
 

package/lib/module/Chip/README.md

@@ -1,7 +1,8 @@
 # 📦 Komponen `Chip` – React Native
 
 Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter, atau kategori dalam bentuk tombol kecil (chip). Komponen ini mendukung pilihan tunggal maupun jamak, arah horizontal/vertikal, dan gaya warna yang dapat disesuaikan.
-![Deskripsi Alt](../../assets/doc/Chip/Chip.png)
+
+<img src="../../assets/doc/Chip/Chip.png" width=200>
 
 ---
 

package/lib/module/Color/README.md

@@ -1,54 +1,105 @@
-# 📦 Konstanta: Color
-Konstanta Color berisi daftar token warna yang digunakan untuk styling antarmuka aplikasi menggunakan React Native. Warna-warna ini disusun berdasarkan tema dan gradasi, cocok digunakan bersama desain sistem seperti Design Token.
+# Color Palette
+
+Berikut adalah definisi warna yang digunakan di design system React Native Anda. Palette mencakup warna dasar (*base*), skala abu‐abu (*gray*), kategori semantik (*primary*, *success*, *danger*, *warning*, *info*, *orange*, *purple*), serta utilitas lain seperti `divider` dan `disabled`.
+
+Warna tersimpan dalam objek `Color` dengan struktur hierarkis seperti contoh berikut:
+
+```ts
+Color.primary[500] // -> "#4D46FF"
+Color.gray[200]   // -> "#EBEBEB"
+```
+
+---
+
+## Struktur Objek Color
+
+```ts
+const Color = {
+  base: { ... },
+  gray: { ... },
+  primary: { ... },
+  warning: { ... },
+  danger: { ... },
+  success: { ... },
+  info: { ... },
+  orange: { ... },
+  purple: { ... },
+  divider: { ... },
+  disabled: { ... },
+  shadow: { ... },
+};
+```
+
+### Skema Skala Warna
+
+* **0–1000** (atau 0–950) – Semakin besar angka, semakin gelap warna.
+* **50** – Latar paling terang (sering dipakai untuk *background* highlight).
+* **500** – Warna utama (brand color dan teks link normal).
+* **700/800/900** – Warna paling gelap untuk teks di atas latar berkait.
+
+---
+
+## Tabel Ringkasan
+
+| Kategori   | Contoh Penggunaan     | Keterangan                                  |
+| ---------- | --------------------- | ------------------------------------------- |
+| `base`     | `Color.base.white100` | Warna putih/ hitam utama UI dasar.          |
+| `gray`     | `Color.gray[700]`     | Teks, ikon sekunder, border netral.         |
+| `primary`  | `Color.primary[500]`  | Aksi utama, tombol brand, ikon utama.       |
+| `success`  | `Color.success[500]`  | Status berhasil: label “Success”, badge OK. |
+| `danger`   | `Color.danger[500]`   | Error, status gagal.                        |
+| `warning`  | `Color.warning[500]`  | Peringatan.                                 |
+| `info`     | `Color.info[500]`     | Informasi tambahan.                         |
+| `orange`   | `Color.orange[500]`   | Aksen/ badge khusus.                        |
+| `purple`   | `Color.purple[500]`   | Aksen sekunder/ grafik.                     |
+| `divider`  | `Color.divider[25]`   | Garis pemisah tipis.                        |
+| `disabled` | `Color.disabled[25]`  | Kontrol non‐aktif.                          |
+
+> Anda bisa menambahkan `shadow` palette jika diperlukan gradasi drop shadow.
+
+---
+
+## TypeScript Helper
+
+```ts
+export type ColorVariantType =
+  | 'default'
+  | 'success'
+  | 'danger'
+  | 'primary'
+  | 'warning'
+  | 'info'
+  | 'purple'
+  | 'orange';
+```
+
+Tipe ini dipakai di komponen lain (mis. `Label`) untuk membatasi nama variant.
+
+---
+
+## Contoh Implementasi
 
-## 🎨 Struktur Warna
-✅ Base
-Warna dasar utama:
-
-white100: putih solid
-
-white60: putih transparan 60%
-
-black100: hitam solid
-
-black60: hitam transparan 60%
-
-### ⚪ Gray (abu-abu)
-Gradasi abu-abu dari terang (gray.50) hingga gelap (gray.950), cocok untuk teks, latar, border, dsb.
-
-### 🔵 Primary
-Gradasi warna utama (biru), digunakan untuk tombol, highlight, atau elemen penting lainnya.
-
-### 🟠 Warning
-Warna peringatan, digunakan untuk menandai hal-hal seperti alert, notifikasi kuning, dll.
-
-### 🔴 Danger
-Warna untuk kondisi berbahaya atau error (merah).
-
-### 🟢 Success
-Digunakan untuk kondisi berhasil atau sukses (hijau).
-
-### 🔷 Info
-Warna tambahan untuk informasi, notifikasi, atau status sekunder.
-
-### 🟧 Orange
-Warna oranye, alternatif dari primary/warning.
+```tsx
+import Color from '@/components/Color/Color';
 
-### 🟣 Purple
-Warna ungu, bisa digunakan untuk status spesial atau branding.
+const MyButton = () => (
+  <View style={{ backgroundColor: Color.primary[500], padding: 12 }}>
+    <Text style={{ color: Color.base.white100 }}>Click Me</Text>
+  </View>
+);
+```
 
-🧱 Divider
-divider.25: Warna pembatas antar elemen UI.
+---
 
-📴 Disabled
-disabled.25: Warna untuk elemen non-aktif.
+## Tips Penggunaan
 
-## Cara menggunakan 
+* Gunakan warna **50** untuk latar lembut (highlight, badge background).
+* Gunakan warna **500** untuk elemen interaktif utama.
+* Gunakan warna **700+** untuk teks di atas warna **50–300**.
+* Gunakan `rgba(..., 0.x)` jika memerlukan translusi.
 
-```tsx
-import Color from '@herca/rn-kit';
+---
 
-<View style={{ backgroundColor: Color.primary[500] }} />
-<Text style={{ color: Color.gray[900] }}>Teks</Text>
+## Lisensi
 
-```
+Bagian dari library internal Anda; ikuti lisensi proyek.

package/lib/module/DatePicker/{README.md → README_DATEPICKER.md}

@@ -4,6 +4,7 @@ Komponen `DatePicker` adalah antarmuka pemilih tanggal yang dibungkus dalam sebu
 
 Komponen ini extend dari Calendar, jadi kalian bisa menggunakan semua props yang ada di Calendar [Calendar](../Calendar/README.md)
 
+<img src="../../assets/doc/Datepicker/Datepicker.gif" width=200>
 ---
 
 ## ✨ Fitur

package/lib/module/DatePicker/README_MONTHPICKER.md

@@ -0,0 +1,90 @@
+# MonthPicker
+
+Komponen **MonthPicker** adalah komponen pemilih bulan berbasis **React Native** yang dapat menampilkan pilihan bulan dalam tiga mode berbeda: **single**, **range**, dan **multiple**. Komponen ini dirancang untuk dipakai di dalam komponen **BottomSheet** dengan tampilan yang konsisten terhadap desain sistem.
+
+
+
+---
+
+## API Reference
+
+| Prop       | Tipe                                                                                  | Default     | Deskripsi                                                                                                        |
+| ---------- | ------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
+| `isOpen`   | `boolean`                                                                             | `false`     | Menentukan apakah **BottomSheet** terbuka atau tertutup.                                                         |
+| `onClose`  | `() => void`                                                                          | `undefined` | Callback yang dipanggil saat pengguna menekan tombol **Batal** atau menutup **BottomSheet**.                     |
+| `onChange` | `(value: number[] \| { startDate: number \| null; endDate: number \| null }) => void` | `undefined` | Callback yang dipanggil ketika pengguna menekan tombol **Pilih**. Parameter yang dikirim tergantung pada `mode`. |
+| `mode`     | `'single' \| 'range' \| 'multiple'`                                                   | `'single'`  | Menentukan cara pemilihan bulan.                                                                                 |
+
+### Bentuk *value* yang Dikirim oleh `onChange`
+
+| `mode`     | Bentuk *value*                                                                                                                                     |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `single`   | `number[]` – array yang berisi satu elemen bulan terpilih. Contoh: `[5]` untuk Mei.                                                                |
+| `range`    | `{ startDate: number \| null; endDate: number \| null }` – objek berisi bulan mulai & akhir. Contoh: `{ startDate: 1, endDate: 3 }` untuk Jan–Mar. |
+| `multiple` | `number[]` – array berisi daftar bulan terpilih. Contoh: `[2, 4, 8]` untuk Feb, Apr, Agt.                                                          |
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import { useState } from 'react';
+import { View, Button } from 'react-native';
+import MonthPicker from '@/components/MonthPicker/MonthPicker';
+
+export default function Example() {
+  const [open, setOpen] = useState(false);
+  const [months, setMonths] = useState<number[]>([]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Pilih Bulan" onPress={() => setOpen(true)} />
+
+      <MonthPicker
+        isOpen={open}
+        mode="multiple"
+        onClose={() => setOpen(false)}
+        onChange={(value) => {
+          if (Array.isArray(value)) {
+            setMonths(value);
+          }
+          setOpen(false);
+        }}
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## Detail 
+
+1. **Single Mode**
+
+   * Klik satu bulan untuk menandai pilihan.
+   * Menekan **Pilih** mengirimkan array dengan satu elemen.
+2. **Range Mode**
+
+   * Klik bulan pertama untuk menentukan `startDate`.
+   * Klik bulan kedua untuk menentukan `endDate`.
+   * Jika `startDate` sudah terisi dan `endDate` belum, tetapi pengguna memilih bulan yang lebih kecil dari `startDate`, maka komponen otomatis menukar posisi dan mengisi `endDate` dengan nilai awal `startDate`.
+3. **Multiple Mode**
+
+   * Klik untuk toggle seleksi pada tiap bulan. Bulan yang dipilih disimpan dalam array `multipleValue`.
+
+---
+
+## Kustomisasi Tampilan
+
+* **Warna**: Warna latar dan border untuk opsi terpilih mengikuti `Color.primary` pada design system. Anda dapat menyesuaikannya dengan mengubah style `optionSelected` di dalam `MonthPicker`.
+* **Jumlah Kolom**: Saat ini komponen menampilkan `numColumns={3}` pada `FlatList`. Ubah nilai ini untuk menyesuaikan grid.
+
+---
+
+## Tips
+
+* Pastikan memanggil `onClose` setelah memproses hasil `onChange` agar **BottomSheet** tertutup.
+* Komponen ini tidak menangani validasi kombinasi bulan secara otomatis (mis. range satu tahun penuh). Tambahkan logika tambahan di tempat Anda memakainya apabila diperlukan.
+
+---

package/lib/module/DatePicker/README_TIMEPICKER.md

@@ -0,0 +1,83 @@
+# TimePickerWheel
+
+**TimePickerWheel** adalah komponen pemilih waktu berbentuk *wheel* (picker bergulir) untuk **React Native**. Komponen ini menampilkan dua kolom (jam & menit) yang dapat digulir secara vertikal, dibungkus di dalam komponen **BottomSheet**.
+
+---
+
+## API Reference
+
+| Prop       | Tipe                                                | Default | Deskripsi                                                                                     |
+| ---------- | --------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `isOpen`   | `boolean`                                           | `false` | Menentukan apakah **BottomSheet** terbuka.                                                    |
+| `onClose`  | `() => void`                                        | `-`     | Callback saat pengguna menutup **BottomSheet** atau menekan tombol **Batal**.                 |
+| `onChange` | `(value: { hour: number; minute: number }) => void` | `-`     | Callback saat pengguna menekan tombol **Pilih**. Objek yang dikirim berisi `hour` & `minute`. |
+
+### Bentuk *value* `onChange`
+
+```ts
+{
+  hour: number;   // 0–23
+  minute: number; // 0–59
+}
+```
+
+---
+
+## Cara Kerja Singkat
+
+1. **Wheel Padding** – Komponen menambahkan elemen *dummy* di atas & bawah daftar agar item tengah selalu berada di posisi highlight.
+2. **Highlight** – Baris tengah diberi `backgroundColor` khusus (`Color.primary[50]`) untuk menonjolkan pilihan aktif.
+3. **Snapping** – Properti `snapToInterval={ITEM_HEIGHT}` memastikan scroll *wheel* berhenti tepat di setiap item.
+4. **Sync & Loop** – Setelah scroll selesai, komponen menghitung indeks nyata (0‑23 untuk jam, 0‑59 untuk menit) agar wheel terasa tak terbatas.
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import { useState } from 'react';
+import { View, Button } from 'react-native';
+import TimePickerWheel from '@/components/TimePickerWheel/TimePickerWheel';
+
+export default function Example() {
+  const [open, setOpen] = useState(false);
+  const [time, setTime] = useState<{ hour: number; minute: number } | null>(
+    null
+  );
+
+  const formatted = time ? `${time.hour.toString().padStart(2, '0')}:${time.minute.toString().padStart(2, '0')}` : '—';
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title={`Pilih Waktu (${formatted})`} onPress={() => setOpen(true)} />
+
+      <TimePickerWheel
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onChange={(value) => {
+          setTime(value);
+          setOpen(false);
+        }}
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## Kustomisasi Tampilan
+
+* **Jumlah Items Terlihat** (`VISIBLE_ITEMS`): Default 5. Ubah nilai konstanta untuk menambah/kurangi tinggi wheel.
+* **Tinggi Item** (`ITEM_HEIGHT`): Default 40. Pengaturan ini mempengaruhi `snapToInterval`.
+* **Warna & Tipografi**: Edit style `selectedItemText`, `itemText`, dan `highlight` untuk menyesuaikan brand guideline.
+
+---
+
+## Tips Implementasi
+
+* Selalu panggil `onClose` setelah menangani hasil `onChange` agar **BottomSheet** menutup.
+* Jika Anda ingin menetapkan waktu awal sebelum picker dibuka, setel `selectedHour` & `selectedMinute` memakai `useState` lalu buka picker.
+* Komponen ini tidak membatasi kombinasi jam‑menit (mis. langkah 5 menit). Tambahkan logika tambahan jika diperlukan.
+
+---

package/lib/module/DatePicker/README_YEARPICKER.md

@@ -0,0 +1,106 @@
+# YearPicker
+
+**YearPicker** adalah komponen pemilih tahun berbasis **React Native**. Dibandingkan dengan *MonthPicker*, komponen ini mendukung navigasi halaman (pagination) untuk deretan tahun dan dapat digunakan dalam tiga mode:
+
+* **single** – memilih satu tahun.
+* **range** – memilih rentang tahun.
+* **multiple** – memilih beberapa tahun sekaligus.
+
+Semua outputnya dibungkus dalam komponen **BottomSheet** untuk konsistensi UI.
+
+---
+
+## API Reference
+
+| Prop       | Tipe                                                                                  | Default    | Deskripsi                                                                            |
+| ---------- | ------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------ |
+| `isOpen`   | `boolean`                                                                             | `false`    | Menentukan apakah **BottomSheet** terbuka.                                           |
+| `onClose`  | `() => void`                                                                          | `-`        | Dipanggil saat pengguna menutup picker atau menekan **Batal**.                       |
+| `onChange` | `(value: number[] \| { startDate: number \| null; endDate: number \| null }) => void` | `-`        | Dipanggil setelah pengguna menekan **Pilih**. Bentuk *value* bergantung pada `mode`. |
+| `mode`     | `'single' \| 'range' \| 'multiple'`                                                   | `'single'` | Menentukan mode pemilihan.                                                           |
+
+### Bentuk *value* `onChange`
+
+| `mode`     | *value*                                                                                                                |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `single`   | `number[]` – satu elemen, contoh `[2023]`.                                                                             |
+| `range`    | `{ startDate: number \| null; endDate: number \| null }` – objek rentang, contoh `{ startDate: 2010, endDate: 2015 }`. |
+| `multiple` | `number[]` – daftar tahun, contoh `[2018, 2020, 2022]`.                                                                |
+
+---
+
+## Cara Kerja Singkat
+
+1. **Daftar Tahun**
+
+   * Komponen membuat rentang tahun ±60 tahun ke belakang & depan dari tahun saat ini (total 121 tahun).
+2. **Pagination**
+
+   * `pageSize` default 9 (3 kolom × 3 baris). Tombol panah mengubah `pageIndex` untuk melihat kelompok tahun selanjutnya atau sebelumnya.
+3. **Seleksi & Highlight**
+
+   * Tahun yang dipilih diberi latar `Color.primary[50]` dan border `Color.primary[300]`.
+4. **Logika Mode**
+
+   * *Single*: klik satu tahun.
+   * *Range*: klik awal & akhir; otomatis menukar jika urutan terbalik.
+   * *Multiple*: toggle checklist per tahun.
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import { useState } from 'react';
+import { View, Button } from 'react-native';
+import YearPicker from '@/components/YearPicker/YearPicker';
+
+export default function YearPickerExample() {
+  const [open, setOpen] = useState(false);
+  const [yearRange, setYearRange] = useState<{ startDate: number | null; endDate: number | null }>({ startDate: null, endDate: null });
+
+  const label = yearRange.startDate && yearRange.endDate ? `${yearRange.startDate}–${yearRange.endDate}` : '—';
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title={`Pilih Rentang Tahun (${label})`} onPress={() => setOpen(true)} />
+
+      <YearPicker
+        isOpen={open}
+        mode="range"
+        onClose={() => setOpen(false)}
+        onChange={(value) => {
+          if (!Array.isArray(value)) {
+            setYearRange(value);
+          }
+          setOpen(false);
+        }}
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## Kustomisasi Tampilan & Perilaku
+
+| Konstanta / Style | Fungsi                                           | Cara Ubah                                |
+| ----------------- | ------------------------------------------------ | ---------------------------------------- |
+| `pageSize`        | Jumlah tahun ditampilkan per halaman (grid 3×N). | Sesuaikan untuk menambah baris.          |
+| `buttonNav`       | Style tombol panah.                              | Edit warna & radius pada file `styles`.  |
+| `optionSelected`  | Warna highlight.                                 | Ganti `backgroundColor` & `borderColor`. |
+
+---
+
+## Tips Implementasi
+
+* Ingin memulai dengan tahun tertentu? Setel `singleValue`, `rangeValue`, atau `multipleValue` melalui `useState` sebelum `isOpen` di-set `true`.
+* Anda dapat memfilter rentang tahun dengan memodifikasi konstanta `total` & `start` di dalam `useMemo(years)`.
+* Pastikan memanggil `onClose` setelah `onChange` untuk menutup picker.
+
+---
+
+## Lisensi
+
+Bagian dari library internal Anda; ikuti lisensi proyek.

package/lib/module/Drawing/Drawing.js

@@ -1,13 +1,25 @@
 "use strict";
 
 import { StyleSheet, View, Text } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
+import SignatureView from 'react-native-signature-canvas';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Drawing() {
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(Text, {
       children: "Sedang di bangun"
-    })
+    }), /*#__PURE__*/_jsx(SignatureView, {
+      autoClear: true,
+      descriptionText: "Sign here",
+      clearText: "Clear",
+      confirmText: 'Processing...',
+      penColor: "#000000",
+      backgroundColor: "rgba(255,255,255,0)",
+      webviewProps: {
+        cacheEnabled: true,
+        androidLayerType: 'hardware'
+      }
+    })]
   });
 }
 const styles = StyleSheet.create({

package/lib/module/Drawing/Drawing.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","Text","jsx","_jsx","Drawing","style","styles","container","children","create","flex","preview","width","height","backgroundColor","justifyContent","alignItems","marginTop"],"sourceRoot":"../../../src","sources":["Drawing/Drawing.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,eAAe,SAASC,OAAOA,CAAA,EAAG;EAChC,oBACED,IAAA,CAACH,IAAI;IAACK,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,eAC5BL,IAAA,CAACF,IAAI;MAAAO,QAAA,EAAC;IAAgB,CAAM;EAAC,CACzB,CAAC;AAEX;AAEA,MAAMF,MAAM,GAAGP,UAAU,CAACU,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR,CAAC;EACDC,OAAO,EAAE;IACPC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,eAAe,EAAE,SAAS;IAC1BC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","Text","SignatureView","jsx","_jsx","jsxs","_jsxs","Drawing","style","styles","container","children","autoClear","descriptionText","clearText","confirmText","penColor","backgroundColor","webviewProps","cacheEnabled","androidLayerType","create","flex","preview","width","height","justifyContent","alignItems","marginTop"],"sourceRoot":"../../../src","sources":["Drawing/Drawing.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,OAAOC,aAAa,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1D,eAAe,SAASC,OAAOA,CAAA,EAAG;EAEhC,oBACED,KAAA,CAACN,IAAI;IAACQ,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BP,IAAA,CAACH,IAAI;MAAAU,QAAA,EAAC;IAAgB,CAAM,CAAC,eAC7BP,IAAA,CAACF,aAAa;MACZU,SAAS,EAAE,IAAK;MAChBC,eAAe,EAAC,WAAW;MAC3BC,SAAS,EAAC,OAAO;MACjBC,WAAW,EAAE,eAAgB;MAC7BC,QAAQ,EAAC,SAAS;MAClBC,eAAe,EAAC,qBAAqB;MACrCC,YAAY,EAAE;QACZC,YAAY,EAAE,IAAI;QAClBC,gBAAgB,EAAE;MACpB;IAAE,CACH,CAAC;EAAA,CACE,CAAC;AAEX;AAEA,MAAMX,MAAM,GAAGV,UAAU,CAACsB,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,IAAI,EAAE;EACR,CAAC;EACDC,OAAO,EAAE;IACPC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXR,eAAe,EAAE,SAAS;IAC1BS,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}