@herca/rn-kit 0.1.25 → 0.1.26

package/src/Input/InputOtp.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { View, TextInput, StyleSheet } from 'react-native';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
@@ -21,6 +21,11 @@ const InputOtp: React.FC<InputOtpProps> = ({
 }) => {
   const inputs = useRef<Array<TextInput | null>>([]);
   const values = useRef<string[]>(Array(length).fill(''));
+  const [useFlexGrow, setUseFlexGrow] = useState<boolean>(false);
+
+  const containerWidth = useRef(0);
+  const itemWidth = 48;
+  const itemGap = 10;
 
   const handleChange = (text: string, index: number) => {
     values.current[index] = text;
@@ -44,7 +49,15 @@ const InputOtp: React.FC<InputOtpProps> = ({
   return (
     <View style={styles.gap4}>
       {label ? <LabelForm title={label} /> : null}
-      <View style={styles.container}>
+      <View
+        style={styles.container}
+        onLayout={(e) => {
+          // cek apakah lebar container itu cukup untuk menampilkan semua input
+          containerWidth.current = e.nativeEvent.layout.width;
+          const totalNeededWidth = length * itemWidth + (length - 1) * itemGap;
+          setUseFlexGrow(totalNeededWidth > containerWidth.current);
+        }}
+      >
         {Array(length)
           .fill(0)
           .map((_, i) => (
@@ -52,19 +65,26 @@ const InputOtp: React.FC<InputOtpProps> = ({
               key={i}
               style={[
                 styles.input,
-                { borderColor: hasError ? Color.danger[500] : Color.gray[200] },
+                // eslint-disable-next-line react-native/no-inline-styles
+                {
+                  borderColor: hasError ? Color.danger[500] : Color.gray[200],
+                  width: useFlexGrow ? undefined : itemWidth, //jika cukup gunakan 48px
+                  flexGrow: useFlexGrow ? 1 : 0, //jika tidak cukup, flexgrow 0
+                },
               ]}
               keyboardType="number-pad"
               maxLength={1}
               onChangeText={(text) => handleChange(text, i)}
               onKeyPress={(e) => handleKeyPress(e, i)}
-              ref={(ref) => void (inputs.current[i] = ref)}
+              ref={(ref) => {
+                inputs.current[i] = ref;
+              }}
             />
           ))}
       </View>
 
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t3">
           {hint}
         </Typography>
       ) : null}
@@ -81,16 +101,16 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     gap: 10,
-    justifyContent: 'space-between',
+    justifyContent: 'flex-start',
   },
   input: {
-    width: 48,
+    flexGrow: 1,
     height: 48,
     borderWidth: 1,
     borderRadius: 8,
     textAlign: 'center',
     color: Color.base.black100,
     fontSize: 12,
-    fontWeight: 'medium',
+    fontWeight: 500,
   },
 });

package/src/Input/README_INPUT_OTP.md

@@ -0,0 +1,59 @@
+# InputOtp Component
+
+`InputOtp` adalah komponen React Native untuk input kode OTP (One-Time Password) dengan tampilan kotak-kotak input terpisah. Komponen ini responsif dan otomatis menyesuaikan ukuran input berdasarkan lebar container agar tampil rapi di berbagai ukuran layar.
+
+---
+
+## Fitur
+
+- Menampilkan sejumlah input kotak sesuai panjang OTP (`length`).
+- Input numeric 1 karakter per kotak.
+- Fokus otomatis berpindah ke kotak berikutnya saat input.
+- Fokus kembali ke kotak sebelumnya saat tekan backspace pada kotak kosong.
+- Responsif: menggunakan lebar statis jika cukup ruang, atau `flexGrow` jika ruang terbatas.
+- Label dan hint opsional.
+- Warna border berubah saat error (`hasError`).
+
+---
+
+## Instalasi
+
+Salin file `InputOtp.tsx` ke proyek React Native Anda dan import sesuai kebutuhan.
+
+---
+
+## Props
+
+| Nama       | Tipe                        | Default | Deskripsi                                                       |
+|------------|-----------------------------|---------|----------------------------------------------------------------|
+| `length`   | `number`                    | 6       | Jumlah kotak input OTP yang ingin ditampilkan                  |
+| `onChange` | `(otp: string) => void`     | -       | Callback saat isi OTP berubah, menerima OTP lengkap sebagai string |
+| `label`    | `string`                    | -       | Label yang tampil di atas kotak input                          |
+| `hint`     | `string`                    | -       | Pesan kecil di bawah input (misal instruksi atau error)       |
+| `hasError` | `boolean`                   | false   | Jika `true`, border input berubah warna merah (indikasi error) |
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import InputOtp from './InputOtp';
+
+export default function OtpVerificationScreen() {
+  const [otp, setOtp] = useState('');
+
+  return (
+    <View style={{ padding: 16 }}>
+      <InputOtp
+        length={6}
+        label="Masukkan Kode OTP"
+        hint="Kode akan dikirim via SMS"
+        hasError={otp.length < 6}
+        onChange={setOtp}
+      />
+    </View>
+  );
+}
+```

package/src/Input/type.tsx

@@ -12,6 +12,7 @@ export interface InputProps extends TextInputProps {
   onPressIconRight?: (val?: GestureResponderEvent) => void;
   onChangeText?: (val: string) => void;
   secureTextEntry?: boolean;
+  iconRightColor?: string;
 }
 
 export interface TextAreaProps extends InputProps {

package/src/index.tsx

@@ -9,6 +9,7 @@ export { default as AccordionItem } from './Accordion/AccordionItem';
 export type { AccordionRenderHeaderProps } from './Accordion/type';
 export { default as Button } from './Button/Button';
 export { default as Color } from './Color/Color';
+export type { ColorVariantType } from './Color/type';
 export { default as Typography } from './Typography/Typography';
 export type {
   fontSizeMap,
@@ -42,9 +43,9 @@ export { default as InputOtp } from './Input/InputOtp';
 export { default as Switch } from './Input/Switch';
 export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as CheckBoxList } from './CheckBox/CheckBoxList';
-export { default as CounterButton } from './CounterButton/CounterButton';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Icon } from './Icon/Icon';
+export type { IconNameProps } from './Icon/type';
 export { default as Modal } from './Modal/Modal';
 export { default as Label } from './Label/Label';
 export { default as List } from './List/List';
@@ -53,6 +54,12 @@ export { default as Loading } from './Loading/Loading';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './Avatar/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export type {
+  Variant as BadgeVariant,
+  Size as BadgeSize,
+  HexColor as BadgeColor,
+  SizeStyle as BadgeSizeStyle,
+} from './Badge/type';
 export { default as Alert } from './Alert/Alert';
 export { default as Timeline } from './Timeline/Timeline';
 export { default as TimelineItem } from './Timeline/TimelineItem';