@teamnhz/rn-ui-toolkit 1.4.3 → 1.4.5

package/dist/components/AppHeader/index.js

@@ -1,41 +1,22 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet, Platform, StatusBar, } from "react-native";
+import { View, TouchableOpacity, StyleSheet, } 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
-};
+import { SafeAreaView } from "react-native-safe-area-context";
 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.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.icon, rightImageOneStyle] }))) : null,
-            rightImageTwo ? (React.createElement(TouchableOpacity, { onPress: onPressRightTwo, activeOpacity: 0.8 },
-                React.createElement(Image, { source: rightImageTwo, resizeMode: "contain", style: [styles.icon, rightImageTwoStyle] }))) : null)),
+        header: () => (React.createElement(SafeAreaView, { edges: ["top"], style: [styles.headerBase, headerStyle] },
+            React.createElement(View, { style: styles.headerContainer },
+                React.createElement(View, { style: styles.leftWrapper }, leftImage ? (React.createElement(TouchableOpacity, { onPress: onPressLeft, activeOpacity: 0.8 },
+                    React.createElement(Image, { source: leftImage, resizeMode: "contain", style: [styles.icon, leftIconStyle] }))) : (React.createElement(View, { style: { width: 28 } }) // placeholder to keep center aligned
+                )),
+                React.createElement(View, { style: styles.titleWrapper }, headerTitle ? (React.createElement(T, { title: headerTitle, style: [styles.headerTitleText, titleStyle] })) : null),
+                React.createElement(View, { style: styles.rightWrapper },
+                    rightImageOne ? (React.createElement(TouchableOpacity, { onPress: onPressRightOne, activeOpacity: 0.8 },
+                        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.icon, rightImageTwoStyle] }))) : null)))),
     });
     return null;
 };
