@herca/rn-kit 0.1.34 → 0.1.36

package/src/BadgeIcon/README.md

@@ -0,0 +1,77 @@
+# BadgeIcon Component
+
+`BadgeIcon` adalah komponen React Native untuk menampilkan **badge** yang dapat berisi **ikon** atau **konten custom** (children). Komponen ini fleksibel dalam ukuran (`size`), warna (`color`), dan varian (`variant`).
+
+---
+
+## ⚙️ Props
+
+### **BaseBadgeProps**
+
+| Prop      | Tipe                                 | Default     | Deskripsi                                                                 |
+| --------- | ------------------------------------ | ----------- | ------------------------------------------------------------------------- |
+| `color`   | `Variant` \| `HexColor`              | `"default"` | Warna badge. Bisa berupa nama varian yang tersedia atau kode warna HEX.   |
+| `size`    | `"small"` \| `"medium"` \| `"large"` | `"medium"`  | Ukuran badge. Mengatur tinggi, lebar minimum, padding, dan radius border. |
+| `variant` | `Variant`                            | -           | Alias untuk varian warna (tidak digunakan langsung di komponen ini).      |
+
+---
+
+### **IconBadgeProps** (Badge dengan Icon)
+
+| Prop       | Tipe            | Deskripsi                                       |
+| ---------- | --------------- | ----------------------------------------------- |
+| `icon`     | `IconNameProps` | Nama ikon yang akan ditampilkan.                |
+| `children` | `never`         | Tidak boleh ada children jika menggunakan ikon. |
+
+---
+
+### **ChildrenBadgeProps** (Badge dengan Konten Custom)
+
+| Prop       | Tipe              | Deskripsi                                       |
+| ---------- | ----------------- | ----------------------------------------------- |
+| `children` | `React.ReactNode` | Konten yang akan ditampilkan di dalam badge.    |
+| `icon`     | `never`           | Tidak boleh ada icon jika menggunakan children. |
+
+---
+
+## 🎨 Varian Warna (`Variant`)
+
+| Nama Varian | Background          | Font Color            |
+| ----------- | ------------------- | --------------------- |
+| `default`   | `Color.gray[100]`   | `Color.gray[800]`     |
+| `primary`   | `Color.primary[50]` | `Color.primary[1000]` |
+| `success`   | `Color.success[50]` | `Color.success[500]`  |
+| `info`      | `Color.info[50]`    | `Color.info[500]`     |
+| `danger`    | `Color.danger[50]`  | `Color.danger[600]`   |
+| `warning`   | `Color.warning[50]` | `Color.warning[300]`  |
+| `orange`    | `Color.orange[50]`  | `Color.orange[500]`   |
+| `purple`    | `Color.purple[50]`  | `Color.purple[500]`   |
+
+> Jika `color` berupa kode HEX, maka background badge akan otomatis diubah menjadi warna transparan (`opacity 0.1`) menggunakan helper `hexToRGBA`.
+
+---
+
+## 📏 Ukuran Badge (`size`)
+
+| Ukuran   | minHeight | minWidth | Padding | BorderRadius | Icon Size |
+| -------- | --------- | -------- | ------- | ------------ | --------- |
+| `small`  | 24        | 24       | 4       | 4            | 16        |
+| `medium` | 32        | 32       | 4       | 4            | 24        |
+| `large`  | 40        | 40       | 8       | 4            | 24        |
+
+---
+
+## 💻 Contoh Penggunaan
+
+```tsx
+<BadgeIcon icon="check" size="small" color="success" />
+```
+
+---
+
+## 🛠 Catatan Implementasi
+
+- Jika `color` adalah varian (`default`, `primary`, dsb.), warna background dan font color akan diambil dari konstanta `COLORS`.
+- Jika `color` adalah kode HEX (`#rrggbb`), maka background akan menggunakan versi transparan dari warna tersebut.
+- Menggunakan helper `hexToRGBA` untuk mengubah HEX menjadi warna RGBA.
+- Komponen `Icon` digunakan untuk menampilkan ikon sesuai ukuran badge.

package/src/BadgeIcon/type.tsx

