@teamnhz/rn-ui-toolkit 1.0.2 → 1.0.4

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

@@ -1,17 +1,2 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-type Props = {
-    title?: string;
-    leftIcon?: string;
-    onLeftPress?: () => void;
-    onDrawerPress?: () => void;
-    children?: React.ReactNode;
-    isDrawer?: boolean;
-    containerStyle?: StyleProp<ViewStyle>;
-    titleStyle?: StyleProp<TextStyle>;
-    leftContainerStyle?: StyleProp<ViewStyle>;
-    rightContainerStyle?: StyleProp<ViewStyle>;
-    iconStyle?: StyleProp<ViewStyle>;
-};
-declare const AppHeader: React.FC<Props>;
+declare const AppHeader: (props: any) => any;
 export default AppHeader;

package/dist/components/AppHeader/index.js

@@ -1,47 +1,58 @@
-// src/components/AppHeader.tsx
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-const AppHeader = ({ title, leftIcon, onLeftPress, onDrawerPress, children, containerStyle, titleStyle, leftContainerStyle, rightContainerStyle, iconStyle, isDrawer, }) => {
-    return (React.createElement(View, { style: [styles.container, containerStyle] },
-        React.createElement(View, { style: [styles.leftContainer, leftContainerStyle] },
-            isDrawer && (React.createElement(TouchableOpacity, { style: [styles.iconBtn, iconStyle], onPress: onDrawerPress },
-                React.createElement(Icon, { name: "menu", size: 24, color: "#000" }))),
-            leftIcon && (React.createElement(TouchableOpacity, { style: [styles.iconBtn, iconStyle], onPress: onLeftPress },
-                React.createElement(Icon, { name: leftIcon, size: 24, color: "#000" }))),
-            title && (React.createElement(Text, { style: [styles.title, titleStyle], numberOfLines: 1 }, title))),
-        React.createElement(View, { style: [styles.rightContainer, rightContainerStyle] }, children)));
+import { Colors } from "../../styles";
+import Image from "../Image";
+import T from "../T";
+const AppHeader = (props) => {
+    return props.navigation.setOptions({
+        headerLeft: () => (React.createElement(TouchableOpacity, { style: {
+                display: props.leftImage ? "flex" : "none",
+            }, onPress: props.onPressLeft, activeOpacity: 0.8 },
+            React.createElement(Image, { source: props.leftImage, resizeMode: "contain", style: styles.left_image_style }))),
+        headerTitle: () => (React.createElement(T, { title: props.headerTitle, style: {
+                ...styles.header_title_text,
+                display: props.headerTitle ? "flex" : "none",
+            } })),
+        headerRight: () => (React.createElement(View, { style: styles.header_right_style },
+            React.createElement(TouchableOpacity, { style: {
+                    display: props.rightImageOne ? "flex" : "none",
+                }, onPress: props.onPressRightOne, activeOpacity: 0.8 },
+                React.createElement(Image, { source: props.rightImageOne, resizeMode: "contain", style: styles.right_image_one_style })),
+            React.createElement(TouchableOpacity, { style: {
+                    display: props.rightImageTwo ? "flex" : "none",
+                }, onPress: props.onPressRightTwo, activeOpacity: 0.8 },
+                React.createElement(Image, { source: props.rightImageTwo, resizeMode: "contain", style: styles.right_image_two_style })))),
+        headerStyle: {
+            height: 100,
+            width: "100%",
+        },
+    });
 };
-export default AppHeader;
 const styles = StyleSheet.create({
-    container: {
-        height: 56,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        shadowColor: "#000",
-        shadowOpacity: 0.1,
-        shadowOffset: { width: 0, height: 2 },
-        shadowRadius: 4,
-        paddingHorizontal: 8,
+    left_image_style: {
+        height: 44,
+        width: 44,
+    },
+    right_image_one_style: {
+        height: 44,
+        width: 44,
+        marginRight: 10,
     },
-    leftContainer: {
+    right_image_two_style: {
+        height: 44,
+        width: 44,
+    },
+    header_right_style: {
         flexDirection: "row",
         alignItems: "center",
-        flexShrink: 1,
-    },
-    iconBtn: {
-        padding: 8,
-        marginRight: 5,
     },
-    title: {
-        fontSize: 18,
-        fontWeight: "600",
-        color: "#000",
-        marginLeft: 5,
+    header_title_text: {
+        color: Colors.black,
+        textAlign: "center",
     },
-    rightContainer: {
-        flexDirection: "row",
+    header_title_view: {
+        justifyContent: "center",
         alignItems: "center",
     },
 });
+export default AppHeader;

package/dist/components/BottomSheet/index.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
         backgroundColor: "rgba(0,0,0,0.4)",
     },
     sheet: {
-        backgroundColor: Colors.white,
+        backgroundColor: Colors.appThemeColor,
         borderTopLeftRadius: 16,
         borderTopRightRadius: 16,
         padding: 16,
@@ -27,9 +27,65 @@ const styles = StyleSheet.create({
     dragIndicator: {
         width: 40,
         height: 5,
-        backgroundColor: "#ccc",
+        backgroundColor: Colors.dividerColor,
         borderRadius: 3,
         alignSelf: "center",
         marginBottom: 10,
     },
 });
+// import React from "react";
+// import { Modal, View, StyleSheet, TouchableOpacity } from "react-native";
+// import { Colors } from "../../styles";
+// interface AppBottomSheetProps {
+//   ref?:any;
+//   visible: boolean;
+//   onClose: () => void;
+//   children: React.ReactNode;
+//   height?: number;
+// }
+// const BottomSheet: React.FC<AppBottomSheetProps> = ({
+//   ref,
+//   visible,
+//   onClose,
+//   children,
+//   height = 300,
+// }) => {
+//   return (
+//     <Modal ref={ref} transparent visible={visible} animationType="slide">
+//       <TouchableOpacity
+//         style={styles.overlay}
+//         activeOpacity={1}
+//         onPress={onClose}
+//       />
+//       <View style={[styles.sheet, { height }]}>
+//         <View style={styles.dragIndicator} />
+//         {children}
+//       </View>
+//     </Modal>
+//   );
+// };
+// export default BottomSheet;
+// const styles = StyleSheet.create({
+//   overlay: {
+//     flex: 1,
+//     backgroundColor: "rgba(0,0,0,0.4)",
+//   },
+//   sheet: {
+//     backgroundColor: Colors.white,
+//     borderTopLeftRadius: 16,
+//     borderTopRightRadius: 16,
+//     padding: 16,
+//     position: "absolute",
+//     bottom: 0,
+//     left: 0,
+//     right: 0,
+//   },
+//   dragIndicator: {
+//     width: 40,
+//     height: 5,
+//     backgroundColor: "#ccc",
+//     borderRadius: 3,
+//     alignSelf: "center",
+//     marginBottom: 10,
+//   },
+// });

package/dist/components/Buttons/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import React from "react";
+import { ViewStyle, TextStyle } from "react-native";
 type ButtonDataProps = {
     title: string;
     buttonStyle?: ViewStyle;

package/dist/components/Buttons/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, ActivityIndicator, Dimensions, } from 'react-native';
-import { useTranslation } from 'react-i18next';
-import { Colors, Typography, Scale } from '../../styles';
-const { width } = Dimensions.get('window');
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, ActivityIndicator, Dimensions, } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Colors, Typography, Scale } from "../../styles";
+const { width } = Dimensions.get("window");
 const Button = ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, }) => {
     const { t } = useTranslation();
     const dynamicTranslation = (text) => intlType ? t(text, { ns: intlType }) : t(text);
@@ -11,7 +11,7 @@ const Button = ({ outline, buttonStyle, title, intlType, titleStyle, loading, on
             outline && styles.outlineButton,
             buttonStyle,
             (disabled || loading) && styles.disabledButton,
-        ], onPress: onPress, disabled: disabled || loading, activeOpacity: 0.7 }, loading ? (React.createElement(ActivityIndicator, { color: outline ? Colors.primaryColor : '#fff' })) : (React.createElement(Text, { style: [
+        ], onPress: onPress, disabled: disabled || loading, activeOpacity: 0.7 }, loading ? (React.createElement(ActivityIndicator, { color: outline ? Colors.primaryColor : "#fff" })) : (React.createElement(Text, { style: [
             styles.defaultTitleStyle,
             outline && styles.outlineTitleStyle,
             titleStyle,
@@ -21,22 +21,22 @@ export default Button;
 const styles = StyleSheet.create({
     button: {
         width: width,
-        alignSelf: 'center',
+        alignSelf: "center",
         borderRadius: 5,
         backgroundColor: Colors.primaryColor,
         height: Scale.moderateScale(50),
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: "center",
+        justifyContent: "center",
     },
     outlineButton: {
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         borderWidth: 1,
         borderColor: Colors.primaryColor,
     },
     outlineTitleStyle: { color: Colors.primaryColor },
     defaultTitleStyle: {
         ...Typography.style.standardU(),
-        textTransform: 'capitalize',
+        textTransform: "capitalize",
         color: Colors.white,
     },
     disabledButton: {
@@ -44,3 +44,94 @@ const styles = StyleSheet.create({
         backgroundColor: Colors.disabledGrey,
     },
 });
+// import React from "react";
+// import {
+//   StyleSheet,
+//   Text,
+//   TouchableOpacity,
+//   ActivityIndicator,
+//   ViewStyle,
+//   TextStyle,
+//   Dimensions,
+// } from "react-native";
+// import { useTranslation } from "react-i18next";
+// import { Colors, Typography, Scale } from "../../styles";
+// const { width } = Dimensions.get("window");
+// type ButtonDataProps = {
+//   title: string;
+//   buttonStyle?: ViewStyle;
+//   intlType?: string; // namespace
+//   outline?: boolean;
+//   titleStyle?: TextStyle;
+//   loading?: boolean;
+//   onPress?: () => void;
+//   disabled?: boolean;
+// };
+// const Button = ({
+//   outline,
+//   buttonStyle,
+//   title,
+//   intlType,
+//   titleStyle,
+//   loading,
+//   onPress,
+//   disabled,
+// }: ButtonDataProps) => {
+//   const { t } = useTranslation();
+//   const dynamicTranslation = (text: string) =>
+//     intlType ? t(text, { ns: intlType }) : t(text);
+//   return (
+//     <TouchableOpacity
+//       style={[
+//         styles.button,
+//         outline && styles.outlineButton,
+//         buttonStyle,
+//         (disabled || loading) && styles.disabledButton,
+//       ]}
+//       onPress={onPress}
+//       disabled={disabled || loading}
+//       activeOpacity={0.7}
+//     >
+//       {loading ? (
+//         <ActivityIndicator color={outline ? Colors.primaryColor : "#fff"} />
+//       ) : (
+//         <Text
+//           style={[
+//             styles.defaultTitleStyle,
+//             outline && styles.outlineTitleStyle,
+//             titleStyle,
+//           ]}
+//         >
+//           {dynamicTranslation(title)}
+//         </Text>
+//       )}
+//     </TouchableOpacity>
+//   );
+// };
+// export default Button;
+// const styles = StyleSheet.create({
+//   button: {
+//     width: width,
+//     alignSelf: "center",
+//     borderRadius: 5,
+//     backgroundColor: Colors.primaryColor,
+//     height: Scale.moderateScale(50),
+//     alignItems: "center",
+//     justifyContent: "center",
+//   },
+//   outlineButton: {
+//     backgroundColor: "transparent",
+//     borderWidth: 1,
+//     borderColor: Colors.primaryColor,
+//   },
+//   outlineTitleStyle: { color: Colors.primaryColor },
+//   defaultTitleStyle: {
+//     ...Typography.style.standardU(),
+//     textTransform: "capitalize",
+//     color: Colors.white,
+//   },
+//   disabledButton: {
+//     opacity: 0.6,
+//     backgroundColor: Colors.disabledGrey,
+//   },
+// });

package/dist/components/CheckBox/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
 interface CheckBoxProps {
     label?: string;
     intlType?: string;

package/dist/components/CheckBox/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, } from 'react-native';
-import { useTranslation } from 'react-i18next';
-import Icon from 'react-native-vector-icons/Feather';
-import { Colors } from '../../styles';
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
+import { useTranslation } from "react-i18next";
+import Icon from "react-native-vector-icons/Feather";
+import { Colors } from "../../styles";
 const CheckBox = ({ label, intlType, checked, onChange, disabled = false, size = 20, color = Colors.checkedColor, checkedColor = Colors.checkedColor, disabledColor = Colors.disabledGrey, labelColor = Colors.textColor, containerStyle, boxStyle, labelStyle, iconStyle, renderLabel, }) => {
     const { t } = useTranslation();
     const getLabel = () => {
         if (!label)
-            return '';
+            return "";
         if (intlType) {
             const translated = t(label, { ns: intlType });
             if (translated !== label)
@@ -23,20 +23,117 @@ const CheckBox = ({ label, intlType, checked, onChange, disabled = false, size =
                     borderWidth: 1,
                     borderColor: disabled ? disabledColor : color,
                     borderRadius: 4,
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    justifyContent: "center",
+                    alignItems: "center",
                     marginRight: 10,
-                    backgroundColor: checked ? checkedColor : 'transparent',
+                    backgroundColor: checked ? checkedColor : "transparent",
                 },
                 boxStyle,
             ] }, checked && (React.createElement(Icon, { name: "check", size: size * 0.7, color: "#fff", style: iconStyle }))),
-        renderLabel
-            ? renderLabel()
-            : label
-                ? React.createElement(Text, { style: [{ fontSize: 14, color: labelColor }, labelStyle] }, getLabel())
-                : null));
+        renderLabel ? (renderLabel()) : label ? (React.createElement(Text, { style: [{ fontSize: 14, color: labelColor }, labelStyle] }, getLabel())) : null));
 };
 const styles = StyleSheet.create({
-    container: { flexDirection: 'row', alignItems: 'center' },
+    container: { flexDirection: "row", alignItems: "center" },
 });
 export default CheckBox;
+// import React from 'react';
+// import {
+//   View,
+//   Text,
+//   TouchableOpacity,
+//   StyleSheet,
+//   StyleProp,
+//   ViewStyle,
+//   TextStyle,
+// } from 'react-native';
+// import { useTranslation } from 'react-i18next';
+// import Icon from 'react-native-vector-icons/Feather';
+// import { Colors } from '../../styles';
+// interface CheckBoxProps {
+//   label?: string; // translation key OR plain text
+//   intlType?: string; // optional namespace
+//   checked: boolean;
+//   onChange: (checked: boolean) => void;
+//   disabled?: boolean;
+//   // Customization options
+//   size?: number; // box size
+//   color?: string; // border color
+//   checkedColor?: string; // fill color when checked
+//   disabledColor?: string; // border when disabled
+//   labelColor?: string;
+//   containerStyle?: StyleProp<ViewStyle>;
+//   boxStyle?: StyleProp<ViewStyle>;
+//   labelStyle?: StyleProp<TextStyle>;
+//   iconStyle?: StyleProp<TextStyle>;
+//   renderLabel?: () => React.ReactNode; // full custom label
+// }
+// const CheckBox: React.FC<CheckBoxProps> = ({
+//   label,
+//   intlType,
+//   checked,
+//   onChange,
+//   disabled = false,
+//   size = 20,
+//   color = Colors.checkedColor,
+//   checkedColor = Colors.checkedColor,
+//   disabledColor = Colors.disabledGrey,
+//   labelColor = Colors.textColor,
+//   containerStyle,
+//   boxStyle,
+//   labelStyle,
+//   iconStyle,
+//   renderLabel,
+// }) => {
+//   const { t } = useTranslation();
+//   const getLabel = () => {
+//     if (!label) return '';
+//     if (intlType) {
+//       const translated = t(label, { ns: intlType });
+//       if (translated !== label) return translated;
+//     }
+//     return label;
+//   };
+//   return (
+//     <TouchableOpacity
+//       style={[styles.container, containerStyle]}
+//       onPress={() => onChange(!checked)}
+//       disabled={disabled}
+//       activeOpacity={0.7}
+//     >
+//       <View
+//         style={[
+//           {
+//             width: size,
+//             height: size,
+//             borderWidth: 1,
+//             borderColor: disabled ? disabledColor : color,
+//             borderRadius: 4,
+//             justifyContent: 'center',
+//             alignItems: 'center',
+//             marginRight: 10,
+//             backgroundColor: checked ? checkedColor : 'transparent',
+//           },
+//           boxStyle,
+//         ]}
+//       >
+//         {checked && (
+//           <Icon
+//             name="check"
+//             size={size * 0.7}
+//             color="#fff"
+//             style={iconStyle as any}
+//           />
+//         )}
+//       </View>
+//       {renderLabel
+//         ? renderLabel()
+//         : label
+//         ? <Text style={[{ fontSize: 14, color: labelColor }, labelStyle]}>{getLabel()}</Text>
+//         : null}
+//     </TouchableOpacity>
+//   );
+// };
+// const styles = StyleSheet.create({
+//   container: { flexDirection: 'row', alignItems: 'center' },
+// });
+// export default CheckBox;

package/dist/components/DateTimePicker/index.d.ts

@@ -1,17 +1,33 @@
-import React from 'react';
+import React from "react";
+import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle, ImageStyle } from "react-native";
 interface DateTimePickerProps {
     value: Date | null;
     onChange: (date: Date) => void;
-    label: string;
+    label?: string;
+    placeholder?: string;
     intlType?: string;
-    mode?: 'date' | 'time' | 'datetime';
+    mode?: "date" | "time" | "datetime";
     disabled?: boolean;
-    /** 🔥 new props (to match raw DatePicker usage) */
+    /** raw DatePicker props */
     minimumDate?: Date;
     maximumDate?: Date;
     modal?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /** style overrides */
+    containerStyle?: StyleProp<ViewStyle>;
+    pickerContainerStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    leftImageStyle?: StyleProp<ImageStyle>;
+    rightImageStyle?: StyleProp<ImageStyle>;
+    /** icons */
+    leftIcon?: ImageSourcePropType;
+    rightIcon?: ImageSourcePropType;
+    leftIconShow?: boolean;
+    onCancel?: () => void;
+    error?: string | boolean;
+    errorTextStyle?: StyleProp<TextStyle>;
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;