@herca/rn-kit 0.1.113 → 0.1.114

package/src/Label/README.md

@@ -11,6 +11,7 @@
 | `color`    | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'purple' \| 'orange'` | `'default'` | Variasi warna latar dan teks.                                                  |
 | `icon`     | `IconNameProps`                                                                                  | `undefined` | Menampilkan ikon di sebelah kiri teks.                                         |
 | `size`     | `'small' \| 'medium'`                                                                            | `'medium'`  | (Belum digunakan – untuk ekspansi ukuran ke depan.)                            |
+| `testID`   | `string`                                                                                         | -           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ---
 

package/src/LabelForm/LabelForm.tsx

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

package/src/List/List.tsx

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

package/src/List/ListItem.tsx

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

package/src/List/README.md

@@ -38,6 +38,7 @@ export default function SettingMenu() {
 | ---------- | ----------- | ----- | ------- | ------------------------------ |
 | `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `ListItem`. |
 | `style`    | `ViewStyle` | ❌     | —       | Gaya tambahan untuk container. |
+| `testID`   | `string`    | ❌     | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ### ListItem
 | Prop       | Type                   | Wajib | Default | Deskripsi                                                                 |
@@ -47,3 +48,4 @@ export default function SettingMenu() {
 | `style`    | `StyleProp<ViewStyle>` | ❌     | —       | Gaya tambahan untuk baris.                                                |
 | `isLast`   | `boolean`              | 🚫    | —       | Diisi otomatis oleh `List` untuk menghapus border bawah pada baris akhir. |
 | `index`    | `number`               | 🚫    | —       | Tidak digunakan—disediakan untuk extensibility.                           |
+| `testID`   | `string`               | ❌    | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |

package/src/List/type.tsx

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

package/src/Loading/Loading.tsx

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

package/src/Modal/Modal.tsx

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

package/src/Modal/README.md

@@ -37,3 +37,4 @@ export default function ExampleModal() {
 | `height`         | `DimensionValue`             | `undefined` | Tinggi modal (opsional, gunakan scroll jika tidak cukup).             |
 | `containerStyle` | `ViewStyle`                  | `undefined` | Gaya tambahan untuk wrapper container (pusat layar).                  |
 | `modalStyle`     | `ViewStyle`                  | `undefined` | Gaya tambahan untuk modal box.                                        |
+| `testID`         | `string`                     | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan pada elemen konten modal (tanpa suffix); menurunkan `-backdrop` dan `-close`. |

package/src/Provider/RequiredUpdateAppsProvider.tsx

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

package/src/RadioButton/README.md

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

package/src/RadioButton/RadioButton.tsx

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

package/src/Select/README.md

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

package/src/Select/README_Select.md

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

package/src/Select/Select.tsx

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

package/src/Select/type.tsx

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

package/src/Skeleton/README.md

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

package/src/Skeleton/Skeleton.tsx

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

package/src/Skeleton/type.ts

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

package/src/Spinner/Spinner.tsx

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

package/src/Step/README.md

@@ -40,6 +40,7 @@ export default function CheckoutWizard() {
 | `children`     | `ReactElement<StepItemProps>` \| array | ✅     | —       | Satu atau beberapa `StepItem`.                                              |
 | `current`      | `number`                               | ✅     | —       | Indeks langkah aktif (dimulai dari `0`).                                    |
 | `onChangeStep` | `(activeIndex: number) => void`        | ✅     | —       | Callback yang dipicu setiap kali nilai `current` berubah di dalam komponen. |
+| `testID`       | `string`                               | ❌     | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 
 ### StepItem
@@ -55,6 +56,7 @@ Sebagai konten – ditampilkan bila index-nya sama dengan current.
 | `children` | `ReactNode`                                                   | ✅     | —           | Konten yang muncul ketika langkah ini aktif.                       |
 | `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌     | `'primary'` | Warna lingkaran & garis pada header.                               |
 | `title`    | `string`                                                      | ❌     | `''`        | (Opsional) Judul untuk ditampilkan di header (bisa dikustom lagi). |
+| `testID`   | `string`                                                      | ❌     | —           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## ⚙️ Cara Kerja
 

package/src/Step/Step.tsx

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

package/src/Step/StepItem.tsx

@@ -18,10 +18,11 @@ const StepItem = ({
   isHeader,
   children,
   style,
+  testID,
 }: StepItemProps) => {
   if (isHeader) {
     return (
-      <View style={[styles.headerItem, style]}>
+      <View testID={testID} style={[styles.headerItem, style]}>
         <View
           style={[
             styles.circle,
@@ -56,7 +57,11 @@ const StepItem = ({
     });
   }
 
-  return <View style={styles.content}>{children}</View>;
+  return (
+    <View testID={testID} style={styles.content}>
+      {children}
+    </View>
+  );
 };
 const styles = StyleSheet.create({
   headerItem: {

package/src/Step/type.tsx

@@ -10,9 +10,11 @@ export interface StepItemProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   title?: string;
+  testID?: string;
 }
 export interface StepProps {
   children: ReactElement<StepItemProps> | ReactElement<StepItemProps>[];
   current: number;
   onChangeStep: (e: any) => void;
+  testID?: string;
 }

package/src/Tab/README.md

@@ -95,6 +95,7 @@ Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawa
 | `current?`     | `number`                  | Indeks tab aktif (default: 0)      |
 | `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah        |
 | `renderHeader` | `React.ReactElement`      | tambahan react element di atas tab |
+| `testID`       | `string`                  | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-item-{index}` untuk tiap tab header dan `-panel-{index}` untuk tiap konten tab. |
 
 ### `TabItemProps`
 

package/src/Tab/Tab.tsx

@@ -10,6 +10,7 @@ import { View, Pressable, StyleSheet, ScrollView } from 'react-native';
 import PagerView from 'react-native-pager-view';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 import type { TabItemProps, TabProps } from './type';
 
 const Tab: React.FC<TabProps> = ({
@@ -18,6 +19,7 @@ const Tab: React.FC<TabProps> = ({
   onChangeTab,
   renderHeader,
   refreshControl,
+  testID,
 }) => {
   const items = Children.toArray(children).filter(
     isValidElement
@@ -63,6 +65,7 @@ const Tab: React.FC<TabProps> = ({
               <React.Fragment key={index}>
                 {!item.props.renderTabName && (
                   <Pressable
+                    testID={getTestID(testID, `item-${index}`)}
                     style={[
                       styles.tabButton,
                       isActive ? styles.tabActive : styles.tabInactive,
@@ -81,7 +84,10 @@ const Tab: React.FC<TabProps> = ({
                 )}
 
                 {item.props.renderTabName && (
-                  <Pressable onPress={() => handleHeaderPress(index)}>
+                  <Pressable
+                    testID={getTestID(testID, `item-${index}`)}
+                    onPress={() => handleHeaderPress(index)}
+                  >
                     {item.props.renderTabName({
                       isActive,
                     })}
@@ -113,7 +119,11 @@ const Tab: React.FC<TabProps> = ({
         onPageSelected={(e) => updateActive(e.nativeEvent.position)}
       >
         {items.map((item, index) => (
-          <View key={index} collapsable={false}>
+          <View
+            key={index}
+            testID={getTestID(testID, `panel-${index}`)}
+            collapsable={false}
+          >
             {item?.props?.children}
           </View>
         ))}

package/src/Tab/type.tsx

@@ -24,4 +24,5 @@ export interface TabProps {
     RefreshControlProps,
     string | React.JSXElementConstructor<any>
   >;
+  testID?: string;
 }

package/src/TextEditor/LinkSheet.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import BottomSheet from '../BottomSheet/BottomSheet';
+import Button from '../Button/Button';
+import Input from '../Input/Input';
+
+interface LinkSheetProps {
+  isOpen: boolean;
+  text: string;
+  url: string;
+  onChangeText: (value: string) => void;
+  onChangeUrl: (value: string) => void;
+  onCancel: () => void;
+  onSave: () => void;
+  onClose: () => void;
+  labelText: string;
+  labelUrl: string;
+  placeholderText: string;
+  placeholderUrl: string;
+  saveText: string;
+  cancelText: string;
+}
+
+/**
+ * The sheet for adding or editing a hyperlink.
+ *
+ * The url input takes the forwarded ref because the editor focuses it shortly
+ * after opening.
+ */
+const LinkSheet = forwardRef<TextInput, LinkSheetProps>(
+  (
+    {
+      isOpen,
+      text,
+      url,
+      onChangeText,
+      onChangeUrl,
+      onCancel,
+      onSave,
+      onClose,
+      labelText,
+      labelUrl,
+      placeholderText,
+      placeholderUrl,
+      saveText,
+      cancelText,
+    },
+    ref
+  ) => (
+    <BottomSheet isOpen={isOpen} onClose={onClose}>
+      <View style={styles.body}>
+        <Input
+          label={labelText}
+          value={text}
+          onChangeText={onChangeText}
+          placeholder={placeholderText}
+          autoCapitalize="none"
+        />
+        <Input
+          ref={ref}
+          keyboardType="url"
+          label={labelUrl}
+          value={url}
+          onChangeText={onChangeUrl}
+          placeholder={placeholderUrl}
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={styles.actions}>
+        <View style={styles.flex1}>
+          <Button
+            title={cancelText}
+            color="primary"
+            onPress={onCancel}
+            variant="outline"
+          />
+        </View>
+        <View style={styles.flex1}>
+          <Button title={saveText} color="primary" onPress={onSave} />
+        </View>
+      </View>
+    </BottomSheet>
+  )
+);
+
+export default LinkSheet;
+
+const styles = StyleSheet.create({
+  body: {
+    gap: 12,
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 16,
+  },
+  flex1: {
+    flex: 1,
+  },
+});