@herca/rn-kit 0.1.33 → 0.1.35

package/src/Icon/icons/ShieldFillChecked.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ShieldCheckedFill: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M10.0151 1.66602C8.14839 2.59185 6.66667 3.33268 2.5 4.16602C2.5 5.11352 2.5 8.08428 2.5 9.07344C2.5 14.6293 7.2225 17.4068 10 18.3327C12.7775 17.4068 17.5 14.6293 17.5 9.07344C17.5 8.05261 17.5 5.16102 17.5 4.16602C13.3333 3.33268 11.8517 2.59185 10.0151 1.66602ZM12.9517 8.77437L9.61833 12.1077C9.49666 12.2294 9.33664 12.291 9.17664 12.291C9.01663 12.291 8.85661 12.2302 8.73494 12.1077L7.06828 10.441C6.82411 10.1969 6.82411 9.80101 7.06828 9.55684C7.31244 9.31268 7.70831 9.31268 7.95247 9.55684L9.17745 10.7818L12.0691 7.89018C12.3133 7.64601 12.7091 7.64601 12.9533 7.89018C13.1975 8.13434 13.1958 8.53021 12.9517 8.77437Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ShieldCheckedFill;

package/src/Icon/type.tsx

@@ -61,6 +61,12 @@ export type IconNameProps =
   | 'Italic'
   | 'UnderLine'
   | 'settings-slider'
