npm - @teamnhz/rn-ui-toolkit - Versions diffs - 1.1.7 → 1.1.9 - Mend

@teamnhz/rn-ui-toolkit 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/AppHeader/index.d.ts +1 -16
package/dist/components/AppHeader/index.js +39 -18
package/dist/components/ImagePicker/index.d.ts +1 -8
package/dist/components/ImagePicker/index.js +83 -453
package/dist/components/Input/index.d.ts +1 -0
package/dist/components/Input/index.js +2 -238
package/package.json +1 -1

package/dist/components/AppHeader/index.d.ts CHANGED Viewed

@@ -1,17 +1,2 @@
-type AppHeaderProps = {
-    navigation: any;
-    headerTitle?: string;
-    titleStyle?: object;
-    leftImage?: any;
-    onPressLeft?: () => void;
-    leftIconStyle?: object;
-    rightImageOne?: any;
-    onPressRightOne?: () => void;
-    rightImageOneStyle?: object;
-    rightImageTwo?: any;
-    onPressRightTwo?: () => void;
-    rightImageTwoStyle?: object;
-    headerStyle?: object;
-};
-declare const AppHeader: (props: AppHeaderProps) => void;
+declare const AppHeader: (props: any) => any;
 export default AppHeader;

package/dist/components/AppHeader/index.js CHANGED Viewed

@@ -1,45 +1,66 @@
-import { View, TouchableOpacity, StyleSheet } from "react-native";
 import React from "react";
+import { View, TouchableOpacity, StyleSheet, Platform, StatusBar, } from "react-native";
 import { Colors } from "../../styles";
 import { Image, T } from "../index";
+const getSafeAreaTop = () => {
+    if (Platform.OS === "android") {
+        return StatusBar.currentHeight || 0;
+    }
+    return 20; // iOS safe area fallback
+};
 const AppHeader = (props) => {
     const { navigation, headerTitle, titleStyle, leftImage, onPressLeft, leftIconStyle, rightImageOne, onPressRightOne, rightImageOneStyle, rightImageTwo, onPressRightTwo, rightImageTwoStyle, headerStyle, } = props;
+    const safeTop = getSafeAreaTop();
     navigation.setOptions({
+        headerLeftContainerStyle: {
+            paddingLeft: 12,
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerRightContainerStyle: {
+            paddingRight: 12,
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerTitleContainerStyle: {
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerStyle: [
+            styles.headerBase,
+            { paddingTop: safeTop },
+            headerStyle,
+        ],
         headerLeft: () => leftImage ? (React.createElement(TouchableOpacity, { onPress: onPressLeft, activeOpacity: 0.8 },
-            React.createElement(Image, { source: leftImage, resizeMode: "contain", style: [styles.leftImage, leftIconStyle] }))) : null,
+            React.createElement(Image, { source: leftImage, resizeMode: "contain", style: [styles.icon, leftIconStyle] }))) : null,
         headerTitle: () => headerTitle ? (React.createElement(T, { title: headerTitle, style: [styles.headerTitleText, titleStyle] })) : null,
         headerRight: () => (React.createElement(View, { style: styles.headerRightWrapper },
             rightImageOne ? (React.createElement(TouchableOpacity, { onPress: onPressRightOne, activeOpacity: 0.8 },
-                React.createElement(Image, { source: rightImageOne, resizeMode: "contain", style: [
-                        styles.rightImage,
-                        rightImageOneStyle,
-                        { marginRight: 10 },
-                    ] }))) : null,
+                React.createElement(Image, { source: rightImageOne, resizeMode: "contain", style: [styles.icon, rightImageOneStyle] }))) : null,
             rightImageTwo ? (React.createElement(TouchableOpacity, { onPress: onPressRightTwo, activeOpacity: 0.8 },
-                React.createElement(Image, { source: rightImageTwo, resizeMode: "contain", style: [styles.rightImage, rightImageTwoStyle] }))) : null)),
-        headerStyle: [styles.headerBase, headerStyle],
+                React.createElement(Image, { source: rightImageTwo, resizeMode: "contain", style: [styles.icon, rightImageTwoStyle] }))) : null)),
     });
