@herca/rn-kit 0.1.5 → 0.1.7

package/README.md

@@ -70,6 +70,19 @@ cd ios
 pod install
 ```
 
+Wrap content utama dengan Provider
+
+```tsx
+
+import {Provider} from '@herca/rn-kit';
+const Stack = createNativeStackNavigator();
+
+const App = () => {
+  return (
+    <Provider>
+      <YoyrCode>
+    </Provider>
+```
 ---
 
 ## 🚀 Penggunaan
@@ -88,12 +101,17 @@ import { Button } from '@herca/rn-kit';
 
 Komponen untuk mengumpulkan input dari pengguna.
 
-- [Checkbox](./src/Checkbox/README.md)
+- [Button](./src/Button/README.md)
+- [Checkbox](./src/Checkbox/README_CHECKBOX.md)
+- [Checkbox](./src/Checkbox/README_CHECKBOXLIST.md)
 - [Chip-(Select)](./src/Chip/README.md)
 - [DatePicker](./src/DatePicker/README.md)
 - [DropDown](./src/DropDown/README.md)
 - [Input](./src/Input/README.md)
+- [Input Month](./src/InputMonth/README.md)
 - [Input Password](./src/InputPassword/README.md)
+- [Input Time](./src/InputTime/README.md)
+- [Input Year](./src/InputYear/README.md)
 - [Radio Button](./src/RadioButton/README.md)
 - [Select](./src/Select/README.md)
 - [Switch](./src/Switch/README.md)
@@ -115,6 +133,7 @@ Komponen yang muncul di atas konten utama untuk interaksi sementara.
 Komponen untuk menyembunyikan atau menampilkan konten.
 
 - [Accordion](./src/Accordion/README.md)
+- [Step](./src/Step/README.md)
 
 ---
 
@@ -136,13 +155,19 @@ Komponen untuk menampilkan informasi atau elemen visual.
 - [AvatarGroup](./src/Alert/README_AVATARGROUP.md)
 - [Calendar](./src/Calendar/README.md)
 - [Color](./src/Color/README.md)
-- [Card](./src/Card/README.md)
+- [Card](./src/Ui/README_CARD.md)
 - [Drawing](./src/Drawing/README.md)
+- [Footer](./src/Footer/README.md)
 - [List](./src/List/README.md)
+- [Timeline](./src/Timeline/README.md)
 - [Typography](./src/Typography/README.md)
 
 ---
 
+### Contex
+
+- [Provider](./src/Provider/README.md)
+
 ## 🤝 Kontribusi
 
 Silakan baca panduan kontribusi pada [CONTRIBUTING.md](CONTRIBUTING.md) untuk mengetahui alur pengembangan dan kontribusi pada proyek ini.

package/lib/module/Accordion/README.md

@@ -1,7 +1,7 @@
 # 📂 Accordion
 
 Komponen **Accordion** digunakan untuk menyembunyikan atau menampilkan konten secara dinamis. Biasanya digunakan untuk struktur seperti FAQ atau daftar konten bertingkat.
-![Deskripsi Alt](../../assets/doc/Accordion/Accordion.gif)
+<img src="../../assets/doc/Accordion/Accordion.gif" alt="Deskripsi Alt" width="200" />
 
 ## 📦 USAGE
 
@@ -32,12 +32,20 @@ export default function FAQSection() {
 
 
 ## Props
+### Accordion
+| Props          | Tipe                        | Wajib | Default | Deskripsi                                                                       |
+| -------------- | --------------------------- | ----- | ------- | ------------------------------------------------------------------------------- |
+| `children`     | `ReactNode`                 | ✅     | -       | Isi Accordion, harus terdiri dari satu atau beberapa `AccordionItem`.           |
+| `renderHeader` | `ReactNode \| null`         | ❌     | `null`  | Komponen untuk menampilkan header. Biasanya berupa `Text` atau komponen kustom. |
+| `isOpen`       | `boolean`                   | ❌     | `true`  | Menentukan apakah Accordion terbuka saat pertama kali dirender.                 |
+| `onCollapse`   | `(isOpen: boolean) => void` | ❌     | -       | Callback saat status terbuka/tutup berubah.                                     |
+
+### AccordionItem
+| Props      | Tipe        | Wajib | Default | Deskripsi                                                       |
+| ---------- | ----------- | ----- | ------- | --------------------------------------------------------------- |
+| `children` | `ReactNode` | ✅     | -       | Konten yang akan ditampilkan saat Accordion dibuka.             |
+| `index`    | `number`    | ❌     | -       | Untuk pengendalian item tertentu jika diperlukan secara manual. |
 
-| props name           | mandatory | types   | default                                                  |
-| -------------------- | --------- | ------- | -------------------------------------------------------- |
-| header             |          | ReactNode | false                                            |
-| isOpen              |         | boolean    |  true                                             |
-| onCollapse              |         | (isOpen: boolean) => void	    |  true                                             |                         |
 
 ## Note
 

package/lib/module/Alert/README.md

@@ -1,8 +1,8 @@
 # 📢 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" />
 
-![Deskripsi Alt](../../assets/doc/Alert/Alert.png)
 ## ✨ Fitur
 
 - Menampilkan ikon notifikasi

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":";;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AACxC,SACEC,IAAI,EACJC,IAAI,EACJC,gBAAgB,EAChBC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,mBAAmB,EACnBC,cAAc,EACdC,SAAS,EACTC,KAAK,QACA,cAAc;AACrB,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAInC,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,OAAO;EACPC,SAAS,GAAG,GAAG;EACfC,QAAQ;EACRC;AACa,CAAC,KAAK;EACnB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC0B,QAAQ,EAAEC,WAAW,CAAC,GAAG3B,QAAQ,CAAkB,CAAC;EAC3D,MAAM,CAAC4B,KAAK,EAAEC,QAAQ,CAAC,GAAG7B,QAAQ,CAAmB,MAAM,CAAC;EAC5D,MAAM,CAAC8B,YAAY,EAAEC,eAAe,CAAC,GAAG/B,QAAQ,CAAC;IAC/CgC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE,CAAC;IACJC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAGnC,MAAM,CAAO,IAAI,CAAC;EACpC,MAAMoC,WAAW,GAAG7B,mBAAmB,CAAC,CAAC,CAAC0B,KAAK;EAE/C,MAAMI,YAAY,GAAGA,CAAA,KAAM;IACzB,IAAI,CAACd,MAAM,EAAE;MACX,MAAMe,MAAM,GAAG9B,cAAc,CAAC2B,SAAS,CAACI,OAAO,CAAC;MAChD,IAAID,MAAM,EAAE;QACV7B,SAAS,CAAC+B,eAAe,CAACF,MAAM,EAAE,CAACP,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,KAAK;UACzD,MAAMO,MAAM,GAAGL,WAAW,GAAG,CAAC;UAC9BR,QAAQ,CAACG,CAAC,GAAGE,KAAK,GAAG,CAAC,GAAGQ,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;UACnDX,eAAe,CAAC;YAAEC,CAAC;YAAEC,CAAC;YAAEC,KAAK;YAAEC;UAAO,CAAC,CAAC;UACxCV,SAAS,CAAC,IAAI,CAAC;QACjB,CAAC,CAAC;MACJ;IACF,CAAC,MAAM;MACLA,SAAS,CAAC,KAAK,CAAC;IAClB;EACF,CAAC;EAED,MAAMkB,iBAAiB,GAAIC,KAAsB,IAAK;IACpDjB,WAAW,CAACiB,KAAK,CAACA,KAAK,CAAC;IACxBnB,SAAS,CAAC,KAAK,CAAC;IAChBH,QAAQ,GAAGsB,KAAK,CAACA,KAAK,CAAC;EACzB,CAAC;EAED,oBACE5B,KAAA,CAAAE,SAAA;IAAA2B,QAAA,gBACE/B,IAAA,CAACV,gBAAgB;MAAC0C,GAAG,EAAEV,SAAU;MAACW,OAAO,EAAET,YAAa;MAAAO,QAAA,EACrDtB;IAAY,CACG,CAAC,EAClBC,MAAM,iBACLR,KAAA,CAACL,KAAK;MAACqC,WAAW;MAACC,aAAa,EAAC,MAAM;MAACC,OAAO;MAAAL,QAAA,gBAC7C/B,IAAA,CAACT,SAAS;QACR8C,KAAK,EAAE7C,UAAU,CAAC8C,kBAAmB;QACrCL,OAAO,EAAEA,CAAA,KAAMtB,SAAS,CAAC,KAAK;MAAE,CACjC,CAAC,eAEFX,IAAA,CAACZ,IAAI;QACHiD,KAAK,EAAE,CACLE,MAAM,CAACC,YAAY,EACnB;UACEC,GAAG,EAAEzB,YAAY,CAACG,CAAC,GAAGH,YAAY,CAACK,MAAM;UACzCqB,IAAI,EAAE5B,KAAK,KAAK,MAAM,GAAGE,YAAY,CAACE,CAAC,GAAGyB,SAAS;UACnDC,KAAK,EACH9B,KAAK,KAAK,OAAO,GACbS,WAAW,IAAIP,YAAY,CAACE,CAAC,GAAGF,YAAY,CAACI,KAAK,CAAC,GACnDuB;QACR,CAAC,CACD;QAAAZ,QAAA,eAEF/B,IAAA,CAACP,UAAU;UAACoD,mBAAmB;UAACR,KAAK,EAAE;YAAE9B;UAAU,CAAE;UAAAwB,QAAA,EAClDzB,OAAO,CAACwC,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,kBACrBhD,IAAA,CAACV,gBAAgB;YAEf2C,OAAO,EAAEA,CAAA,KAAMJ,iBAAiB,CAACkB,IAAI,CAAE;YACvCV,KAAK,EAAE,CACLE,MAAM,CAACU,MAAM,EACbrC,QAAQ,KAAKmC,IAAI,CAACjB,KAAK,IAAIS,MAAM,CAACW,cAAc,CAChD;YAAAnB,QAAA,eAEF/B,IAAA,CAACX,IAAI;cAAA0C,QAAA,EAAEgB,IAAI,CAACI;YAAK,CAAO;UAAC,GAPpBH,GAQW,CACnB;QAAC,CACQ;MAAC,CACT,CAAC;IAAA,CACF,CACR;EAAA,CACD,CAAC;AAEP,CAAC;AAED,eAAe3C,QAAQ;AAEvB,MAAMkC,MAAM,GAAG/C,UAAU,CAAC4D,MAAM,CAAC;EAC/BC,MAAM,EAAE,CAAC,CAAC;EACVb,YAAY,EAAE;IACZc,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,CAAC;IACVC,MAAM,EAAE,EAAE;IACVC,GAAG,EAAE,CAAC;IACNC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE7D,KAAK,CAAC8D,IAAI,CAAC,EAAE,CAAC;IAC3BC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAEhE,KAAK,CAACiE,IAAI,CAACC,QAAQ;IACpC5C,KAAK,EAAE;EACT,CAAC;EACD6B,MAAM,EAAE;IACNQ,GAAG,EAAE,CAAC;IACNQ,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBR,WAAW,EAAE,CAAC;IACdG,YAAY,EAAE,CAAC;IACfF,WAAW,EAAE7D,KAAK,CAACiE,IAAI,CAACC;EAC1B,CAAC;EACDd,cAAc,EAAE;IACdY,eAAe,EAAEhE,KAAK,CAACqE,OAAO,CAAC,EAAE,CAAC;IAClCR,WAAW,EAAE7D,KAAK,CAACqE,OAAO,CAAC,GAAG;EAChC;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/DropDown/README.md

@@ -0,0 +1 @@
+# Dropdown

package/lib/module/List/README.md

@@ -0,0 +1,49 @@
+# 📋 List & ListItem
+List menyajikan kumpulan elemen secara vertikal dengan tampilan kartu (border & radius), sedangkan ListItem mewakili baris individual yang dapat bersifat statis ataupun interaktif (dapat ditekan).
+
+
+## 📦 Contoh Penggunaan
+``` tsx
+import React from 'react';
+import { Text } from 'react-native';
+import List from '@herca/rn-kit/List';
+import ListItem from '@herca/rn-kit/List/ListItem';
+
+export default function SettingMenu() {
+  const handleProfile = () => console.log('Go to Profile');
+
+  return (
+    <List>
+      <ListItem onPress={handleProfile}>
+        <Text>Profil</Text>
+      </ListItem>
+
+      <ListItem onPress={() => console.log('Go to Notifications')}>
+        <Text>Notifikasi</Text>
+      </ListItem>
+
+      <ListItem>
+        <Text>Tentang Aplikasi</Text>
+      </ListItem>
+    </List>
+  );
+}
+
+```
+
+## 🧩 API Reference
+
+### List
+| Prop       | Type        | Wajib | Default | Deskripsi                      |
+| ---------- | ----------- | ----- | ------- | ------------------------------ |
+| `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `ListItem`. |
+| `style`    | `ViewStyle` | ❌     | —       | Gaya tambahan untuk container. |
+
+### ListItem
+| Prop       | Type                   | Wajib | Default | Deskripsi                                                                 |
+| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------------------- |
+| `children` | `ReactNode`            | ✅     | —       | Konten baris, bebas teks, ikon, atau komponen lain.                       |
+| `onPress`  | `() => void`           | ❌     | —       | Jika diisi, baris menjadi dapat diklik (`TouchableOpacity`).              |
+| `style`    | `StyleProp<ViewStyle>` | ❌     | —       | Gaya tambahan untuk baris.                                                |
+| `isLast`   | `boolean`              | 🚫    | —       | Diisi otomatis oleh `List` untuk menghapus border bawah pada baris akhir. |
+| `index`    | `number`               | 🚫    | —       | Tidak digunakan—disediakan untuk extensibility.                           |

package/lib/module/Modal/Modal.js

@@ -142,7 +142,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#ccc'
   },
   contentContainer: {
-    padding: 16 // bisa diubah sesuai kebutuhan
+    padding: 16
   }
 });
 export default ModalPopUp;

