@herca/rn-kit 0.1.6 → 0.1.8

package/lib/module/DropDown/DropDown.js

@@ -1,9 +1,9 @@
 "use strict";
 
 import { useState, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, useWindowDimensions, findNodeHandle, UIManager } from 'react-native';
+import { View, Text, TouchableOpacity, Pressable, StyleSheet, ScrollView, useWindowDimensions, findNodeHandle, UIManager, Modal } from 'react-native';
 import Color from "../Color/Color.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const Dropdown = ({
   options,
   maxHeight = 200,
@@ -12,16 +12,28 @@ const Dropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState();
-  const [dropdownPosition, setDropdownPosition] = useState('left');
+  const [align, setAlign] = useState('left');
+  const [buttonLayout, setButtonLayout] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
   const buttonRef = useRef(null);
   const windowWidth = useWindowDimensions().width;
   const handleToggle = () => {
     if (!isOpen) {
       const handle = findNodeHandle(buttonRef.current);
       if (handle) {
-        UIManager.measureInWindow(handle, (x, _y, width, _height) => {
+        UIManager.measureInWindow(handle, (x, y, width, height) => {
           const middle = windowWidth / 2;
-          setDropdownPosition(x + width / 2 > middle ? 'right' : 'left');
+          setAlign(x + width / 2 > middle ? 'right' : 'left');
+          setButtonLayout({
+            x,
+            y,
+            width,
+            height
+          });
           setIsOpen(true);
         });
       }
@@ -34,56 +46,54 @@ const Dropdown = ({
     setIsOpen(false);
     onSelect?.(value.value);
   };
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(TouchableOpacity, {
       ref: buttonRef,
-      style: styles.dropdownButton,
       onPress: handleToggle,
-      children: renderButton ? renderButton : /*#__PURE__*/_jsx(Text, {
-        children: selected || 'Select an option'
-      })
-    }), isOpen && /*#__PURE__*/_jsx(View, {
-      style: [styles.dropdownList, dropdownPosition === 'left' ? styles.left : styles.right],
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        nestedScrollEnabled: true,
-        style: {
-          maxHeight
-        },
-        children: options.map((item, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => handlePressOption(item),
-          style: [styles.option, selected === item.value ? styles.optionSelected : null],
-          children: /*#__PURE__*/_jsx(Text, {
-            children: item.label
-          })
-        }, index))
-      })
+      children: renderButton
+    }), isOpen && /*#__PURE__*/_jsxs(Modal, {
+      transparent: true,
+      animationType: "none",
+      visible: true,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFillObject,
+        onPress: () => setIsOpen(false)
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dropdownList, {
+          top: buttonLayout.y + buttonLayout.height,
+          left: align === 'left' ? buttonLayout.x : undefined,
+          right: align === 'right' ? windowWidth - (buttonLayout.x + buttonLayout.width) : undefined
+        }],
+        children: /*#__PURE__*/_jsx(ScrollView, {
+          nestedScrollEnabled: true,
+          style: {
+            maxHeight
+          },
+          children: options.map((item, idx) => /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => handlePressOption(item),
+            style: [styles.option, selected === item.value && styles.optionSelected],
+            children: /*#__PURE__*/_jsx(Text, {
+              children: item.label
+            })
+          }, idx))
+        })
+      })]
     })]
   });
 };
 export default Dropdown;
 const styles = StyleSheet.create({
-  container: {
-    // width: 200, // or flexible
-  },
-  dropdownButton: {
-    // borderWidth: 1,
-    // borderColor: '#ccc',
-    // padding: 12,
-    // borderRadius: 6,
-    // backgroundColor: '#fff',
-  },
+  button: {},
   dropdownList: {
     position: 'absolute',
-    marginTop: 18,
     padding: 8,
-    zIndex: 9999,
+    zIndex: 10,
     gap: 4,
     borderWidth: 1,
     borderColor: Color.gray[50],
     borderRadius: 8,
     backgroundColor: Color.base.white100,
-    width: 100
+    width: 120
   },
   option: {
     gap: 8,
@@ -96,12 +106,6 @@ const styles = StyleSheet.create({
   optionSelected: {
     backgroundColor: Color.primary[50],
     borderColor: Color.primary[300]
-  },
-  left: {
-    left: 0
-  },
-  right: {
-    right: 0
   }
 });
 //# sourceMappingURL=DropDown.js.map

package/lib/module/DropDown/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useRef","View","Text","TouchableOpacity","StyleSheet","ScrollView","useWindowDimensions","findNodeHandle","UIManager","Color","jsx","_jsx","jsxs","_jsxs","Dropdown","options","maxHeight","onSelect","renderButton","isOpen","setIsOpen","selected","setSelected","dropdownPosition","setDropdownPosition","buttonRef","windowWidth","width","handleToggle","handle","current","measureInWindow","x","_y","_height","middle","handlePressOption","value","style","styles","container","children","ref","dropdownButton","onPress","dropdownList","left","right","nestedScrollEnabled","map","item","index","option","optionSelected","label","create","position","marginTop","padding","zIndex","gap","borderWidth","borderColor","gray","borderRadius","backgroundColor","base","white100","paddingVertical","paddingHorizontal","primary"],"sourceRoot":"../../../src","sources":["DropDown/DropDown.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useState","useRef","View","Text","TouchableOpacity","Pressable","StyleSheet","ScrollView","useWindowDimensions","findNodeHandle","UIManager","Modal","Color","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Dropdown","options","maxHeight","onSelect","renderButton","isOpen","setIsOpen","selected","setSelected","align","setAlign","buttonLayout","setButtonLayout","x","y","width","height","buttonRef","windowWidth","handleToggle","handle","current","measureInWindow","middle","handlePressOption","value","children","ref","onPress","transparent","animationType","visible","style","absoluteFillObject","styles","dropdownList","top","left","undefined","right","nestedScrollEnabled","map","item","idx","option","optionSelected","label","create","button","position","padding","zIndex","gap","borderWidth","borderColor","gray","borderRadius","backgroundColor","base","white100","paddingVertical","paddingHorizontal","primary"],"sourceRoot":"../../../src","sources":["DropDown/DropDown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/DropDown/README.md

@@ -0,0 +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/lib/module/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/lib/module/Provider/Provider.js

@@ -5,6 +5,7 @@ import { createContext, useContext, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import LayoutWithFooter from "./LayoutWithFooter.js";
 import RequiredUpdateAppsProvider from "./RequiredUpdateAppsProvider.js";
+import Color from "../Color/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FooterContext = /*#__PURE__*/createContext(undefined);
 export default function Provider({
@@ -37,6 +38,7 @@ export const useFooter = () => {
 };
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: Color.base.white100,
     flex: 1
   }
 });

package/lib/module/Provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","useState","StyleSheet","View","LayoutWithFooter","RequiredUpdateAppsProvider","jsx","_jsx","jsxs","_jsxs","FooterContext","undefined","Provider","children","requiredUpdated","updateConfig","footer","setFooter","style","styles","container","value","useFooter","context","Error","create","flex"],"sourceRoot":"../../../src","sources":["Provider/Provider.tsx"],"mappings":";;AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC3D,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,gBAAgB,MAAM,uBAAoB;AACjD,OAAOC,0BAA0B,MAAM,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAetE,MAAMC,aAAa,gBAAGX,aAAa,CAAgCY,SAAS,CAAC;AAE7E,eAAe,SAASC,QAAQA,CAAC;EAC/BC,QAAQ;EACRC,eAAe,GAAG,KAAK;EACvBC;AACa,CAAC,EAAE;EAChB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC,IAAI,CAAC;EAE1C,oBACEQ,KAAA,CAACN,IAAI;IAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAP,QAAA,GAC3BC,eAAe,gBACdP,IAAA,CAACF,0BAA0B;MAAA,GAAKU;IAAY,CAAG,CAAC,GAC9C,IAAI,eACRR,IAAA,CAACG,aAAa,CAACE,QAAQ;MAACS,KAAK,EAAE;QAAEL,MAAM;QAAEC;MAAU,CAAE;MAAAJ,QAAA,eACnDN,IAAA,CAACH,gBAAgB;QAAAS,QAAA,EAAEA;MAAQ,CAAmB;IAAC,CACzB,CAAC;EAAA,CACrB,CAAC;AAEX;AAEA,OAAO,MAAMS,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGvB,UAAU,CAACU,aAAa,CAAC;EACzC,IAAIa,OAAO,KAAKZ,SAAS,EAAE;IACzB,MAAM,IAAIa,KAAK,CAAC,iDAAiD,CAAC;EACpE;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAMJ,MAAM,GAAGjB,UAAU,CAACuB,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useState","StyleSheet","View","LayoutWithFooter","RequiredUpdateAppsProvider","Color","jsx","_jsx","jsxs","_jsxs","FooterContext","undefined","Provider","children","requiredUpdated","updateConfig","footer","setFooter","style","styles","container","value","useFooter","context","Error","create","backgroundColor","base","white100","flex"],"sourceRoot":"../../../src","sources":["Provider/Provider.tsx"],"mappings":";;AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC3D,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,gBAAgB,MAAM,uBAAoB;AACjD,OAAOC,0BAA0B,MAAM,iCAA8B;AAGrE,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAanC,MAAMC,aAAa,gBAAGZ,aAAa,CAAgCa,SAAS,CAAC;AAE7E,eAAe,SAASC,QAAQA,CAAC;EAC/BC,QAAQ;EACRC,eAAe,GAAG,KAAK;EACvBC;AACa,CAAC,EAAE;EAChB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGjB,QAAQ,CAAC,IAAI,CAAC;EAE1C,oBACES,KAAA,CAACP,IAAI;IAACgB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAP,QAAA,GAC3BC,eAAe,gBACdP,IAAA,CAACH,0BAA0B;MAAA,GAAKW;IAAY,CAAG,CAAC,GAC9C,IAAI,eACRR,IAAA,CAACG,aAAa,CAACE,QAAQ;MAACS,KAAK,EAAE;QAAEL,MAAM;QAAEC;MAAU,CAAE;MAAAJ,QAAA,eACnDN,IAAA,CAACJ,gBAAgB;QAAAU,QAAA,EAAEA;MAAQ,CAAmB;IAAC,CACzB,CAAC;EAAA,CACrB,CAAC;AAEX;AAEA,OAAO,MAAMS,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGxB,UAAU,CAACW,aAAa,CAAC;EACzC,IAAIa,OAAO,KAAKZ,SAAS,EAAE;IACzB,MAAM,IAAIa,KAAK,CAAC,iDAAiD,CAAC;EACpE;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAMJ,MAAM,GAAGlB,UAAU,CAACwB,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,eAAe,EAAErB,KAAK,CAACsB,IAAI,CAACC,QAAQ;IACpCC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/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/lib/module/Timeline/Timeline.js

@@ -1,12 +1,18 @@
 "use strict";
 
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Timeline({
   children
 }) {
   return /*#__PURE__*/_jsx(View, {
+    style: styles.gap14,
     children: children
   });
 }
+const styles = StyleSheet.create({
+  gap14: {
+    gap: 14
+  }
+});
 //# sourceMappingURL=Timeline.js.map

package/lib/module/Timeline/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","jsx","_jsx","Timeline","children"],"sourceRoot":"../../../src","sources":["Timeline/Timeline.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMpC,eAAe,SAASC,QAAQA,CAAC;EAAEC;AAAmB,CAAC,EAAE;EACvD,oBAAOF,IAAA,CAACF,IAAI;IAAAI,QAAA,EAAEA;EAAQ,CAAO,CAAC;AAChC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","jsx","_jsx","Timeline","children","style","styles","gap14","create","gap"],"sourceRoot":"../../../src","sources":["Timeline/Timeline.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,eAAe,SAASC,QAAQA,CAAC;EAAEC;AAAmB,CAAC,EAAE;EACvD,oBAAOF,IAAA,CAACF,IAAI;IAACK,KAAK,EAAEC,MAAM,CAACC,KAAM;IAAAH,QAAA,EAAEA;EAAQ,CAAO,CAAC;AACrD;AAEA,MAAME,MAAM,GAAGP,UAAU,CAACS,MAAM,CAAC;EAC/BD,KAAK,EAAE;IACLE,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Timeline/TimelineItem.js

@@ -17,6 +17,18 @@ export default function TimelineItem({
   color = 'primary'
 }) {
   const [contentHeight, setContentHeight] = useState(0);
+  const renderDashes = count => {
+    return Array.from({
+      length: count
+    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 1,
+        height: 4,
+        backgroundColor: Color.gray[400],
+        marginVertical: 2
+      }
+    }, index));
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsxs(View, {
@@ -25,9 +37,7 @@ export default function TimelineItem({
         name: "RadioButton",
         color: COLOR_MAP[color]
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.border, {
-          height: contentHeight - 20
-        }]
+        children: renderDashes(Math.floor((contentHeight - 20) / 6))
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: styles.flex,
@@ -54,10 +64,10 @@ const styles = StyleSheet.create({
   },
   border: {
     width: 1,
+    borderWidth: 1,
     borderLeftWidth: 1,
     borderLeftColor: Color.gray[400],
-    borderStyle: 'dashed',
-    marginTop: 4
+    borderStyle: 'dashed'
   },
   flex: {
     flex: 1

package/lib/module/Timeline/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","StyleSheet","View","Color","Icon","jsx","_jsx","jsxs","_jsxs","COLOR_MAP","warning","primary","success","purple","danger","TimelineItem","children","color","contentHeight","setContentHeight","style","styles","container","contentLeft","name","border","height","flex","onLayout","e","nativeEvent","layout","create","flexDirection","alignItems","marginRight","width","borderLeftWidth","borderLeftColor","gray","borderStyle","marginTop"],"sourceRoot":"../../../src","sources":["Timeline/TimelineItem.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,SAASC,IAAI,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAEP,KAAK,CAACO,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAER,KAAK,CAACQ,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAET,KAAK,CAACS,OAAO,CAAC,GAAG,CAAC;EAC3BC,MAAM,EAAEV,KAAK,CAACU,MAAM,CAAC,GAAG,CAAC;EACzBC,MAAM,EAAEX,KAAK,CAACW,MAAM,CAAC,GAAG;AAC1B,CAAC;AAQD,eAAe,SAASC,YAAYA,CAAC;EACnCC,QAAQ;EACRC,KAAK,GAAG;AACS,CAAC,EAAE;EACpB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC;EAErD,oBACEQ,KAAA,CAACN,IAAI;IAACkB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAN,QAAA,gBAC5BR,KAAA,CAACN,IAAI;MAACkB,KAAK,EAAEC,MAAM,CAACE,WAAY;MAAAP,QAAA,gBAC9BV,IAAA,CAACF,IAAI;QAACoB,IAAI,EAAC,aAAa;QAACP,KAAK,EAAER,SAAS,CAACQ,KAAK;MAAE,CAAE,CAAC,eACpDX,IAAA,CAACJ,IAAI;QAACkB,KAAK,EAAE,CAACC,MAAM,CAACI,MAAM,EAAE;UAAEC,MAAM,EAAER,aAAa,GAAG;QAAG,CAAC;MAAE,CAAE,CAAC;IAAA,CAC5D,CAAC,eACPZ,IAAA,CAACJ,IAAI;MACHkB,KAAK,EAAEC,MAAM,CAACM,IAAK;MACnBC,QAAQ,EAAGC,CAAC,IAAK;QACf,MAAM;UAAEH;QAAO,CAAC,GAAGG,CAAC,CAACC,WAAW,CAACC,MAAM;QACvCZ,gBAAgB,CAACO,MAAM,CAAC;MAC1B,CAAE;MAAAV,QAAA,eAEFV,IAAA,CAACJ,IAAI;QAAAc,QAAA,EAAEA;MAAQ,CAAO;IAAC,CACnB,CAAC;EAAA,CACH,CAAC;AAEX;AACA,MAAMK,MAAM,GAAGpB,UAAU,CAAC+B,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDX,WAAW,EAAE;IACXW,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACf,CAAC;EACDV,MAAM,EAAE;IACNW,KAAK,EAAE,CAAC;IACRC,eAAe,EAAE,CAAC;IAClBC,eAAe,EAAEnC,KAAK,CAACoC,IAAI,CAAC,GAAG,CAAC;IAChCC,WAAW,EAAE,QAAQ;IACrBC,SAAS,EAAE;EACb,CAAC;EACDd,IAAI,EAAE;IACJA,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["useState","StyleSheet","View","Color","Icon","jsx","_jsx","jsxs","_jsxs","COLOR_MAP","warning","primary","success","purple","danger","TimelineItem","children","color","contentHeight","setContentHeight","renderDashes","count","Array","from","length","map","_","index","style","width","height","backgroundColor","gray","marginVertical","styles","container","contentLeft","name","Math","floor","flex","onLayout","e","nativeEvent","layout","create","flexDirection","alignItems","marginRight","border","borderWidth","borderLeftWidth","borderLeftColor","borderStyle"],"sourceRoot":"../../../src","sources":["Timeline/TimelineItem.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,SAASC,IAAI,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAEP,KAAK,CAACO,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAER,KAAK,CAACQ,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAET,KAAK,CAACS,OAAO,CAAC,GAAG,CAAC;EAC3BC,MAAM,EAAEV,KAAK,CAACU,MAAM,CAAC,GAAG,CAAC;EACzBC,MAAM,EAAEX,KAAK,CAACW,MAAM,CAAC,GAAG;AAC1B,CAAC;AAQD,eAAe,SAASC,YAAYA,CAAC;EACnCC,QAAQ;EACRC,KAAK,GAAG;AACS,CAAC,EAAE;EACpB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC;EACrD,MAAMoB,YAAY,GAAIC,KAAa,IAAK;IACtC,OAAOC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEH;IAAM,CAAC,CAAC,CAACI,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,kBAChDrB,IAAA,CAACJ,IAAI;MAEH0B,KAAK,EAAE;QACLC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE,CAAC;QACTC,eAAe,EAAE5B,KAAK,CAAC6B,IAAI,CAAC,GAAG,CAAC;QAChCC,cAAc,EAAE;MAClB;IAAE,GANGN,KAON,CACF,CAAC;EACJ,CAAC;EAED,oBACEnB,KAAA,CAACN,IAAI;IAAC0B,KAAK,EAAEM,MAAM,CAACC,SAAU;IAAAnB,QAAA,gBAC5BR,KAAA,CAACN,IAAI;MAAC0B,KAAK,EAAEM,MAAM,CAACE,WAAY;MAAApB,QAAA,gBAC9BV,IAAA,CAACF,IAAI;QAACiC,IAAI,EAAC,aAAa;QAACpB,KAAK,EAAER,SAAS,CAACQ,KAAK;MAAE,CAAE,CAAC,eACpDX,IAAA,CAACJ,IAAI;QAAAc,QAAA,EAAEI,YAAY,CAACkB,IAAI,CAACC,KAAK,CAAC,CAACrB,aAAa,GAAG,EAAE,IAAI,CAAC,CAAC;MAAC,CAAO,CAAC;IAAA,CAC7D,CAAC,eACPZ,IAAA,CAACJ,IAAI;MACH0B,KAAK,EAAEM,MAAM,CAACM,IAAK;MACnBC,QAAQ,EAAGC,CAAC,IAAK;QACf,MAAM;UAAEZ;QAAO,CAAC,GAAGY,CAAC,CAACC,WAAW,CAACC,MAAM;QACvCzB,gBAAgB,CAACW,MAAM,CAAC;MAC1B,CAAE;MAAAd,QAAA,eAEFV,IAAA,CAACJ,IAAI;QAAAc,QAAA,EAAEA;MAAQ,CAAO;IAAC,CACnB,CAAC;EAAA,CACH,CAAC;AAEX;AACA,MAAMkB,MAAM,GAAGjC,UAAU,CAAC4C,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDX,WAAW,EAAE;IACXW,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACf,CAAC;EACDC,MAAM,EAAE;IACNpB,KAAK,EAAE,CAAC;IACRqB,WAAW,EAAE,CAAC;IACdC,eAAe,EAAE,CAAC;IAClBC,eAAe,EAAEjD,KAAK,CAAC6B,IAAI,CAAC,GAAG,CAAC;IAChCqB,WAAW,EAAE;EACf,CAAC;EACDb,IAAI,EAAE;IACJA,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/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],
+}
+```
+

package/lib/typescript/src/DropDown/DropDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/DropDown.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,QAAA,MAAM,QAAQ,GAAI,iDAKf,aAAa,4CAsEf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/DropDown.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,QAAA,MAAM,QAAQ,GAAI,iDAKf,aAAa,4CAgFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/DropDown/type.d.ts

@@ -4,6 +4,6 @@ export interface DropDownProps {
     options: ChipOptionProps[];
     maxHeight?: number;
     onSelect?: (value: string | number) => void;
-    renderButton?: React.ReactNode;
+    renderButton: React.ReactNode;
 }
 //# sourceMappingURL=type.d.ts.map

package/lib/typescript/src/DropDown/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B"}

package/lib/typescript/src/Provider/Provider.d.ts

@@ -6,8 +6,8 @@ interface FooterContextType {
 }
 interface ProviderProps {
     children: ReactNode;
-    requiredUpdated: boolean;
-    updateConfig: RequiredUpdateAppsProviderProps;
+    requiredUpdated?: boolean;
+    updateConfig?: RequiredUpdateAppsProviderProps;
 }
 export default function Provider({ children, requiredUpdated, updateConfig, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare const useFooter: () => FooterContextType;

package/lib/typescript/src/Provider/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Provider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,QAAQ,CAAC;AAE9D,UAAU,iBAAiB;IACzB,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,+BAA+B,CAAC;CAC/C;AAID,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,QAAQ,EACR,eAAuB,EACvB,YAAY,GACb,EAAE,aAAa,2CAaf;AAED,eAAO,MAAM,SAAS,yBAMrB,CAAC"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Provider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,QAAQ,CAAC;AAG9D,UAAU,iBAAiB;IACzB,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,+BAA+B,CAAC;CAChD;AAID,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,QAAQ,EACR,eAAuB,EACvB,YAAY,GACb,EAAE,aAAa,2CAaf;AAED,eAAO,MAAM,SAAS,yBAMrB,CAAC"}

package/lib/typescript/src/Provider/type.d.ts

@@ -1,6 +1,6 @@
 export interface RequiredUpdateAppsProviderProps {
-    title: string;
-    description: string;
+    title?: string;
+    description?: string;
     buttonText?: string;
     onUpdate?: (value: boolean) => void;
 }

package/lib/typescript/src/Provider/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Provider/type.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Provider/type.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,+BAA+B;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC"}

package/lib/typescript/src/Timeline/TimelineItem.d.ts

@@ -8,7 +8,7 @@ declare const COLOR_MAP: {
 type ColorKey = keyof typeof COLOR_MAP;
 interface TimelineItemProps {
     children: React.ReactNode;
-    color: ColorKey;
+    color?: ColorKey;
 }
 export default function TimelineItem({ children, color, }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/typescript/src/Timeline/TimelineItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,SAAS;;;;;;CAMd,CAAC;AACF,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,KAAiB,GAClB,EAAE,iBAAiB,2CAoBnB"}
+{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,SAAS;;;;;;CAMd,CAAC;AACF,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,KAAiB,GAClB,EAAE,iBAAiB,2CAiCnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/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/src/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