@herca/rn-kit 0.1.113 → 0.1.114

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. | |

package/src/Chip/Chip.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Dimensions, FlatList, StyleSheet } from 'react-native';
 import {
   type ChipOptionProps,
@@ -7,6 +7,7 @@ import {
   type ChipValue,
 } from './type';
 import ChipItem from './ChipItem';
+import { getTestID } from '../helpers/getTestID';
 
 const Chip: React.FC<ChipProps> = ({
   options,
@@ -25,6 +26,7 @@ const Chip: React.FC<ChipProps> = ({
   onEndReached,
   footer,
   header,
+  testID,
 }) => {
   const isHorizontal = direction === 'horizontal';
   const [chipItemWidth, setChipItemWidth] = useState(0);
@@ -40,12 +42,22 @@ const Chip: React.FC<ChipProps> = ({
     normalizeSelected(selected)
   );
 
+  // Sync only when the `selected` prop's own value changes, tracked against a
+  // ref rather than against internalSelected. Comparing to internalSelected
+  // made this effect watch the state it writes: every internal pick differed
+  // from the prop and was immediately reverted, so an uncontrolled Chip could
+  // never hold — or show — a selection. The ref is needed because `selected`
+  // defaults to a fresh [] each render, which would otherwise retrigger the
+  // reset on every pass.
+  const lastSelectedProp = useRef(JSON.stringify(normalizeSelected(selected)));
+
   useEffect(() => {
-    const newSelected = normalizeSelected(selected);
-    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
-      setInternalSelected(newSelected);
+    const serialized = JSON.stringify(normalizeSelected(selected));
+    if (serialized !== lastSelectedProp.current) {
+      lastSelectedProp.current = serialized;
+      setInternalSelected(normalizeSelected(selected));
     }
-  }, [selected, internalSelected]);
+  }, [selected]);
 
   const isSelected = (value: ChipValue) => internalSelected.includes(value);
 
@@ -89,6 +101,7 @@ const Chip: React.FC<ChipProps> = ({
       renderItem={({ item }) => (
         <ChipItem
           item={item}
+          itemTestID={getTestID(testID, `option-${item.value}`)}
           isSelected={() => isSelected(item.value)}
           color={color}
           block={block}

package/src/Chip/ChipItem.tsx

@@ -13,6 +13,7 @@ export default function ChipItem({
   isHorizontal,
   onPress,
   onLayout,
+  itemTestID,
 }: ChipItem) {
   const validColors: ColorVariantType[] = [
     'default',
@@ -67,6 +68,7 @@ export default function ChipItem({
   return (
     <Pressable
       key={item.value}
+      testID={itemTestID}
       style={[
         styles.chip,
         getSizeStyle(),

package/src/Chip/README.md

@@ -11,7 +11,7 @@ Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter,
 | Nama Props       | Tipe                                         | Default        | Deskripsi                                                                 |
 |------------------|----------------------------------------------|----------------|--------------------------------------------------------------------------|
 | `options`        | `ChipOption[]`                               | –              | Daftar opsi yang akan ditampilkan. Setiap opsi memiliki `label`, `value`, dan opsional `disabled`. |
-| `selected`       | `string \| string[] \| null \| undefined` | `[]`           | Nilai yang dipilih. Bisa berupa string (single), array (multiple), atau null. |
+| `selected`       | `string \| string[] \| null \| undefined` | `[]`           | Nilai yang dipilih. Bisa string (single), array (multiple), atau null. Opsional: kalau dilewat, Chip menyimpan pilihannya sendiri (uncontrolled). |
 | `onSelect`       | `(value: string \| string[]) => void`       | –              | Fungsi callback saat chip dipilih. Akan mengembalikan value terpilih. |
 | `multiple`       | `boolean`                                    | `false`        | Jika `true`, bisa memilih lebih dari satu chip.                        |
 | `direction`      | `'horizontal' \| 'vertical'`                | `'horizontal'` | Arah layout chip: horizontal (dalam baris) atau vertical (ke bawah).    |
@@ -21,6 +21,7 @@ Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter,
 | `renderItem`     | `(item, isSelected, isDisabled) => ReactNode`| –              | Jika ingin custom tampilan chip secara manual.                          |
 | `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
 | `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
+| `testID`     | `string` | –              | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-option-{value}` untuk tiap chip item (Chip sendiri tidak merender testID pada root).  |
 
 ---
 
@@ -89,4 +90,27 @@ interface ChipOption {
 - gunakan scrollable = false jika ingin membungkus di ScrollView
 ---
 
-© 2025 – Komponen Chip by YourTeam
+© 2025 – Komponen Chip by YourTeam
+
+## Controlled vs uncontrolled
+
+Kirim `selected` kalau state pilihan disimpan di luar. Chip akan mengikuti
+nilai prop itu setiap kali berubah:
+
+```jsx
+const [selected, setSelected] = useState(['apple']);
+
+<Chip options={options} selected={selected} onSelect={setSelected} multiple />
+```
+
+Lewati `selected` kalau tidak perlu menyimpannya sendiri. Chip mengurus
+pilihannya secara internal dan `onSelect` cukup dipakai untuk membaca hasil:
+
+```jsx
+<Chip options={options} onSelect={(value) => console.log(value)} multiple />
+```
+
+Jangan mengirim `selected` dengan nilai tetap sambil mengharapkan chip tidak
+pernah menyala — chip tetap menyala dari state internalnya. Untuk chip yang
+murni tampilan, kendalikan `selected` sungguhan dan jangan perbarui di
+`onSelect`.

package/src/Chip/README_CHIP_ITEM.md

@@ -17,6 +17,7 @@ Komponen `ChipItem` merupakan komponen presentasional dalam bentuk "chip" atau "
 | `isHorizontal` | `boolean`                                                                                        | `false`      | Jika true, maka `block` akan diabaikan agar chip tetap fleksibel secara horizontal |
 | `onPress`      | `(disabled: boolean, val: ChipOptionProps) => void`                                              | `undefined`  | Callback saat chip ditekan                                                         |
 | `onLayout`     | `(event: LayoutChangeEvent) => void`                                                             | `undefined`  | Callback ketika layout chip dihitung oleh React Native                             |
+| `itemTestID`   | `string`                                                                                         | `undefined`  | ID untuk automation testing (Maestro/Detox/Appium), diterapkan langsung ke `Pressable` chip tanpa suffix tambahan. Biasanya diisi otomatis oleh `Chip` sebagai `{testID}-option-{value}`. |
 
 ---