@herca/rn-kit 0.1.113 → 0.1.114

package/src/Input/README_INPUT_DATE.md

@@ -66,6 +66,7 @@ function MyForm() {
 | `mode`              | `'single' \| 'range'`             | `'single'`         | Mode pemilihan tanggal                             |
 | `language`          | `'en' \| 'id'`                    | `undefined`        | Bahasa untuk format tanggal                        |
 | `hasClear`          | `boolean`                         | `false`            | Nilai boolean untuk menampilkan opsi hapus tanggal |
+| `testID`            | `string`                          | `undefined`        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-trigger-end` (mode range), `-label`, `-clear`. `testID` mentah diteruskan ke `DatePicker`, yang menurunkan suffix-nya sendiri: `-sheet`, `-cancel`, `-confirm`, `-error`. |
 
 ### Single Mode Specific Props
 
@@ -264,3 +265,20 @@ Ini memastikan `placeholderDateEnd` hanya required ketika `mode="range"`.
 ## License
 
 MIT
+
+## Teks statis pada picker
+
+`confirmLabel` dan `cancelLabel` mengganti teks tombol di sheet, tanpa perlu
+menyusurinya lewat `datePickerProps`:
+
+```jsx
+<InputDate
+  label="Date"
+  placeholder="Pick a date"
+  confirmLabel="Apply"
+  cancelLabel="Cancel"
+/>
+```
+
+Default-nya `'Terapkan'` dan `'Batalkan'`. Kalau kunci yang sama juga diisi di
+`datePickerProps`, prop eksplisit di atas yang menang.

package/src/Input/README_INPUT_FILE.md

@@ -145,6 +145,7 @@ export default function ExampleScreen() {
 | `modalDeleteText`   | `ModalOption & confirmBtn`        | `undefined`                                      | Teks kustom pada modal konfirmasi hapus file.                                                                                      |
 | `hasError`          | `boolean`                         | `false`                                          | Menampilkan state error pada input.                                                                                                |
 | `onUploading`       | `(isUploading?: boolean) => void` | `undefiend`                                      | Expose value uploading ke parent                                                                                                   |
+| `testID`            | `string`                          | `undefined`                                      | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-file-{index}` (field nama dokumen per file, field-nya sendiri `-file-{index}-input`), `-item-{index}` (preview per file), `-error` (error umum, mis. ukuran melebihi batas), `-error-{index}` (error per file), `-sheet`, dan `-modal-delete`. |
 
 ### Default Variant Props (`variant?: 'default'`)
 

package/src/Input/README_INPUT_MONTH.md

@@ -0,0 +1,132 @@
+# InputMonth
+
+Field bulan yang dibuka lewat `MonthPicker`. Bentuk dan alurnya mengikuti
+`InputDate`: satu trigger (dua kalau `mode="range"`), tombol clear opsional,
+dan sheet yang muncul saat trigger ditekan.
+
+Yang dipilih hanya **bulan**, tanpa tahun — sama seperti `MonthPicker` yang
+dibungkusnya. Kalau butuh bulan sekaligus tahun, pasangkan dengan
+[`InputYear`](./README_INPUT_YEAR.md).
+
+## Import
+
+```jsx
+import { InputMonth } from '@herca/rn-kit';
+```
+
+## Contoh Penggunaan
+
+```jsx
+const [month, setMonth] = useState<number>();
+
+<InputMonth
+  label="Bulan lahir"
+  placeholder="Pilih bulan"
+  value={month}
+  hasClear
+  onChange={({ value }) => setMonth(value ?? undefined)}
+/>;
+```
+
+### Mode range
+
+```jsx
+const [range, setRange] = useState({ start: undefined, end: undefined });
+
+<InputMonth
+  mode="range"
+  label="Periode"
+  placeholder="Bulan mulai"
+  placeholderEnd="Bulan selesai"
+  value={range.start}
+  valueEnd={range.end}
+  onChange={({ startValue, endValue }) =>
+    setRange({ start: startValue ?? undefined, end: endValue ?? undefined })
+  }
+/>;
+```
+
+### Bahasa
+
+```jsx
+<InputMonth label="Month" placeholder="Pick one" value={1} language="en" />
+// menampilkan "January"; tanpa language menampilkan "Januari"
+```
+
+## Props
+
+| Props            | Tipe                       | Wajib | Default    | Deskripsi                                                                                         |
+| ---------------- | -------------------------- | ----- | ---------- | ------------------------------------------------------------------------------------------------- |
+| `label`          | `string`                   | ❌     | -          | Teks label di atas trigger. Kalau kosong, elemen labelnya tidak dirender sama sekali.             |
+| `placeholder`    | `string`                   | ✅     | -          | Teks trigger saat belum ada nilai.                                                                |
+| `placeholderEnd` | `string`                   | ✅\*   | -          | Placeholder trigger kedua. Wajib dan hanya berlaku saat `mode="range"`.                           |
+| `value`          | `number`                   | ❌     | -          | Nomor bulan, `1` (Januari) sampai `12` (Desember). Kalau diisi, ia menang atas pilihan internal. Di luar 1–12 dianggap kosong. |
+| `valueEnd`       | `number`                   | ❌     | -          | Nomor bulan akhir, `1`–`12`. Hanya berlaku saat `mode="range"`.                                    |
+| `mode`           | `'single' \| 'range'`      | ❌     | `'single'` | Satu bulan, atau rentang dua bulan.                                                               |
+| `language`       | `'en' \| 'id'`             | ❌     | `'id'`     | Bahasa nama bulan yang ditampilkan.                                                               |
+| `hasClear`       | `boolean`                  | ❌     | `false`    | Menampilkan tombol clear saat ada nilai.                                                          |
+| `onChange`       | `(v: PickerFieldValue) => void` | ❌ | -          | Dipanggil saat pilihan dikonfirmasi atau dibersihkan.                                             |
+| `onSelectClick`  | `() => void`               | ❌     | -          | Dipanggil saat trigger ditekan.                                                                   |
+| `onPickerClose`  | `() => void`               | ❌     | -          | Dipanggil saat sheet ditutup.                                                                     |
+| `title`          | `string`                   | ❌     | `'Pilih Bulan'` | Judul sheet, diteruskan ke `MonthPicker`.                                                    |
+| `cancelLabel`    | `string`                   | ❌     | `'Batal'`  | Label tombol batal di sheet.                                                                      |
+| `confirmLabel`   | `string`                   | ❌     | `'pilih'`  | Label tombol konfirmasi di sheet.                                                                 |
+| `testID`         | `string`                   | ❌     | -          | ID untuk automation testing. Lihat tabel di bawah.                                                |
+
+\* Wajib secara tipe hanya ketika `mode="range"`.
+
+## Bentuk nilai
+
+`onChange` selalu menerima bentuk yang sama, apa pun mode-nya:
+
+```ts
+interface PickerFieldValue {
+  value: number | null; // terisi di mode single
+  startValue: number | null; // terisi di mode range
+  endValue: number | null; // terisi di mode range
+}
+```
+
+Hanya satu sisi yang terisi, ditentukan `mode`. Saat dibersihkan, ketiganya
+`null`.
+
+**Bulan dihitung dari 1**, jadi Januari adalah `1` dan Desember `12` — baik
+untuk prop `value` maupun untuk yang dilaporkan `onChange`. `MonthPicker` di
+baliknya memakai indeks 0–11, tapi indeks itu tidak pernah bocor ke luar.
+
+## testID turunan
+
+| Suffix           | Elemen                                     |
+| ---------------- | ------------------------------------------ |
+| `-label`         | Label di atas trigger                      |
+| `-trigger`       | Trigger utama                              |
+| `-trigger-end`   | Trigger kedua (hanya `mode="range"`)       |
+| `-clear`         | Tombol clear (hanya saat ada nilai)        |
+| `-sheet`         | `BottomSheet` milik `MonthPicker`          |
+| `-option-{i}`    | Opsi bulan di sheet, memakai indeks 0–11 milik `MonthPicker` |
+| `-confirm`       | Tombol konfirmasi di sheet                 |
+| `-cancel`        | Tombol batal di sheet                      |
+
+`testID` diteruskan mentah ke `MonthPicker`, jadi id sheet dan opsinya
+diturunkan dari basis yang sama — polanya sama seperti `InputDate` dengan
+`DatePicker`.
+
+## Teks statis
+
+Semua teks bawaan sheet berbahasa Indonesia dan bisa diganti dari sini, jadi
+tidak perlu menyentuh `MonthPicker` langsung:
+
+```jsx
+<InputMonth
+  label="Month"
+  placeholder="Pick a month"
+  language="en"
+  title="Choose a month"
+  cancelLabel="Cancel"
+  confirmLabel="Apply"
+/>
+```
+
+`language` mengatur nama bulan; `title`, `cancelLabel` dan `confirmLabel`
+mengatur teks statis sheet. Keduanya terpisah — mengubah `language` tidak ikut
+menerjemahkan tombolnya.

package/src/Input/README_INPUT_OTP.md

@@ -32,6 +32,7 @@ Salin file `InputOtp.tsx` ke proyek React Native Anda dan import sesuai kebutuha
 | `hint`        | `string`                | -       | Pesan kecil di bawah input (misal instruksi atau error)                                  |
 | `hasError`    | `boolean`               | false   | Jika `true`, border input berubah warna merah (indikasi error)                           |
 | `inputCenter` | `boolean`               | false   | Jika `true`, maka seluruh input field akan memposisikan diri ke tengah secara horizontal |
+| `testID`      | `string`                | -       | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-item-{index}` untuk tiap kotak digit, `-label`, dan `-error`. |
 
 ---
 

package/src/Input/README_INPUT_SELECT.md

@@ -71,6 +71,7 @@ export default function Example() {
 | `useModal`      | `boolean`                           | `true`             | Gunakan modal untuk menampilkan opsi                 |
 | `required`      | `boolean`                           | `false`            | Untuk menampilkan indikator bintang di label         |
 | `labelColor`    | `stirng`                            | `true`             | Untuk mengubah warna label                           |
+| `testID`        | `string`                            | `undefined`        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-label`, `-clear`, `-error`. `testID` mentah diteruskan ke `Select`, yang menurunkan suffix-nya sendiri: `-sheet` (body bottom sheet), `-search-input` (field pencarian), `-submit` (mode multiple), `-option-{value}` (tiap opsi). |
 
 ### Pressable Props
 

package/src/Input/README_INPUT_YEAR.md

@@ -0,0 +1,115 @@
+# InputYear
+
+Field tahun yang dibuka lewat `YearPicker`. Kembarannya
+[`InputMonth`](./README_INPUT_MONTH.md) — bentuk, prop, dan bentuk nilainya
+sama persis.
+
+Tidak ada prop `language`: tahun berupa angka, dan tidak ada yang berubah
+antar-locale.
+
+## Import
+
+```jsx
+import { InputYear } from '@herca/rn-kit';
+```
+
+## Contoh Penggunaan
+
+```jsx
+const [year, setYear] = useState<number>();
+
+<InputYear
+  label="Tahun masuk"
+  placeholder="Pilih tahun"
+  value={year}
+  hasClear
+  onChange={({ value }) => setYear(value ?? undefined)}
+/>;
+```
+
+### Mode range
+
+```jsx
+<InputYear
+  mode="range"
+  label="Periode"
+  placeholder="Tahun mulai"
+  placeholderEnd="Tahun selesai"
+  onChange={({ startValue, endValue }) => console.log(startValue, endValue)}
+/>
+```
+
+### Bersama InputMonth
+
+`MonthPicker` tidak membawa tahun, jadi bulan-dan-tahun disusun dari dua field:
+
+```jsx
+<InputMonth label="Bulan" placeholder="Pilih bulan" onChange={onMonthChange} />
+<InputYear label="Tahun" placeholder="Pilih tahun" onChange={onYearChange} />
+```
+
+## Props
+
+| Props            | Tipe                            | Wajib | Default    | Deskripsi                                                                    |
+| ---------------- | ------------------------------- | ----- | ---------- | ----------------------------------------------------------------------------- |
+| `label`          | `string`                        | ❌     | -          | Teks label di atas trigger. Kalau kosong, elemen labelnya tidak dirender.    |
+| `placeholder`    | `string`                        | ✅     | -          | Teks trigger saat belum ada nilai.                                           |
+| `placeholderEnd` | `string`                        | ✅\*   | -          | Placeholder trigger kedua. Wajib dan hanya berlaku saat `mode="range"`.      |
+| `value`          | `number`                        | ❌     | -          | Tahun penuh, mis. `2024`. Kalau diisi, ia menang atas pilihan internal.      |
+| `valueEnd`       | `number`                        | ❌     | -          | Tahun akhir. Hanya berlaku saat `mode="range"`.                              |
+| `mode`           | `'single' \| 'range'`           | ❌     | `'single'` | Satu tahun, atau rentang dua tahun.                                          |
+| `hasClear`       | `boolean`                       | ❌     | `false`    | Menampilkan tombol clear saat ada nilai.                                     |
+| `onChange`       | `(v: PickerFieldValue) => void` | ❌     | -          | Dipanggil saat pilihan dikonfirmasi atau dibersihkan.                        |
+| `onSelectClick`  | `() => void`                    | ❌     | -          | Dipanggil saat trigger ditekan.                                              |
+| `onPickerClose`  | `() => void`                    | ❌     | -          | Dipanggil saat sheet ditutup.                                                |
+| `title`          | `string`                        | ❌     | `'Pilih Tahun'` | Judul sheet, diteruskan ke `YearPicker`.                                |
+| `cancelLabel`    | `string`                        | ❌     | `'Batal'`  | Label tombol batal di sheet.                                                 |
+| `confirmLabel`   | `string`                        | ❌     | `'Pilih'`  | Label tombol konfirmasi di sheet.                                            |
+| `testID`         | `string`                        | ❌     | -          | ID untuk automation testing. Suffix-nya sama dengan `InputMonth`.            |
+
+\* Wajib secara tipe hanya ketika `mode="range"`.
+
+## Bentuk nilai
+
+Sama dengan `InputMonth`:
+
+```ts
+interface PickerFieldValue {
+  value: number | null; // terisi di mode single
+  startValue: number | null; // terisi di mode range
+  endValue: number | null; // terisi di mode range
+}
+```
+
+## Rentang tahun
+
+`YearPicker` menampilkan 121 tahun: 60 tahun sebelum sampai 60 tahun sesudah
+tahun berjalan. Rentang itu belum bisa diatur lewat prop.
+
+## testID turunan
+
+| Suffix         | Elemen                               |
+| -------------- | ------------------------------------ |
+| `-label`       | Label di atas trigger                |
+| `-trigger`     | Trigger utama                        |
+| `-trigger-end` | Trigger kedua (hanya `mode="range"`) |
+| `-clear`       | Tombol clear (hanya saat ada nilai)  |
+| `-sheet`       | `BottomSheet` milik `YearPicker`     |
+| `-option-{th}` | Opsi tahun, mis. `-option-2024`      |
+| `-confirm`     | Tombol konfirmasi di sheet           |
+| `-cancel`      | Tombol batal di sheet                |
+
+## Teks statis
+
+Semua teks bawaan sheet berbahasa Indonesia dan bisa diganti dari sini, jadi
+tidak perlu menyentuh `YearPicker` langsung:
+
+```jsx
+<InputYear
+  label="Year"
+  placeholder="Pick a year"
+  title="Choose a year"
+  cancelLabel="Cancel"
+  confirmLabel="Apply"
+/>
+```

package/src/Input/Switch.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
 import Color from '../Color/Color';
+import { getTestID } from '../helpers/getTestID';
 
 interface SwitchProps {
   label?: string;
@@ -12,6 +13,7 @@ interface SwitchProps {
   hint?: string;
   hasError?: true;
   disabled?: boolean;
+  testID?: string;
 }
 export default function Switch({
   label,
@@ -21,6 +23,7 @@ export default function Switch({
   hint,
   hasError,
   disabled = false,
+  testID,
 }: SwitchProps) {
   const isControlled = value !== undefined;
   const [internalValue, setInternalValue] = useState<boolean>(false);
@@ -62,8 +65,11 @@ export default function Switch({
 
   return (
     <View style={{ gap: 4, opacity: disabled ? 0.5 : 1 }}>
-      {label ? <LabelForm title={label} /> : null}
+      {label ? (
+        <LabelForm title={label} testID={getTestID(testID, 'label')} />
+      ) : null}
       <Pressable
+        testID={testID}
         style={styles.touchArea}
         onPress={handlePress}
         disabled={disabled}

package/src/Input/TextArea.tsx

@@ -2,6 +2,7 @@ import { StyleSheet, TextInput, View } from 'react-native';
 import LabelForm from '../LabelForm/LabelForm';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 import type { TextAreaProps } from './type';
 
 export default function TextArea({
@@ -12,6 +13,7 @@ export default function TextArea({
   hint,
   onChangeText,
   required,
+  testID,
   ...props
 }: TextAreaProps) {
   const handleOnChangeText = (value: string) => {
@@ -20,7 +22,13 @@ export default function TextArea({
 
   return (
     <View style={styles.gap}>
-      {label ? <LabelForm required={required} title={label} /> : null}
+      {label ? (
+        <LabelForm
+          testID={getTestID(testID, 'label')}
+          required={required}
+          title={label}
+        />
+      ) : null}
 
       <View
         style={[
@@ -32,6 +40,7 @@ export default function TextArea({
         ]}
       >
         <TextInput
+          testID={getTestID(testID, 'input')}
           onChangeText={handleOnChangeText}
           editable
           multiline
@@ -43,7 +52,11 @@ export default function TextArea({
         />
       </View>
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+        <Typography
+          testID={getTestID(testID, 'error')}
+          color={hasError ? Color.danger[500] : ''}
+          variant="t2"
+        >
           {hint}
         </Typography>
       ) : null}

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

@@ -13,6 +13,7 @@ interface Props {
   onPress?: () => void;
   hasError?: boolean;
   hint?: string;
+  testID?: string;
 }
 
 export default function CardTrigger({
@@ -22,6 +23,7 @@ export default function CardTrigger({
   onPress,
   hint,
   hasError,
+  testID,
 }: Props) {
   return (
     <Card
@@ -54,6 +56,7 @@ export default function CardTrigger({
           </Typography>
         </View>
         <Button
+          testID={testID}
           color="primary"
           title={btnSelect}
           size="small"

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

@@ -22,6 +22,7 @@ interface Props {
   onReplace?: (index: number) => void;
   onDelete?: (index: number) => void;
   hasError?: boolean;
+  testID?: string;
 }
 
 export default function CardTriggerSmall({
@@ -33,6 +34,7 @@ export default function CardTriggerSmall({
   onPreview,
   onReplace,
   hasError,
+  testID,
 }: Props) {
   const Component = files?.length === 0 ? View : TouchableOpacity;
   return (
@@ -48,7 +50,7 @@ export default function CardTriggerSmall({
             files.length > 0 ? layouting.flex.col : {},
             files.length > 0 ? spacing.gap[6] : {},
           ]}
-          {...(files?.length > 0 && { onPress: onChooseFile })}
+          {...(files?.length > 0 && { onPress: onChooseFile, testID })}
         >
           <Image
             source={require('../../assets/input-file.png')}
@@ -65,6 +67,7 @@ export default function CardTriggerSmall({
 
         {files.length === 0 && (
           <Button
+            testID={testID}
             title={textButton}
             color="primary"
             size="small"

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 ? (