@@ -45,18 +26,35 @@ const styles = StyleSheet.create({
         backgroundColor: Colors.white,
         borderBottomWidth: 1,
         borderBottomColor: Colors.lightGrey,
-        height: Platform.OS === "ios" ? 90 : 70,
-        justifyContent: "center",
     },
-    icon: {
-        height: 28,
-        width: 28,
+    headerContainer: {
+        // height: Platform.OS === "ios" ? 60 : 60, // equal height on both
+        height: 60, // equal height on both
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: 12,
     },
-    headerRightWrapper: {
+    leftWrapper: {
+        width: 60,
+        justifyContent: "center",
+        alignItems: "flex-start",
+    },
+    rightWrapper: {
+        width: 60,
         flexDirection: "row",
+        justifyContent: "flex-end",
         alignItems: "center",
         gap: 12,
     },
+    titleWrapper: {
+        flex: 1,
+        alignItems: "center",
+    },
+    icon: {
+        height: 28,
+        width: 28,
+    },
     headerTitleText: {
         color: Colors.black,
         textAlign: "center",

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { ViewStyle, TextStyle } from "react-native";
+import { TextStyle, ViewStyle, ImageSourcePropType, ImageStyle } from "react-native";
 type ButtonDataProps = {
-    title: string;
+    title?: string;
     buttonStyle?: ViewStyle;
     intlType?: string;
     outline?: boolean;
@@ -9,6 +9,13 @@ type ButtonDataProps = {
     loading?: boolean;
     onPress?: () => void;
     disabled?: boolean;
+    icon?: ImageSourcePropType | null;
+    leftIcon?: ImageSourcePropType | null;
+    rightIcon?: ImageSourcePropType | null;
+    leftIconStyle?: ImageStyle;
+    rightIconStyle?: ImageStyle;
+    iconStyle?: ImageStyle;
+    iconContainerStyle?: ViewStyle;
 };
-declare const Button: ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, }: ButtonDataProps) => React.JSX.Element;
+declare const Button: ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, icon, leftIcon, rightIcon, leftIconStyle, rightIconStyle, iconStyle, }: ButtonDataProps) => React.JSX.Element;
 export default Button;

package/dist/components/Buttons/index.js

@@ -1,137 +1,70 @@
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity, ActivityIndicator, Dimensions, } from "react-native";
+import { StyleSheet, TouchableOpacity, ActivityIndicator, Image, View, } 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, }) => {
+import T from "../T";
+const Button = ({ outline, buttonStyle, title, intlType, titleStyle, loading, onPress, disabled, icon = null, leftIcon = null, rightIcon = null, leftIconStyle, rightIconStyle, iconStyle, }) => {
     const { t } = useTranslation();
+    const isValidTitle = title && title.trim().length > 0;
+    const hasLeft = !!leftIcon;
+    const hasRight = !!rightIcon;
+    const hasIcon = !!icon;
     const dynamicTranslation = (text) => intlType ? t(text, { ns: intlType }) : t(text);
     return (React.createElement(TouchableOpacity, { style: [
             styles.button,
             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: [
-            styles.defaultTitleStyle,
-            outline && styles.outlineTitleStyle,
-            titleStyle,
-        ] }, dynamicTranslation(title)))));
+        ], onPress: onPress, disabled: disabled || loading, activeOpacity: 0.7 }, loading ? (React.createElement(ActivityIndicator, { color: outline ? Colors.primaryColor : "#fff" })) : (React.createElement(View, { style: styles.innerContainer },
+        hasIcon && (React.createElement(Image, { source: icon, style: [styles.icon, iconStyle], resizeMode: "contain" })),
+        hasLeft && (React.createElement(Image, { source: leftIcon, style: [styles.icon, leftIconStyle], resizeMode: "contain" })),
+        isValidTitle && (React.createElement(T, { style: [
+                styles.defaultTitleStyle,
+                outline && styles.outlineTitleStyle,
+                titleStyle,
+            ], numberOfLines: 1 }, dynamicTranslation(title))),
+        hasRight && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))));
 };
 export default Button;
 const styles = StyleSheet.create({
     button: {
-        width: width,
+        width: "100%",
         alignSelf: "center",
         borderRadius: 5,
         backgroundColor: Colors.primaryColor,
         height: Scale.moderateScale(50),
         alignItems: "center",
         justifyContent: "center",
+        paddingHorizontal: Scale.moderateScale(12),
+    },
+    innerContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center", // KEY FIX
+        flexShrink: 1,
+        flexGrow: 0,
+        gap: Scale.moderateScale(8),
     },
     outlineButton: {
         backgroundColor: "transparent",
         borderWidth: 1,
         borderColor: Colors.primaryColor,
     },
-    outlineTitleStyle: { color: Colors.primaryColor },
     defaultTitleStyle: {
         ...Typography.style.standardU(),
         textTransform: "capitalize",
         color: Colors.white,
+        flexShrink: 1,
+        textAlign: "center",
     },
+    outlineTitleStyle: { color: Colors.primaryColor },
     disabledButton: {
         opacity: 0.6,
         backgroundColor: Colors.disabledGrey,
     },
+    icon: {
+        width: Scale.moderateScale(20),
+        height: Scale.moderateScale(20),
+        flexShrink: 0,
+    },
 });
-// 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/Input/index.d.ts

