@herca/rn-kit 0.1.26 → 0.1.28

package/lib/typescript/src/TextEditor/TextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAEjC"}
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,MAAY,GACb,EAAE,cAAc,2CAyKhB"}

package/lib/typescript/src/TextEditor/types.d.ts

@@ -1 +1,8 @@
+export interface TextEditorType {
+    label?: string;
+    hint?: string;
+    hasError?: boolean;
+    onChange?: (data: string) => void;
+    height?: number;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/TextEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/types.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/types.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/src/Toast/Toast.d.ts

@@ -8,7 +8,8 @@ interface ToastProps {
     icon?: IconNameProps;
     onClear?: (val: boolean) => void;
     onHide?: (val: boolean) => void;
+    children?: React.ReactNode;
 }
-declare const Toast: ({ visible, message, duration, onHide, color, icon, onClear, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Toast: ({ visible, message, duration, onHide, color, icon, onClear, children, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Toast;
 //# sourceMappingURL=Toast.d.ts.map

package/lib/typescript/src/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAa,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAInD,KAAK,UAAU,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAoDb,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACjC;AACD,QAAA,MAAM,KAAK,GAAI,+DAQZ,UAAU,mDAqEZ,CAAC;AAwBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAa,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,UAAU,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAoDb,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD,QAAA,MAAM,KAAK,GAAI,yEASZ,UAAU,mDAmEZ,CAAC;AAoCF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Toast/ToastContext.d.ts

@@ -5,6 +5,7 @@ interface ToastOptions {
     color?: ColorVariantType;
     icon?: IconNameProps;
     duration?: number;
+    children?: React.ReactNode;
 }
 interface ToastContextType {
     show: (message: string, options?: ToastOptions) => void;

package/lib/typescript/src/Toast/ToastContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/Toast/ToastContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACzD;AAID,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CA2BlE,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,gBAI3B,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/Toast/ToastContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACzD;AAID,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CA4BlE,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,gBAI3B,CAAC"}

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "private": false,
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -94,6 +93,7 @@
     "@react-native-documents/picker": "^10.1.3",
     "@react-native-documents/viewer": "^1.0.1",
     "@react-navigation/native": "^7.1.14",
+    "@testing-library/react-native": "^13.2.0",
     "react-native-blob-util": "^0.22.2",
     "react-native-image-picker": "^8.2.1",
     "react-native-pager-view": "^6.8.1",

package/src/BottomSheet/BottomSheet.tsx

@@ -249,9 +249,12 @@ const styles = StyleSheet.create({
   },
   contentWithFooter: {},
   footer: {
+    borderTopWidth: 1,
+    borderTopColor: Color.gray[100],
     backgroundColor: Color.base.white100,
     position: 'absolute',
-    marginBottom: 20,
+    paddingTop: 10,
+    marginBottom: 32,
     bottom: 0,
     left: 0,
     right: 0,

package/src/Button/tests/Button.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import Button from '../Button';
+
+describe('Button Component', () => {
+  it('renders with title', () => {
+    const { getByText } = render(<Button title="Submit" onPress={() => {}} />);
+    expect(getByText('Submit')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockFn = jest.fn();
+    const { getByText } = render(<Button title="Click me" onPress={mockFn} />);
+    fireEvent.press(getByText('Click me'));
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const mockFn = jest.fn();
+    const { getByText } = render(
+      <Button title="Disabled" onPress={mockFn} disabled />
+    );
+    fireEvent.press(getByText('Disabled'));
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+
+  it('renders loading indicator when loading', () => {
+    const { getByTestId } = render(
+      <Button title="Load" onPress={() => {}} loading />
+    );
+    // You might want to set `testID="loading-indicator"` in <ActivityIndicator /> in the component
+    // For now, we check for presence of ActivityIndicator via accessibilityRole
+    const indicator = getByTestId('ActivityIndicator');
+    expect(indicator).toBeTruthy();
+  });
+
+  it('renders custom child instead of title', () => {
+    const { queryByText, getByText } = render(
+      <Button onPress={() => {}}>
+        <React.Fragment>
+          <Text>Custom Child</Text>
+        </React.Fragment>
+      </Button>
+    );
+    expect(getByText('Custom Child')).toBeTruthy();
+    expect(queryByText('title')).toBeNull();
+  });
+});

package/src/Button/type.tsx

@@ -255,7 +255,7 @@ export const COLOR_MAP: Record<
     tertiaryFocusBorderColor: Color.info[200],
     tertiaryPressTextColor: Color.info[700],
     tertiaryPressBorderColor: 'transparent',
-    tertiaryDisabledTextColor: Color.info[100],
+    tertiaryDisabledTextColor: Color.info[200],
     tertiaryDisabledBorderColor: Color.base.white100,
   },
   orange: {

package/src/DatePicker/TimePicker.tsx

@@ -1,12 +1,13 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import {
   View,
-  ScrollView,
   StyleSheet,
   Text,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
   Dimensions,
+  Animated,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+  ScrollView,
 } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 import Button from '../Button/Button';
@@ -17,6 +18,7 @@ const ITEM_HEIGHT = 40;
 const SCREEN_WIDTH = Dimensions.get('window').width;
 const VISIBLE_ITEMS = 5;
 const MIDDLE_INDEX = Math.floor(VISIBLE_ITEMS / 2);
+const REPEAT_COUNT = 5;
 
 interface TimePickerProps {
   isOpen: boolean;
@@ -26,42 +28,61 @@ interface TimePickerProps {
 
 const generateItems = (max: number) => Array.from({ length: max }, (_, i) => i);
 
+const repeatItems = (items: number[], repeatCount: number) =>
+  Array.from({ length: repeatCount }).flatMap(() => items);
+
 export default function TimePickerWheel({
   isOpen,
   onClose,
   onChange,
 }: TimePickerProps) {
-  const [selectedHour, setSelectedHour] = useState(0);
-  const [selectedMinute, setSelectedMinute] = useState(0);
+  const [selectedHour, setSelectedHour] = useState<number>(0);
+  const [selectedMinute, setSelectedMinute] = useState<number>(0);
 
   const hourRef = useRef<ScrollView>(null);
   const minuteRef = useRef<ScrollView>(null);
 
-  const padItems = (items: number[], padCount: number) => {
-    return [
-      ...items.slice(-padCount).map((i) => i - items.length),
-      ...items,
-      ...items.slice(0, padCount).map((i) => i + items.length),
-    ];
-  };
+  const hourScrollY = useRef(new Animated.Value(0)).current;
+  const minuteScrollY = useRef(new Animated.Value(0)).current;
+
+  const hoursBase = generateItems(24);
+  const minutesBase = generateItems(60);
 
-  const hours = padItems(generateItems(24), MIDDLE_INDEX);
-  const minutes = padItems(generateItems(60), MIDDLE_INDEX);
+  const hours = useMemo(
+    () => repeatItems(hoursBase, REPEAT_COUNT),
+    [hoursBase]
+  );
+  const minutes = useMemo(
+    () => repeatItems(minutesBase, REPEAT_COUNT),
+    [minutesBase]
+  );
+
+  const CENTER_INDEX_HOUR =
+    Math.floor(hours.length / 2 / 24) * 24 + selectedHour;
+  const CENTER_INDEX_MINUTE =
+    Math.floor(minutes.length / 2 / 60) * 60 + selectedMinute;
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
-        scrollToIndex(hourRef, selectedHour + MIDDLE_INDEX);
-        scrollToIndex(minuteRef, selectedMinute + MIDDLE_INDEX);
+        scrollToIndex(hourRef, CENTER_INDEX_HOUR);
+        scrollToIndex(minuteRef, CENTER_INDEX_MINUTE);
       }, 100);
     }
-  }, [isOpen, selectedMinute, selectedHour]);
+  }, [
+    isOpen,
+    selectedMinute,
+    selectedHour,
+    CENTER_INDEX_HOUR,
+    CENTER_INDEX_MINUTE,
+  ]);
 
   const scrollToIndex = (
     ref: React.RefObject<ScrollView | null>,
-    index: number
+    index: number,
+    animated: boolean = true
   ) => {
-    ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated: true });
+    ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated });
   };
 
   const handleScrollEnd = (
@@ -70,14 +91,23 @@ export default function TimePickerWheel({
   ) => {
     const offsetY = event.nativeEvent.contentOffset.y;
     const index = Math.round(offsetY / ITEM_HEIGHT);
+
     if (type === 'hour') {
-      const realIndex = (((index - MIDDLE_INDEX) % 24) + 24) % 24;
-      setSelectedHour(realIndex);
-      setTimeout(() => scrollToIndex(hourRef, realIndex + MIDDLE_INDEX), 50);
+      const realValue = hours[index % 24] as number;
+      setSelectedHour(realValue);
+
+      const newCenter = Math.floor(hours.length / 2 / 24) * 24 + realValue;
+      if (Math.abs(index - newCenter) > 12) {
+        scrollToIndex(hourRef, newCenter, false);
+      }
     } else {
-      const realIndex = (((index - MIDDLE_INDEX) % 60) + 60) % 60;
-      setSelectedMinute(realIndex);
-      setTimeout(() => scrollToIndex(minuteRef, realIndex + MIDDLE_INDEX), 50);
+      const realValue = minutes[index % 60] as number;
+      setSelectedMinute(realValue);
+
+      const newCenter = Math.floor(minutes.length / 2 / 60) * 60 + realValue;
+      if (Math.abs(index - newCenter) > 12) {
+        scrollToIndex(minuteRef, newCenter, false);
+      }
     }
   };
 
@@ -86,22 +116,44 @@ export default function TimePickerWheel({
     onClose?.();
   };
 
-  const renderItem = (value: number, type: 'hour' | 'minute') => {
-    const isSelected =
-      type === 'hour'
-        ? ((value % 24) + 24) % 24 === selectedHour
-        : (value % 60) + (60 % 60) === selectedMinute;
-    const displayValue =
-      type === 'hour'
-        ? (((value % 24) + 24) % 24).toString().padStart(2, '0')
-        : (((value % 60) + 60) % 60).toString().padStart(2, '0');
+  const renderAnimatedItem = (
+    value: number,
+    type: 'hour' | 'minute',
+    index: number,
+    scrollY: Animated.Value
+  ) => {
+    const normalizedValue =
+      type === 'hour' ? ((value % 24) + 24) % 24 : ((value % 60) + 60) % 60;
+
+    const inputRange = [
+      (index - 2) * ITEM_HEIGHT,
+      (index - 1) * ITEM_HEIGHT,
+      index * ITEM_HEIGHT,
+      (index + 1) * ITEM_HEIGHT,
+      (index + 2) * ITEM_HEIGHT,
+    ];
+
+    const scale = scrollY.interpolate({
+      inputRange,
+      outputRange: [0.7, 0.85, 1, 0.85, 0.7],
+      extrapolate: 'clamp',
+    });
+
+    const opacity = scrollY.interpolate({
+      inputRange,
+      outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+      extrapolate: 'clamp',
+    });
 
     return (
-      <View key={`${type}-${value}`} style={styles.item}>
-        <Text style={[styles.itemText, isSelected && styles.selectedItemText]}>
-          {displayValue}
+      <Animated.View
+        key={`${type}-${index}`}
+        style={[styles.item, { transform: [{ scale }], opacity }]}
+      >
+        <Text style={styles.itemText}>
+          {normalizedValue.toString().padStart(2, '0')}
         </Text>
-      </View>
+      </Animated.View>
     );
   };
 
@@ -136,7 +188,7 @@ export default function TimePickerWheel({
         weight="semibold"
         color={Color.gray[900]}
         center
-        style={{ marginBottom: 16 }}
+        style={styles.hintTime}
       >
         Pilih Waktu
       </Typography>
@@ -146,31 +198,46 @@ export default function TimePickerWheel({
         <View style={styles.highlightOverlay} pointerEvents="none">
           <View style={styles.highlight} />
         </View>
+
         <View style={styles.scrollContainer}>
           <View style={styles.pickerColumn}>
-            <ScrollView
+            <Animated.ScrollView
               ref={hourRef}
               showsVerticalScrollIndicator={false}
               snapToInterval={ITEM_HEIGHT}
               decelerationRate="fast"
               onMomentumScrollEnd={(e) => handleScrollEnd(e, 'hour')}
+              onScroll={Animated.event(
+                [{ nativeEvent: { contentOffset: { y: hourScrollY } } }],
+                { useNativeDriver: true }
+              )}
+              scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {hours.map((h) => renderItem(h, 'hour'))}
-            </ScrollView>
+              {hours.map((h, i) =>
+                renderAnimatedItem(h, 'hour', i, hourScrollY)
+              )}
+            </Animated.ScrollView>
           </View>
 
           <View style={styles.pickerColumn}>
-            <ScrollView
+            <Animated.ScrollView
               ref={minuteRef}
               showsVerticalScrollIndicator={false}
               snapToInterval={ITEM_HEIGHT}
               decelerationRate="fast"
               onMomentumScrollEnd={(e) => handleScrollEnd(e, 'minute')}
+              onScroll={Animated.event(
+                [{ nativeEvent: { contentOffset: { y: minuteScrollY } } }],
+                { useNativeDriver: true }
+              )}
+              scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {minutes.map((m) => renderItem(m, 'minute'))}
-            </ScrollView>
+              {minutes.map((m, i) =>
+                renderAnimatedItem(m, 'minute', i, minuteScrollY)
+              )}
+            </Animated.ScrollView>
           </View>
         </View>
       </View>
@@ -209,13 +276,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   itemText: {
-    fontSize: 18,
-    color: Color.gray[400],
-  },
-  selectedItemText: {
-    color: Color.gray[900],
-    fontWeight: 'bold',
     fontSize: 22,
+    color: Color.gray[900],
+    fontWeight: '600',
   },
   highlightOverlay: {
     position: 'absolute',
@@ -231,4 +294,5 @@ const styles = StyleSheet.create({
     zIndex: -1,
     backgroundColor: Color.primary[50],
   },
+  hintTime: { marginBottom: 16 },
 });

package/src/Icon/Icon.tsx

@@ -56,6 +56,9 @@ import QuestionCircleOutline from './icons/QuestionCircleOutline';
 import ShieldFill from './icons/ShieldFill';
 import Users from './icons/Users';
 import WhatsAppFill from './icons/WhatsappFill';
+import Bold from './icons/Bold';
+import Italic from './icons/Italic';
+import UnderLine from './icons/UnderLine';
 
 const icons: Record<
   IconNameProps,
@@ -116,6 +119,9 @@ const icons: Record<
   'shield-fill': ShieldFill,
   'Users': Users,
   'whatsapp-fill': WhatsAppFill,
+  'Bold': Bold,
+  'Italic': Italic,
+  'UnderLine': UnderLine,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -53,6 +53,7 @@ export default function App() {
 - ArrowLeft
 - ArrowRight
 - ArrowUp
+- Bold
 - Camera
 - Calendar
 - Check
@@ -64,12 +65,14 @@ export default function App() {
 - Filter
 - Home
 - Image
+- Italic
 - Pdf
 - RadioButton
 - Search
 - StickyNote
 - Times
 - User
+- UnderLine
 - x-circle
 - Plus
 - Bell
@@ -100,3 +103,6 @@ export default function App() {
 - shield-fill
 - Users
 - whatsapp-fill
+- Bold
+- UnderLine
+- Italic

package/src/Icon/icons/Bold.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Bold: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 13 16" fill="none" style={style}>
+    <Path
+      d="M1 8.07682H7.66667C9.50762 8.07682 11 6.58444 11 4.74349C11 2.90254 9.50762 1.41016 7.66667 1.41016H1V8.07682ZM1 8.07682H8.5C10.3409 8.07682 11.8333 9.56921 11.8333 11.4102C11.8333 13.2511 10.3409 14.7435 8.5 14.7435H1V8.07682Z"
+      stroke={color}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </Svg>
+);
+
+export default Bold;

package/src/Icon/icons/Italic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Italic: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 14 16" fill="none" style={style}>
+    <Path
+      d="M12.8334 1.41016H5.33341M8.66675 14.7435H1.16675M9.50008 1.41016L4.50008 14.7435"
+      stroke={color}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </Svg>
+);
+
+export default Italic;

package/src/Icon/icons/UnderLine.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const UnderLine: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 17" fill="none" style={style}>
+    <Path
+      d="M12.9999 1.41016V7.24349C12.9999 10.0049 10.7613 12.2435 7.99992 12.2435C5.23849 12.2435 2.99992 10.0049 2.99992 7.24349V1.41016M1.33325 15.5768H14.6666"
+      stroke={color}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </Svg>
+);
+
+export default UnderLine;

package/src/Icon/type.tsx

@@ -57,6 +57,9 @@ export type IconNameProps =
   | 'question-circle-outline'
   | 'shield-fill'
   | 'Users'
+  | 'Bold'
+  | 'Italic'
+  | 'UnderLine'
   | 'whatsapp-fill';
 
 export interface IconProps {

package/src/Input/InputOtp.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { StyleSheet, TextInput, View } from 'react-native';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
@@ -10,6 +10,7 @@ type InputOtpProps = {
   label?: string;
   hint?: string;
   hasError?: boolean;
+  inputCenter?: boolean;
 };
 
 const InputOtp: React.FC<InputOtpProps> = ({
@@ -18,6 +19,7 @@ const InputOtp: React.FC<InputOtpProps> = ({
   label,
   hint,
   hasError,
+  inputCenter = false,
 }) => {
   const inputs = useRef<Array<TextInput | null>>([]);
   const values = useRef<string[]>(Array(length).fill(''));
@@ -50,7 +52,10 @@ const InputOtp: React.FC<InputOtpProps> = ({
     <View style={styles.gap4}>
       {label ? <LabelForm title={label} /> : null}
       <View
-        style={styles.container}
+        style={[
+          styles.container,
+          { justifyContent: inputCenter ? 'center' : 'flex-start' },
+        ]}
         onLayout={(e) => {
           // cek apakah lebar container itu cukup untuk menampilkan semua input
           containerWidth.current = e.nativeEvent.layout.width;
@@ -101,7 +106,6 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     gap: 10,
-    justifyContent: 'flex-start',
   },
   input: {
     flexGrow: 1,

package/src/Input/README_INPUT_OTP.md

@@ -24,13 +24,14 @@ Salin file `InputOtp.tsx` ke proyek React Native Anda dan import sesuai kebutuha
 
 ## 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) |
+| 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)                           |
+| `inputCenter` | `boolean`               | false   | Jika `true`, maka seluruh input field akan memposisikan diri ke tengah secara horizontal |
 
 ---