+    return null;
 };
 export default AppHeader;
 const styles = StyleSheet.create({
     headerBase: {
-        height: 100,
-        width: "100%",
-    },
-    leftImage: {
-        height: 44,
-        width: 44,
+        backgroundColor: Colors.white,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.lightGrey,
+        height: Platform.OS === "ios" ? 90 : 70,
+        justifyContent: "center",
     },
-    rightImage: {
-        height: 44,
-        width: 44,
+    icon: {
+        height: 28,
+        width: 28,
     },
     headerRightWrapper: {
         flexDirection: "row",
         alignItems: "center",
+        gap: 12,
     },
     headerTitleText: {
         color: Colors.black,
         textAlign: "center",
+        fontSize: 18,
+        fontWeight: "600",
     },
 });

package/dist/components/ImagePicker/index.d.ts CHANGED Viewed

@@ -2,17 +2,10 @@ import React from "react";
 type Props = {
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
-    onSuccess: (data: any) => void;
+    onSuccess: (response: any) => void;
     visible: boolean;
     onClose: () => void;
     enableCompression?: boolean;
-    imageCompressionOptions?: {
-        maxWidth?: number;
-        quality?: number;
-    };
-    videoCompressionOptions?: {
-        compressionMethod?: "auto" | "manual";
-    };
 };
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js CHANGED Viewed

@@ -1,494 +1,127 @@
-// // import React, { useCallback } from "react";
-// // import {
-// //   View,
-// //   Text,
-// //   TouchableOpacity,
-// //   StyleSheet,
-// //   Image,
-// //   Alert,
-// //   ViewStyle,
-// //   TextStyle,
-// //   ImageStyle,
-// // } from "react-native";
-// // import { BottomSheet, Dividers } from "../index";
-// // import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-// // import ImageCropPicker from "react-native-image-crop-picker";
-// // import { Colors, Images, Scale, Typography } from "../../styles";
-// // type StyleProps = {
-// //   containerStyle?: ViewStyle;
-// //   rowStyle?: ViewStyle;
-// //   textStyle?: TextStyle;
-// //   iconStyle?: ImageStyle;
-// // };
-// // type Props = {
-// //   mediaType: "photo" | "video";
-// //   isMultiSelect?: boolean;
-// //   onSuccess: (data: any) => void;
-// //   visible: boolean;
-// //   onClose: () => void;
-// // } & StyleProps;
-// // const ImagePicker: React.FC<Props> = ({
-// //   mediaType,
-// //   isMultiSelect = false,
-// //   onSuccess,
-// //   visible,
-// //   onClose,
-// //   containerStyle,
-// //   rowStyle,
-// //   textStyle,
-// //   iconStyle,
-// // }) => {
-// //   const onComplete = useCallback(
-// //     (data: any) => {
-// //       onSuccess(data);
-// //       onClose();
-// //     },
-// //     [onSuccess, onClose]
-// //   );
-// //   const onCamera = () => {
-// //     if (mediaType === "photo") {
-// //       if (isMultiSelect) {
-// //         ImageCropPicker.openCamera({ mediaType: "photo" })
-// //           .then((response) => onComplete([response]))
-// //           .catch(() => {});
-// //       } else {
-// //         ImageCropPicker.openCamera({ mediaType: "photo" })
-// //           .then((response) =>
-// //             ImageCropPicker.openCropper({
-// //               path: response?.path,
-// //               width: response?.width,
-// //               height: response?.height,
-// //               mediaType: "photo",
-// //               freeStyleCropEnabled: true,
-// //             }).then(onComplete)
-// //           )
-// //           .catch(() => {});
-// //       }
-// //     } else {
-// //       launchCamera({ mediaType: "video" }, (response) => {
-// //         if (response?.assets) {
-// //           onComplete({
-// //             path: response.assets[0]?.uri,
-// //             duration: response.assets[0]?.duration,
-// //           });
-// //         }
-// //       });
-// //     }
-// //   };
-// //   const onGallery = () => {
-// //     if (mediaType === "photo") {
-// //       if (isMultiSelect) {
-// //         ImageCropPicker.openPicker({
-// //           mediaType: "photo",
-// //           multiple: true,
-// //           maxFiles: 5,
-// //         })
-// //           .then((images) => {
-// //             if (images.length > 5) {
-// //               Alert.alert(
-// //                 "Limit Exceeded",
-// //                 "You can only select up to 5 images."
-// //               );
-// //             } else {
-// //               onComplete(images);
-// //             }
-// //           })
-// //           .catch(() => {});
-// //       } else {
-// //         ImageCropPicker.openPicker({ mediaType: "photo" })
-// //           .then((response) =>
-// //             ImageCropPicker.openCropper({
-// //               path: response?.path,
-// //               width: response?.width,
-// //               height: response?.height,
-// //               mediaType: "photo",
-// //               freeStyleCropEnabled: true,
-// //             }).then(onComplete)
-// //           )
-// //           .catch(() => {});
-// //       }
-// //     } else {
-// //       launchImageLibrary({ mediaType: "video" }, (result) => {
-// //         if (result?.assets) {
-// //           onComplete({
-// //             path: result.assets[0]?.uri,
-// //             duration: result.assets[0]?.duration,
-// //           });
-// //         }
-// //       });
-// //     }
-// //   };
-// //   return (
-// //     <BottomSheet visible={visible} onClose={onClose} height={230}>
-// //       <View style={[styles.container, containerStyle]}>
-// //         {/* Camera */}
-// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onCamera}>
-// //           <Image source={Images.video_icon} style={[styles.icon, iconStyle]} />
-// //           <Text style={[styles.text, textStyle]}>Camera</Text>
-// //         </TouchableOpacity>
-// //         <Dividers small />
-// //         {/* Gallery */}
-// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onGallery}>
-// //           <Image source={Images.image_icon} style={[styles.icon, iconStyle]} />
-// //           <Text style={[styles.text, textStyle]}>Gallery</Text>
-// //         </TouchableOpacity>
-// //         <Dividers small />
-// //         {/* Cancel */}
-// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onClose}>
-// //           <Image source={Images.cancel} style={[styles.icon, iconStyle]} />
-// //           <Text style={[styles.text, textStyle]}>Cancel</Text>
-// //         </TouchableOpacity>
-// //       </View>
-// //     </BottomSheet>
-// //   );
-// // };
-// // export default ImagePicker;
-// // const styles = StyleSheet.create({
-// //   container: { flex: 1, padding: 16 },
-// //   row: {
-// //     flexDirection: "row",
-// //     alignItems: "center",
-// //   },
-// //   text: { ...Typography.style.standardU(), color: Colors.white },
-// //   icon: {
-// //     width: Scale.moderateScale(20),
-// //     height: Scale.moderateScale(20),
-// //     marginRight: 10,
-// //     tintColor: Colors.white,
-// //   },
-// // });
-// import React, { useCallback } from "react";
-// import {
-//   View,
-//   Text,
-//   TouchableOpacity,
-//   StyleSheet,
-//   Image,
-//   Alert,
-// } from "react-native";
-// import { BottomSheet, Dividers } from "../index";
-// import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-// import ImageCropPicker from "react-native-image-crop-picker";
-// import { Colors, Images, Scale, Typography } from "../../styles";
-// // 👇 Import your permission utilities
-// import {
-//   cameraPermissions,
-//   galleryPermissions,
-// } from "../../utils/permissions"; // ✅ Make sure path is correct
-// type Props = {
-//   mediaType: "photo" | "video";
-//   isMultiSelect?: boolean;
-//   onSuccess: (data: any) => void;
-//   visible: boolean;
-//   onClose: () => void;
-// };
-// const ImagePicker: React.FC<Props> = ({
-//   mediaType,
-//   isMultiSelect = false,
-//   onSuccess,
-//   visible,
-//   onClose,
-// }) => {
-//   // ✅ Success handler
-//   const onComplete = useCallback(
-//     (data: any) => {
-//       onSuccess(data);
-//       onClose();
-//     },
-//     [onSuccess, onClose]
-//   );
-//   // ✅ CAMERA HANDLER with permission check
-//   const handleCamera = async () => {
-//     await cameraPermissions(async (granted: boolean) => {
-//       if (!granted) return; // ❌ Permission denied, handled by your alert
-//       if (mediaType === "photo") {
-//         if (isMultiSelect) {
-//           // single capture, multiple not supported directly from camera
-//           ImageCropPicker.openCamera({ mediaType: "photo" })
-//             .then((response) => onComplete([response]))
-//             .catch(() => {});
-//         } else {
-//           ImageCropPicker.openCamera({ mediaType: "photo" })
-//             .then((response) =>
-//               ImageCropPicker.openCropper({
-//                 path: response?.path,
-//                 width: response?.width,
-//                 height: response?.height,
-//                 mediaType: "photo",
-//                 freeStyleCropEnabled: true,
-//               }).then(onComplete)
-//             )
-//             .catch(() => {});
-//         }
-//       } else {
-//         // 🎥 VIDEO CAPTURE
-//         launchCamera({ mediaType: "video" }, (response) => {
-//           if (response?.assets?.length) {
-//             onComplete({
-//               path: response.assets[0]?.uri,
-//               duration: response.assets[0]?.duration,
-//             });
-//           }
-//         });
-//       }
-//     });
-//   };
-//   // ✅ GALLERY HANDLER with permission check
-//   const handleGallery = async () => {
-//     await galleryPermissions(async (granted: boolean) => {
-//       if (!granted) return; // ❌ Permission denied, handled by your alert
-//       if (mediaType === "photo") {
-//         if (isMultiSelect) {
-//           ImageCropPicker.openPicker({
-//             mediaType: "photo",
-//             multiple: true,
-//             maxFiles: 5,
-//           })
-//             .then((images) => {
-//               if (images.length > 5) {
-//                 Alert.alert(
-//                   "Limit Exceeded",
-//                   "You can only select up to 5 images."
-//                 );
-//               } else {
-//                 onComplete(images);
-//               }
-//             })
-//             .catch(() => {});
-//         } else {
-//           ImageCropPicker.openPicker({ mediaType: "photo" })
-//             .then((response) =>
-//               ImageCropPicker.openCropper({
-//                 path: response?.path,
-//                 width: response?.width,
-//                 height: response?.height,
-//                 mediaType: "photo",
-//                 freeStyleCropEnabled: true,
-//               }).then(onComplete)
-//             )
-//             .catch(() => {});
-//         }
-//       } else {
-//         // 🎥 VIDEO FROM GALLERY
-//         launchImageLibrary({ mediaType: "video" }, (result) => {
-//           if (result?.assets?.length) {
-//             onComplete({
-//               path: result.assets[0]?.uri,
-//               duration: result.assets[0]?.duration,
-//             });
-//           }
-//         });
-//       }
-//     });
-//   };
-//   return (
-//     <BottomSheet visible={visible} onClose={onClose} height={230}>
-//       <View style={styles.container}>
-//         {/* 📸 Camera */}
-//         <TouchableOpacity style={styles.row} onPress={handleCamera}>
-//           <Image source={Images.video_icon} style={styles.icon} />
-//           <Text style={styles.text}>Camera</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* 🖼️ Gallery */}
-//         <TouchableOpacity style={styles.row} onPress={handleGallery}>
-//           <Image source={Images.image_icon} style={styles.icon} />
-//           <Text style={styles.text}>Gallery</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* ❌ Cancel */}
-//         <TouchableOpacity style={styles.row} onPress={onClose}>
-//           <Image source={Images.cancel} style={styles.icon} />
-//           <Text style={styles.text}>Cancel</Text>
-//         </TouchableOpacity>
-//       </View>
-//     </BottomSheet>
-//   );
-// };
-// export default ImagePicker;
-// const styles = StyleSheet.create({
-//   container: { flex: 1, padding: 16 },
-//   row: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//   },
-//   text: { ...Typography.style.standardU(), color: Colors.white },
-//   icon: {
-//     width: Scale.moderateScale(20),
-//     height: Scale.moderateScale(20),
-//     marginRight: 10,
-//     tintColor: Colors.white,
-//   },
-// });
-import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image, } from "react-native";
 import { BottomSheet, Dividers } from "../index";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
 import ImageCropPicker from "react-native-image-crop-picker";
 import { Image as ImageCompressor, Video as VideoCompressor, } from "react-native-compressor";
