@nexara/nativeflow 0.1.7 → 0.1.8

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

@@ -1,97 +1,50 @@
 import type { ColorValue, DimensionValue, StyleProp, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
-import type { TypographyVariant } from "./common.type";
 import React from "react";
+import type { TypographyScale, TypographyVariant } from "./common.type";
 export type StyledViewProps = ViewStyle & ViewProps & {
-    /**
-     * Flex value to control the flex growth, shrink, and basis of the view.
-     */
+    /** Flex value to control the flex growth, shrink, and basis of the view */
     f?: number;
-    /**
-     * Defines how children are aligned along the main axis.
-     */
+    /** How children are aligned along the main axis */
     justify?: ViewStyle['justifyContent'];
-    /**
-     * Defines how children are aligned along the cross axis.
-     */
+    /** How children are aligned along the cross axis */
     align?: ViewStyle['alignItems'];
-    /**
-     * Determines whether the children should wrap if they exceed the container size.
-     */
+    /** Whether children should wrap if they exceed the container size */
     fWrap?: ViewStyle['flexWrap'];
-    /**
-     * Background color of the view.
-     */
+    /** Background color of the view */
     bg?: string;
-    /**
-     * Whether the background color should be derived from the theme.
-     */
+    /** Whether the background color should be derived from the theme */
     themeBg?: boolean;
-    /**
-     * Height of the view, can be a number or a percentage string.
-     */
+    /** Height of the view (number = pixels, string = percentage) */
     h?: DimensionValue;
-    /**
-     * Width of the view, can be a number or a percentage string.
-     */
+    /** Width of the view (number = pixels, string = percentage) */
     w?: DimensionValue;
-    /**
-     * Child components to be rendered inside StyledView.
-     */
+    /** Child components to be rendered inside StyledView */
     children?: React.ReactNode;
-    /**
-     * Custom styles for the view component.
-     */
+    /** Custom styles for the view component */
     style?: StyleProp<ViewStyle>;
-    /**
-    * A ref to access the underlying View component.
-    * This can be used for measuring layout, animations, or imperative interactions.
-    */
-    ref?: React.RefObject<View>;
+    /** Ref to access the underlying View component */
+    ref?: React.Ref<View>;
 };
 export type StyledTextProps = TextProps & TextStyle & {
-    /**
-     * Defines the typography variant for the text.
-     */
+    /** Typography scale for font size (e.g., xs, sm, md, lg, xl) */
+    fScale?: TypographyScale;
+    /** Typography variant to determine default text color */
     variant?: TypographyVariant;
-    /**
-     * Text content to be rendered inside StyledText.
-     */
+    /** Text content to be rendered inside StyledText */
     children?: React.ReactNode;
-    /**
-     * Custom styles for the text component.
-     */
+    /** Custom styles for the Text component */
     style?: StyleProp<TextStyle>;
-    /**
-     * Font family for the text.
-     */
+    /** Font family for the text */
     ff?: string;
-    /**
-     * Font size of the text.
-     */
+    /** Font size of the text (overrides fScale if provided) */
     fs?: number;
-    /**
-     * Font weight of the text.
-     */
+    /** Font weight of the text */
     fw?: TextStyle['fontWeight'];
-    /**
-     * Whether the text should be automatically capitalized or adjusted based on the theme.
-     */
+    /** Text align center flag (true = center, false/undefined = auto) */
     tas?: boolean;
-    /**
-     * Color of the text. Accepts standard color values.
-     */
+    /** Color of the text (overrides variant and themeColor if provided) */
     color?: ColorValue;
-    /**
-     * Whether the text color should be derived from the theme.
-     */
+    /** Whether to derive text color from the theme */
     themeColor?: boolean;
-    /**
-     * Whether the text should use the primary theme color.
-     */
-    primary?: boolean;
-    /**
-     * Whether the text should use the secondary theme color.
-     */
-    secondary?: boolean;
 };
 //# sourceMappingURL=styledComponents.type.d.ts.map

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;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"}
+{"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,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG;IAClD,2EAA2E;IAC3E,CAAC,CAAC,EAAE,MAAM,CAAC;IAEX,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAEtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAEhC,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAE9B,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gEAAgE;IAChE,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB,+DAA+D;IAC/D,CAAC,CAAC,EAAE,cAAc,CAAC;IAEnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG;IAClD,gEAAgE;IAChE,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,2DAA2D;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,8BAA8B;IAC9B,EAAE,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7B,qEAAqE;IACrE,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd,uEAAuE;IACvE,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { StyledViewProps } from "./styledComponents.type";
+/**
+ * Props for the Surface component
+ */
+export type SurfaceProps = StyledViewProps & {
+    /** Padding inside the surface container (applied uniformly) */
+    padding?: number;
+    /** Border radius of the surface container */
+    br?: number;
+    /** Style variant of the surface: 'elevated' adds shadow, 'outlined' adds border */
+    variant?: 'elevated' | 'outlined';
+    /** Child components to be rendered inside the surface */
+    children?: ReactNode;
+};
+//# sourceMappingURL=surface.type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/surface.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,eAAe,GAAG;IACzC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mFAAmF;IACnF,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAElC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC"}

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

@@ -1,6 +1,6 @@
-import type { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from "react-native";
-import type { TypographyVariant, UserInputVariant } from "./common.type";
-import type { JSX } from "react";
+import type { ReactNode } from "react";
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import type { TypographyScale, UserInputVariant } from "./common.type";
 export type UserInputProps = TextInputProps & {
     /**
      * Defines the input style variant.
@@ -23,11 +23,12 @@ export type UserInputProps = TextInputProps & {
      * Defines typography styles for text elements.
      * - `label`: Typography variant for the label.
      * - `helperText`: Typography variant for the helper text.
+     * - `inputText`: Typography variant for the input text.
      */
-    textVariant?: {
-        label?: TypographyVariant;
-        helperText?: TypographyVariant;
-        inputText?: TypographyVariant;
+    textScale?: {
+        label?: TypographyScale;
+        helperText?: TypographyScale;
+        inputText?: TypographyScale;
     };
     /** Color of the text inside the input field. */
     inputTextColor?: string;
@@ -54,9 +55,9 @@ export type UserInputProps = TextInputProps & {
     /** If `true`, the input field allows multiple lines of text. */
     multiline?: boolean;
     /** Renders a custom left icon inside the input field. */
-    renderLeftIcon?: JSX.Element;
+    renderLeftIcon?: ReactNode;
     /** Renders a custom right icon inside the input field. */
-    renderRightIcon?: JSX.Element;
+    renderRightIcon?: ReactNode;
     /**
      * Custom styles for different parts of the component.
      * - `mainContainer`: Styles for the outermost wrapper.
@@ -72,10 +73,5 @@ export type UserInputProps = TextInputProps & {
         label?: StyleProp<TextStyle>;
         helperText?: StyleProp<TextStyle>;
     };
-    /**
-        * A ref to access the underlying View component.
-        * This can be used for measuring layout, animations, or imperative interactions.
-    */
-    ref?: React.RefObject<TextInput>;
 };
 //# sourceMappingURL=userInput.type.d.ts.map

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;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"}
+{"version":3,"file":"userInput.type.d.ts","sourceRoot":"","sources":["../../../../../src/types/userInput.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEvE,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;;;;;OAKG;IACH,SAAS,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,eAAe,CAAC;QACxB,UAAU,CAAC,EAAE,eAAe,CAAC;QAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;KAC/B,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,SAAS,CAAC;IAE3B,0DAA0D;IAC1D,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;;;;;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;CACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexara/nativeflow",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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",
@@ -67,7 +67,9 @@
     "react-native-design-system",
     "react-native-styling",
     "rn-ui",
-    "react-native-ui-kit"
+    "react-native-ui-kit",
+    "nativeflow",
+    "nexara"
   ],
   "repository": {
     "type": "git",
@@ -98,8 +100,8 @@
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "^19.0.0",
-    "react-native": "^0.78.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.36.0",
     "react-native-svg": "^15.11.2",
     "release-it": "^17.10.0",
@@ -203,5 +205,8 @@
     "languages": "js",
     "type": "library",
     "version": "0.48.3"
+  },
+  "dependencies": {
+    "color": "^5.0.2"
   }
 }

package/src/components/Avatar/AvatarImage.tsx

@@ -1,25 +1,20 @@
-import React from "react";
+import { type FC } from "react";
 import { Image } from "react-native";
 import { StyledView } from "../StyledComponents";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
-import { useTheme } from "../../hooks";
 import type { AvatarImageProps } from "../../types";
 
 
-const AvatarImage: React.FC<AvatarImageProps> = ({
+const AvatarImage: FC<AvatarImageProps> = ({
     size = 70,
     source,
-    bg,
     resizeMode = 'cover',
     containerStyle,
     imageStyle
 }) => {
 
-    const theme: any = useTheme();
-
     return (<>
         <StyledView
-            backgroundColor={bg ?? theme.colors.primary}
             // alignSelf='flex-start'
             height={verticalScale(size)}
             width={verticalScale(size)}

package/src/components/Avatar/AvatarText.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import { type FC } from "react";
 import { StyledText, StyledView } from "../StyledComponents";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from "../../hooks";
 import type { AvatarTextProps } from "../../types";
 
 
-const AvatarText: React.FC<AvatarTextProps> = ({
+const AvatarText: FC<AvatarTextProps> = ({
     size = 70,
     fs,
     text = 'YH',
@@ -18,7 +18,7 @@ const AvatarText: React.FC<AvatarTextProps> = ({
 
     return (<>
         <StyledView
-            bg={bg ?? theme.colors.primary}
+            bg={bg ?? theme.colors.brand.primary}
             // alignSelf='flex-start'
             h={verticalScale(size)}
             w={verticalScale(size)}
@@ -27,7 +27,7 @@ const AvatarText: React.FC<AvatarTextProps> = ({
             borderRadius={verticalScale(size)}
             style={containerStyle}
         >
-            <StyledText secondary fw='bold' fs={fs ?? (size / 3)} style={textStyle}>{text}</StyledText>
+            <StyledText color={theme.colors.brand.onPrimary} fw='bold' fs={fs ?? (size / 3)} style={textStyle}>{text}</StyledText>
         </StyledView>
     </>)
 }

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import type { JSX } from 'react';
+import type { FC, JSX } from 'react';
 import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
 import { StyledText, StyledView } from '../StyledComponents';
@@ -8,35 +8,36 @@ import { getButtonColors } from './utils';
 import type { ButtonProps } from '../../types';
 
 
-const Button: React.FC<ButtonProps> = ({
+const Button: FC<ButtonProps> = ({
     variant = 'contained',
     type = 'flat',
     fullWidth = false,
     paddingH = 19,
-    paddingV = 14,
+    paddingV = 12,
     bg,
-    br = 5,
+    br = 8,
     stroke = 1,
     strokeColor,
     titleColor,
-    title = 'Button',
-    titleFS,
-    titleVariant = 'h5',
-    titleFF,
+    title,
+    fScale = 'base',
+    fs,
+    ff,
     size = 50,
     rippleColor,
     renderIcon,
     renderLeftIcon,
     renderRightIcon,
     disabled = false,
-    buttonContainerStyle,
-    textStyle,
+    containerStyle,
+    titleStyle,
     onPress,
+    children,
     ...rest
 }) => {
     const theme: any = useTheme();
 
-    const { backgroundColor, buttonTextColor, buttonBorderColor, buttonIconColor } = getButtonColors({
+    const { backgroundColor, buttonTextColor, buttonBorderColor } = getButtonColors({
         theme,
         variant,
         bg,
@@ -45,7 +46,7 @@ const Button: React.FC<ButtonProps> = ({
         disabled
     });
 
-    const STYLES = useMemo(Styles, []);
+    const STYLES = useMemo(customStyles, []);
 
     const dynamicStyles = {
         BUTTON_CONT: {
@@ -55,7 +56,7 @@ const Button: React.FC<ButtonProps> = ({
         },
         BUTTON_TEXT: {
             color: buttonTextColor,
-            fontFamily: titleFF ?? '',
+            fontFamily: ff ?? '',
         },
         FLAT_BTN_MAIN_CONT: {
             borderRadius: verticalScale(br),
@@ -75,7 +76,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: element.props.color ?? buttonIconColor
+                color: element.props.color ?? buttonTextColor
             })
         }
         return null;
@@ -105,7 +106,7 @@ const Button: React.FC<ButtonProps> = ({
                             STYLES.BUTTON_CONT,
                             dynamicStyles.FLAT_BTN_INNER_CONT,
                             dynamicStyles.BUTTON_CONT,
-                            buttonContainerStyle
+                            containerStyle
                         ]}>
                         {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
                             <StyledView f={fullWidth ? 1 : undefined}>
@@ -117,15 +118,20 @@ const Button: React.FC<ButtonProps> = ({
                             flexShrink={1}
                             f={fullWidth ? 8 : undefined}
                         >
-                            <StyledText numberOfLines={1} fs={titleFS} variant={titleVariant}
-                                style={[
-                                    STYLES.BUTTON_TEXT,
-                                    dynamicStyles.BUTTON_TEXT,
-                                    textStyle
-                                ]}
-                            >
-                                {title}
-                            </StyledText>
+                            {
+                                (title ?? children) ?
+                                <StyledText numberOfLines={1} fs={fs} fScale={fScale}
+                                    style={[
+                                        STYLES.BUTTON_TEXT,
+                                        dynamicStyles.BUTTON_TEXT,
+                                        titleStyle,
+                                    ]}
+                                >
+                                    {title ?? children}
+                                </StyledText>
+                                :
+                                (renderIcon && cloneElement(renderIcon))
+                            }
                         </StyledView>
 
                         {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
@@ -153,7 +159,7 @@ const Button: React.FC<ButtonProps> = ({
                             STYLES.ROUND_BTN_INNER_CONT,
                             dynamicStyles.BUTTON_CONT,
                             dynamicStyles.ROUND_BTN_INNER_CONT,
-                            buttonContainerStyle
+                            containerStyle
                         ]}
                     >
                         {renderIcon && cloneElement(renderIcon)}
@@ -168,7 +174,7 @@ const Button: React.FC<ButtonProps> = ({
 export default Button;
 export type { ButtonProps };
 
-const Styles = () => StyleSheet.create({
+const customStyles = () => StyleSheet.create({
     BUTTON_CONT: {
         maxWidth: '100%',
     },

package/src/components/Button/utils.ts

@@ -11,12 +11,12 @@ const getButtonBorderColor = ({
     disabled: boolean;
 }) => {
     if (disabled) {
-        return theme.colors.outline;
+        return theme.colors.border.default;
     }
     if (strokeColor) {
         return strokeColor
     }
-    return theme.colors.outline;
+    return theme.colors.border.default;
 };
 
 
@@ -33,15 +33,15 @@ const getButtonTextColor = ({
 }) => {
 
     if (disabled) {
-        return theme.colors.textDisable;
+        return theme.colors.typography.disabled;
     }
     else if (titleColor) {
         return titleColor
     }
     else if (checkVariant('outlined')) {
-        return theme.colors.textPrimary;
+        return theme.colors.typography.primary;
     }
-    return theme.colors.textSecondary;
+    return theme.colors.brand.onPrimary;
 };
 
 const getButtonBackgroundColor = ({
@@ -57,37 +57,37 @@ const getButtonBackgroundColor = ({
 }) => {
 
     if (disabled) {
-        return theme.colors.disable;
+        return theme.colors.states.disabled;
     }
     else if (bg) {
         return bg
     }
     else if (checkVariant('contained')) {
-        return theme.colors.primary;
+        return theme.colors.brand.primary;
     }
     else if (checkVariant('outlined')) {
         return 'transparent';
     }
-    return theme.colors.primary;
+    return theme.colors.brand.primary;
 };
 
 
-const getButtonIconColor = ({
-    theme,
-    checkVariant,
-    disabled,
-}: {
-    theme: ThemeTypes;
-    checkVariant: (variant: ButtonVariant) => boolean;
-    disabled: boolean;
-}) => {
-    if (disabled) {
-        return theme.colors.iconDisable;
-    } else if (checkVariant('outlined')) {
-        return theme.colors.iconPrimary
-    }
-    return theme.colors.iconSecondary;
-};
+// const getButtonIconColor = ({
+//     theme,
+//     checkVariant,
+//     disabled,
+// }: {
+//     theme: ThemeTypes;
+//     checkVariant: (variant: ButtonVariant) => boolean;
+//     disabled: boolean;
+// }) => {
+//     if (disabled) {
+//         return theme.colors.iconDisable;
+//     } else if (checkVariant('outlined')) {
+//         return theme.colors.iconPrimary
+//     }
+//     return theme.colors.iconSecondary;
+// };
 
 const getButtonColors = ({
     theme,
@@ -125,17 +125,17 @@ const getButtonColors = ({
         strokeColor,
         disabled
     });
-    const buttonIconColor = getButtonIconColor({
-        checkVariant,
-        theme,
-        disabled
-    });
+    // const buttonIconColor = getButtonIconColor({
+    //     checkVariant,
+    //     theme,
+    //     disabled
+    // });
 
     return {
         backgroundColor,
         buttonTextColor,
         buttonBorderColor,
-        buttonIconColor
+        // buttonIconColor
     }
 };