@herca/rn-kit 0.1.112 → 0.1.114

package/src/Input/partials/InputFile/ItemPreview.tsx

@@ -9,6 +9,7 @@ import Card from '../../../Ui/Card';
 import Color from '../../../Color/Color';
 import Typography from '../../../Typography/Typography';
 import Icon from '../../../Icon';
+import { getTestID } from '../../../helpers/getTestID';
 import type { FileItem } from '../../type';
 
 interface Props {
@@ -19,6 +20,7 @@ interface Props {
   onDelete: (index: number) => void;
   variant?: 'default' | 'small';
   loading?: boolean;
+  testID?: string;
 }
 
 export default function ItemPreview({
@@ -29,12 +31,14 @@ export default function ItemPreview({
   onReplace,
   variant = 'default',
   loading = false,
+  testID,
 }: Props) {
   const Wrapper = variant === 'default' ? Card : View;
 
   return (
     <Wrapper>
       <TouchableOpacity
+        testID={testID}
         onPress={onPress}
         style={styles.containerPreview}
         activeOpacity={0.7}
@@ -125,11 +129,17 @@ export default function ItemPreview({
               />
             )}
 
-            <TouchableOpacity onPress={() => onReplace(index)}>
+            <TouchableOpacity
+              testID={getTestID(testID, 'replace')}
+              onPress={() => onReplace(index)}
+            >
               <Icon name="rotate-right" size={18} color={Color.gray[700]} />
             </TouchableOpacity>
 
-            <TouchableOpacity onPress={() => onDelete(index)}>
+            <TouchableOpacity
+              testID={getTestID(testID, 'delete')}
+              onPress={() => onDelete(index)}
+            >
               <Icon name="Times" size={12} color={Color.gray[700]} />
             </TouchableOpacity>
           </View>

package/src/Input/partials/PickerField.tsx

@@ -0,0 +1,125 @@
+import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Color from '../../Color/Color';
+import Icon from '../../Icon/Icon';
+import Typography from '../../Typography/Typography';
+import { getTestID } from '../../helpers/getTestID';
+import { layouting } from '../../styles/layouting';
+import { spacing } from '../../styles/spacing';
+
+interface PickerFieldProps {
+  /** Omitted entirely when absent -- no empty element is left behind. */
+  label?: string;
+  placeholder: string;
+  placeholderEnd?: string;
+  mode?: 'single' | 'range';
+  /** Already formatted for display; the field does no formatting itself. */
+  display?: string | null;
+  displayEnd?: string | null;
+  hasClear?: boolean;
+  onPress: () => void;
+  onClear?: () => void;
+  testID?: string;
+}
+
+/**
+ * The read-only trigger a picker-backed field sits behind: a label, one or two
+ * pressable slots, and an optional clear button.
+ *
+ * Shared by InputMonth and InputYear so the two cannot drift apart visually,
+ * and so neither has to restate InputDate's markup. It holds no state and does
+ * no formatting -- callers pass strings that are ready to show.
+ */
+export default function PickerField({
+  label,
+  placeholder,
+  placeholderEnd,
+  mode = 'single',
+  display,
+  displayEnd,
+  hasClear,
+  onPress,
+  onClear,
+  testID,
+}: PickerFieldProps) {
+  return (
+    <View style={styles.gap4}>
+      {label ? (
+        <Typography
+          testID={getTestID(testID, 'label')}
+          variant="t2"
+          weight="semibold"
+          color={Color.gray[900]}
+        >
+          {label}
+        </Typography>
+      ) : null}
+
+      <View style={styles.wrapper}>
+        <Pressable
+          testID={getTestID(testID, 'trigger')}
+          style={[styles.pickerTrigger, !!display && styles.hasValue]}
+          onPress={onPress}
+        >
+          <Typography variant="t2" color={Color.gray[900]} weight="medium">
+            {display || placeholder}
+          </Typography>
+          <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
+            {hasClear && !!display && (
+              <TouchableOpacity
+                testID={getTestID(testID, 'clear')}
+                style={styles.clear}
+                onPress={onClear}
+              >
+                <Icon name="times-new" size={14} color="white" />
+              </TouchableOpacity>
+            )}
+            <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+          </View>
+        </Pressable>
+
+        {mode === 'range' && (
+          <Pressable
+            testID={getTestID(testID, 'trigger-end')}
+            style={[styles.pickerTrigger, !!displayEnd && styles.hasValue]}
+            onPress={onPress}
+          >
+            <Typography variant="t2" color={Color.gray[900]} weight="medium">
+              {displayEnd || placeholderEnd}
+            </Typography>
+            <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gap4: {
+    gap: 4,
+  },
+  pickerTrigger: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    flex: 1,
+  },
+  hasValue: {
+    borderColor: Color.primary[300],
+  },
+  wrapper: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+  clear: {
+    backgroundColor: Color.gray[600],
+    borderRadius: 999,
+    padding: 3,
+  },
+});

package/src/Input/type.tsx

@@ -90,6 +90,7 @@ export type FileItem = (PickedFile | ImageAsset) & FileItemExtras;
 export type DocumentType = (typeof types)[keyof typeof types];
 
 export interface BaseInputFileProps {
+  testID?: string;
   title?: string;
   accept?: string[] | DocumentType[];
   multiple?: boolean;
@@ -126,3 +127,16 @@ export type SmallVariantProps = BaseInputFileProps & {
 };
 
 export type InputFileProps = DefaultVariantProps | SmallVariantProps;
+
+/**
+ * What a picker-backed field reports back.
+ *
+ * `value` carries a single selection; `startValue`/`endValue` carry a range.
+ * Only one pair is ever populated, decided by the field's `mode`. Shared by
+ * InputMonth and InputYear so both read the same on the consumer side.
+ */
+export interface PickerFieldValue {
+  value: number | null;
+  startValue: number | null;
+  endValue: number | null;
+}

package/src/Label/Label.tsx

@@ -12,6 +12,7 @@ interface LabelProps {
   color?: string;
   icon?: IconNameProps;
   size?: 'medium' | 'small';
+  testID?: string;
 }
 
 type LabelColor = ColorVariantType;
@@ -73,6 +74,7 @@ export default function Label({
   icon,
   children,
   color = 'default',
+  testID,
 }: LabelProps) {
   const safeColor = validColors.includes(color as LabelColor)
     ? (color as LabelColor)
@@ -81,6 +83,7 @@ export default function Label({
 
   return (
     <View
+      testID={testID}
       style={[styles.container, { backgroundColor: colors.backgroundColor }]}
     >
       {children ? (

package/src/Label/README.md

@@ -11,6 +11,7 @@
 | `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.)                            |
+| `testID`   | `string`                                                                                         | -           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ---
 

package/src/LabelForm/LabelForm.tsx

@@ -6,15 +6,17 @@ interface Props {
   title: string;
   required?: boolean;
   color?: string;
+  testID?: string;
 }
 
 export default function LabelForm({
   title,
   required,
   color = Color.gray[900],
+  testID,
 }: Props) {
   return (
-    <View>
+    <View testID={testID}>
       <Typography variant="t2" weight="semibold" color={color}>
         {title}{' '}
         {required && (

package/src/List/List.tsx

@@ -4,13 +4,13 @@ import Color from '../Color/Color';
 import Theme from '../Theme/Theme';
 import type { ListItemProps, ListProps } from './type';
 
-export default function List({ children, style }: ListProps) {
+export default function List({ children, style, testID }: ListProps) {
   const validChildren = React.Children.toArray(children).filter((child) =>
     React.isValidElement(child)
   );
 
   return (
-    <View style={[styles.container, style]}>
+    <View testID={testID} style={[styles.container, style]}>
       {React.Children.map(validChildren, (child, index) => {
         const isLast = index === validChildren.length - 1;
         return React.isValidElement<ListItemProps>(child)

package/src/List/ListItem.tsx

@@ -8,11 +8,13 @@ export default function ListItem({
   onPress,
   style,
   isLast = false,
+  testID,
 }: ListItemProps) {
   const Wrapper = onPress ? TouchableOpacity : View;
 
   return (
     <Wrapper
+      testID={testID}
       onPress={onPress}
       style={[styles.container, !isLast && styles.withBorder, style]}
     >

package/src/List/README.md

@@ -38,6 +38,7 @@ export default function SettingMenu() {
 | ---------- | ----------- | ----- | ------- | ------------------------------ |
 | `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `ListItem`. |
 | `style`    | `ViewStyle` | ❌     | —       | Gaya tambahan untuk container. |
+| `testID`   | `string`    | ❌     | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ### ListItem
 | Prop       | Type                   | Wajib | Default | Deskripsi                                                                 |
@@ -47,3 +48,4 @@ export default function SettingMenu() {
 | `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.                           |
+| `testID`   | `string`               | ❌    | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |

package/src/List/type.tsx

@@ -6,9 +6,11 @@ export interface ListItemProps {
   style?: StyleProp<ViewStyle>;
   isLast?: boolean;
   index?: number;
+  testID?: string;
 }
 
 export interface ListProps {
   children: React.ReactNode;
   style?: ViewStyle;
+  testID?: string;
 }

package/src/Loading/Loading.tsx

@@ -6,6 +6,7 @@ interface LoadingProps {
   size?: 'small' | 'large' | number;
   color?: string;
   variant?: 'circle' | 'square';
+  testID?: string;
 }
 
 const Loading: React.FC<LoadingProps> = ({
@@ -13,9 +14,10 @@ const Loading: React.FC<LoadingProps> = ({
   size = 'large',
   color = '#007AFF',
   variant = 'circle',
+  testID,
 }) => {
   return (
-    <View style={styles.wrapper}>
+    <View testID={testID} style={styles.wrapper}>
       <View
         style={[
           styles.container,

package/src/Modal/Modal.tsx

@@ -1,4 +1,3 @@
-import { Color, Icon } from '@herca/rn-kit';
 import React, { useState, useEffect, useCallback } from 'react';
 import {
   View,
@@ -11,6 +10,9 @@ import {
   Platform,
   type ViewStyle,
 } from 'react-native';
+import Color from '../Color/Color';
+import Icon from '../Icon/Icon';
+import { getTestID } from '../helpers/getTestID';
 
 interface ModalPopUpProps {
   isOpen: boolean;
@@ -24,6 +26,7 @@ interface ModalPopUpProps {
   height?: DimensionValue;
   containerStyle?: ViewStyle;
   modalStyle?: ViewStyle;
+  testID?: string;
 }
 
 const ModalPopUp: React.FC<ModalPopUpProps> = ({
@@ -37,6 +40,7 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
   width = '90%',
   containerStyle,
   modalStyle,
+  testID,
 }) => {
   const [isVisible, setIsVisible] = useState(isOpen ?? false);
   const scaleAnim = useState(() => new Animated.Value(0))[0];
@@ -98,15 +102,23 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
       <View style={[styles.modalContainer, containerStyle]}>
         {backdrop && (
           <TouchableOpacity
+            testID={getTestID(testID, 'backdrop')}
             style={[styles.backdrop, styles.backdropTouch]}
             activeOpacity={1}
             onPress={handleBackdropPress}
           />
         )}
-        <Animated.View style={[styles.modalContent, modalContentStyle]}>
+        <Animated.View
+          testID={testID}
+          style={[styles.modalContent, modalContentStyle]}
+        >
           {closable && (
             <View style={styles.closeButtonContainer}>
-              <TouchableOpacity onPress={userClose} style={styles.closeButton}>
+              <TouchableOpacity
+                testID={getTestID(testID, 'close')}
+                onPress={userClose}
+                style={styles.closeButton}
+              >
                 <View style={styles.iconButtonClose}>
                   <Icon name="Times" size={13} color={Color.gray[900]} />
                 </View>

package/src/Modal/README.md

@@ -37,3 +37,4 @@ export default function ExampleModal() {
 | `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.                                        |
+| `testID`         | `string`                     | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan pada elemen konten modal (tanpa suffix); menurunkan `-backdrop` dan `-close`. |

package/src/Provider/RequiredUpdateAppsProvider.tsx

@@ -1,6 +1,15 @@
 import { useEffect } from 'react';
 import { Image, Platform, StyleSheet, View } from 'react-native';
-import { Button, Card, Color, Modal, Typography } from '..';
+// Imported from their own modules rather than the package barrel ('..'):
+// index.tsx re-exports Provider, so going through the barrel here made
+// index -> Provider -> index a cycle and dragged every native-backed export
+// (document picker, blob util, pdf, webview) into anything that renders a
+// Provider. Same modules, no cycle.
+import Button from '../Button/Button';
+import Card from '../Ui/Card';
+import Color from '../Color/Color';
+import Modal from '../Modal/Modal';
+import Typography from '../Typography/Typography';
 import type { RequiredUpdateAppsProviderProps } from './type';
 
 export default function RequiredUpdateAppsProvider({

package/src/RadioButton/README.md

@@ -18,6 +18,7 @@ import RadioButton from './RadioButton';
 | `selectedValue`  | `string \| null`                           | `null`      | Nilai yang saat ini dipilih oleh pengguna.                               |
 | `onChange`       | `(value: string) => void`                  | -           | Fungsi callback saat item dipilih.                                       |
 | `direction`      | `'vertical' \| 'horizontal'`               | `'vertical'`| Arah layout dari item radio: vertikal atau horizontal.                   |
+| `testID`         | `string`                                   | -           | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-option-{value}` dan `-option-{value}-label` untuk tiap item.  |
 
 ## 📄 Tipe `RadioButtonItem`
 

package/src/RadioButton/RadioButton.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, Pressable } from 'react-native';
-import { Typography, Color } from '@herca/rn-kit';
+import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
+import { getTestID } from '../helpers/getTestID';
 
 interface RadioButtonItem {
   label: string;
@@ -13,6 +15,7 @@ interface RadioButtonProps {
   selectedValue: string | null;
   onChange?: (value: string) => void;
   direction?: 'vertical' | 'horizontal';
+  testID?: string;
 }
 
 const RadioButton: React.FC<RadioButtonProps> = ({
@@ -20,6 +23,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   selectedValue,
   onChange,
   direction = 'vertical',
+  testID,
 }) => {
   const [internalValue, setInternalValue] = useState<string | null>(
     selectedValue
@@ -57,6 +61,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
         return (
           <View key={item.value} style={styles.item}>
             <Pressable
+              testID={getTestID(testID, `option-${item.value}`)}
               onPress={() => handleOnPress(item)}
               style={[styles.radioContainer, item.disabled && styles.disabled]}
             >
@@ -65,7 +70,12 @@ const RadioButton: React.FC<RadioButtonProps> = ({
               >
                 {isChecked && <View style={styles.innerCircle} />}
               </View>
-              <Typography variant="t2" weight="medium" color={Color.gray[800]}>
+              <Typography
+                testID={getTestID(testID, `option-${item.value}-label`)}
+                variant="t2"
+                weight="medium"
+                color={Color.gray[800]}
+              >
                 {item.label}
               </Typography>
             </Pressable>

package/src/Select/README.md

@@ -31,6 +31,7 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 | `header`      | ReactElement                                    | –       | Jika ingin chip mempunyai header.                                                                                                                             |
 | `footer`      | ReactElement                                    | –       | Jika ingin chip mempunyai footer.                                                                                                                             |
 | `value`       | ChipSelectedProps                               | –       | Nilai pilihan yang dikontrol dari luar. Cocok untuk membuat komponen controlled. Akan mensinkronkan state internal selected dengan value setiap kali berubah. |
+| `testID`      | `string`                                        | –       | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-search`, `-submit`, dan `-option-{value}` (via `Chip`). |
 
 ## 📌 Contoh Penggunaan
 

package/src/Select/README_Select.md

@@ -34,6 +34,7 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 | `refreshing`       | `boolean`                                                | `false`     | Status untuk pull-to-refresh                                                                                                               |
 | `onEndReached`     | `() => void`                                             | -           | Dipanggil saat scroll mencapai akhir list                                                                                                  |
 | `onSelectedChange` | `onSelectedChange?: (value: ChipOptionProps[]) => void;` | -           | Dipanggil saat selected berubah                                                                                                             |
+| `testID`           | `string`                                                 | –           | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-search`, `-submit`, dan `-option-{value}` (via `Chip`).          |
 
 ## 📌 Contoh Penggunaan
 

package/src/Select/Select.tsx

@@ -14,6 +14,7 @@ import Loading from '../Loading/Loading';
 import { useToast } from '../Toast/ToastContext';
 import { type SelectProps } from './type';
 import { useRef } from 'react';
+import { getTestID } from '../helpers/getTestID';
 export default function Select({
   isOpen,
   data,
@@ -35,6 +36,7 @@ export default function Select({
   searchValue,
   value,
   onSelectedChange,
+  testID,
 }: SelectProps) {
   const [selected, setSelected] = useState<ChipSelectedProps>();
   const [searchQuery, setSearchQuery] = useState<string>(searchValue || '');
@@ -49,13 +51,17 @@ export default function Select({
     [onClose]
   );
 
-  const handleOnPresSubmitSelect = (): boolean => {
+  const handleOnPresSubmitSelect = () => {
     if (required && (!selected || selected.length === 0)) {
       show('Please fill a item');
-      return false;
+      return;
     }
+
     onSubmit?.(selected ? selected : []);
-    return true;
+
+    // The single-select path closes itself right after onSubmit; this one used
+    // to just return a boolean that nothing read, so the sheet stayed open.
+    handleOnCloseBottom(false);
   };
 
   const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -94,12 +100,14 @@ export default function Select({
   }, [searchValue]);
   return (
     <BottomSheet
+      testID={getTestID(testID, 'sheet')}
       onClose={(val: boolean) => handleOnCloseBottom(val)}
       isOpen={isOpen}
       height={height}
       footer={
         multiple ? (
           <Button
+            testID={getTestID(testID, 'submit')}
             title={submitBtnLabel ?? 'Lanjutkan'}
             color="primary"
             disabled={(!selected || selected.length === 0) && required}
@@ -115,6 +123,7 @@ export default function Select({
             accessible={false}
           >
             <Input
+              testID={getTestID(testID, 'search')}
               submitBehavior="submit"
               icon="Search"
               placeholder="Search"
@@ -128,6 +137,7 @@ export default function Select({
         ) : (
           <View style={styles.containerChip}>
             <Chip
+              testID={testID}
               options={data}
               direction="vertical"
               scrollable={true}

package/src/Select/type.tsx

@@ -35,4 +35,5 @@ export interface SelectProps {
   header?: React.ComponentType<any> | React.ReactElement | null | undefined;
   searchValue?: string;
   onSelectedChange?: (value: ChipOptionProps[]) => void;
+  testID?: string;
 }

package/src/Skeleton/README.md

@@ -14,6 +14,7 @@ Komponen `Skeleton` adalah placeholder UI yang menampilkan efek shimmer animasi,
 | `backgroundColor` | `string`         | `"#F0F0F0"`                  | Warna latar belakang dari blok skeleton.                                           |
 | `shimmerColor`    | `string`         | `"rgba(255, 255, 255, 0.7)"` | Warna efek shimmer yang bergerak.                                                  |
 | `duration`        | `number`         | `1500`                       | Durasi animasi shimmer (dalam milidetik).                                          |
+| `testID` | `string` | - | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ---
 

package/src/Skeleton/Skeleton.tsx

@@ -17,6 +17,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   backgroundColor = '#F0F0F0',
   shimmerColor = 'rgba(255, 255, 255, 0.7)',
   duration = 1500,
+  testID,
 }) => {
   const shimmerAnimation = useRef(new Animated.Value(0)).current;
   const skeletonWidth = useRef(0);
@@ -59,6 +60,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
 
   return (
     <View
+      testID={testID}
       onLayout={handleLayout}
       style={[
         styles.skeletonCard,

package/src/Skeleton/type.ts

@@ -7,4 +7,5 @@ export interface SkeletonProps {
   backgroundColor?: string;
   shimmerColor?: string;
   duration?: number;
+  testID?: string;
 }

package/src/Spinner/Spinner.tsx

@@ -2,7 +2,17 @@ import { useRef, useEffect } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Stop, Circle } from 'react-native-svg';
 
-export default function Spinner({ size = 48, color = '#FFFFFF' }) {
+interface SpinnerProps {
+  size?: number;
+  color?: string;
+  testID?: string;
+}
+
+export default function Spinner({
+  size = 48,
+  color = '#FFFFFF',
+  testID,
+}: SpinnerProps) {
   const rotateAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -29,7 +39,10 @@ export default function Spinner({ size = 48, color = '#FFFFFF' }) {
   const darkerColor = '#999';
 
   return (
-    <View style={[styles.container, { width: size, height: size }]}>
+    <View
+      testID={testID}
+      style={[styles.container, { width: size, height: size }]}
+    >
       <Animated.View
         style={{
           transform: [{ rotate: rotateInterpolate }],

package/src/Step/README.md

@@ -40,6 +40,7 @@ export default function CheckoutWizard() {
 | `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. |
+| `testID`       | `string`                               | ❌     | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 
 ### StepItem
@@ -55,6 +56,7 @@ Sebagai konten – ditampilkan bila index-nya sama dengan current.
 | `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). |
+| `testID`   | `string`                                                      | ❌     | —           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## ⚙️ Cara Kerja
 

package/src/Step/Step.tsx

@@ -5,7 +5,7 @@ import type { StepItemProps, StepProps } from './type';
 
 const { width: screenWidth } = Dimensions.get('window');
 
-const Step = ({ children, current = 0, onChangeStep }: StepProps) => {
+const Step = ({ children, current = 0, onChangeStep, testID }: StepProps) => {
   const childrenArray = React.Children.toArray(children).filter(
     React.isValidElement
   ) as React.ReactElement<StepItemProps>[];
@@ -25,7 +25,7 @@ const Step = ({ children, current = 0, onChangeStep }: StepProps) => {
   }, [current, onChangeStep]);
 
   return (
-    <View style={styles.container}>
+    <View testID={testID} style={styles.container}>
       <View style={[styles.headerContainer]}>
         <ScrollView
           ref={scrollRef}