@herca/rn-kit 0.1.112 → 0.1.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.112",
+  "version": "0.1.114",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -72,22 +72,23 @@
     "@react-native/babel-preset": "0.79.2",
     "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
-    "@types/jest": "^29.5.5",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.0.0",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.3",
-    "jest": "^29.7.0",
+    "jest": "^30.4.2",
     "prettier": "^3.0.3",
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-native-builder-bob": "^0.40.8",
+    "react-native-safe-area-context": "^5.5.1",
+    "react-test-renderer": "19.0.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
-    "typescript": "^5.8.3",
-    "react-native-safe-area-context": "^5.5.1"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -103,7 +104,7 @@
     "react-native-image-picker": "^8.2.1",
     "react-native-pager-view": "^6.8.1",
     "react-native-pdf": "^6.7.7",
-    "react-native-screens": "^4.11.1",
+    "react-native-screens": "4.11.1",
     "react-native-signature-canvas": "^5.0.1",
     "react-native-svg": "^15.12.0",
     "react-native-webview": "^13.15.0"
@@ -111,9 +112,21 @@
   "workspaces": [
     "example"
   ],
+  "resolutions": {
+    "jest-environment-node": "^30.0.0"
+  },
   "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.test.?([mc])[jt]s?(x)"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|@react-navigation|react-native-.*)/)"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

package/src/Accordion/Accordion.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import List from '../List/List';
 import ListItem from '../List/ListItem';
