@nexara/nativeflow 0.1.4 → 0.1.7

package/lib/typescript/module/src/types/styledComponents.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styledComponents.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/styledComponents.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5H,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG;IAClD;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAE9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB;;OAEG;IACH,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE5B;;;MAGE;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
+{"version":3,"file":"styledComponents.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/styledComponents.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5H,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG;IAClD;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAE9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB;;OAEG;IACH,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;MAGE;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}

package/lib/typescript/module/src/types/userInput.type.d.ts

@@ -27,6 +27,7 @@ export type UserInputProps = TextInputProps & {
     textVariant?: {
         label?: TypographyVariant;
         helperText?: TypographyVariant;
+        inputText?: TypographyVariant;
     };
     /** Color of the text inside the input field. */
     inputTextColor?: string;

package/lib/typescript/module/src/types/userInput.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"userInput.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/userInput.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC1C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,iBAAiB,CAAC;QAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;KAClC,CAAC;IAEF,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE7B,0DAA0D;IAC1D,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE9B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACrC,CAAC;IAEF;;;MAGE;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;CACnC,CAAC"}
+{"version":3,"file":"userInput.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/userInput.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC1C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,iBAAiB,CAAC;QAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;QAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAC;KACjC,CAAC;IAEF,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE7B,0DAA0D;IAC1D,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE9B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACrC,CAAC;IAEF;;;MAGE;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;CACnC,CAAC"}

package/lib/typescript/module/src/utils/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexara/nativeflow",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",
@@ -204,4 +204,4 @@
     "type": "library",
     "version": "0.48.3"
   }
-}
+}

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { JSX } from 'react';
 import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
@@ -44,6 +44,9 @@ const Button: React.FC<ButtonProps> = ({
         strokeColor,
         disabled
     });
