@teamnhz/rn-ui-toolkit 1.0.1 → 1.0.2

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/DateTimePicker/index.d.ts

@@ -6,6 +6,12 @@ interface DateTimePickerProps {
     intlType?: string;
     mode?: 'date' | 'time' | 'datetime';
     disabled?: boolean;
+    /** 🔥 new props (to match raw DatePicker usage) */
+    minimumDate?: Date;
+    maximumDate?: Date;
+    modal?: boolean;
+    confirmText?: string;
+    cancelText?: string;
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

package/dist/components/DateTimePicker/index.js

@@ -3,8 +3,9 @@ import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
 import DatePicker from 'react-native-date-picker';
 import { useTranslation } from 'react-i18next';
 import { Colors, Scale, Typography } from '../../styles';
-const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disabled = false, }) => {
+const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disabled = false, minimumDate, maximumDate, modal = true, confirmText, cancelText, }) => {
     const { t } = useTranslation(['common', 'validation', 'address', 'sell']);
+    const [open, setOpen] = useState(false);
     const getLabel = () => {
         if (intlType) {
             const translated = t(label, { ns: intlType });
@@ -13,11 +14,10 @@ const DateTimePicker = ({ value, onChange, label, intlType, mode = 'date', disab
         }
         return label;
     };
-    const [open, setOpen] = useState(false);
     return (React.createElement(View, { style: styles.container },
         React.createElement(TouchableOpacity, { style: styles.button, disabled: disabled, onPress: () => setOpen(true) },
             React.createElement(Text, { style: styles.text }, value ? formatValue(value, mode) : getLabel())),
-        React.createElement(DatePicker, { modal: true, open: open, date: value || new Date(), mode: mode, onConfirm: (val) => {
+        React.createElement(DatePicker, { modal: modal, open: open, date: value || new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, confirmText: confirmText, cancelText: cancelText, onConfirm: (val) => {
                 setOpen(false);
                 onChange(val);
             }, onCancel: () => setOpen(false) })));
@@ -34,7 +34,7 @@ const formatValue = (date, mode) => {
         }
     }
     catch {
-        return ''; // fallback if date is invalid
+        return '';
     }
 };
 const styles = StyleSheet.create({

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

@@ -21,6 +21,12 @@ interface InputProps extends TextInputProps {
         hasError: boolean;
         message?: string;
     }) => void;
+    /** 🔥 custom styles from parent */
+    containerStyle?: object;
+    inputStyle?: object;
+    errorTextStyle?: object;
+    leftIconStyle?: object;
+    rightIconStyle?: object;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/Input/index.js

@@ -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, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, type = "text", disabled = false, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, ...rest }) => {
+const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, type = "text", disabled = false, 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(null);
@@ -65,15 +65,22 @@ const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIcon
                 disabled && styles.disabled,
                 !!showError && styles.errorBorder,
                 isFocused && styles.focusedBorder,
-                style,
+                style, // legacy style (container)
+                containerStyle, // 🔥 custom container style
+                multiline && styles.multilineContainer, // adjust container for multiline
             ] },
             leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: styles.iconWrapper },
-                React.createElement(Image, { source: leftIcon, style: styles.icon, resizeMode: "contain" }))),
-            React.createElement(TextInput, { style: [styles.input, disabled && styles.disabledText], placeholder: translatedPlaceholder, placeholderTextColor: Colors.textGrey, editable: !disabled, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, ...rest }),
+                React.createElement(Image, { source: leftIcon, style: [styles.icon, leftIconStyle], resizeMode: "contain" }))),
+            React.createElement(TextInput, { style: [
+                    styles.input,
+                    disabled && styles.disabledText,
+                    multiline && styles.multilineInput, // adjust text for multiline
+                    inputStyle, // 🔥 parent custom input style
+                ], placeholder: translatedPlaceholder, placeholderTextColor: Colors.textGrey, editable: !disabled, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, multiline: multiline, ...rest }),
             type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: styles.iconWrapper },
-                React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: styles.icon, resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: styles.iconWrapper },
-                React.createElement(Image, { source: rightIcon, style: styles.icon, resizeMode: "contain" }))))),
-        showError && React.createElement(Text, { style: styles.errorText }, showError)));
+                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 },
+                React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))),
+        showError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
 };
 export default Input;
 const styles = StyleSheet.create({
@@ -87,6 +94,12 @@ const styles = StyleSheet.create({
         height: Scale.moderateScale(50),
         paddingHorizontal: Scale.moderateScale(10),
     },
+    multilineContainer: {
+        height: "auto",
+        minHeight: Scale.moderateScale(80),
+        alignItems: "flex-start",
+        paddingVertical: Scale.moderateScale(8),
+    },
     focusedBorder: {
         borderColor: Colors.primaryColor,
     },
@@ -96,6 +109,10 @@ const styles = StyleSheet.create({
         textTransform: "none",
         color: Colors.textColor,
     },
+    multilineInput: {
+        textAlignVertical: "top",
+        paddingTop: Scale.moderateScale(5),
+    },
     iconWrapper: {
         padding: Scale.moderateScale(5),
     },

package/package.json

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