-import RNFS from "react-native-fs";
 import { Colors, Images, Scale, Typography } from "../../styles";
-// Import your permission utilities
 import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, imageCompressionOptions = { maxWidth: 1080, quality: 0.7 }, videoCompressionOptions = { compressionMethod: "auto" }, }) => {
-    // Success handler
-    const onComplete = useCallback((data) => {
-        onSuccess(data);
+// NORMALIZE FINAL RESPONSE
+const buildResponse = (raw, compressedPath) => {
+    return {
+        path: compressedPath || raw?.path || raw?.uri?.replace("file://", ""),
+        originalPath: raw?.path?.replace("file://", "") ||
+            raw?.uri?.replace("file://", "") ||
+            "",
+        fileName: raw?.fileName || "",
+        type: raw?.type || "",
+        duration: raw?.duration || undefined,
+    };
+};
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, }) => {
+    // SEND RAW (loading true) TO PARENT
+    const sendRaw = (raw) => {
         onClose();
-    }, [onSuccess, onClose]);
-    // Helper: Compress Image
-    const compressImage = async (imagePath) => {
-        if (!enableCompression)
-            return imagePath;
+        onSuccess({
+            loading: true,
+            data: buildResponse(raw),
+        });
+    };
+    // SEND FINAL COMPRESSED
+    const sendFinal = (raw, compressedPath) => {
+        onSuccess({
+            loading: false,
+            data: buildResponse(raw, compressedPath),
+        });
+    };
+    // IMAGE COMPRESSOR
+    const compressImage = async (path) => {
         try {
-            const compressedImage = await ImageCompressor.compress(imagePath, {
-                maxWidth: imageCompressionOptions.maxWidth,
-                quality: imageCompressionOptions.quality,
+            const compressed = await ImageCompressor.compress(path, {
+                maxWidth: 1080,
+                quality: 0.7,
             });
-            // Log compressed size (optional)
-            const stats = await RNFS.stat(compressedImage.replace("file://", ""));
-            const sizeInMB = stats.size / (1024 * 1024);
-            console.log("Compressed Image Size (MB):", sizeInMB);
-            return compressedImage;
+            return compressed;
         }
-        catch (error) {
-            console.error("Image compression error:", error);
-            return imagePath; // Return original if compression fails
+        catch {
+            return path;
         }
     };
-    // Helper: Compress Video
-    const compressVideo = async (videoUri) => {
-        if (!enableCompression)
-            return videoUri;
+    // VIDEO COMPRESSOR
+    const compressVideo = async (uri) => {
         try {
-            const compressedVideo = await VideoCompressor.compress(videoUri, {
-                compressionMethod: videoCompressionOptions.compressionMethod,
+            const compressed = await VideoCompressor.compress(uri, {
+                compressionMethod: "auto",
             });
-            // Log compressed size (optional)
-            const stats = await RNFS.stat(compressedVideo.replace("file://", ""));
-            const sizeInMB = stats.size / (1024 * 1024);
-            console.log("Compressed Video Size (MB):", sizeInMB);
-            return compressedVideo;
+            return compressed;
         }
-        catch (error) {
-            console.error("Video compression error:", error);
-            return videoUri; // Return original if compression fails
+        catch {
+            return uri;
         }
     };
-    // CAMERA HANDLER with permission check and compression
+    // ------------------ CAMERA ------------------
     const handleCamera = async () => {
         await cameraPermissions(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    const response = await ImageCropPicker.openCamera({
-                        mediaType: "photo",
-                    });
-                    if (isMultiSelect) {
-                        // Single capture for multi-select mode
-                        const compressedPath = await compressImage(response.path);
-                        onComplete([{ ...response, path: compressedPath }]);
-                    }
-                    else {
-                        // Crop and compress single image
-                        const cropped = await ImageCropPicker.openCropper({
-                            path: response?.path,
-                            width: response?.width,
-                            height: response?.height,
-                            mediaType: "photo",
-                            freeStyleCropEnabled: true,
-                        });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
-                    }
+                    const picked = await ImageCropPicker.openCamera({ mediaType: "photo" });
+                    sendRaw(picked);
+                    const compressed = enableCompression
+                        ? await compressImage(picked.path)
+                        : picked.path;
+                    sendFinal(picked, compressed);
                 }
-                catch (error) {
-                    console.log("Camera cancelled or error:", error);
+                catch (e) {
+                    console.log(e);
                 }
             }
             else {
-                // VIDEO CAPTURE - check microphone permission first
-                const micPermission = await checkMicroPhonePermission();
-                if (!micPermission) {
-                    Alert.alert("Microphone Permission Required", "Please enable microphone access to record videos.");
+                const mic = await checkMicroPhonePermission();
+                if (!mic)
                     return;
-                }
-                launchCamera({
-                    mediaType: "video",
-                    durationLimit: 60,
-                    videoQuality: "high",
-                }, async (response) => {
-                    if (response?.assets?.length) {
-                        const videoUri = response.assets[0]?.uri;
-                        const compressedPath = await compressVideo(videoUri);
-                        onComplete({
-                            path: compressedPath,
-                            duration: response.assets[0]?.duration,
-                        });
-                    }
+                launchCamera({ mediaType: "video", durationLimit: 60, videoQuality: "high" }, async (res) => {
+                    if (!res?.assets?.length)
+                        return;
+                    const raw = res.assets[0];
+                    sendRaw(raw);
+                    const compressed = enableCompression
+                        ? await compressVideo(raw.uri)
+                        : raw.uri;
+                    sendFinal(raw, compressed);
                 });
             }
         });
     };
-    // GALLERY HANDLER with permission check and compression
+    // ------------------ GALLERY ------------------
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    if (isMultiSelect) {
-                        const images = await ImageCropPicker.openPicker({
-                            mediaType: "photo",
-                            multiple: true,
-                            maxFiles: 5,
-                        });
-                        if (images.length > 5) {
-                            Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
-                            return;
-                        }
-                        // Compress multiple images
-                        const compressedImages = await Promise.all(images.map(async (img) => ({
-                            ...img,
-                            path: await compressImage(img.path),
-                        })));
-                        onComplete(compressedImages);
-                    }
-                    else {
-                        // Single image with crop
-                        const response = await ImageCropPicker.openPicker({
-                            mediaType: "photo",
-                        });
-                        const cropped = await ImageCropPicker.openCropper({
-                            path: response?.path,
-                            width: response?.width,
-                            height: response?.height,
-                            mediaType: "photo",
-                            freeStyleCropEnabled: true,
-                        });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
-                    }
+                    const picked = await ImageCropPicker.openPicker({ mediaType: "photo" });
+                    sendRaw(picked);
+                    const compressed = enableCompression
+                        ? await compressImage(picked.path)
+                        : picked.path;
+                    sendFinal(picked, compressed);
                 }
-                catch (error) {
-                    console.log("Gallery cancelled or error:", error);
+                catch (e) {
+                    console.log(e);
                 }
             }
             else {
-                // VIDEO FROM GALLERY
-                launchImageLibrary({
-                    mediaType: "video",
-                    assetRepresentationMode: "current",
-                }, async (result) => {
-                    if (result?.assets?.length) {
-                        const videoUri = result.assets[0]?.uri;
-                        const compressedPath = await compressVideo(videoUri);
-                        onComplete({
-                            path: compressedPath,
-                            duration: result.assets[0]?.duration,
-                        });
-                    }
+                launchImageLibrary({ mediaType: "video" }, async (res) => {
+                    if (!res?.assets?.length)
+                        return;
+                    const raw = res.assets[0];
+                    sendRaw(raw);
+                    const compressed = enableCompression
+                        ? await compressVideo(raw.uri)
+                        : raw.uri;
+                    sendFinal(raw, compressed);
                 });
             }
         });
@@ -510,10 +143,7 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
 export default ImagePicker;
 const styles = StyleSheet.create({
     container: { flex: 1, padding: 16 },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
+    row: { flexDirection: "row", alignItems: "center" },
     text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
         width: Scale.moderateScale(20),

package/dist/components/Input/index.d.ts CHANGED Viewed

@@ -35,6 +35,7 @@ interface InputProps extends TextInputProps {
     onPressCountryCode?: () => void;
     countryCodeWrapperStyle?: object;
     countryCodeTextStyle?: object;
+    isError?: boolean;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/Input/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Colors, Typography, Scale, Images } from "../../styles";
 import { defaultRegex } from "../../utils/regex";
 import { messages } from "../../constants/messages";
-const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, leftIconWrapperStyle, rightIconWrapperStyle, type = "text", editable = true, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, maxLength, returnKeyType, countryCode, onPressCountryCode, countryCodeTextStyle, countryCodeWrapperStyle, ...rest }) => {
+const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, leftIconWrapperStyle, rightIconWrapperStyle, type = "text", editable = true, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, maxLength, returnKeyType, countryCode, onPressCountryCode, countryCodeTextStyle, countryCodeWrapperStyle, isError = true, ...rest }) => {
     const { t } = useTranslation();
     const [secureText, setSecureText] = useState(type === "password");
     const [internalError, setInternalError] = useState(null);
@@ -97,7 +97,7 @@ const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, left
             type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
                 React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: [styles.iconWrapper, rightIconWrapperStyle] },
                 React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))),
-        showError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
+        showError && isError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
 };
 export default Input;
 const styles = StyleSheet.create({
@@ -167,239 +167,3 @@ const styles = StyleSheet.create({
         color: Colors.textColor,
     },
 });
-// import React, { useState, useCallback, useEffect } from "react";
-// import {
-//   View,
-//   TextInput,
-//   TextInputProps,
-//   StyleSheet,
-//   Image,
-//   ImageSourcePropType,
-//   TouchableOpacity,
-//   Text,
-//   NativeSyntheticEvent,
-//   TextInputFocusEventData,
-// } from "react-native";
-// import { useTranslation } from "react-i18next";
-// import { Colors, Typography, Scale, Images } from "../../styles";
-// import { defaultRegex, InputType } from "../../utils/regex";
-// import { messages } from "../../constants/messages";
-// interface InputProps extends TextInputProps {
-//   intlType?: string;
-//   textKey?: string;
-//   leftIcon?: ImageSourcePropType;
-//   rightIcon?: ImageSourcePropType;
-//   onLeftIconPress?: () => void;
-//   onRightIconPress?: () => void;
-//   type?: InputType;
-//   editable?: boolean;
-//   error?: string | boolean;
-//   value?: string;
-//   customRegex?: RegExp;
-//   customErrorMessage?: string;
-//   onChangeText?: (text: string) => void;
-//   onValidation?: (errorObj: { type: InputType; hasError: boolean; message?: string }) => void;
-//   containerStyle?: object;
-//   inputStyle?: object;
-//   errorTextStyle?: object;
-//   leftIconStyle?: object;
-//   rightIconStyle?: object;
-// }
-// const Input: React.FC<InputProps> = ({
-//   intlType,
-//   textKey,
-//   placeholder,
-//   leftIcon,
-//   rightIcon,
-//   onLeftIconPress,
-//   onRightIconPress,
-//   style,
-//   containerStyle,
-//   inputStyle,
-//   errorTextStyle,
-//   leftIconStyle,
-//   rightIconStyle,
-//   type = "text",
-//   editable = true,
-//   error,
-//   value = "",
-//   customRegex,
-//   customErrorMessage,
-//   onChangeText,
-//   onValidation,
-//   onBlur: restOnBlur,
-//   onFocus: restOnFocus,
-//   multiline = false,
-//   ...rest
-// }) => {
-//   const { t } = useTranslation();
-//   const [secureText, setSecureText] = useState(type === "password");
-//   const [internalError, setInternalError] = useState<string | null>(null);
-//   const [wasBlurred, setWasBlurred] = useState(false);
-//   const [isFocused, setIsFocused] = useState(false);
-//   const translatedPlaceholder =
-//     intlType && textKey ? String(t(textKey, { ns: intlType, value })) : placeholder;
-//   const keyboardType: TextInputProps["keyboardType"] =
-//     type === "email" ? "email-address" : type === "number" ? "numeric" : "default";
-//   const validateInternal = useCallback(
-//     (text: string) => {
-//       if (!wasBlurred || !editable) return;
-//       const regexToUse = customRegex ?? defaultRegex[type];
-//       const fallbackMsg = messages.invalid[type] || "Invalid input";
-//       const msg = customErrorMessage || fallbackMsg;
-//       if (text === "" || !regexToUse.test(text)) {
-//         setInternalError(msg);
-//         onValidation?.({ type, hasError: true, message: msg });
-//       } else {
-//         setInternalError(null);
-//         onValidation?.({ type, hasError: false });
-//       }
-//     },
-//     [wasBlurred, editable, type, customRegex, customErrorMessage, onValidation]
-//   );
-//   useEffect(() => {
-//     if (!customRegex) return;
-//     if (internalError && value && customRegex.test(value)) {
-//       setInternalError(null);
-//       onValidation?.({ type, hasError: false });
-//     }
-//   }, [value]);
-//   const handleChangeText = (text: string) => {
-//     onChangeText?.(text);
-//     if (wasBlurred) validateInternal(text);
-//   };
-//   const handleFocus = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
-//     setIsFocused(true);
-//     restOnFocus?.(e as any);
-//   };
-//   const handleBlur = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
-//     setIsFocused(false);
-//     if (!wasBlurred) setWasBlurred(true);
-//     if (editable) validateInternal(value || "");
-//     restOnBlur?.(e as any);
-//   };
-//   const rawError = (typeof error === "string" ? error : undefined) ?? internalError ?? null;
-//   const showError = (() => {
-//     if (!rawError || !editable) return null;
-//     return wasBlurred && !isFocused ? rawError : null;
-//   })();
-//   return (
-//     <View style={{ marginBottom: 10 }}>
-//       <View
-//         style={[
-//           styles.container,
-//           !editable && styles.disabled,
-//           !!showError && styles.errorBorder,
-//           isFocused && styles.focusedBorder,
-//           style,
-//           containerStyle,
-//           multiline && styles.multilineContainer,
-//         ]}
-//       >
-//         {leftIcon && (
-//           <TouchableOpacity
-//             onPress={onLeftIconPress}
-//             disabled={!onLeftIconPress}
-//             style={styles.iconWrapper}
-//           >
-//             <Image source={leftIcon} style={[styles.icon, leftIconStyle]} resizeMode="contain" />
-//           </TouchableOpacity>
-//         )}
-//         <TextInput
-//           style={[
-//             styles.input,
-//             !editable && styles.disabledText,
-//             multiline && styles.multilineInput,
-//             inputStyle,
-//           ]}
-//           placeholder={translatedPlaceholder}
-//           placeholderTextColor={Colors.textGrey}
-//           editable={editable}
-//           secureTextEntry={secureText}
-//           keyboardType={keyboardType}
-//           value={value}
-//           onChangeText={handleChangeText}
-//           onFocus={handleFocus}
-//           onBlur={handleBlur}
-//           multiline={multiline}
-//           {...rest}
-//         />
-//         {type === "password" ? (
-//           <TouchableOpacity onPress={() => setSecureText(!secureText)} style={styles.iconWrapper}>
-//             <Image
-//               source={secureText ? Images.Eyeoff : Images.Eyeon}
-//               style={[styles.icon, rightIconStyle]}
-//               resizeMode="contain"
-//             />
-//           </TouchableOpacity>
-//         ) : (
-//           rightIcon && (
-//             <TouchableOpacity
-//               onPress={onRightIconPress}
-//               disabled={!onRightIconPress}
-//               style={styles.iconWrapper}
-//             >
-//               <Image source={rightIcon} style={[styles.icon, rightIconStyle]} resizeMode="contain" />
-//             </TouchableOpacity>
-//           )
-//         )}
-//       </View>
-//       {showError && <Text style={[styles.errorText, errorTextStyle]}>{showError}</Text>}
-//     </View>
-//   );
-// };
-// export default Input;
-// const styles = StyleSheet.create({
-//   container: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//     borderRadius: 5,
-//     borderWidth: 1,
-//     borderColor: Colors.primaryColor,
-//     backgroundColor: Colors.white,
-//     height: Scale.moderateScale(50),
-//     paddingHorizontal: Scale.moderateScale(4),
-//   },
-//   multilineContainer: {
-//     height: "auto",
-//     minHeight: Scale.moderateScale(80),
-//     alignItems: "flex-start",
-//     paddingVertical: Scale.moderateScale(8),
-//   },
-//   focusedBorder: {
-//     borderColor: Colors.primaryColor,
-//   },
-//   input: {
-//     flex: 1,
-//     ...Typography.style.standardU(),
-//     textTransform: "none",
-//     color: Colors.textColor,
-//   },
-//   multilineInput: {
-//     textAlignVertical: "top",
-//     paddingTop: Scale.moderateScale(5),
-//   },
-//   iconWrapper: {
-//     padding: Scale.moderateScale(5),
-//   },
-//   icon: {
-//     width: Scale.moderateScale(20),
-//     height: Scale.moderateScale(20),
-//     tintColor: Colors.primaryColor,
-//   },
-//   disabled: {
-//     backgroundColor: Colors.lightGrey,
-//     borderColor: Colors.borderGrey,
-//   },
-//   disabledText: {
-//     color: Colors.disabledGrey,
-//   },
-//   errorBorder: {
-//     borderColor: Colors.dangerRed,
-//   },
-//   errorText: {
-//     color: Colors.dangerRed,
-//     fontSize: Scale.moderateScale(12),
-//     marginTop: 3,
-//   },
-// });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [