@herca/rn-kit 0.1.32 → 0.1.34

package/src/Timeline/README.md

@@ -1,4 +1,5 @@
 # 🗂️ 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.
 
@@ -31,50 +32,48 @@ export default function OrderHistory() {
     </Timeline>
   );
 }
-
 ```
 
 ## Props
 
 ### Timeline
+
 | Prop       | Type        | Wajib | Default | Deskripsi                          |
 | ---------- | ----------- | ----- | ------- | ---------------------------------- |
-| `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `TimelineItem`. |
-
+| `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. |
 
+| 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.            |
+| `isLast`   | `boolean`                                                     | ❌    | `false`     | Menentukan apakah garis garis di kiri itu dimunculkan atau tidak |
 
 ## ⚙️ Cara Kerja
 
 1. Bullet & Line
+   - Bullet dirender dengan komponen Icon (name="RadioButton") memakai warna dari color.
 
-    - 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.
+   - 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.
 
-    - onLayout pada wrapper konten mengukur tinggi aktual item.
-
-    - Hasil pengukuran dipakai untuk menyesuaikan panjang garis, menjaga visual konsisten meskipun konten memiliki tinggi berbeda.
+   - 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).
 
-    - Komponen dibangun dengan flexDirection: 'row', bullet di kiri, konten di kanan (flex: 1).
-
-    - Margin horizontal (marginRight: 8) menjaga jarak antara bullet dan konten.
+   - 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.
+  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.
+  Anda bebas menambahkan tombol, TouchableOpacity, atau ikon status di dalam children.
 
 - Kustomisasi Warna
-Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.
+  Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.

package/src/Timeline/TimelineItem.tsx

@@ -15,24 +15,18 @@ type ColorKey = keyof typeof COLOR_MAP;
 interface TimelineItemProps {
   children: React.ReactNode;
   color?: ColorKey;
+  isLast?: boolean;
 }
 
 export default function TimelineItem({
   children,
   color = 'primary',
+  isLast = false,
 }: TimelineItemProps) {
   const [contentHeight, setContentHeight] = useState(0);
   const renderDashes = (count: number) => {
     return Array.from({ length: count }).map((_, index) => (
-      <View
-        key={index}
-        style={{
-          width: 1,
-          height: 4,
-          backgroundColor: Color.gray[400],
-          marginVertical: 2,
-        }}
-      />
+      <View key={index} style={styles.dashes} />
     ));
   };
 
@@ -40,7 +34,9 @@ export default function TimelineItem({
     <View style={styles.container}>
       <View style={styles.contentLeft}>
         <Icon name="RadioButton" color={COLOR_MAP[color]} />
-        <View>{renderDashes(Math.floor((contentHeight - 20) / 6))}</View>
+        <View>
+          {!isLast && renderDashes(Math.floor((contentHeight - 20) / 6))}
+        </View>
       </View>
       <View
         style={styles.flex}
@@ -73,4 +69,10 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  dashes: {
+    width: 1,
+    height: 4,
+    backgroundColor: Color.gray[400],
+    marginVertical: 2,
+  },
 });

package/src/index.tsx

@@ -26,6 +26,7 @@ export { default as Gap } from './Ui/Gap';
 export { default as Grid } from './Ui/Grid';
 export { default as Col } from './Ui/Col';
 export { default as Chip } from './Chip/Chip';
+export { default as ChipItem } from './Chip/ChipItem';
 export type {
   ChipSelectedProps,
   ChipOnSelectProps,
@@ -82,3 +83,6 @@ export { default as TextArea } from './Input/TextArea';
 export { default as TextEditor } from './TextEditor/TextEditor';
 // export { default as PdfView } from './FileView/PdfView';
 export { ToastProvider, useToast } from './Toast/ToastContext';
+export { default as Skeleton } from './Skeleton/Skeleton';
+export type { SkeletonProps } from './Skeleton/type';
+export { default as CounterButton } from './CounterButton/CounterButton';