@teamnhz/rn-ui-toolkit 1.0.1 → 1.0.3

package/README.md

@@ -23,7 +23,7 @@ yarn add @teamnhz/rn-ui-toolkit
 
 ```tsx
 import React, { useState } from "react";
-import { View, ScrollView, Alert, StyleSheet, Image } from "react-native";
+import { View, ScrollView, Alert, StyleSheet } from "react-native";
 import {
   Buttons,
   T,
@@ -41,6 +41,7 @@ import {
   HStack,
   HorizontalFlatList,
   AppHeader,
+  Image
 } from "@teamnhz/rn-ui-toolkit";
 
 export default function App() {
@@ -69,7 +70,7 @@ export default function App() {
       <T size="xl" weight="bold">Welcome to RN UI Toolkit 🚀</T>
 
       {/* Input */}
-      <Input placeholder="Enter your name" value={name} onChangeText={setName} />
+      <Input placeholder="Enter your name" value={name} onChangeText={setName} error="Please Enter you name/>
 
       {/* Checkbox */}
       <CheckBox label="Accept Terms" checked={accepted} onChange={setAccepted} />

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,11 +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;
+    /** 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;