@herca/rn-kit 0.1.112 → 0.1.114

package/src/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
 import AirPlane from './icons/AirPlane';
 import AlignCenter from './icons/AlignCenter';
 import AlignLeft from './icons/AlignLeft';
@@ -169,6 +169,8 @@ import WhatsAppFill from './icons/WhatsappFill';
 import XCircle from './icons/XCircle';
 import type { IconNameProps, IconProps } from './type';
 import BanOutline from './icons/BanOutline';
+import FileListStar from './icons/FileListStar';
+import TextFill from './icons/TextFill';
 
 const icons: Record<
   IconNameProps,
@@ -342,6 +344,8 @@ const icons: Record<
   'play-fill': PlayFill,
   'users-fill-bulk': UsersFillBulk,
   'ban-outline': BanOutline,
+  'file-list-star-fill': FileListStar,
+  'text-fill': TextFill,
 };
 
 const Icon: React.FC<IconProps> = ({
@@ -349,6 +353,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color = '#000',
   style,
+  testID,
 }) => {
   const SelectedIcon = icons[name];
 
@@ -356,7 +361,14 @@ const Icon: React.FC<IconProps> = ({
     return null;
   }
 
-  return <SelectedIcon size={size} color={color} style={style} />;
+  const icon = <SelectedIcon size={size} color={color} style={style} />;
+
+  // The 170 files in ./icons take only size/color and spread nothing, so a
+  // testID handed to them would be dropped. Wrapping is the one-file fix --
+  // and only when an id is actually asked for, so existing call sites keep
+  // their exact tree. Teaching every icon to forward testID would be the
+  // thorough fix; it is a 170-file codemod and not what this change is.
+  return testID ? <View testID={testID}>{icon}</View> : icon;
 };
 
 export default Icon;

package/src/Icon/README.md

@@ -45,6 +45,7 @@ export default function App() {
 | `size`  | number | 24      | Ukuran icon dalam piksel |
 | `color` | string | "#000"  | Warna icon               |
 | `style` | object | `{}`    | Gaya tambahan (optional) |
+| `testID` | `string` | - | ID untuk automation testing. Ikon dibungkus View ber-testID hanya saat prop ini diisi. |
 
 ## Daftar Icon
 

package/src/Icon/icons/FileListStar.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 FileListStar: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 65 65" fill="none" style={style}>
+    <Path
+      d="M34.0258 16.012V10.0074L46.035 22.0166H40.0304C35.8138 22.0166 34.0258 20.2286 34.0258 16.012ZM34.9067 51.8262L37.1213 53.9344L36.8548 55.4288C36.8548 55.4288 36.7213 56.0427 36.1075 56.0427C35.4937 56.0427 16.012 56.0427 16.012 56.0427C10.6746 56.0427 8.00586 53.374 8.00586 48.0365L8.00586 16.012C8.00586 10.6746 10.6746 8.00586 16.012 8.00586L30.0227 8.00586V16.012C30.0227 22.4703 33.5721 26.0197 40.0304 26.0197H48.0365V36.4276C48.0365 37.2816 47.1559 37.3617 46.7022 37.3617C44.754 37.3617 42.9928 38.4291 42.1388 40.1638L40.8044 42.7792L37.6823 43.2329C35.7608 43.4998 34.1862 44.8074 33.599 46.6755C33.0119 48.5169 33.519 50.4918 34.9067 51.8262ZM23.351 32.0243C23.351 33.1291 24.2476 34.0258 25.3525 34.0258H37.3617C38.4665 34.0258 39.3632 33.1291 39.3632 32.0243C39.3632 30.9194 38.4665 30.0227 37.3617 30.0227H25.3525C24.2476 30.0227 23.351 30.9194 23.351 32.0243ZM20.6822 42.6991C20.6822 41.5943 19.7856 40.6976 18.6807 40.6976C17.5759 40.6976 16.6792 41.5943 16.6792 42.6991C16.6792 43.804 17.5759 44.7007 18.6807 44.7007C19.7856 44.7007 20.6822 43.804 20.6822 42.6991ZM20.6822 32.0243C20.6822 30.9194 19.7856 30.0227 18.6807 30.0227C17.5759 30.0227 16.6792 30.9194 16.6792 32.0243C16.6792 33.1291 17.5759 34.0258 18.6807 34.0258C19.7856 34.0258 20.6822 33.1291 20.6822 32.0243ZM31.3571 42.6991C31.3571 41.5943 30.4604 40.6976 29.3556 40.6976H25.3525C24.2476 40.6976 23.351 41.5943 23.351 42.6991C23.351 43.804 24.2476 44.7007 25.3525 44.7007H29.3556C30.4604 44.7007 31.3571 43.804 31.3571 42.6991ZM55.728 48.9279C56.3471 48.3382 56.0054 47.308 55.1514 47.1879L50.5 46.526C50.1611 46.478 49.867 46.2699 49.7175 45.9683L47.703 41.9705C47.2946 41.1592 46.115 41.1592 45.704 41.9705L43.6895 45.9683C43.5373 46.2699 43.2432 46.478 42.907 46.526L38.2556 47.1879C37.4016 47.308 37.0625 48.3382 37.679 48.9279L41.0416 52.1357C41.2871 52.3706 41.3994 52.7095 41.3407 53.0404L40.5718 57.4278C40.4144 58.3191 41.3704 58.9996 42.187 58.5806L46.2194 56.5071C46.521 56.3523 46.8834 56.3523 47.185 56.5071L51.2206 58.5833C52.0373 59.0023 52.99 58.3244 52.8325 57.4331L52.0637 53.0404C52.005 52.7095 52.1173 52.3706 52.3628 52.1357L55.728 48.9279Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default FileListStar;

package/src/Icon/icons/TextFill.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const TextFill: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M17.4577 3.4415C17.216 3.0915 16.9077 2.78317 16.5577 2.5415C15.766 1.9665 14.7327 1.6665 13.491 1.6665H6.50768C6.34102 1.6665 6.17435 1.67484 6.01602 1.6915C3.28268 1.8665 1.66602 3.6415 1.66602 6.50817V13.4915C1.66602 14.7332 1.96602 15.7665 2.54102 16.5582C2.78268 16.9082 3.09102 17.2165 3.44102 17.4582C4.12435 17.9582 4.99102 18.2498 6.01602 18.3165C6.17435 18.3248 6.34102 18.3332 6.50768 18.3332H13.491C16.5243 18.3332 18.3327 16.5248 18.3327 13.4915V6.50817C18.3327 5.2665 18.0327 4.23317 17.4577 3.4415ZM15.6243 7.4165C15.6243 7.75817 15.341 8.0415 14.9993 8.0415C14.6577 8.0415 14.3743 7.75817 14.3743 7.4165V6.43317C14.3743 6.1665 14.1577 5.94984 13.891 5.94984H10.6243V14.0498H12.1077C12.4493 14.0498 12.7327 14.3332 12.7327 14.6748C12.7327 15.0165 12.4493 15.2998 12.1077 15.2998H7.89102C7.54935 15.2998 7.26602 15.0165 7.26602 14.6748C7.26602 14.3332 7.54935 14.0498 7.89102 14.0498H9.37435V5.94984H6.10768C5.84102 5.94984 5.62435 6.1665 5.62435 6.43317V7.4165C5.62435 7.75817 5.34102 8.0415 4.99935 8.0415C4.65768 8.0415 4.37435 7.75817 4.37435 7.4165V6.43317C4.37435 5.47484 5.14935 4.69984 6.10768 4.69984H13.8827C14.841 4.69984 15.616 5.47484 15.616 6.43317V7.4165H15.6243Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default TextFill;

package/src/Icon/type.tsx

@@ -170,10 +170,13 @@ export type IconNameProps =
   | 'file-list-plus-fill-bulk'
   | 'play-fill'
   | 'ban-outline'
+  | 'file-list-star-fill'
+  | 'text-fill'
   | 'cube-scan';
 export interface IconProps {
   name: IconNameProps;
   size?: number;
   color?: string;
   style?: ViewStyle;
+  testID?: string;
 }

package/src/Input/Input.tsx

@@ -4,6 +4,7 @@ import { Icon } from '../Icon';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 import type { InputProps } from './type';
 
 const Input = React.forwardRef<TextInput, InputProps>(
@@ -24,6 +25,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
       iconRightColor,
       prefix,
       required = false,
+      testID,
       ...rest
     },
     ref
@@ -50,7 +52,13 @@ const Input = React.forwardRef<TextInput, InputProps>(
 
     return (
       <View style={styles.gap}>
-        {label ? <LabelForm title={label} required={required} /> : null}
+        {label ? (
+          <LabelForm
+            testID={getTestID(testID, 'label')}
+            title={label}
+            required={required}
+          />
+        ) : null}
 
         <View
           style={[
@@ -69,6 +77,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
           {prefix && <View style={styles.prefixContainer}>{prefix}</View>}
 
           <TextInput
+            testID={getTestID(testID, 'input')}
             {...rest}
             ref={ref}
             style={[styles.input, style]}
@@ -82,6 +91,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
             <View style={styles.rightContainer}>
               {clearButton && inputValue !== '' && (
                 <TouchableOpacity
+                  testID={getTestID(testID, 'clear')}
                   onPress={handleClear}
                   style={iconRight && styles.mr8}
                 >
@@ -89,7 +99,11 @@ const Input = React.forwardRef<TextInput, InputProps>(
                 </TouchableOpacity>
               )}
               {iconRight && (
-                <TouchableOpacity onPress={onPressIconRight} hitSlop={10}>
+                <TouchableOpacity
+                  testID={getTestID(testID, 'toggle')}
+                  onPress={onPressIconRight}
+                  hitSlop={10}
+                >
                   <Icon
                     name={iconRight}
                     size={20}
@@ -102,6 +116,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
         </View>
         {hint ? (
           <Typography
+            testID={getTestID(testID, 'error')}
             color={hasError ? Color.danger[500] : Color.gray[700]}
             variant="t3"
             weight="medium"

package/src/Input/InputDate.tsx

@@ -1,17 +1,18 @@
-import {
-  Color,
-  DatePicker,
-  Icon,
-  Typography,
-  type CalendarModeType,
-  type DateRangeProps,
-} from '@herca/rn-kit';
+import Color from '../Color/Color';
+import DatePicker from '../DatePicker/DatePicker';
+import Icon from '../Icon/Icon';
+import Typography from '../Typography/Typography';
+import type {
+  CalendarModeType,
+  DateRangeProps,
+} from '../Calendar/CalendarPropsType';
 import { useState, useEffect } from 'react';
 import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { FormattedDateRangeProps } from '../Calendar/CalendarPropsType';
 import { dateFormatter } from '../function/dateFormatter';
 import { layouting } from '../styles/layouting';
 import { spacing } from '../styles/spacing';
+import { getTestID } from '../helpers/getTestID';
 
 type DatePickerProps = React.ComponentProps<typeof DatePicker>;
 type DatePickerPropsWithoutOnChange = Omit<
@@ -31,6 +32,9 @@ interface BaseProps {
   mode?: CalendarModeType;
   language?: 'en' | 'id';
   hasClear?: boolean;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  testID?: string;
 }
 
 type SingleModeProps = BaseProps & {
@@ -58,6 +62,9 @@ export default function InputDate({
   mode = 'single',
   language,
   hasClear,
+  confirmLabel,
+  cancelLabel,
+  testID,
   ...props
 }: Props) {
   const [isDatePickerOpen, setSelectOpen] = useState<boolean>(false);
@@ -156,15 +163,27 @@ export default function InputDate({
     }
   }, [value, valueDateEnd]);
 
+  // Strip any caller-provided testID out of datePickerProps before spreading
+  // it onto <DatePicker>, so it can never clobber the derived `-sheet` id
+  // below (mirrors the selectProps fix in InputSelect.tsx).
+  const datePickerPropsWithoutTestID = { ...datePickerProps };
+  delete (datePickerPropsWithoutTestID as { testID?: string }).testID;
+
   return (
     <View style={styles.gap4}>
-      <Typography variant="t2" weight="semibold" color={Color.gray[900]}>
+      <Typography
+        testID={getTestID(testID, 'label')}
+        variant="t2"
+        weight="semibold"
+        color={Color.gray[900]}
+      >
         {label}
       </Typography>
 
       <View style={styles.wrapper}>
         {/* sart date */}
         <Pressable
+          testID={getTestID(testID, 'trigger')}
           style={[
             styles.pickerTrigger,
             (value || dateValue) && styles.hasValue,
@@ -178,11 +197,8 @@ export default function InputDate({
           <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
             {hasClear && (value || dateValue) && (
               <TouchableOpacity
-                style={{
-                  backgroundColor: Color.gray[600],
-                  borderRadius: 999,
-                  padding: 3,
-                }}
+                testID={getTestID(testID, 'clear')}
+                style={styles.clearBtn}
                 onPress={() => {
                   onDateChange?.({
                     date: null,
@@ -207,6 +223,7 @@ export default function InputDate({
         {/* end date */}
         {mode === 'range' && (
           <Pressable
+            testID={getTestID(testID, 'trigger-end')}
             style={[
               styles.pickerTrigger,
               (value || dateValue) && styles.hasValue,
@@ -223,7 +240,8 @@ export default function InputDate({
       </View>
 
       <DatePicker
-        {...datePickerProps}
+        testID={testID}
+        {...datePickerPropsWithoutTestID}
         mode={mode}
         isOpen={isDatePickerOpen}
         onClose={handleCloseDatePicker}
@@ -232,6 +250,8 @@ export default function InputDate({
         onChange={(val: DateRangeProps) => {
           handleDateChange(val);
         }}
+        {...(confirmLabel ? { confirmLabel } : {})}
+        {...(cancelLabel ? { cancelLabel } : {})}
       />
     </View>
   );
@@ -260,4 +280,9 @@ const styles = StyleSheet.create({
     gap: 8,
     alignItems: 'center',
   },
+  clearBtn: {
+    backgroundColor: Color.gray[600],
+    borderRadius: 999,
+    padding: 3,
+  },
 });

package/src/Input/InputFile.tsx

@@ -21,8 +21,10 @@ import type {
   UploadedFile,
 } from './type';
 import { uploadFile } from './helpers/uploadFile';
+import { getTestID } from '../helpers/getTestID';
 
 export default function InputFile({
+  testID,
   title = 'Upload File',
   description = 'File harus berformat JPG, PNG dan PDF',
   accept = [
@@ -367,6 +369,7 @@ export default function InputFile({
     <View style={spacing.gap[12]}>
       {variant === 'default' && (
         <CardTrigger
+          testID={getTestID(testID, 'trigger')}
           title={title}
           hint={hint || (internalErrorMessage as string)}
           hasError={hasError || !!internalErrorMessage}
@@ -379,6 +382,7 @@ export default function InputFile({
       {variant === 'small' && (
         <View style={spacing.gap[4]}>
           <CardTriggerSmall
+            testID={getTestID(testID, 'trigger')}
             files={files}
             title={title}
             hasError={hasError}
@@ -389,9 +393,11 @@ export default function InputFile({
             onDelete={confirmDeleteFile}
           />
           {internalErrorMessage && (
-            <Typography variant="t3" color={Color.danger[500]}>
-              {internalErrorMessage}
-            </Typography>
+            <View testID={getTestID(testID, 'error')}>
+              <Typography variant="t3" color={Color.danger[500]}>
+                {internalErrorMessage}
+              </Typography>
+            </View>
           )}
 
           {files.length > 0 && (
@@ -399,13 +405,14 @@ export default function InputFile({
               {files
                 .filter((file) => !!file.error)
                 .map((file, index) => (
-                  <Typography
+                  <View
                     key={index}
-                    variant="t3"
-                    color={Color.danger[500]}
+                    testID={getTestID(testID, `error-${index}`)}
                   >
-                    {file.hint}
-                  </Typography>
+                    <Typography variant="t3" color={Color.danger[500]}>
+                      {file.hint}
+                    </Typography>
+                  </View>
                 ))}
             </>
           )}
@@ -417,6 +424,7 @@ export default function InputFile({
           <View style={spacing.gap[12]} key={index}>
             {useChangeLabel && (
               <Input
+                testID={getTestID(testID, `file-${index}`)}
                 label={`${changeLableProps?.label || 'Nama Dokumen'} ${index + 1}`}
                 value={file.labelFile}
                 placeholder={
@@ -434,6 +442,7 @@ export default function InputFile({
 
             <View style={spacing.gap[4]}>
               <ItemPreview
+                testID={getTestID(testID, `item-${index}`)}
                 index={index}
                 file={file}
                 loading={file.uploading}
@@ -443,18 +452,21 @@ export default function InputFile({
               />
 
               {file.hint && (
-                <Typography
-                  variant="t3"
-                  color={!file.error ? Color.gray[700] : Color.danger[500]}
-                >
-                  {file.hint}
-                </Typography>
+                <View testID={getTestID(testID, `error-${index}`)}>
+                  <Typography
+                    variant="t3"
+                    color={!file.error ? Color.gray[700] : Color.danger[500]}
+                  >
+                    {file.hint}
+                  </Typography>
+                </View>
               )}
             </View>
           </View>
         ))}
 
       <ModalPicker
+        testID={getTestID(testID, 'sheet')}
         isOpen={isOpenBottomSheetTypeFile}
         onClose={() => setIsOpenBottomSheetTypeFile(false)}
         title={modalPickFileText?.title || 'Upload Dokumen'}
@@ -488,6 +500,7 @@ export default function InputFile({
       />
 
       <ModalDelete
+        testID={getTestID(testID, 'modal-delete')}
         isOpen={isOpenBottomSheetDeleteFile}
         onClose={() => setIsOpenBottomSheetDeleteFile(false)}
         title={modalDeleteText?.title || 'Hapus Dokumen'}

package/src/Input/InputMonth.tsx

@@ -1 +1,152 @@
-export default function InputMonth() {}
+import { useState } from 'react';
+import { View } from 'react-native';
+import MonthPicker from '../DatePicker/MonthPicker';
+import { dateFormatter } from '../function/dateFormatter';
+import PickerField from './partials/PickerField';
+import type { PickerFieldValue } from './type';
+
+interface BaseProps {
+  label?: string;
+  placeholder: string;
+  /** Month number, 1 (January) to 12 (December). */
+  value?: number;
+  onSelectClick?: () => void;
+  onPickerClose?: () => void;
+  onChange?: (value: PickerFieldValue) => void;
+  language?: 'en' | 'id';
+  hasClear?: boolean;
+  title?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  testID?: string;
+}
+
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderEnd?: never;
+  valueEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderEnd: string;
+  valueEnd?: number;
+};
+
+export type InputMonthProps = SingleModeProps | RangeModeProps;
+
+const EMPTY: PickerFieldValue = {
+  value: null,
+  startValue: null,
+  endValue: null,
+};
+
+/**
+ * Renders the month name for a 1-based month number in the requested language.
+ *
+ * Anything outside 1-12 renders nothing, so the field falls back to its
+ * placeholder. Handing the number straight to Date would quietly roll over --
+ * 0 would read as December of the previous year rather than January.
+ *
+ * The year given to the formatter is arbitrary; only the month is read back.
+ */
+const monthLabel = (
+  month: number | null | undefined,
+  language?: 'en' | 'id'
+) =>
+  month === null || month === undefined || month < 1 || month > 12
+    ? null
+    : dateFormatter({
+        date: new Date(2000, month - 1, 1),
+        options: { pattern: 'MMMM', language },
+      });
+
+export default function InputMonth({
+  label,
+  placeholder,
+  placeholderEnd,
+  value,
+  valueEnd,
+  mode = 'single',
+  onSelectClick,
+  onPickerClose,
+  onChange,
+  language,
+  hasClear,
+  title,
+  cancelLabel,
+  confirmLabel,
+  testID,
+}: InputMonthProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<PickerFieldValue>(EMPTY);
+
+  // A given prop wins, so the field can be driven from outside; otherwise it
+  // shows whatever was last picked.
+  const start = value ?? (mode === 'range' ? selected.startValue : selected.value); // prettier-ignore
+  const end = valueEnd ?? selected.endValue;
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    onSelectClick?.();
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onPickerClose?.();
+  };
+
+  const handleChange = (
+    picked: number[] | { startDate: number | null; endDate: number | null }
+  ) => {
+    // MonthPicker reports an array in single mode and a pair in range mode,
+    // both 0-based. Shift to 1-based on the way out, so January is 1 for the
+    // consumer -- the picker's indices never leak past this line.
+    const oneBased = (month: number | null | undefined) =>
+      month === null || month === undefined ? null : month + 1;
+
+    const next: PickerFieldValue = Array.isArray(picked)
+      ? { value: oneBased(picked[0]), startValue: null, endValue: null }
+      : {
+          value: null,
+          startValue: oneBased(picked.startDate),
+          endValue: oneBased(picked.endDate),
+        };
+
+    setSelected(next);
+    onChange?.(next);
+  };
+
+  const handleClear = () => {
+    setSelected(EMPTY);
+    onChange?.(EMPTY);
+  };
+
+  return (
+    <View>
+      <PickerField
+        label={label}
+        placeholder={placeholder}
+        placeholderEnd={placeholderEnd}
+        mode={mode}
+        display={monthLabel(start, language)}
+        displayEnd={monthLabel(end, language)}
+        hasClear={hasClear}
+        onPress={handleOpen}
+        onClear={handleClear}
+        testID={testID}
+      />
+
+      <MonthPicker
+        testID={testID}
+        isOpen={isOpen}
+        mode={mode}
+        onClose={handleClose}
+        onChange={handleChange}
+        {...(title ? { title } : {})}
+        {...(cancelLabel ? { cancelLabel } : {})}
+        {...(confirmLabel ? { confirmLabel } : {})}
+      />
+    </View>
+  );
+}

package/src/Input/InputOtp.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TextInput, View } from 'react-native';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 
 type InputOtpProps = {
   length?: number;
@@ -11,6 +12,7 @@ type InputOtpProps = {
   hint?: string;
   hasError?: boolean;
   inputCenter?: boolean;
+  testID?: string;
 };
 
 const InputOtp: React.FC<InputOtpProps> = ({
@@ -20,6 +22,7 @@ const InputOtp: React.FC<InputOtpProps> = ({
   hint,
   hasError,
   inputCenter = false,
+  testID,
 }) => {
   const inputs = useRef<Array<TextInput | null>>([]);
   const values = useRef<string[]>(Array(length).fill(''));
@@ -50,7 +53,9 @@ const InputOtp: React.FC<InputOtpProps> = ({
 
   return (
     <View style={styles.gap4}>
-      {label ? <LabelForm title={label} /> : null}
+      {label ? (
+        <LabelForm testID={getTestID(testID, 'label')} title={label} />
+      ) : null}
       <View
         style={[
           styles.container,
@@ -68,6 +73,7 @@ const InputOtp: React.FC<InputOtpProps> = ({
           .map((_, i) => (
             <TextInput
               key={i}
+              testID={getTestID(testID, `item-${i}`)}
               style={[
                 styles.input,
                 // eslint-disable-next-line react-native/no-inline-styles
@@ -89,7 +95,11 @@ const InputOtp: React.FC<InputOtpProps> = ({
       </View>
 
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t3">
+        <Typography
+          testID={getTestID(testID, 'error')}
+          color={hasError ? Color.danger[500] : ''}
+          variant="t3"
+        >
           {hint}
         </Typography>
       ) : null}

package/src/Input/InputPassword.tsx

@@ -11,17 +11,22 @@ interface InputPasswordProps extends TextInputProps {
   label?: string;
   hint?: string;
   hasError?: boolean;
+  testID?: string;
   onPressIconLeft?: () => void;
   onPressIconRight?: () => void;
 }
 
-export default function InputPassword(props: InputPasswordProps) {
+export default function InputPassword({
+  testID,
+  ...props
+}: InputPasswordProps) {
   const [secureText, setSecureText] = useState(true);
 
   return (
     <View>
       <Input
         {...props}
+        testID={testID}
         iconRight={secureText ? 'Eye' : 'EyeOpen'}
         secureTextEntry={secureText}
         onPressIconRight={() => setSecureText(!secureText)}