+
+    const STYLES = useMemo(Styles, []);
+
     const dynamicStyles = {
         BUTTON_CONT: {
             backgroundColor: backgroundColor,
@@ -72,7 +75,7 @@ const Button: React.FC<ButtonProps> = ({
     const cloneElement = (element: JSX.Element): JSX.Element | null => {
         if (React.isValidElement<{ color?: string }>(element)) {
             return React.cloneElement(element, {
-                color: buttonIconColor
+                color: element.props.color ?? buttonIconColor
             })
         }
         return null;
@@ -165,7 +168,7 @@ const Button: React.FC<ButtonProps> = ({
 export default Button;
 export type { ButtonProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     BUTTON_CONT: {
         maxWidth: '100%',
     },

package/src/components/CheckBox/CheckBox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { StyleSheet, TouchableWithoutFeedback, Animated, type ViewStyle } from "react-native";
 import { StyledText, StyledView } from "../StyledComponents";
 import { useTheme } from "../../hooks";
@@ -32,6 +32,8 @@ const CheckBox: React.FC<CheckBoxProps> = ({
         setIsCheckboxChecked(defaultValue);
     }, [defaultValue]);
 
+    const STYLES = useMemo(Styles, []);
+    
     const scaleVal = useRef(new Animated.Value(1)).current;
     const { colors }: any = useTheme();
     activeBgColor = disabled ? colors.disable : activeBgColor ?? colors.primary;
@@ -99,7 +101,7 @@ const CheckBox: React.FC<CheckBoxProps> = ({
 export default CheckBox;
 export type { CheckBoxProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     CONTAINER: {
         flexDirection: 'row',
         gap: horizontalScale(10),
@@ -111,4 +113,4 @@ const STYLES = StyleSheet.create({
         justifyContent: 'center',
         padding: verticalScale(7)
     }
-});
+});

package/src/components/Chip/Chip.tsx

@@ -86,4 +86,5 @@ const Chip: React.FC<ChipProps> = ({
     </>);
 }
 export default Chip;
-export type { ChipProps };
+export type { ChipProps };
+

package/src/components/Dialog/Dialog.tsx

@@ -12,6 +12,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     size = 'lg',
     fullScreen,
     backdropColor = 'rgba(0, 0, 0, 0.5)',
+    // backdropColor = 'red',
     // animationDuration = 800,
     onClose,
     containerStyle,

package/src/components/Dialog/DialogFoot.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Stack from '../Stack';
 import { moderateScale } from '../../helpers/ResponsiveCalculations';
@@ -14,6 +14,7 @@ const DialogFoot: React.FC<props> = ({
     containerStyle,
     children
 }) => {
+    const STYLES = useMemo(Styles, []);
     const dynamicStyles = {
         borderTopWidth: variant === 'default' ? 0.7 : 0,
         padding: moderateScale(variant === 'default' ? 16 : 20),
@@ -28,7 +29,7 @@ const DialogFoot: React.FC<props> = ({
 export default DialogFoot;
 export type { DialogFootProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     CONTAINER: {
         borderColor: '#d4d4d4',
         justifyContent: 'flex-end',

package/src/components/Dialog/DialogHead.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { moderateScale } from '../../helpers/ResponsiveCalculations';
 import { X } from '../../assets/svg';
@@ -19,6 +19,7 @@ const DialogHead: React.FC<props> = ({
     textStyle,
     children
 }) => {
+    const STYLES = useMemo(Styles, []);
     const dynamicStyles = {
         borderBottomWidth: variant == 'default' ? 0.7 : 0,
         padding: moderateScale(variant === 'default' ? 16 : 25),
@@ -40,7 +41,7 @@ export default DialogHead;
 export type { DialogHeadProps };
 
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     CONTAINER: {
         borderColor: '#d4d4d4',
         paddingBottom: moderateScale(16),

package/src/components/Icon/Icon.tsx

@@ -18,11 +18,11 @@ const Icon: React.FC<IconProps> = ({
         return React.cloneElement(renderIcon as React.ReactElement<any>,
             {
                 ...renderIcon?.props,
-                size: verticalScale(renderIcon?.props?.size ?? 15),
+                size: verticalScale(renderIcon?.props?.size ?? 17),
                 color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
             }
         )
-    }, [color, theme]);
+    }, [color, theme, renderIcon.props]);
 
     return (<>
         {renderCallBackIcon}

package/src/components/IconButton/IconButton.tsx

@@ -1,35 +1,44 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React, { isValidElement } from "react";
+import type { ReactElement } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import { StyledView } from "../StyledComponents";
-// import TouchableRipple from "../TouchableRipple/TouchableRipple";
 import Icon from "../Icon/Icon";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
 
 
 type IconButtonProps = TouchableOpacityProps & {
     rippleColor?: string;
-    children?: ReactNode;
+    children?: ReactElement<{ size: number }>;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
     rippleColor,
     children,
+    style,
     ...rest
 }) => {
 
+    let size = 40;
+
+    if (!(isValidElement(children) && 'size' in children.props)) {
+        return;
+    }
+    size = children.props.size * 1.5;
+
     return (<>
-        <StyledView style={{ alignSelf: 'flex-start' }}>
-            <TouchableOpacity
-                // rippleColor={rippleColor}
-                style={{ borderRadius: 100, padding: verticalScale(8) }}
-                {...rest}
-            >
-                <Icon
-                    renderIcon={React.cloneElement(children as React.ReactElement<any>)}
-                />
-            </TouchableOpacity>
-        </StyledView>
+        <TouchableOpacity
+            // rippleColor={rippleColor}
+            style={[{
+                borderRadius: 100,
+                height: size,
+                width: size,
+                justifyContent: 'center',
+                alignItems: 'center'
+            }, style]}
+            {...rest}
+        >
+            <Icon
+                renderIcon={React.cloneElement(children as React.ReactElement<any>)}
+            />
+        </TouchableOpacity>
     </>)
 }
 export default IconButton;

package/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect, } from "react";
+import React, { useState, useRef, useCallback, useEffect, useMemo, } from "react";
 import { StyleSheet, Pressable, View, ScrollView, Animated } from "react-native";
 import { StyledView } from "../StyledComponents";
 import Portal from "../Portal/Portal";
@@ -25,6 +25,7 @@ const Menu: React.FC<MenuProps> = ({
     const animatedScaleRef = useRef(new Animated.Value(1)).current;
 
     const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
+    const STYLES = useMemo(Styles, []);
 
     useEffect(() => {
         Animated.timing(animatedScaleRef, {
@@ -119,7 +120,7 @@ const Menu: React.FC<MenuProps> = ({
 export default Menu;
 export type { MenuProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     MENU_CONT: {
         shadowColor: "#000",
         backgroundColor: '#fff',

package/src/components/Provider/ContextManager.tsx

@@ -0,0 +1,9 @@
+let _contextValue: any = null
+
+export const setGlobalContext = (ctx: any) => {
+  _contextValue = ctx;
+};
+
+export const getGlobalContext = () => {
+  return _contextValue;
+};

package/src/components/Provider/NativeProvider.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useMemo, useState } from 'react';
 import type { ReactNode } from "react";
 import { LightTheme, DarkTheme } from '../../themes';
-import type { Theme, themeModeTypes, ThemeTypes } from '../../types';
+import type { scalingModeTypes, Theme, themeModeTypes, ThemeTypes } from '../../types';
+import { setGlobalContext } from './ContextManager';
 
 type ProviderProps = {
     /** 
@@ -14,40 +15,54 @@ type ProviderProps = {
      * Determines whether the theme should be responsive based on screen size.
      * Default: `true`  
      */
-    isResponsive?: boolean;
+    // isResponsive?: boolean;
 
     /** 
      * Custom theme object that overrides the default light/dark themes.
      * If not provided, the default themes (LightTheme/DarkTheme) will be used.
      */
     theme?: Theme;
+
+    options?: {
+        defaultTheme?: themeModeTypes;
+        scalingMode?: scalingModeTypes;
+    }
 };
 
 type ThemeContextType = {
-    isResponsive?: boolean;
     theme?: ThemeTypes & {
         toggleThemeMode: () => void;
     };
     mode?: themeModeTypes;
+    scaling: { mode: scalingModeTypes }
 };
 
 
-export const Context = createContext<ThemeContextType | undefined>({
-    isResponsive: true,
+export const Context = createContext<ThemeContextType>({
     mode: 'light',
-    theme: { ...LightTheme, toggleThemeMode: () => { } }
+    theme: { ...LightTheme, toggleThemeMode: () => { } },
+    scaling: { mode: 'partial' }
 });
 
 const NativeProvider: React.FC<ProviderProps> = ({
     children,
-    isResponsive = true,
     theme,
+    options
 }) => {
-    const [mode, setMode] = useState<themeModeTypes>('light');
-
+    const [mode, setMode] = useState<themeModeTypes>(options?.defaultTheme ?? 'light');
     const toggleThemeMode = () => setMode((prev) => prev === 'dark' ? 'light' : 'dark');
     const setTheme = { ...((theme && theme[mode]) || (mode === 'light' ? LightTheme : DarkTheme)), toggleThemeMode };
-    const value = useMemo(() => ({ theme: setTheme, isResponsive, mode }), [theme, mode]);
+    const value = useMemo(() => ({
+        theme: setTheme,
+        mode,
+        scaling: { mode: options?.scalingMode ?? 'partial' }
+    }), [theme, mode, options]);
+
+    // useLayoutEffect(() => {
+    //     setGlobalContext(value);
+    // }, [value]);
+    setGlobalContext(value);
+
     return (<>
         <Context.Provider value={value}>
             {children}

package/src/components/StyledComponents/StyledView.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../../hooks';
 import type { StyledViewProps } from '../../types';
 
 
-const StyledView: React.FC<StyledViewProps> = ({
+const StyledView = forwardRef<View, StyledViewProps>(({
     f,
     justify,
     align,
@@ -15,9 +15,8 @@ const StyledView: React.FC<StyledViewProps> = ({
     w,
     children,
     style,
-    ref,
     ...rest
-}) => {
+}, ref) => {
 
     const theme = useTheme(themeBg);
 
@@ -34,13 +33,13 @@ const StyledView: React.FC<StyledViewProps> = ({
             },
                 style
             ]}
-            ref={ref}
             {...rest}
+            ref={ref}
         >
             {children}
         </View>
     );
-};
+});
 
 export default StyledView;
 export type { StyledViewProps };

package/src/components/UserInput/UserInput.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
 import type { TextStyle } from 'react-native';
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
@@ -7,7 +7,7 @@ import { StyledText, StyledView } from '../StyledComponents';
 import type { UserInputProps } from '../../types';
 import generateColors from './generateColors';
 
-const UserInput: React.FC<UserInputProps> = ({
+const UserInput = forwardRef<TextInput, UserInputProps>(({
     variant = 'standard',
     label,
     bg,
@@ -16,6 +16,7 @@ const UserInput: React.FC<UserInputProps> = ({
     labelColor,
     textVariant = {
         label: 'h5',
+        inputText: 'h5',
         helperText: 'h6',
     },
     inputTextColor,
@@ -33,12 +34,13 @@ const UserInput: React.FC<UserInputProps> = ({
     renderLeftIcon,
     renderRightIcon,
     styles,
-    ref,
     ...rest
-}) => {
+}, ref) => {
 
     const theme: any = useTheme();
 
+    const STYLES = useMemo(Styles, []);
+
     const {
         computedCursorColor,
         computedPlaceholderColor,
@@ -58,7 +60,8 @@ const UserInput: React.FC<UserInputProps> = ({
         },
         INPUT: {
             color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
-            fontSize: responsiveFontSize(inputFs),
+            //@ts-ignore
+            fontSize: responsiveFontSize(theme.typography.variantSizes[textVariant.inputText] ?? inputFs),
             textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
             minHeight: multiline ? 100 : undefined,
             maxHeight: multiline ? 150 : undefined,
@@ -110,11 +113,11 @@ const UserInput: React.FC<UserInputProps> = ({
             }
         </StyledView>
     </>)
-};
+});
 export default UserInput;
 export type { UserInputProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     INPUT_CONT: {
         flexDirection: 'row',
         paddingHorizontal: horizontalScale(14),

package/src/helpers/ResponsiveCalculations.ts

@@ -1,5 +1,6 @@
 import { Dimensions, PixelRatio } from 'react-native';
-// import { useResponsive } from '../hooks';
+import { getGlobalContext } from '../components/Provider/ContextManager';
+import type { scalingModeTypes } from '../types';
 
 
 const {
@@ -7,58 +8,62 @@ const {
     height: SCREEN_HEIGHT,
 } = Dimensions.get('window');
 
-// const isResponsive = useResponsive();
+// const GetScalingMode = () => getGlobalContext();
+// const scalingMode = useScalingMode();
+
 const isResponsive = true;
 const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
 
-const scalingCache = new Map<'hScale' | 'vScale' | 'fs', object>();
+type scalingCacheKey = 'hScale' | 'vScale' | 'fs';
+
+const scalingCache = new Map<scalingCacheKey, object>();
+
+// export const fun = () => {
+//     return scalingCache
+// }
 
-export const fun = () => {
-    return scalingCache
-}
 const checkIsPhone = (size: number): number => {
     if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
         return size;
     }
     return 0;
 }
-export const horizontalScale = (size: number): number => {
+
+const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes) => {
     if (checkIsPhone(size)) {
         return size;
     }
-    const hScaleCache: any = scalingCache.get('hScale') || {};
-    if (hScaleCache?.[size]) {
-        return hScaleCache?.[size];
+    const cacheScaleValue: any = scalingCache.get(cacheKey) || {};
+    let finalSize;
+    if (cacheScaleValue?.[size]) {
+        return cacheScaleValue?.[size];
     }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
-    let scale = (shortDimension / guidelineBaseHeight);
-    scale = 1 + (scale - 1) * slowDownRate;
-    let adjustedSize = size * Math.max(scale, 0.80);
-    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
-    hScaleCache[size] = finalSize;
-    scalingCache.set('hScale', hScaleCache)
+    if (mode === 'partial') {
+        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+        let scale = ((cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight);
+        scale = 1 + (scale - 1) * slowDownRate;
+        let adjustedSize = size * Math.max(scale, 0.80);
+        finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    } else {
+        const baseScaleFactor = (cacheKey === 'hScale' ? (shortDimension / guidelineBaseWidth) : (longDimension / guidelineBaseHeight));
+        const clampedScaleFactor = Math.max(0.9, Math.min(baseScaleFactor, 1.2));
+        finalSize = Math.round(PixelRatio.roundToNearestPixel(size * clampedScaleFactor))
+    }
+    cacheScaleValue[size] = finalSize;
+    scalingCache.set(cacheKey, cacheScaleValue);
     return finalSize;
 }
 
+export const horizontalScale = (size: number): number => {
+    const scalingMode = getGlobalContext().scaling.mode
+    return scale(size, 'hScale', scalingMode);
+}
 
 export const verticalScale = (size: number): number => {
-    if (checkIsPhone(size)) {
-        return size;
-    }
-    const vScaleCache: any = scalingCache.get('vScale') || {};
-    if (vScaleCache?.[size]) {
-        return vScaleCache?.[size];
-    }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
-    let scale = (longDimension / guidelineBaseHeight);
-    scale = 1 + (scale - 1) * slowDownRate;
-    let adjustedSize = size * Math.max(scale, 0.80);
-    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
-    vScaleCache[size] = finalSize;
-    scalingCache.set('vScale', vScaleCache)
-    return finalSize;
+    const scalingMode = getGlobalContext().scaling.mode
+    return scale(size, 'vScale', scalingMode);
 }
 
 

package/src/hooks/index.ts

@@ -1,4 +1,4 @@
 export { default as useTheme } from './useTheme';
-export { default as useResponsive } from './useResponsive';
+export { default as useScalingMode } from './useScalingMode';
 export { default as useColorScheme } from './useColorScheme';
 export { default as useConditionalWindowDimension } from './useConditionalWindowDimension';

package/src/hooks/{useResponsive.tsx → useScalingMode.tsx}

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Context } from '../components/Provider/NativeProvider';
 
-const useResponsive = () => useContext(Context)?.isResponsive;
+const useScalingMode = () => useContext(Context)?.scaling;
 
-export default useResponsive;
+export default useScalingMode;

package/src/index.d.ts

@@ -0,0 +1,3 @@
+declare module '@nexara/nativeflow' {
+    export { Button } from 'components/Button/Button';
+}

package/src/index.ts

@@ -1,11 +1,12 @@
+export { default as NativeProvider } from './components/Provider/NativeProvider';
+export { horizontalScale, moderateScale, moderateVerticalScale, verticalScale, responsiveFontSize } from './helpers/ResponsiveCalculations';
 export { default as Header } from './components/Header/Header';
 export { default as Chip } from './components/Chip/Chip';
 export { default as Button } from './components/Button/Button';
+
 export { default as Stack } from './components/Stack';
 export { StyledText, StyledView } from './components/StyledComponents';
 export { default as UserInput } from './components/UserInput/UserInput';
-export { default as NativeProvider } from './components/Provider/NativeProvider';
-export { horizontalScale, moderateScale, moderateVerticalScale, verticalScale } from './helpers/ResponsiveCalculations';
 export { default as Grid } from './components/Grid/Grid';
 export { default as Progress } from './components/Progress/Progress';
 export { default as Slider } from './components/Slider/Slider';

package/src/types/common.type.ts

@@ -5,6 +5,7 @@ export type DialogVariant = 'classic' | 'default';
 export type ButtonVariant = 'outlined' | 'contained';
 export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7';
 export type themeModeTypes = 'light' | 'dark';
+export type scalingModeTypes = 'full' | 'partial';
 
 export type dialogSizesTypes = {
     xs: number,

package/src/types/menu.type.ts

@@ -1,6 +1,7 @@
 import type { JSX, ReactNode } from "react";
 import type { StyleProp, TextStyle, TouchableOpacityProps, View, ViewStyle } from "react-native";
 import type { TypographyVariant } from "./common.type";
+import type { StyledTextProps } from "./styledComponents.type";
 
 
 export type MenuProps = {
@@ -93,7 +94,7 @@ export type MenuItemProps = TouchableOpacityProps & {
     children?: ReactNode;
 };
 
-export type MenuItemLabelProps = TextStyle & {
+export type MenuItemLabelProps = StyledTextProps & {
     /** 
      * Font size of the label text. 
      */

package/src/types/styledComponents.type.ts

@@ -53,14 +53,14 @@ export type StyledViewProps = ViewStyle & ViewProps & {
      */
     style?: StyleProp<ViewStyle>;
 
-     /**  
-     * A ref to access the underlying View component.  
-     * This can be used for measuring layout, animations, or imperative interactions.  
-     */
+    /**  
+    * A ref to access the underlying View component.  
+    * This can be used for measuring layout, animations, or imperative interactions.  
+    */
     ref?: React.RefObject<View>
 };
 
-export type StyledTextProps = TextProps & {
+export type StyledTextProps = TextProps & TextStyle & {
     /** 
      * Defines the typography variant for the text. 
      */