@herca/rn-kit 0.1.68 → 0.1.70

package/lib/typescript/src/Input/partials/InputFile/ModalDelete.d.ts

@@ -0,0 +1,12 @@
+import BottomSheet from '../../../BottomSheet/BottomSheet';
+interface Props extends React.ComponentProps<typeof BottomSheet> {
+    title: string;
+    descripition: string;
+    confirm: string;
+    onConfirm: () => void;
+    cancel: string;
+    onCnacel: () => void;
+}
+export default function ModalDelete({ title, descripition, confirm, cancel, onCnacel, onConfirm, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModalDelete.d.ts.map

package/lib/typescript/src/Input/partials/InputFile/ModalDelete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDelete.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/partials/InputFile/ModalDelete.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAM3D,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,2CAkCP"}

package/lib/typescript/src/Input/partials/InputFile/ModalPicker.d.ts

@@ -0,0 +1,18 @@
+import BottomSheet from '../../../BottomSheet/BottomSheet';
+import type { IconNameProps } from '../../../Icon';
+interface FilePicker {
+    title: string;
+    description: string;
+    onPress: () => void;
+    icon: IconNameProps;
+}
+interface Props extends React.ComponentProps<typeof BottomSheet> {
+    title: string;
+    description: string;
+    camera: FilePicker;
+    gallery: FilePicker;
+    document: FilePicker;
+}
+export default function ModalPicker({ title, description, camera, gallery, document, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModalPicker.d.ts.map

package/lib/typescript/src/Input/partials/InputFile/ModalPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPicker.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/partials/InputFile/ModalPicker.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAO3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;CACrB;AAED,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,2CA4CP"}

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

@@ -1,7 +1,8 @@
 interface Props {
     title: string;
     required?: boolean;
+    color?: string;
 }
-export default function LabelForm({ title, required }: Props): import("react/jsx-runtime").JSX.Element;
+export default function LabelForm({ title, required, color, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=LabelForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAa3D"}
+{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAuB,GACxB,EAAE,KAAK,2CAaP"}

package/lib/typescript/src/Step/StepItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../src/Step/StepItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,QAAQ,GAAI,sEAQf,aAAa,4CA+Bf,CAAC;AAmCF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../src/Step/StepItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,QAAA,MAAM,QAAQ,GAAI,sEAQf,aAAa,4CAuCf,CAAC;AAsCF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/Ui/Center.d.ts

@@ -1,8 +1,8 @@
-import { type ViewStyle } from 'react-native';
+import { type ViewStyle, type StyleProp } from 'react-native';
 interface CenterProps {
     children: React.ReactNode;
     size?: number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 declare const Center: ({ children, style }: CenterProps) => import("react/jsx-runtime").JSX.Element;
 export default Center;

package/lib/typescript/src/Ui/Center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Center.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,GAAI,qBAAqB,WAAW,4CAE/C,CAAC;AASF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Center.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,MAAM,GAAI,qBAAqB,WAAW,4CAE/C,CAAC;AASF,eAAe,MAAM,CAAC"}

package/lib/typescript/src/styles/layouting.d.ts

@@ -12,6 +12,9 @@ export declare const layouting: {
         row: {
             flexDirection: "row";
         };
+        col: {
+            flexDirection: "column";
+        };
         rowCenter: {
             flexDirection: "row";
             alignItems: "center";

package/lib/typescript/src/styles/layouting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layouting.d.ts","sourceRoot":"","sources":["../../../../src/styles/layouting.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCrB,CAAC"}
+{"version":3,"file":"layouting.d.ts","sourceRoot":"","sources":["../../../../src/styles/layouting.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/DatePicker/TimePicker.tsx

@@ -1,18 +1,18 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  View,
-  StyleSheet,
-  Text,
-  Dimensions,
   Animated,
-  type NativeSyntheticEvent,
+  Dimensions,
   type NativeScrollEvent,
+  type NativeSyntheticEvent,
   ScrollView,
+  StyleSheet,
+  View,
 } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 import Button from '../Button/Button';
-import Typography from '../Typography/Typography';
 import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import AnimatedItem from './partials/AnimatedItem';
 
 const ITEM_HEIGHT = 40;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -24,6 +24,9 @@ interface TimePickerProps {
   isOpen: boolean;
   onClose?: () => void;
   onChange?: (value: { hour: number; minute: number }) => void;
+  title?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
 }
 
 const generateItems = (max: number) => Array.from({ length: max }, (_, i) => i);
@@ -35,6 +38,9 @@ export default function TimePickerWheel({
   isOpen,
   onClose,
   onChange,
+  title = 'Pilih Waktu',
+  cancelLabel = 'Batal',
+  confirmLabel = 'Pilih',
 }: TimePickerProps) {
   const [selectedHour, setSelectedHour] = useState<number>(0);
   const [selectedMinute, setSelectedMinute] = useState<number>(0);
@@ -69,13 +75,9 @@ export default function TimePickerWheel({
         scrollToIndex(minuteRef, CENTER_INDEX_MINUTE);
       }, 100);
     }
-  }, [
-    isOpen,
-    selectedMinute,
-    selectedHour,
-    CENTER_INDEX_HOUR,
-    CENTER_INDEX_MINUTE,
-  ]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
 
   const scrollToIndex = (
     ref: React.RefObject<ScrollView | null>,
@@ -116,47 +118,6 @@ export default function TimePickerWheel({
     onClose?.();
   };
 
-  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 (
-      <Animated.View
-        key={`${type}-${index}`}
-        style={[styles.item, { transform: [{ scale }], opacity }]}
-      >
-        <Text style={styles.itemText}>
-          {normalizedValue.toString().padStart(2, '0')}
-        </Text>
-      </Animated.View>
-    );
-  };
-
   return (
     <BottomSheet
       isOpen={isOpen}
@@ -165,7 +126,7 @@ export default function TimePickerWheel({
         <View style={styles.footer}>
           <View style={styles.flex1}>
             <Button
-              title="Batal"
+              title={cancelLabel}
               variant="tertiary"
               onPress={onClose}
               color="primary"
@@ -174,7 +135,7 @@ export default function TimePickerWheel({
           </View>
           <View style={styles.flex1}>
             <Button
-              title="Pilih"
+              title={confirmLabel}
               onPress={handleSubmit}
               color="primary"
               size="medium"
@@ -190,7 +151,7 @@ export default function TimePickerWheel({
         center
         style={styles.hintTime}
       >
-        Pilih Waktu
+        {title}
       </Typography>
 
       <View style={styles.container}>
@@ -214,9 +175,15 @@ export default function TimePickerWheel({
               scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {hours.map((h, i) =>
-                renderAnimatedItem(h, 'hour', i, hourScrollY)
-              )}
+              {hours.map((h, i) => (
+                <AnimatedItem
+                  key={i}
+                  index={i}
+                  value={h}
+                  type="hour"
+                  scrollY={hourScrollY}
+                />
+              ))}
             </Animated.ScrollView>
           </View>
 
@@ -234,9 +201,15 @@ export default function TimePickerWheel({
               scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {minutes.map((m, i) =>
-                renderAnimatedItem(m, 'minute', i, minuteScrollY)
-              )}
+              {minutes.map((m, i) => (
+                <AnimatedItem
+                  key={i}
+                  index={i}
+                  value={m}
+                  type="minute"
+                  scrollY={minuteScrollY}
+                />
+              ))}
             </Animated.ScrollView>
           </View>
         </View>
@@ -270,16 +243,6 @@ const styles = StyleSheet.create({
     height: ITEM_HEIGHT * VISIBLE_ITEMS,
     overflow: 'hidden',
   },
-  item: {
-    height: ITEM_HEIGHT,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  itemText: {
-    fontSize: 22,
-    color: Color.gray[900],
-    fontWeight: '600',
-  },
   highlightOverlay: {
     position: 'absolute',
     zIndex: -1,

package/src/DatePicker/partials/AnimatedItem.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Animated, StyleSheet, Text } from 'react-native';
+import Color from '../../Color/Color';
+
+interface AnimatedItemProps {
+  value: number;
+  scrollY: Animated.Value;
+  index: number;
+  type: 'hour' | 'minute';
+}
+
+const ITEM_HEIGHT = 40;
+
+const AnimatedItem = React.memo(
+  ({ value, scrollY, index, type }: AnimatedItemProps) => {
+    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 (
+      <Animated.View style={[styles.item, { transform: [{ scale }], opacity }]}>
+        <Text style={styles.itemText}>
+          {normalizedValue.toString().padStart(2, '0')}
+        </Text>
+      </Animated.View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  itemText: {
+    fontSize: 22,
+    color: Color.gray[900],
+    fontWeight: '600',
+  },
+  item: {
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AnimatedItem;