@@ -0,0 +1,21 @@
+type Variant =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'orange'
+  | 'purple';
+
+type Size = 'small' | 'medium' | 'large';
+type HexColor = `#${string}`;
+
+export type { HexColor, Size, Variant };
+
+export interface IconSizeStyle {
+  minHeight: number;
+  minWidth: number;
+  padding: number;
+  borderRadius: number;
+}

package/src/BottomSheet/BottomSheet.tsx

@@ -22,7 +22,9 @@ import type { BottomSheetHeighProps, BottomSheetProops } from './type';
 const statusBarHeight =
   Platform.OS === 'android' && Platform.Version < 35
     ? (StatusBar.currentHeight ?? 24)
-    : 65;
+    : Platform.OS === 'android' && Platform.Version >= 35
+      ? 80
+      : 65;
 const screenHeight = Dimensions.get('window').height;
 const actualScreenHeight = screenHeight - statusBarHeight;
 const DEFAULT_PADDING_BOTTOM = 40;

package/src/CheckBox/CheckBox.tsx

@@ -1,43 +1,46 @@
-import React, { useState, useEffect } from 'react';
-import { Pressable, View, Text, StyleSheet } from 'react-native';
-import { Color, Icon } from '@herca/rn-kit';
+import { Color, Icon, Typography } from '@herca/rn-kit';
+import React, { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import type { Variant } from './type';
 // import type { ColorVariantType } from '../Color/type';
 
 interface CheckBoxProps {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   label?: string | React.ReactNode;
+  hint?: string;
   disabled?: boolean;
   renderLabel?: () => React.ReactNode;
-  // color?: ColorVariantType;
+  renderHint?: () => React.ReactNode;
+  color?: Variant;
 }
 
-// const COLOR_MAP: Record<
-//   ColorVariantType,
-//   {
-//     backgroundColor: ColorValue;
-//     backgroundColorDisabled: ColorValue;
-//   }
-// > = {
-//   primary : {
-//     backgroundColor : Color.primary[1000],
-//     backgroundColorDisabled : Color.primary[100],
-//   },
-//   danger: {
-//     backgroundColor : Color.danger[500],
-//     backgroundColorDisabled : Color.danger[100],
-//   },
-// }
+const COLORS: Record<Variant, { background: string; borderColor: string }> = {
+  default: { background: Color.gray[100], borderColor: Color.gray[500] },
+  primary: {
+    background: Color.primary[1000],
+    borderColor: Color.primary[1000],
+  },
+  success: { background: Color.success[500], borderColor: Color.success[500] },
+  info: { background: Color.info[500], borderColor: Color.info[500] },
+  danger: { background: Color.danger[500], borderColor: Color.danger[500] },
+  warning: { background: Color.warning[500], borderColor: Color.warning[500] },
+  orange: { background: Color.orange[500], borderColor: Color.orange[500] },
+  purple: { background: Color.purple[500], borderColor: Color.purple[500] },
+};
+
 const CheckBox: React.FC<CheckBoxProps> = ({
   checked = false,
   onChange,
   label,
+  hint,
   disabled = false,
   renderLabel,
-  // color= 'primary'
+  renderHint,
+  color = 'primary',
 }) => {
   const [value, setValue] = useState<boolean>(false);
-  // const _selectedColor = COLOR_MAP[color];
+  const { background, borderColor } = COLORS[color];
 
   const handlePress = () => {
     const newValue = !value;
@@ -57,14 +60,31 @@ const CheckBox: React.FC<CheckBoxProps> = ({
       <View
         style={[
           styles.checkBox,
-          value && styles.checked,
+          value && {
+            backgroundColor: background,
+            borderColor,
+          },
           disabled && styles.disabled,
         ]}
       >
         {value && <Icon name="Check" size={14} color={Color.base.white100} />}
       </View>
-      {label && <Text style={styles.label}>{label}</Text>}
-      {renderLabel?.()}
+      <View>
+        {label && (
+          <Typography variant="t2" weight="medium" color={Color.gray[900]}>
+            {label}
+          </Typography>
+        )}
+        {hint && (
+          <Typography variant="t3" weight="medium" color={Color.gray[600]}>
+            {hint}
+          </Typography>
+        )}
+      </View>
+      <View>
+        {renderLabel?.()}
+        {renderHint?.()}
+      </View>
     </Pressable>
   );
 };
@@ -91,10 +111,6 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.5,
   },
-  label: {
-    fontSize: 14,
-    color: '#333',
-  },
 });
 
 export default CheckBox;

