@herca/rn-kit 0.1.7 → 0.1.8

package/src/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/src/DropDown/README.md

@@ -1 +1,108 @@
 # Dropdown
+
+**Dropdown** merupakan komponen menu pilihan (select) berbasis **React Native** yang menampilkan daftar opsi di atas modal transparan. Komponen ini otomatis men‐posisikan daftar ke kiri atau ke kanan bergantung pada posisi tombol pemicu agar tidak terpotong layar.
+
+---
+
+## Instalasi
+
+Komponen ini mengandalkan dependensi internal:
+
+* `Color` – sistem warna.
+* `ChipOptionProps` – tipe opsi.
+
+Serta modul standar React Native: `Modal`, `ScrollView`, dll. Tidak memerlukan library eksternal.
+
+---
+
+## API Reference
+
+| Prop           | Tipe                                | Default     | Deskripsi                                                           |
+| -------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------- |
+| `options`      | `ChipOptionProps[]`                 | `[]`        | Daftar objek `{ label, value }` yang akan ditampilkan sebagai opsi. |
+| `maxHeight`    | `number`                            | `200`       | Tinggi maksimum daftar sebelum dapat di‐scroll.                     |
+| `onSelect`     | `(value: string \| number) => void` | `undefined` | Callback saat pengguna memilih opsi.                                |
+| `renderButton` | `React.ReactNode`                   | **(wajib)** | Elemen yang dipakai sebagai tombol pemicu dropdown.                 |
+
+### Struktur `ChipOptionProps`
+
+```ts
+interface ChipOptionProps {
+  label: string;
+  value: string | number;
+}
+```
+
+---
+
+## Cara Kerja Singkat
+
+1. **Posisi & Alignment**
+
+   * Saat tombol ditekan, komponen mengukur posisi tombol (`UIManager.measureInWindow`).
+   * Jika titik tengah tombol berada di sisi kanan layar, daftar disejajarkan ke kanan; sebaliknya ke kiri.
+2. **Modal & Pressable Overlay**
+
+   * Daftar opsi dibungkus `Modal` transparan.
+   * `Pressable` penuh layar di belakang daftar menangani klik di luar untuk menutup menu.
+3. **Scroll & Batas Tinggi**
+
+   * Daftar opsi di dalam `ScrollView` dengan properti `nestedScrollEnabled` agar tetap dapat di‐scroll di dalam modalsheet lain.
+4. **Highlight Opsi Terpilih**
+
+   * Opsi aktif diberi style `optionSelected` – background `Color.primary[50]` & border `Color.primary[300]`.
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import { useState } from 'react';
+import { View, Text } from 'react-native';
+import Dropdown from '@/components/Dropdown/Dropdown';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' },
+];
+
+export default function DropdownExample() {
+  const [fruit, setFruit] = useState<string | number>('apple');
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Dropdown
+        options={options}
+        maxHeight={150}
+        onSelect={(val) => setFruit(val)}
+        renderButton={
+          <View style={{ padding: 12, borderWidth: 1, borderRadius: 8 }}>
+            <Text>{options.find((o) => o.value === fruit)?.label}</Text>
+          </View>
+        }
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## Kustomisasi Tampilan
+
+| Style Key        | Fungsi                 | Cara Ubah                                         |
+| ---------------- | ---------------------- | ------------------------------------------------- |
+| `dropdownList`   | Container daftar opsi. | Ubah `width`, `borderRadius`, `borderColor`, dll. |
+| `option`         | Setiap baris opsi.     | Ubah `padding` atau `gap` sesuai kebutuhan.       |
+| `optionSelected` | Style opsi terpilih.   | Sesuaikan warna highlight dengan brand.           |
+
+---
+
+## Tips Implementasi
+
+* **Kontrol Render Button**: Anda bebas menggunakan komponen apa pun sebagai `renderButton` (ikon, input field, card, dll.). Dropdown akan menggunakan posisi & ukuran elemen ini.
+* **Close on Scroll Parent**: Jika dropdown dipakai dalam layar yang di‐scroll, pertimbangkan menutup dropdown saat parent di‐scroll untuk mencegah posisi meleset.
+* **Validasi**: Komponen tidak memaksa nilai default. Anda dapat men‐set `selected` manual via `useState` agar kontrol tetap ter‐sinkron.
+
+---

package/src/Label/README.md

@@ -0,0 +1,65 @@
+# Label
+
+**Label** adalah komponen kecil berbentuk badge untuk menampilkan status, kategori, atau metadata ringkas. Komponen ini mendukung ikon, variasi warna, dan konten kustom.
+
+## API Reference
+
+| Prop       | Tipe                                                                                             | Default     | Deskripsi                                                                      |
+| ---------- | ------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------ |
+| `label`    | `string`                                                                                         | `''`        | Teks yang ditampilkan jika `children` tidak disediakan.                        |
+| `children` | `React.ReactNode`                                                                                | `undefined` | Menampilkan elemen kustom sebagai isi label. Jika ada, `label` akan diabaikan. |
+| `color`    | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'purple' \| 'orange'` | `'default'` | Variasi warna latar dan teks.                                                  |
+| `icon`     | `IconNameProps`                                                                                  | `undefined` | Menampilkan ikon di sebelah kiri teks.                                         |
+| `size`     | `'small' \| 'medium'`                                                                            | `'medium'`  | (Belum digunakan – untuk ekspansi ukuran ke depan.)                            |
+
+---
+
+## Warna yang Didukung
+
+| Warna     | Background          | Teks                 |
+| --------- | ------------------- | -------------------- |
+| `default` | `Color.gray[50]`    | `Color.gray[900]`    |
+| `success` | `Color.success[50]` | `Color.success[300]` |
+| `danger`  | `Color.danger[50]`  | `Color.danger[300]`  |
+| `primary` | `Color.primary[50]` | `Color.primary[300]` |
+| `warning` | `Color.warning[50]` | `Color.warning[300]` |
+| `info`    | `Color.info[50]`    | `Color.info[300]`    |
+| `purple`  | `Color.purple[50]`  | `Color.purple[300]`  |
+| `orange`  | `Color.orange[50]`  | `Color.orange[300]`  |
+
+---
+
+## Contoh Penggunaan
+
+### Label Sederhana
+
+```tsx
+<Label label="Active" color="success" />
+```
+
+### Label dengan Ikon
+
+```tsx
+<Label label="Error" color="danger" icon="AlertCircle" />
+```
+
+### Kustom Isi (Children)
+
+```tsx
+<Label color="primary">
+  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+    <Icon name="Check" color={Color.primary[300]} size={12} />
+    <Text style={{ color: Color.primary[300], marginLeft: 4 }}>Custom</Text>
+  </View>
+</Label>
+```
+
+---
+
+## Catatan Tambahan
+
+* Jika Anda memberikan `children`, maka `label` dan `icon` akan diabaikan.
+* Komponen ini menggunakan `alignSelf: 'flex-start'` agar ukuran label tidak penuh.
+* Prop `size` belum aktif, namun sudah disiapkan jika ke depan ingin mendukung skala `small`/`large`.
+
+---

package/src/RadioButton/README.md

@@ -1,7 +1,8 @@
 # 📦 RadioButton – Komponen React Native
 
 Komponen `RadioButton` ini digunakan untuk menampilkan daftar pilihan dalam bentuk radio button di aplikasi React Native.
-![Deskripsi Alt](../../assets/doc/RadioButton/RadioButton.png)
+<img src="../../assets/doc/RadioButton/RadioButton.png" width=200>
+
 
 ## 📄 Import
 

package/src/Ui/README_DEVIDER.md

@@ -0,0 +1,62 @@
+# Divider
+
+**Divider** adalah komponen garis horizontal sederhana yang digunakan untuk memisahkan konten secara visual dalam antarmuka pengguna.
+
+---
+
+## Instalasi
+
+Komponen ini tidak memerlukan dependensi eksternal. Hanya menggunakan:
+
+* `Color` – untuk warna garis.
+* `View` dan `StyleSheet` dari `react-native`.
+
+---
+
+## API Reference
+
+Tidak memiliki properti (props) khusus. Komponen ini dapat digunakan langsung dan bisa dikustomisasi melalui `style` eksternal jika diperlukan.
+
+---
+
+## Contoh Penggunaan
+
+### Divider Default
+
+```tsx
+import Divider from '@/components/Divider/Divider';
+
+<View>
+  <Text>Bagian Atas</Text>
+  <Divider />
+  <Text>Bagian Bawah</Text>
+</View>
+```
+
+### Divider dengan Margin
+
+```tsx
+<View style={{ marginVertical: 12 }}>
+  <Divider />
+</View>
+```
+
+### Divider yang Dikustomisasi
+
+```tsx
+<Divider style={{ backgroundColor: 'red', height: 2 }} />
+```
+
+> Catatan: Untuk mengubah gaya `Divider`, bungkus komponen dengan `View` tambahan atau tambahkan prop `style` melalui wrapper jika perlu.
+
+---
+
+## Style Default
+
+```ts
+{
+  height: 1,
+  backgroundColor: Color.gray[200],
+}
+```
+