+import { getTestID } from '../helpers/getTestID';
 import type { AccordionProps } from './type';
 
 export default function Accordion({
@@ -10,6 +11,7 @@ export default function Accordion({
   isOpen,
   onCollapse,
   variant = 'default',
+  testID,
 }: AccordionProps) {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const toggle = () => {
@@ -25,7 +27,10 @@ export default function Accordion({
     <View>
       <List style={variant === 'borderless' ? styles.borderless : undefined}>
         {renderHeader && (
-          <TouchableOpacity onPress={toggle}>
+          <TouchableOpacity
+            testID={getTestID(testID, 'trigger')}
+            onPress={toggle}
+          >
             <ListItem
               style={variant === 'borderless' ? styles.borderless : undefined}
             >

package/src/Accordion/AccordionItem.tsx

@@ -4,9 +4,10 @@ import ListItem from '../List/ListItem';
 export default function AccordionItem({
   children,
   index = 0,
+  testID,
 }: AccordionItemProps) {
   return (
-    <ListItem key={index} isLast>
+    <ListItem key={index} isLast testID={testID}>
       {children}
     </ListItem>
   );

package/src/Accordion/README.md

@@ -43,6 +43,7 @@ export default function FAQSection() {
 | `isOpen`       | `boolean`                   | ❌    | `true`  | Menentukan apakah Accordion terbuka saat pertama kali dirender.                 |
 | `onCollapse`   | `(isOpen: boolean) => void` | ❌    | -       | Callback saat status terbuka/tutup berubah.                                     |
 | `variant`      | `'default' \| 'borderless'` | ❌    | -       | Opsi untuk menampilkan sebuah border di pembungkus accordion nya atau tidak     |
+| `testID`       | `string`                    | ❌    | -       | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger` untuk header; tiap `AccordionItem` menerima `testID`-nya sendiri. |
 
 ### AccordionItem
 
@@ -50,6 +51,7 @@ export default function FAQSection() {
 | ---------- | ----------- | ----- | ------- | --------------------------------------------------------------- |
 | `children` | `ReactNode` | ✅    | -       | Konten yang akan ditampilkan saat Accordion dibuka.             |
 | `index`    | `number`    | ❌    | -       | Untuk pengendalian item tertentu jika diperlukan secara manual. |
+| `testID`   | `string`    | ❌    | -       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## Note
 

package/src/Accordion/type.tsx

@@ -13,8 +13,10 @@ export interface AccordionProps {
   isOpen?: boolean;
   onCollapse?: (isOpen: boolean) => void;
   variant?: 'default' | 'borderless';
+  testID?: string;
 }
 export interface AccordionItemProps {
   children: ReactNode;
   index?: number;
+  testID?: string;
 }

package/src/Alert/Alert.tsx

@@ -14,6 +14,7 @@ interface AlertProps {
   style?: ViewStyle;
   titleStyle?: StyleProp<ViewStyle>;
   messageStyle?: StyleProp<ViewStyle>;
+  testID?: string;
   hide?: boolean;
 }
 
@@ -75,11 +76,13 @@ const Alert: React.FC<AlertProps> = ({
   titleStyle,
   messageStyle,
   hide = false,
+  testID,
 }) => {
   const { background, fontColor, borderColor } = COLORS[color];
 
   return (
     <View
+      testID={testID}
       style={[
         styles.container,
         {

package/src/Alert/README.md

@@ -22,6 +22,7 @@ Komponen `Alert` digunakan untuk menampilkan pesan notifikasi dengan ikon, judul
 | `style`        | `ViewStyle`                                                          | `undefined`         | Gaya tambahan untuk container                                             |
 | `titleStyle`   | `StyleProp<ViewStyle>`                                               | `undefined`         | Gaya tambahan untuk judul                                                 |
 | `messageStyle` | `StyleProp<ViewStyle>`                                               | `undefined`         | Gaya tambahan untuk pesan                                                 |
+| `testID` | `string` | - | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## 🎨 Warna yang Didukung
 

package/src/Avatar/Avatar.tsx

@@ -16,11 +16,13 @@ const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = '#ccc',
   textColor = '#fff',
   style,
+  testID,
 }) => {
   const avatarSize = SIZE_MAP[size] || SIZE_MAP.medium;
 
   return (
     <View
+      testID={testID}
       style={[
         styles.container,
         {

package/src/Avatar/AvatarGroup.tsx

@@ -13,13 +13,14 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
   avatars = [],
   maxVisible = 5,
   size = 'medium',
+  testID,
 }) => {
   const avatarSize = SIZE_MAP[size] || SIZE_MAP.medium;
   const visibleAvatars = avatars.slice(0, maxVisible);
   const remainingCount = avatars.length - maxVisible;
 
   return (
-    <View style={[styles.container, { height: avatarSize }]}>
+    <View testID={testID} style={[styles.container, { height: avatarSize }]}>
       {visibleAvatars.map((avatar, index) => {
         const hasImage = avatar.source;
         const initials = avatar.name;

package/src/Avatar/README_AVATAR.md

@@ -20,6 +20,7 @@ Komponen `Avatar` digunakan untuk menampilkan foto pengguna atau inisial nama ji
 | `backgroundColor` | `string`              | `'#ccc'`    | Warna latar belakang jika tanpa gambar                                 |
 | `textColor`     | `string`                | `'#fff'`    | Warna teks inisial jika tanpa gambar                                   |
 | `style`         | `ViewStyle`             | `undefined` | Gaya tambahan untuk container                                          |
+| `testID` | `string` | - | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## 📏 Ukuran Avatar
 

package/src/Avatar/README_AVATARGROUP.md

@@ -16,6 +16,7 @@ The `AvatarGroup` component displays a group of user avatars. It supports image
 | `avatars`    | `AvatarProps[]`                     | `[]`      | Array of avatar objects.                         |
 | `maxVisible` | `number`                            | `5`       | Max number of avatars to display.                |
 | `size`       | `'small' | 'medium' | 'large'`     | `'medium'` | Size of avatars.                                 |
+| `testID`     | `string`                            | -          | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ### `AvatarProps`
 

package/src/Avatar/type.tsx

@@ -8,10 +8,12 @@ export interface AvatarProps {
   backgroundColor?: string;
   textColor?: string;
   style?: object;
+  testID?: string;
 }
 
 export interface AvatarGroupProps {
   avatars?: AvatarProps[];
   maxVisible?: number;
   size?: AvatarSizeType;
+  testID?: string;
 }

package/src/Badge/Badge.tsx

@@ -12,6 +12,7 @@ interface BadgeProps {
   variant?: Variant;
   dot?: boolean;
   children?: React.ReactNode;
+  testID?: string;
 }
 
 const COLORS: Record<Variant, { background: string; fontColor: string }> = {
@@ -47,6 +48,7 @@ const Badge: React.FC<BadgeProps> = ({
   color = 'default',
   dot = false,
   children,
+  testID,
 }) => {
   const safeSize: Size = ['small', 'medium'].includes(size) ? size : 'medium';
 
@@ -69,6 +71,7 @@ const Badge: React.FC<BadgeProps> = ({
   if (dot) {
     return (
       <View
+        testID={testID}
         style={[
           styles.dot,
           {
@@ -85,6 +88,7 @@ const Badge: React.FC<BadgeProps> = ({
 
   return (
     <View
+      testID={testID}
       style={[
         styles.badge,
         {

package/src/Badge/README.md

@@ -20,6 +20,7 @@ Komponen `Badge` digunakan untuk menampilkan label kecil yang memberikan informa
 | `size`     | `'small'` \\| `'medium'`             | `'medium'`  | Ukuran badge                                               |
 | `dot`      | `boolean`                            | `false`     | Jika `true`, hanya menampilkan titik kecil                 |
 | `children` | `React.ReactNode`                    | `undefined` | Jika ada, akan menggantikan `value` sebagai isi badge      |
+| `testID` | `string` | - | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## 🎨 Warna default yang Tersedia
 

package/src/BadgeIcon/BadgeIcon.tsx

@@ -9,6 +9,7 @@ interface BaseBadgeProps {
   color?: Variant | HexColor;
   size?: Size;
   variant?: Variant;
+  testID?: string;
 }
 
 interface IconBadgeProps extends BaseBadgeProps {
@@ -67,6 +68,7 @@ const BadgeIcon: React.FC<BadgeProps> = ({
   size = 'medium',
   color = 'default',
   children,
+  testID,
 }) => {
   const safeSize: Size = ['small', 'medium', 'large'].includes(size)
     ? size
@@ -91,6 +93,7 @@ const BadgeIcon: React.FC<BadgeProps> = ({
 
   return (
     <View
+      testID={testID}
       style={[
         styles.badge,
         {

package/src/BadgeIcon/README.md

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

package/src/BottomSheet/BottomSheet.tsx

@@ -1,22 +1,23 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
-  View,
-  StyleSheet,
-  PanResponder,
-  TouchableOpacity,
   Animated,
-  Modal,
-  KeyboardAvoidingView,
-  Keyboard,
   Dimensions,
-  SafeAreaView,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
   Platform,
+  SafeAreaView,
   StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
   type KeyboardEvent,
 } from 'react-native';
-import Container from '../Ui/Container';
-import Typography from '../Typography/Typography';
 import Color from '../Color/Color';
+import { getTestID } from '../helpers/getTestID';
+import Icon from '../Icon';
+import Container from '../Ui/Container';
 import type { BottomSheetHeighProps, BottomSheetProops } from './type';
 
 const statusBarHeight =
@@ -39,6 +40,7 @@ export default function BottomSheet({
   height,
   pullBar,
   footer,
+  testID,
 }: BottomSheetProops) {
   const [isVisible, setIsVisible] = useState(false);
   const [heightFooter, setHeightFooter] = useState(0);
@@ -149,6 +151,7 @@ export default function BottomSheet({
     >
       <View style={[styles.modalContainer, backdrop && styles.backdrop]}>
         <TouchableOpacity
+          testID={getTestID(testID, 'backdrop')}
           onPress={handleRequestClose}
           activeOpacity={1}
           style={styles.backdropTouchable}
@@ -160,6 +163,7 @@ export default function BottomSheet({
           style={styles.keyboardAvoiding}
         >
           <Animated.View
+            testID={testID}
             style={[
               styles.bottomSheet,
               {
@@ -172,15 +176,17 @@ export default function BottomSheet({
           >
             {buttonClose && (
               <TouchableOpacity
+                testID={getTestID(testID, 'close')}
                 onPress={handleRequestClose}
                 style={styles.closeButton}
               >
-                <Typography>x</Typography>
+                <Icon name="times-new" color={Color.gray[900]} size={20} />
               </TouchableOpacity>
             )}
             {closable && (
               <View
                 {...panResponder.panHandlers}
+                testID={getTestID(testID, 'pullbar')}
                 style={styles.dragIndicatorContainer}
               >
                 {pullBar ? pullBar : <View style={styles.dragIndicator} />}
@@ -196,6 +202,7 @@ export default function BottomSheet({
             </SafeAreaView>
             {footer && (
               <SafeAreaView
+                testID={getTestID(testID, 'footer')}
                 onLayout={(event) => {
                   const { height: layoutHeight } = event.nativeEvent.layout;
                   setHeightFooter(layoutHeight);
@@ -235,7 +242,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     backgroundColor: 'white',
     paddingVertical: 10,
-    paddingHorizontal: 14,
+    paddingHorizontal: 10,
     borderRadius: 50,
     top: -50,
     right: 24,

package/src/BottomSheet/README.md

@@ -19,6 +19,7 @@ Komponen `BottomSheet` adalah modal bawah (slide-up) untuk menampilkan konten di
 | `height`        | `number \| string`               | `'auto'`    | Tinggi dari konten bottom sheet.                                         |
 | `pullBar`       | `React.ReactNode`                | -           | Custom elemen untuk drag indicator.                                      |
 | `footer`        | `React.ReactNode`                | -           | Menambahkan elemen tetap di bawah konten.                                |
+| `testID`        | `string`                         | -           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan pada elemen konten (tanpa suffix); menurunkan `-backdrop`, `-close`, `-pullbar`, dan `-footer`. |
 
 ---
 

package/src/BottomSheet/type.tsx

@@ -12,4 +12,5 @@ export interface BottomSheetProops {
   height?: BottomSheetHeighProps;
   pullBar?: React.ReactNode;
   footer?: React.ReactNode;
+  testID?: string;
 }

package/src/Button/Button.tsx

@@ -115,6 +115,7 @@ const Button: React.FC<ButtonProps> = ({
   width,
   block = false,
   loading = false,
+  testID,
 }) => {
   const sizeStyles = sizeStyleMap[size];
   const fontVariant = fontVariantMap[size];
@@ -131,6 +132,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <Pressable
+      testID={testID}
       onPress={onPress}
       disabled={disabled}
       style={({ pressed }) => {

package/src/Button/README.md

@@ -24,6 +24,7 @@ Komponen `Button` ini adalah tombol serbaguna untuk aplikasi React Native. Mendu
 | `width`     | `number | string`                              | -          | Lebar tombol bisa dalam piksel atau persentase.                          |
 | `block`     | `boolean`                                      | `false`    | Jika `true`, tombol akan penuh lebar (`width: 100%`).                    |
 | `loading`   | `boolean`                                      | `false`    | Menampilkan indikator loading jika `true`.                               |
+| `testID`    | `string`                                       | -          | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen `Pressable` tombol, tanpa suffix.                    |
 
 ---
 

package/src/Button/type.tsx

@@ -15,6 +15,7 @@ export interface ButtonProps {
   width?: number | string;
   block?: boolean;
   loading?: boolean;
+  testID?: string;
 }
 
 export const COLOR_MAP: Record<

package/src/Calendar/Calendar.tsx

@@ -23,6 +23,7 @@ const DEFAULT_SELECTED_BACKGROUND_COLOR = Color.primary[1000];
 const DEFAULT_SELECTED_TEXT_COLOR = Color.base.white100;
 const DEFAULT_DISABLED_BACKGROUND_COLOR = Color.base.white100;
 const DEFAULT_DISABLED_TEXT_COLOR = Color.gray[400];
+const DEFAULT_TODAY_TEXT_COLOR = Color.info[500];
 
 export const formatDate = (date: Date | undefined | null) => {
   if (!date) return null;
@@ -43,6 +44,7 @@ const Calendar = ({
   selectedTextColor = DEFAULT_SELECTED_TEXT_COLOR,
   disabledBackgroundColor = DEFAULT_DISABLED_BACKGROUND_COLOR,
   disabledTextColor = DEFAULT_DISABLED_TEXT_COLOR,
+  todayTextColor = DEFAULT_TODAY_TEXT_COLOR,
   dayName = DAYS,
   language = 'en',
   initialDate = new Date(),
@@ -50,6 +52,7 @@ const Calendar = ({
   dateEnd,
   onMonthChange,
   onYearChange,
+  testID,
 }: CalendarTypes) => {
   const [currentDate, setCurrentDate] = useState(initialDate);
   const [startDate, setStartDate] = useState<Date | null>(null);
@@ -256,6 +259,10 @@ const Calendar = ({
 
     if (mark?.selected) return mark?.textColor || selectedTextColor;
 
+    // Last before the ordinary colour: today is a hint about which day it is,
+    // so anything the user or the caller actually decided outranks it.
+    if (isSameDate(new Date(), date)) return todayTextColor;
+
     return Color.gray[700];
   };
 
@@ -322,7 +329,7 @@ const Calendar = ({
   const year = currentDate.getFullYear();
 
   return (
-    <View style={styles.container}>
+    <View testID={testID} style={styles.container}>
       <View style={styles.header}>
         <TouchableOpacity style={styles.buttonNav} onPress={goToPrevMonth}>
           <Icon name="ArrowLeft" color={Color.base.white100} size={10} />

package/src/Calendar/CalendarPropsType.tsx

@@ -62,6 +62,11 @@ export interface CalendarTypes {
   selectedTextColor?: string;
   disabledBackgroundColor?: string;
   disabledTextColor?: string;
+  /**
+   * Colour of today's number. Applies only when today is not selected,
+   * disabled or marked -- those outrank it.
+   */
+  todayTextColor?: string;
   disabledDays?: {
     [day in WeekDay]?: boolean | DisabledDayStyle;
   };
@@ -72,4 +77,5 @@ export interface CalendarTypes {
   dateEnd?: string | null;
   onMonthChange?: (month: number) => void;
   onYearChange?: (year: number) => void;
+  testID?: string;
 }

package/src/Calendar/README.md

@@ -29,9 +29,11 @@ Komponen kalender ini dibuat menggunakan React Native dan memungkinkan pengguna
 | `onChange`                | `(date: Date \| [Date, Date]) => void` | —                                                     | Fungsi callback saat tanggal dipilih                      |
 | `selectedBackgroundColor` | `string` (CSS color)                   | `'#0f62fe'`                                           | Warna latar belakang tanggal yang dipilih                 |
 | `selectedTextColor`       | `string` (CSS color)                   | `'#ffffff'`                                           | Warna teks pada tanggal yang dipilih                      |
+| `todayTextColor`          | `string` (CSS color)                   | `Color.info[500]`                                     | Warna angka tanggal hari ini. Hanya berlaku bila hari ini tidak sedang dipilih, dinonaktifkan, atau ditandai lewat `markedDates` — ketiganya menang atas ini. |
 | `initialDate`             | `Date`                                 | `new Date(2026, 1, 1)`                                | Inisialisasi tanggal saat pertamakali render              |
 | `dateStart`               | `string \| null`                       | `2025-11-28`                                          | Kontroler tanggal mulai                                   |
 | `dateEnd`                 | `string \| null`                       | `2025-11-28`                                          | Kontroler tanggal selesai                                 |
+| `testID`                  | `string`                               | -                                                     | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ---
 

package/src/CheckBox/CheckBox.tsx

@@ -1,7 +1,10 @@
-import { Color, Icon, Typography } from '@herca/rn-kit';
+import Color from '../Color/Color';
+import Icon from '../Icon';
+import Typography from '../Typography/Typography';
 import React, { useEffect, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import type { Variant } from './type';
+import { getTestID } from '../helpers/getTestID';
 // import type { ColorVariantType } from '../Color/type';
 
 interface CheckBoxProps {
@@ -13,6 +16,7 @@ interface CheckBoxProps {
   renderLabel?: () => React.ReactNode;
   renderHint?: () => React.ReactNode;
   color?: Variant;
+  testID?: string;
 }
 
 const COLORS: Record<Variant, { background: string; borderColor: string }> = {
@@ -38,6 +42,7 @@ const CheckBox: React.FC<CheckBoxProps> = ({
   renderLabel,
   renderHint,
   color = 'primary',
+  testID,
 }) => {
   const [value, setValue] = useState<boolean>(false);
   const { background, borderColor } = COLORS[color];
@@ -54,6 +59,7 @@ const CheckBox: React.FC<CheckBoxProps> = ({
 
   return (
     <Pressable
+      testID={testID}
       onPress={() => !disabled && handlePress()}
       style={styles.container}
     >
@@ -71,7 +77,12 @@ const CheckBox: React.FC<CheckBoxProps> = ({
       </View>
       <View>
         {label && (
-          <Typography variant="t2" weight="medium" color={Color.gray[900]}>
+          <Typography
+            testID={getTestID(testID, 'label')}
+            variant="t2"
+            weight="medium"
+            color={Color.gray[900]}
+          >
             {label}
           </Typography>
         )}

package/src/CheckBox/CheckBoxList.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Typography, Color, CheckBox } from '@herca/rn-kit';
+import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
+import CheckBox from './CheckBox';
+import { getTestID } from '../helpers/getTestID';
 import type { Variant } from './type';
 
 interface CheckBoxListItem {
@@ -15,6 +18,7 @@ interface CheckBoxListProps {
   onChange: (selected: string[]) => void;
   direction?: 'vertical' | 'horizontal';
   color?: Variant;
+  testID?: string;
 }
 
 const CheckBoxList: React.FC<CheckBoxListProps> = ({
@@ -23,6 +27,7 @@ const CheckBoxList: React.FC<CheckBoxListProps> = ({
   onChange,
   direction = 'vertical',
   color = 'primary',
+  testID,
 }) => {
   const toggleValue = (value: string) => {
     const newSelected = selectedValues.includes(value)
@@ -42,6 +47,7 @@ const CheckBoxList: React.FC<CheckBoxListProps> = ({
       {items.map((item) => (
         <CheckBox
           key={item.value}
+          testID={getTestID(testID, `option-${item.value}`)}
           checked={selectedValues.includes(item.value)}
           color={color}
           onChange={() => toggleValue(item.value)}

package/src/CheckBox/README_CHECKBOX.md

@@ -47,3 +47,4 @@ export default function App() {
 | `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`.                           |
+| `testID`      | `string`                                                               | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan ke `Pressable`; menurunkan `-label` untuk elemen label. |

package/src/CheckBox/README_CHECKBOXLIST.md

@@ -46,3 +46,4 @@ export default function App() {
 | `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'`). |
+| `testID`         | `string`                                                               | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-option-{value}` untuk tiap item checkbox. | |