package/lib/module/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","hitSlop","top","bottom","left","right","contentContainer","create","flex","justifyContent","alignItems","position","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","hitSlop","top","bottom","left","right","contentContainer","create","flex","justifyContent","alignItems","position","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Modal/README.md

@@ -0,0 +1,39 @@
+# 🧊 ModalPopUp
+ModalPopUp adalah komponen modal animasi dengan skala, dukungan backdrop, tombol close opsional, dan fleksibilitas ukuran serta gaya. Cocok untuk dialog, form, atau konfirmasi.
+
+### 📦 Contoh Penggunaan
+```tsx
+import React, { useState } from 'react';
+import { Text, Button } from 'react-native';
+import ModalPopUp from '@herca/rn-kit/ModalPopUp';
+
+export default function ExampleModal() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Buka Modal" onPress={() => setVisible(true)} />
+      <ModalPopUp isOpen={visible} onClose={() => setVisible(false)}>
+        <Text style={{ fontSize: 18 }}>Ini adalah isi modal</Text>
+      </ModalPopUp>
+    </>
+  );
+}
+
+```
+
+## 🧩 API Reference
+
+| Prop             | Type                         | Default     | Keterangan                                                            |
+| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------- |
+| `isOpen`         | `boolean`                    | —           | Status untuk membuka/tutup modal.                                     |
+| `onClose`        | `(isOpen?: boolean) => void` | `undefined` | Callback saat modal ditutup (baik via backdrop atau tombol close).    |
+| `children`       | `ReactNode`                  | —           | Konten utama modal.                                                   |
+| `backdrop`       | `boolean`                    | `true`      | Apakah backdrop gelap ditampilkan di belakang modal.                  |
+| `closable`       | `boolean`                    | `true`      | Apakah tombol close (lingkaran kecil di kanan atas) ditampilkan.      |
+| `onRequestClose` | `() => void`                 | `undefined` | Callback khusus saat backdrop ditekan (jika ingin override behavior). |
+| `bgColor`        | `string`                     | `"#fff"`    | Warna latar belakang modal.                                           |
+| `width`          | `DimensionValue`             | `"90%"`     | Lebar modal. Bisa `px`, `%`, atau nilai `number`.                     |
+| `height`         | `DimensionValue`             | `undefined` | Tinggi modal (opsional, gunakan scroll jika tidak cukup).             |
+| `containerStyle` | `ViewStyle`                  | `undefined` | Gaya tambahan untuk wrapper container (pusat layar).                  |
+| `modalStyle`     | `ViewStyle`                  | `undefined` | Gaya tambahan untuk modal box.                                        |

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/Step/README.md