@@ -36,6 +36,8 @@ interface InputProps extends TextInputProps {
     countryCodeWrapperStyle?: object;
     countryCodeTextStyle?: object;
     isError?: boolean;
+    downArrowIcon?: ImageSourcePropType;
+    downArrowStyle?: 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, 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 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, downArrowIcon, downArrowStyle, ...rest }) => {
     const { t } = useTranslation();
     const [secureText, setSecureText] = useState(type === "password");
     const [internalError, setInternalError] = useState(null);
@@ -85,7 +85,10 @@ const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, left
             leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: [styles.iconWrapper, leftIconWrapperStyle] },
                 React.createElement(Image, { source: leftIcon, style: [styles.icon, leftIconStyle], resizeMode: "contain" }))),
             countryCode && (React.createElement(TouchableOpacity, { onPress: onPressCountryCode, disabled: !onPressCountryCode, style: [styles.countryCodeWrapper, countryCodeWrapperStyle] },
-                React.createElement(Text, { style: [styles.countryCodeText, countryCodeTextStyle] }, countryCode))),
+                React.createElement(View, { style: styles.rowCenter },
+                    React.createElement(Image, { source: downArrowIcon || Images.down_arrow // <-- Your default arrow
+                        , style: [styles.downArrow, downArrowStyle], tintColor: Colors.black }),
+                    React.createElement(Text, { style: [styles.countryCodeText, countryCodeTextStyle] }, countryCode)))),
             React.createElement(TextInput, { style: [
                     styles.input,
                     !editable && styles.disabledText,
@@ -143,7 +146,7 @@ const styles = StyleSheet.create({
         borderColor: Colors.borderGrey,
     },
     disabledText: {
-        color: Colors.disabledGrey,
+        color: Colors.lightGrey,
     },
     errorBorder: {
         borderColor: Colors.dangerRed,
@@ -153,17 +156,25 @@ const styles = StyleSheet.create({
         fontSize: Scale.moderateScale(12),
         marginTop: 3,
     },
+    rowCenter: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    downArrow: {
+        width: 15,
+        height: 15,
+        resizeMode: "contain",
+        marginRight: 5,
+    },
     countryCodeWrapper: {
-        paddingHorizontal: Scale.moderateScale(6),
-        justifyContent: "center",
+        paddingRight: 10,
+        paddingVertical: 8,
+        borderRadius: 8,
+        flexDirection: "row",
         alignItems: "center",
-        borderRightWidth: 1,
-        borderRightColor: Colors.borderGrey,
-        marginRight: Scale.moderateScale(6),
     },
     countryCodeText: {
-        ...Typography.style.standardU(),
-        fontSize: Scale.moderateScale(14),
-        color: Colors.textColor,
+        fontSize: 16,
+        color: "#333",
     },
 });

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

@@ -1,3 +1,12 @@
 import React from "react";
-declare const KeyboardScroll: (props: any) => React.JSX.Element;
+import { ScrollViewProps } from "react-native";
+import type { KeyboardAwareProps } from "react-native-keyboard-aware-scroll-view";
+type KeyboardScrollProps = KeyboardAwareProps & ScrollViewProps;
+/**
+ * FULLY EXTENDED COMPONENT
+ * - Supports ALL props of KeyboardAwareScrollView
+ * - No conflict props
+ * - Clean + reusable wrapper
+ */
+declare const KeyboardScroll: ({ children, ...restProps }: KeyboardScrollProps) => React.JSX.Element;
 export default KeyboardScroll;

package/dist/components/KeyboardScroll/index.js

@@ -1,76 +1,12 @@
 import React from "react";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-const KeyboardScroll = (props) => {
-    return (React.createElement(KeyboardAwareScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", bounces: false, enableAutomaticScroll: true, ...props }));
+import { KeyboardAwareScrollView, } from "react-native-keyboard-aware-scroll-view";
+/**
+ * FULLY EXTENDED COMPONENT
+ * - Supports ALL props of KeyboardAwareScrollView
+ * - No conflict props
+ * - Clean + reusable wrapper
+ */
+const KeyboardScroll = ({ children, ...restProps }) => {
+    return (React.createElement(KeyboardAwareScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", bounces: false, ...restProps }, children));
 };
 export default KeyboardScroll;
-// import React from "react";
-// import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-// const KeyboardScroll = (props: any) => {
-//   return (
-//     <KeyboardAwareScrollView
-//       showsVerticalScrollIndicator={false}
-//       keyboardShouldPersistTaps={"handled"}
-//       bounces={false}
-//       enableAutomaticScroll={true}
-//       {...props}
-//     ></KeyboardAwareScrollView>
-//   );
-// };
-// export default KeyboardScroll;
-/////////////////////////////////////////////////////////////////////
-// import React, { ReactNode } from 'react';
-// import { StyleSheet, ViewStyle, Platform } from 'react-native';
-// import { Edges, SafeAreaView } from 'react-native-safe-area-context';
-// import { Colors, Scale } from '../../styles';
-// import { ScrollView } from 'react-native';
-// type ScrolledContainerProps = {
-//   children: ReactNode;
-//   containerStyle?: ViewStyle;
-//   safeEdgesTop?: boolean;
-//   safeEdgesBottom?: boolean;
-//   addPaddingTop?: boolean;
-//   scrollEnabled?: boolean;   // in case you want to toggle scroll
-//   keyboardShouldPersistTaps?: 'always' | 'handled' | 'never';
-// };
-// const ScrolledContainer = ({
-//   containerStyle,
-//   children,
-//   safeEdgesTop,
-//   safeEdgesBottom,
-//   addPaddingTop,
-//   scrollEnabled = true,
-//   keyboardShouldPersistTaps = 'handled',
-// }: ScrolledContainerProps) => {
-//   const edges: any = ['left', 'right'];
-//   if (safeEdgesTop) edges.push('top');
-//   if (safeEdgesBottom) edges.push('bottom');
-//   return (
-//     <SafeAreaView edges={edges} style={styles.globalSafeAreaStyle}>
-//       <ScrollView
-//         contentContainerStyle={[
-//           styles.screen,
-//           addPaddingTop && { paddingTop: Scale?.moderateScale(50) },
-//           containerStyle,
-//         ]}
-//         showsVerticalScrollIndicator={false}
-//         scrollEnabled={scrollEnabled}
-//         keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-//       >
-//         {children}
-//       </ScrollView>
-//     </SafeAreaView>
-//   );
-// };
-// export default ScrolledContainer;
-// const styles = StyleSheet.create({
-//   globalSafeAreaStyle: {
-//     flex: 1,
-//     backgroundColor: Colors.background,
-//     paddingBottom: Platform.OS === 'android' ? Scale?.moderateScale(10) : 0,
-//   },
-//   screen: {
-//     flexGrow: 1,  // makes ScrollView expand & scroll
-//     paddingTop: Scale?.moderateScale(20),
-//   },
-// });

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { ViewStyle, TextStyle } from "react-native";
+import { TextStyle, ViewStyle, ImageSourcePropType, ImageStyle } from "react-native";
 interface LinearGradientButtonProps {
-    title: string;
+    title?: string;
     onPress: () => void;
     loading?: boolean;
     disabled?: boolean;
@@ -15,9 +15,16 @@ interface LinearGradientButtonProps {
         y: number;
     };
     containerStyle?: ViewStyle;
-    textStyle?: TextStyle;
+    titleStyle?: TextStyle;
     height?: number;
     borderRadius?: number;
+    leftIcon?: ImageSourcePropType | null;
+    rightIcon?: ImageSourcePropType | null;
+    icon?: ImageSourcePropType | null;
+    leftIconStyle?: ImageStyle;
+    rightIconStyle?: ImageStyle;
+    iconStyle?: ImageStyle;
+    iconContainerStyle?: ViewStyle;
 }
 declare const LinearGradientButton: React.FC<LinearGradientButtonProps>;
 export default LinearGradientButton;

package/dist/components/LinearGradientButton/index.js

@@ -1,39 +1,63 @@
 import React from "react";
-import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, Platform, } from "react-native";
+import { TouchableOpacity, ActivityIndicator, Image, View, StyleSheet, } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-const LinearGradientButton = ({ title, onPress, loading = false, disabled = false, colors = ["#4c669f", "#3b5998", "#192f6a"], start = { x: 0, y: 0 }, end = { x: 1, y: 1 }, containerStyle, textStyle, height = 50, borderRadius = 12, }) => {
+import { Colors, Typography, Scale } from "../../styles";
+import T from "../T";
+const LinearGradientButton = ({ title, onPress, loading = false, disabled = false, colors = ["#4c669f", "#3b5998", "#192f6a"], start = { x: 0, y: 0 }, end = { x: 1, y: 1 }, containerStyle, titleStyle, height = Scale.moderateScale(50), borderRadius = 5, leftIcon, rightIcon, icon, leftIconStyle, rightIconStyle, iconStyle, iconContainerStyle, }) => {
     const isDisabled = loading || disabled;
-    return (React.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: onPress, disabled: isDisabled, style: [
-            styles.container,
-            { opacity: isDisabled ? 0.6 : 1 },
+    const isValidTitle = typeof title === "string" && title.trim().length > 0;
+    const hasLeft = !!leftIcon;
+    const hasRight = !!rightIcon;
+    const hasIcon = !!icon;
+    return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, onPress: onPress, disabled: isDisabled, style: [
+            styles.touchableContainer,
             containerStyle,
+            { opacity: isDisabled ? 0.6 : 1 },
         ] },
-        React.createElement(LinearGradient, { colors: colors, start: start, end: end, style: [styles.button, { height, borderRadius }] }, loading ? (React.createElement(ActivityIndicator, { color: "#fff", size: "small" })) : (React.createElement(Text, { style: [styles.text, textStyle], numberOfLines: 1 }, title)))));
+        React.createElement(LinearGradient, { colors: colors, start: start, end: end, style: [styles.button, { height, borderRadius }] }, loading ? (React.createElement(ActivityIndicator, { color: "#fff" })) : (React.createElement(View, { style: [styles.innerContainer, iconContainerStyle] },
+            React.createElement(View, { style: styles.contentRow },
+                hasLeft && (React.createElement(Image, { source: leftIcon, style: [styles.icon, leftIconStyle], resizeMode: "contain" })),
+                hasIcon && (React.createElement(Image, { source: icon, style: [styles.iconCenter, iconStyle], resizeMode: "contain" })),
+                isValidTitle && (React.createElement(T, { style: [styles.defaultTitleStyle, titleStyle], numberOfLines: 1 }, title)),
+                hasRight && (React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))))));
 };
 const styles = StyleSheet.create({
-    container: {
-        alignSelf: "stretch",
+    touchableContainer: {
+        alignSelf: "center", // This centers the button when width is reduced
     },
     button: {
+        width: "100%",
         justifyContent: "center",
         alignItems: "center",
+        overflow: "hidden",
     },
-    text: {
-        color: "#fff",
-        fontSize: 16,
-        fontWeight: "600",
-        textAlign: "center",
+    innerContainer: {
         width: "100%",
-        position: "absolute",
-        ...Platform.select({
-            ios: {
-                lineHeight: 19,
-            },
-            android: {
-                textAlignVertical: "center",
-                includeFontPadding: false,
-            },
-        }),
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: Scale.moderateScale(12),
+    },
+    // Flexbox row for icons + title
+    contentRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: Scale.moderateScale(8), // Space between icons and title
+    },
+    defaultTitleStyle: {
+        ...Typography.style.standardU(),
+        textTransform: "capitalize",
+        color: Colors.white,
+        textAlign: "center",
+    },
+    icon: {
+        width: Scale.moderateScale(20),
+        height: Scale.moderateScale(20),
+    },
+    iconCenter: {
+        width: Scale.moderateScale(24),
+        height: Scale.moderateScale(24),
     },
 });
 export default LinearGradientButton;

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export { Colors as TheameColor } from "../styles";
+export { setLanguage, setFontConfig, getFont } from '../styles/appConfig';
 export { default as Buttons } from "./Buttons";
 export { default as Container } from "./Container";
 export { default as Dividers } from "./Dividers";
@@ -28,3 +30,5 @@ export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
 export { default as LinearGradientButton } from "./LinearGradientButton";
+export { default as Typography } from '../styles/typography';
+export { scale, verticalScale, moderateScale } from '../styles/scale';

package/dist/components/index.js

@@ -1,3 +1,5 @@
+export { Colors as TheameColor } from "../styles";
+export { setLanguage, setFontConfig, getFont } from '../styles/appConfig';
 export { default as Buttons } from "./Buttons";
 export { default as Container } from "./Container";
 export { default as Dividers } from "./Dividers";
@@ -28,3 +30,5 @@ export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
 export { default as LinearGradientButton } from "./LinearGradientButton";
+export { default as Typography } from '../styles/typography';
+export { scale, verticalScale, moderateScale } from '../styles/scale';

package/dist/styles/appConfig.d.ts

@@ -0,0 +1,4 @@
+export declare const setLanguage: (lang: any) => void;
+export declare const getLanguage: () => string;
+export declare const setFontConfig: (lang: any, weights?: {}) => void;
+export declare const getFont: (lang: any, weight: any) => any;