+  | 'location-pin-fill'
+  | 'discount-fill'
+  | 'rotate-square-fill'
+  | 'copy-fill'
+  | 'copy-text-fill'
+  | 'shield-checked-fill'
   | 'whatsapp-fill';
 
 export interface IconProps {

package/src/Input/Input.tsx

@@ -20,6 +20,7 @@ const Input: React.FC<InputProps> = ({
   onPressIconRight,
   secureTextEntry = false,
   iconRightColor,
+  prefix,
   ...rest
 }) => {
   const [inputValue, setInputValue] = useState(value || '');
@@ -49,26 +50,16 @@ const Input: React.FC<InputProps> = ({
         ]}
       >
         {icon && (
-          <TouchableOpacity
-            onPress={onPressIconLeft}
-            style={styles.iconLeft}
-            hitSlop={10}
-          >
+          <TouchableOpacity onPress={onPressIconLeft} hitSlop={10}>
             <Icon name={icon} size={20} color="#888" />
           </TouchableOpacity>
         )}
 
+        {prefix && <View style={styles.prefixContainer}>{prefix}</View>}
+
         <TextInput
           {...rest}
-          style={[
-            styles.input,
-            icon && { paddingLeft: 40 },
-            showRightIcons && { paddingRight: 40 },
-            showRightIcons &&
-              clearButton &&
-              inputValue !== '' && { paddingRight: 65 },
-            style,
-          ]}
+          style={[styles.input, style]}
           secureTextEntry={secureTextEntry}
           value={inputValue}
           onChangeText={handleChange}
@@ -80,7 +71,7 @@ const Input: React.FC<InputProps> = ({
             {clearButton && inputValue !== '' && (
               <TouchableOpacity
                 onPress={handleClear}
-                style={[{ marginRight: iconRight ? 8 : 0 }]}
+                style={iconRight && styles.mr8}
               >
                 <Icon name="x-circle" size={20} color="#aaa" />
               </TouchableOpacity>
@@ -118,31 +109,32 @@ const styles = StyleSheet.create({
     position: 'relative',
     height: 40,
     borderRadius: 8,
-    gap: 8,
+    gap: 4,
+    paddingHorizontal: 12,
     borderWidth: 1,
     backgroundColor: Color.base.white100,
     justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   input: {
     height: 37,
-    paddingHorizontal: 12,
     paddingTop: 0,
     paddingBottom: 0,
     fontSize: 16,
     color: '#333',
     flex: 1,
   },
-  iconLeft: {
-    position: 'absolute',
-    left: 12,
-    zIndex: 1,
-  },
   rightContainer: {
-    position: 'absolute',
-    right: 12,
     flexDirection: 'row',
     alignItems: 'center',
-    zIndex: 1,
+  },
+  prefixContainer: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  mr8: {
+    marginRight: 8,
   },
 });
 

package/src/Input/README_INPUT.md

@@ -6,21 +6,22 @@ Komponen `Input` ini adalah komponen input teks yang dapat dikustomisasi dengan
 
 ## 🔧 Props
 
-| Prop             | Tipe               | Deskripsi                                                                 |
-|------------------|--------------------|---------------------------------------------------------------------------|
-| `label`          | `string`           | Label yang ditampilkan di atas input                                     |
-| `value`          | `string`           | Nilai dari input (kontrol dari luar)                                     |
-| `onChange`       | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                           |
-| `icon`           | `string`           | Nama ikon (kiri) dari library `Icon`                                     |
-| `iconRight`      | `string`           | Nama ikon kanan dari library `Icon`                                      |
-| `clearButton`    | `boolean`          | Menampilkan tombol `x` untuk menghapus input                             |
-| `hasError`       | `boolean`          | Menandai input error, border akan berubah merah                          |
-| `hint`           | `string`           | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk    |
-| `onPressIconLeft` | `() => void`      | Fungsi saat ikon kiri diklik                                             |
-| `onPressIconRight` | `() => void`    | Fungsi saat ikon kanan diklik                                            |
-| `secureTextEntry`| `boolean`          | Jika `true`, menyembunyikan input (untuk password)                       |
-| `style`          | `ViewStyle`        | Style tambahan untuk input                                               |
-| `...rest`        | `TextInputProps`   | Props lain dari React Native `TextInput`                                 |
+| Prop               | Tipe                      | Deskripsi                                                             |
+| ------------------ | ------------------------- | --------------------------------------------------------------------- |
+| `label`            | `string`                  | Label yang ditampilkan di atas input                                  |
+| `value`            | `string`                  | Nilai dari input (kontrol dari luar)                                  |
+| `onChange`         | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                              |
+| `icon`             | `string`                  | Nama ikon (kiri) dari library `Icon`                                  |
+| `iconRight`        | `string`                  | Nama ikon kanan dari library `Icon`                                   |
+| `clearButton`      | `boolean`                 | Menampilkan tombol `x` untuk menghapus input                          |
+| `hasError`         | `boolean`                 | Menandai input error, border akan berubah merah                       |
+| `hint`             | `string`                  | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk |
+| `onPressIconLeft`  | `() => void`              | Fungsi saat ikon kiri diklik                                          |
+| `onPressIconRight` | `() => void`              | Fungsi saat ikon kanan diklik                                         |
+| `secureTextEntry`  | `boolean`                 | Jika `true`, menyembunyikan input (untuk password)                    |
+| `style`            | `ViewStyle`               | Style tambahan untuk input                                            |
+| `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react         |
+| `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                              |
 
 ---
 
@@ -49,3 +50,4 @@ export default function MyForm() {
     </View>
   );
 }
+```

package/src/Input/type.tsx

@@ -13,6 +13,7 @@ export interface InputProps extends TextInputProps {
   onChangeText?: (val: string) => void;
   secureTextEntry?: boolean;
   iconRightColor?: string;
+  prefix?: React.ReactNode;
 }
 
 export interface TextAreaProps extends InputProps {

package/src/Tab/README.md

@@ -2,13 +2,56 @@
 
 Komponen tab ringan dan fleksibel untuk React Native yang mendukung:
 
-* ✅ Swipe kiri/kanan antar tab
-* ✅ Scroll vertikal di dalam konten tiap tab
-* ✅ Tampilan tab yang bisa disesuaikan
-* ✅ Tanpa dependensi eksternal (tidak butuh react-navigation)
+- ✅ Swipe kiri/kanan antar tab
+- ✅ Scroll vertikal di dalam konten tiap tab
+- ✅ Tampilan tab yang bisa disesuaikan
+- ✅ Tanpa dependensi eksternal (tidak butuh react-navigation)
 
 ---
 
+## ⚙️ Instalasi
+
+Komponen tab ini dibangun menggunakan [react-native-pager-view](https://github.com/callstack/react-native-pager-view) untuk mengatur perpindahan tab secara swipe kiri/kanan.
+Pastikan Anda menginstal dependensi ini sebelum menggunakan komponen.
+
+### 1. Install Dependensi
+
+```sh
+# Menggunakan npm
+npm install react-native-pager-view
+
+# Menggunakan yarn
+yarn add react-native-pager-view
+```
+
+### 2. Konfigurasi Platform
+
+#### iOS
+
+Setelah instalasi, jalankan perintah berikut untuk meng-install pod:
+
+```sh
+cd ios && pod install && cd ..
+```
+
+Tidak ada konfigurasi tambahan untuk iOS, namun pastikan proyek Anda sudah menggunakan **minimum iOS 11** atau sesuai rekomendasi React Native agar kompatibel.
+
+#### Android
+
+`react-native-pager-view` akan otomatis ter-link di Android tanpa perlu langkah tambahan.
+Namun, Anda perlu memastikan bahwa **minimum SDK version** Anda adalah 21 atau lebih tinggi.
+Periksa file `android/app/build.gradle`:
+
+```gradle
+android {
+  defaultConfig {
+    minSdkVersion = 21
+  }
+}
+```
+
+Jika nilai `minSdkVersion` di bawah 21, tingkatkan agar komponen dapat berjalan dengan baik.
+
 ## 💡 Contoh Penggunaan
 
 ```tsx
@@ -33,8 +76,8 @@ export default function App() {
 
 ### 1. Navigasi Tab
 
-* Tap pada header tab untuk berpindah
-* Swipe kiri/kanan untuk berpindah antar tab
+- Tap pada header tab untuk berpindah
+- Swipe kiri/kanan untuk berpindah antar tab
 
 ### 2. Konten Scrollable
 

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'\| 'info'\| 'orange'` | ❌    | `'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

@@ -9,30 +9,27 @@ const COLOR_MAP = {
   success: Color.success[500],
   purple: Color.purple[500],
   danger: Color.danger[500],
+  info: Color.info[500],
+  default: Color.gray[700],
+  orange: Color.orange[500],
 };
 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 +37,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 +72,10 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  dashes: {
+    width: 1,
+    height: 4,
+    backgroundColor: Color.gray[400],
+    marginVertical: 2,
+  },
 });

package/src/index.tsx

@@ -86,3 +86,4 @@ 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';
+export { default as BadgeIcon } from './BadgeIcon/BadgeIcon';