package/src/CheckBox/CheckBoxList.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Typography, Color, CheckBox } from '@herca/rn-kit';
+import type { Variant } from './type';
 
 interface CheckBoxListItem {
   label: string;
   value: string;
+  hint?: string;
 }
 
 interface CheckBoxListProps {
@@ -12,6 +14,7 @@ interface CheckBoxListProps {
   selectedValues: string[];
   onChange: (selected: string[]) => void;
   direction?: 'vertical' | 'horizontal';
+  color?: Variant;
 }
 
 const CheckBoxList: React.FC<CheckBoxListProps> = ({
@@ -19,6 +22,7 @@ const CheckBoxList: React.FC<CheckBoxListProps> = ({
   selectedValues,
   onChange,
   direction = 'vertical',
+  color = 'primary',
 }) => {
   const toggleValue = (value: string) => {
     const newSelected = selectedValues.includes(value)
@@ -39,12 +43,20 @@ const CheckBoxList: React.FC<CheckBoxListProps> = ({
         <CheckBox
           key={item.value}
           checked={selectedValues.includes(item.value)}
+          color={color}
           onChange={() => toggleValue(item.value)}
           renderLabel={() => (
             <Typography variant="t2" weight="medium" color={Color.gray[800]}>
               {item.label}
             </Typography>
           )}
+          renderHint={() =>
+            item.hint ? (
+              <Typography variant="t3" weight="medium" color={Color.gray[700]}>
+                {item.hint}
+              </Typography>
+            ) : undefined
+          }
         />
       ))}
     </View>

package/src/CheckBox/README_CHECKBOX.md

@@ -37,10 +37,13 @@ export default function App() {
 
 ##⚙️ Props
 
-| Prop          | Tipe                         | Deskripsi                                                    |                                                                |
-| ------------- | ---------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------- |
-| `checked`     | `boolean`                    | Status awal checkbox (centang atau tidak). Default: `false`. |                                                                |
-| `onChange`    | `(checked: boolean) => void` | Fungsi callback saat status checkbox berubah.                |                                                                |
-| `label`       | \`string \\                  | React.ReactNode\`                                            | Label teks atau komponen yang ditampilkan di samping checkbox. |
-| `disabled`    | `boolean`                    | Jika `true`, checkbox tidak bisa ditekan. Default: `false`.  |                                                                |
-| `renderLabel` | `() => React.ReactNode`      | Alternatif render untuk label kustom selain `label`.         |                                                                |
+| Prop          | Tipe                                                                   | Deskripsi                                                                    |
+| ------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `checked`     | `boolean`                                                              | Status awal checkbox (centang atau tidak). Default: `false`.                 |
+| `onChange`    | `(checked: boolean) => void`                                           | Fungsi callback saat status checkbox berubah.                                |
+| `label`       | `string `                                                              | Label teks atau komponen yang ditampilkan di samping checkbox.               |
+| `hint`        | `string `                                                              | Label teks atau komponen yang ditampilkan di samping checkbox dibawah label. |
+| `color`       | `primary \| danger \| warning \| orange \| info \| success \| purple ` | warna background jika checkbox di centang                                    |
+| `disabled`    | `boolean`                                                              | Jika `true`, checkbox tidak bisa ditekan. Default: `false`.                  |
+| `renderLabel` | `() => React.ReactNode`                                                | Alternatif render untuk label kustom selain `label`.                         |
+| `renderHint`  | `() => React.ReactNode`                                                | Alternatif render untuk hint kustom selain `hint`.                           |

package/src/CheckBox/README_CHECKBOXLIST.md

@@ -14,6 +14,12 @@ import CheckBoxList from './CheckBoxList';
 export default function App() {
   const [selected, setSelected] = useState<string[]>([]);
 
+  interface CheckBoxListItem {
+    label: string;
+    value: string;
+    hint?: string;
+  }
+
   return (
     <View>
       <CheckBoxList
@@ -33,10 +39,10 @@ export default function App() {
 
 ## ⚙️ Props
 
-| Prop             | Tipe                           | Deskripsi                                                                    |                                                 |
-| ---------------- | ------------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------- |
-| `items`          | `CheckBoxListItem[]`           | Daftar item yang akan ditampilkan. Setiap item memiliki `label` dan `value`. |                                                 |
-| `selectedValues` | `string[]`                     | Nilai-nilai yang saat ini sedang dipilih.                                    |                                                 |
-| `onChange`       | `(selected: string[]) => void` | Callback saat nilai pilihan berubah.                                         |                                                 |
-| `direction`      | \`'vertical'                   | 'horizontal'\` (opsional)                                                    | Arah tampilan checkbox (default: `'vertical'`). |
-
+| Prop             | Tipe                                                                   | Deskripsi                                                                    |                                                 |
+| ---------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------- |
+| `items`          | `CheckBoxListItem[]`                                                   | Daftar item yang akan ditampilkan. Setiap item memiliki `label` dan `value`. |                                                 |
+| `selectedValues` | `string[]`                                                             | Nilai-nilai yang saat ini sedang dipilih.                                    |                                                 |
+| `onChange`       | `(selected: string[]) => void`                                         | Callback saat nilai pilihan berubah.                                         |                                                 |
+| `direction`      | \`'vertical'                                                           | 'horizontal'\` (opsional)                                                    | Arah tampilan checkbox (default: `'vertical'`). |
+| `color`          | `primary \| danger \| warning \| orange \| info \| success \| purple ` | warna background jika checkbox di centang                                    | Arah tampilan checkbox (default: `'vertical'`). |

package/src/CheckBox/type.ts

@@ -0,0 +1,9 @@
+export type Variant =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'orange'
+  | 'purple';

package/src/Icon/Icon.tsx

@@ -63,6 +63,9 @@ import SettingsSlider from './icons/SettingsSlider';
 import RotateSquareFill from './icons/RotateSquareFill';
 import LocationPinFill from './icons/LocationPinFill';
 import DiscountFill from './icons/DiscountFill';
+import CopyFill from './icons/CopyFill';
+import CopyTextFill from './icons/CopyTextFill';
+import ShieldCheckedFill from './icons/ShieldFillChecked';
 
 const icons: Record<
   IconNameProps,
@@ -130,6 +133,9 @@ const icons: Record<
   'rotate-square-fill': RotateSquareFill,
   'location-pin-fill': LocationPinFill,
   'discount-fill': DiscountFill,
+  'copy-fill': CopyFill,
+  'copy-text-fill': CopyTextFill,
+  'shield-checked-fill': ShieldCheckedFill,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -110,3 +110,6 @@ export default function App() {
 - rotate-square-fill
 - discount-fill
 - location-pin-fill
+- copy-fill
+- copy-text-fill
+- shield-checked-fill

package/src/Icon/icons/CopyFill.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 CopyFill: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path
+      d="M9.03333 13.3364C8.86 13.4098 8.67333 13.4764 8.47333 13.5431L7.42 13.8898C4.77333 14.7431 3.38 14.0298 2.52 11.3831L1.66667 8.74977C0.813332 6.1031 1.52 4.7031 4.16667 3.84977L5.19333 3.50977C5.06667 3.82977 4.96 4.19643 4.86 4.60977L4.20667 7.4031C3.47333 10.5431 4.54667 12.2764 7.68667 13.0231L8.80667 13.2898C8.88 13.3098 8.96 13.3231 9.03333 13.3364Z"
+      fill={color}
+    />
+    <Path
+      d="M11.4467 2.03682L10.3333 1.77682C8.10666 1.25015 6.78 1.68348 6 3.29682C5.8 3.70348 5.64 4.19682 5.50667 4.76348L4.85333 7.55682C4.2 10.3435 5.06 11.7168 7.84 12.3768L8.96 12.6435C9.34666 12.7368 9.70667 12.7968 10.04 12.8235C12.12 13.0235 13.2267 12.0501 13.7867 9.64348L14.44 6.85682C15.0933 4.07015 14.24 2.69015 11.4467 2.03682Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default CopyFill;

package/src/Icon/icons/CopyTextFill.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const CopyTextFill: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    style={style}
+    fill="none"
+  >
+    <Path
+      d="M15.2601 21.1611C14.9161 21.3251 14.5141 21.4471 14.0591 21.5291L7.48907 22.6792C5.29907 23.0692 4.00896 22.1692 3.62896 19.9792L2.08917 11.2292C1.69917 9.03916 2.59912 7.74916 4.78912 7.35916L6.58697 7.04312C6.79197 7.00712 6.97114 7.18615 6.93414 7.39115L5.75811 14.0492C5.22811 17.0792 6.65803 19.1191 9.67803 19.6491C9.67803 19.6491 14.8971 20.5661 15.1661 20.6181C15.4981 20.6781 15.5511 21.0321 15.2601 21.1611ZM21.9131 7.87516L20.3689 16.6291C19.997 18.7371 18.7811 19.6381 16.7361 19.3581C16.6581 19.3471 16.5881 19.3472 16.5071 19.3332L9.94195 18.1751C7.75295 17.7891 6.85209 16.5021 7.23809 14.3131L8.58111 6.69712L8.78204 5.55912C9.16804 3.37012 10.4551 2.46914 12.6441 2.85514L19.21 4.01316C21.398 4.39916 22.2991 5.68716 21.9131 7.87516ZM15.554 14.6651C15.626 14.2571 15.3541 13.8681 14.9461 13.7961L10.8421 13.0721C10.4361 12.9991 10.0452 13.2731 9.97418 13.6801C9.90218 14.0881 10.1741 14.4772 10.5821 14.5492L14.6861 15.2732C14.7301 15.2812 14.7739 15.2842 14.8169 15.2842C15.1739 15.2852 15.49 15.0291 15.554 14.6651ZM18.597 11.8041C18.669 11.3961 18.3971 11.0072 17.9891 10.9352L11.4241 9.77713C11.0201 9.70613 10.627 9.97817 10.556 10.3852C10.484 10.7932 10.7561 11.1821 11.1641 11.2541L17.7291 12.4121C17.7731 12.4201 17.8172 12.4231 17.8602 12.4231C18.2172 12.4231 18.533 12.1671 18.597 11.8041ZM19.2972 8.54215C19.3692 8.13415 19.097 7.74513 18.689 7.67313L12.1241 6.51511C11.7201 6.44311 11.3272 6.71614 11.2562 7.12314C11.1842 7.53114 11.4561 7.92016 11.8641 7.99216L18.429 9.15012C18.473 9.15812 18.5171 9.16117 18.5601 9.16117C18.9171 9.16217 19.2332 8.90615 19.2972 8.54215Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default CopyTextFill;

package/src/Icon/icons/RadioButton.tsx

@@ -14,7 +14,7 @@ const RadioButton: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
       d="M18 3.37V9.84998C18 10.07 17.9799 10.29 17.9299 10.5H13.8799C12.0099 10.5 10.5 12.01 10.5 13.88V17.9301C10.29 17.9801 10.0701 18 9.8501 18H3.37988C1.11988 18 0 16.87 0 14.62V3.37C0 1.12 1.11988 0 3.37988 0H14.6201C16.8801 0 18 1.12 18 3.37ZM12 13.88V17.22C12.09 17.16 12.16 17.09 12.24 17.01L17.01 12.24C17.09 12.16 17.16 12.09 17.22 12H13.8799C12.8399 12 12 12.84 12 13.88Z"
       fill={Color.base.white100}
     />
-    <Circle cx="10" cy="10" r="9.5" fill="#FFFAEB" stroke={color} />
+    <Circle cx="10" cy="10" r="9.5" stroke={color} />
     <Circle cx="10" cy="10" r="4" fill={color} />
   </Svg>
 );

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

@@ -64,6 +64,9 @@ export type IconNameProps =
   | '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

@@ -94,6 +94,7 @@ Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawa
 | `children`     | `React.ReactNode`         | Daftar elemen `<TabItem />`   |
 | `current?`     | `number`                  | Indeks tab aktif (default: 0) |
 | `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah   |
+| `renderHeader` | `React.ReactElement` |  tambahan react element di atas tab  |
 
 ### `TabItemProps`