@@ -0,0 +1,91 @@
+# 🪜 Step & StepItem
+Komponen Step menampilkan alur proses bertahap (wizard / progress indicator) dengan header horizontal yang dapat digeser, serta area konten untuk setiap langkah.
+Setiap titik/langkah diwakili oleh StepItem.
+
+## 📦 Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import Step from '@herca/rn-kit/Step';
+import StepItem from '@herca/rn-kit/Step/StepItem';
+
+export default function CheckoutWizard() {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  return (
+    <Step current={currentStep} onChangeStep={(i) => setCurrentStep(i)}>
+      {/* Header & konten otomatis dipasangkan berdasarkan urutan */}
+      <StepItem title="Alamat">
+        <Text>Form Alamat Pengiriman</Text>
+      </StepItem>
+
+      <StepItem title="Pembayaran">
+        <Text>Metode Pembayaran</Text>
+      </StepItem>
+
+      <StepItem title="Konfirmasi">
+        <Text>Ringkasan & Konfirmasi Pesanan</Text>
+      </StepItem>
+    </Step>
+  );
+}
+
+```
+## 🧩 API Reference
+
+### Step 
+| Prop           | Type                                   | Wajib | Default | Deskripsi                                                                   |
+| -------------- | -------------------------------------- | ----- | ------- | --------------------------------------------------------------------------- |
+| `children`     | `ReactElement<StepItemProps>` \| array | ✅     | —       | Satu atau beberapa `StepItem`.                                              |
+| `current`      | `number`                               | ✅     | —       | Indeks langkah aktif (dimulai dari `0`).                                    |
+| `onChangeStep` | `(activeIndex: number) => void`        | ✅     | —       | Callback yang dipicu setiap kali nilai `current` berubah di dalam komponen. |
+
+
+### StepItem
+
+Digunakan dua kali:
+
+Sebagai header (ikon lingkaran + garis) – otomatis di‐render oleh Step.
+
+Sebagai konten – ditampilkan bila index-nya sama dengan current.
+
+| Prop       | Type                                                          | Wajib | Default     | Deskripsi                                                          |
+| ---------- | ------------------------------------------------------------- | ----- | ----------- | ------------------------------------------------------------------ |
+| `children` | `ReactNode`                                                   | ✅     | —           | Konten yang muncul ketika langkah ini aktif.                       |
+| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌     | `'primary'` | Warna lingkaran & garis pada header.                               |
+| `title`    | `string`                                                      | ❌     | `''`        | (Opsional) Judul untuk ditampilkan di header (bisa dikustom lagi). |
+
+## ⚙️ Cara Kerja
+
+1. Header Scrollable
+
+    - Lebar setiap header item fix (stepWidth = 100).
+
+    - Jika total lebar < perangkat, item otomatis di-center; jika lebih, bisa digeser horizontal.
+
+    - Ketika current berubah, ScrollView.scrollTo() memastikan item aktif selalu di tengah layar.
+
+2. Lingkaran Status
+
+    - isActive → lingkaran berwarna solid (Color.info[500]).
+
+    - isCompleted (index < current) → gaya sama dengan aktif (bisa diubah jika ingin beda).
+
+    - Item terakhir otomatis tanpa garis setelah lingkaran.
+
+3. Konten
+
+    - Hanya langkah aktif yang dirender di area konten (childrenArray[current]).
+
+    - Jika konten berupa FlatList, properti nestedScrollEnabled diaktifkan agar scrolling mulus di nested list.
+
+## 💡 Tips & Praktik Terbaik
+
+| Kebutuhan                 | Saran Implementasi                                                                                  |
+| ------------------------- | --------------------------------------------------------------------------------------------------- |
+| **Navigasi Manual**       | Ubah state `current` dari luar (`setCurrentStep`).                                                  |
+| **Validasi Tiap Langkah** | Jalankan pengecekan sebelum menaikkan `current`; mis. pastikan form valid.                          |
+| **Kustom Warna/Ikon**     | Edit `COLOR_MAP` atau tambahkan prop `icon` pada `StepItem` jika ingin ikon berbeda di bullet.      |
+| **Langkah Dinamis**       | Karena `children` berupa array, Anda bisa `.filter()` atau `.slice()` sebelum mem-pass ke `<Step>`. |
+| **Tema Gelap**            | Sesuaikan `Color.info[500]`, `Color.info[50]`, dll.                                                 |

package/lib/module/Timeline/README.md

@@ -0,0 +1,80 @@
+# 🗂️ Timeline & TimelineItem
+Timeline menampilkan rangkaian peristiwa secara vertikal—mirip “stepper” atau “activity feed”.
+Setiap node diwakili oleh TimelineItem yang menampilkan titik (bullet icon) dan garis vertikal terhubung.
+
+## Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import Timeline from '@herca/rn-kit/Timeline';
+import TimelineItem from '@herca/rn-kit/Timeline/TimelineItem';
+
+export default function OrderHistory() {
+  return (
+    <Timeline>
+      <TimelineItem color="success">
+        <Text>Pesanan dibuat • 10 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="primary">
+        <Text>Dikemas • 11 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="warning">
+        <Text>Dalam pengiriman • 12 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="danger">
+        <Text>Gagal diterima • 14 Jan 2025</Text>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
+```
+
+## Props
+
+### Timeline
+| Prop       | Type        | Wajib | Default | Deskripsi                          |
+| ---------- | ----------- | ----- | ------- | ---------------------------------- |
+| `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `TimelineItem`. |
+
+
+### TimelineItem
+| Prop       | Type                                                          | Wajib | Default     | Deskripsi                                             |
+| ---------- | ------------------------------------------------------------- | ----- | ----------- | ----------------------------------------------------- |
+| `children` | `ReactNode`                                                   | ✅     | —           | Konten untuk node timeline: teks, ikon tambahan, dsb. |
+| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌     | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal. |
+
+
+## ⚙️ Cara Kerja
+
+1. Bullet & Line
+
+    - Bullet dirender dengan komponen Icon (name="RadioButton") memakai warna dari color.
+
+    - Garis vertikal (borderLeftWidth: 1) menggunakan borderStyle: 'dashed'. Tingginya dihitung secara dinamis (contentHeight - 20) agar garis mulai tepat di bawah bullet.
+
+2. Penghitungan Tinggi
+
+    - onLayout pada wrapper konten mengukur tinggi aktual item.
+
+    - Hasil pengukuran dipakai untuk menyesuaikan panjang garis, menjaga visual konsisten meskipun konten memiliki tinggi berbeda.
+
+3. Layout
+
+    - Komponen dibangun dengan flexDirection: 'row', bullet di kiri, konten di kanan (flex: 1).
+
+    - Margin horizontal (marginRight: 8) menjaga jarak antara bullet dan konten.
+
+## 💡 Tips Penggunaan
+- Item Terakhir Tanpa Garis
+Bila ingin menghilangkan garis pada item terakhir, buat prop opsional mis. isLast dan kondisikan tinggi garis menjadi 0.
+
+- Interaktif
+Anda bebas menambahkan tombol, TouchableOpacity, atau ikon status di dalam children.
+
+- Kustomisasi Warna
+Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.

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":[]}