ncore-ui-kit 1.1.0-alpha.7 → 1.1.0-alpha.8

package/lib/src/components/stateCard/index.js

@@ -3,9 +3,9 @@ import {} from "react";
 import { View } from "react-native";
 import stylesheet, { getStateCardType, useStyles } from "./stylesheet";
 import { NCoreUIKitTheme } from "../../core/hooks";
-import Text from "../text";
 import Button from "../button";
-const StateCard = ({ type = "neutral", icon: IconProp, subTitleStyle, customTheme, titleStyle, subTitle, iconSize, action, title, style, ...props }) => {
+import Text from "../text";
+const StateCard = ({ type = "neutral", icon: IconProp, subTitleStyle, customTheme, titleStyle, iconSize, subTitle, action, style, title, ...props }) => {
     const { spaces } = NCoreUIKitTheme.useContext(customTheme);
     const currentType = getStateCardType({
         type
@@ -55,10 +55,10 @@ const StateCard = ({ type = "neutral", icon: IconProp, subTitleStyle, customThem
         if (!action) {
             return null;
         }
-        return _jsx(Button, { size: "small", ...action, spreadBehaviour: "free", type: type, style: [
+        return _jsx(Button, { size: "small", ...action, style: [
                 action.style,
                 actionButtonDynamicStyle
-            ] });
+            ], spreadBehaviour: "free", type: type });
     };
     return _jsxs(View, { ...props, style: [
             style,

package/lib/src/components/stateCard/stylesheet.js

@@ -1,18 +1,6 @@
 import { StyleSheet } from "react-native";
 import {} from "./type";
 export const CHECK_BOX_TYPE_STYLES = {
-    primary: {
-        iconColor: "emphasized",
-        containerColor: "mid",
-        subTitleColor: "low",
-        titleColor: "mid"
-    },
-    danger: {
-        subTitleColor: "dangerLow",
-        containerColor: "danger",
-        titleColor: "danger",
-        iconColor: "danger"
-    },
     success: {
         subTitleColor: "successLow",
         containerColor: "success",
@@ -25,6 +13,12 @@ export const CHECK_BOX_TYPE_STYLES = {
         titleColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
     info: {
         subTitleColor: "infoLow",
         containerColor: "info",
@@ -36,6 +30,12 @@ export const CHECK_BOX_TYPE_STYLES = {
         containerColor: "mid",
         subTitleColor: "low",
         titleColor: "mid"
+    },
+    primary: {
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
     }
 };
 export const getStateCardType = ({ type }) => {
@@ -64,10 +64,6 @@ const stylesheet = StyleSheet.create({
 });
 export const useStyles = ({ spaces }) => {
     const styles = {
-        container: {
-            padding: spaces.spacingSm
-        },
-        titleContainer: {},
         icon: {
             marginBottom: spaces.spacingXs,
             marginTop: spaces.spacingXs
@@ -83,7 +79,11 @@ export const useStyles = ({ spaces }) => {
         actionButton: {
             marginBottom: spaces.spacingXs,
             marginTop: spaces.spacingXs
-        }
+        },
+        container: {
+            padding: spaces.spacingSm
+        },
+        titleContainer: {}
     };
     return styles;
 };

package/lib/src/components/sticker/index.js

@@ -4,7 +4,7 @@ import { View } from "react-native";
 import stylesheet, { getStickerType, useStyles } from "./stylesheet";
 import { NCoreUIKitTheme } from "../../core/hooks";
 import Text from "../text";
-const Sticker = ({ spreadBehaviour = "baseline", iconPosition = "left", type = "neutral", customTitleColor, customIconColor, size = "medium", icon: IconProp, customColor, customTheme, titleStyle, title, style, ...props }) => {
+const Sticker = ({ spreadBehaviour = "baseline", iconPosition = "left", customTitleColor, type = "neutral", customIconColor, size = "medium", icon: IconProp, customColor, customTheme, titleStyle, style, title, ...props }) => {
     const { typography, radiuses, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
     const currentType = getStickerType({
         type
@@ -12,11 +12,11 @@ const Sticker = ({ spreadBehaviour = "baseline", iconPosition = "left", type = "
     const { titleContainer: titleContainerDynamicStyle, container: containerDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
         spreadBehaviour,
         iconPosition,
-        customColor,
         currentType,
+        customColor,
         radiuses,
-        spaces,
         colors,
+        spaces,
         size
     });
     const iconProps = {

package/lib/src/components/sticker/stylesheet.js

@@ -1,16 +1,6 @@
 import { StyleSheet } from "react-native";
 import {} from "./type";
 export const CHECK_BOX_TYPE_STYLES = {
-    primary: {
-        containerColor: "mid",
-        titleColor: "mid",
-        iconColor: "mid"
-    },
-    danger: {
-        containerColor: "danger",
-        titleColor: "danger",
-        iconColor: "danger"
-    },
     success: {
         containerColor: "success",
         titleColor: "success",
@@ -21,6 +11,11 @@ export const CHECK_BOX_TYPE_STYLES = {
         titleColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
     info: {
         containerColor: "info",
         titleColor: "info",
@@ -30,6 +25,11 @@ export const CHECK_BOX_TYPE_STYLES = {
         containerColor: "mid",
         titleColor: "mid",
         iconColor: "mid"
+    },
+    primary: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
     }
 };
 export const getStickerType = ({ type }) => {
@@ -53,7 +53,7 @@ const stylesheet = StyleSheet.create({
         margin: 0
     }
 });
-export const useStyles = ({ spreadBehaviour, iconPosition, customColor, currentType, radiuses, spaces, colors, size }) => {
+export const useStyles = ({ spreadBehaviour, iconPosition, currentType, customColor, radiuses, colors, spaces, size }) => {
     const styles = {
         container: {
             paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,

package/lib/src/components/switch/index.js

@@ -5,7 +5,7 @@ import stylesheet, { getSwitchType, useStyles } from "./stylesheet";
 import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
 import Loading from "../loading";
 import Text from "../text";
-const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", animationDuration = 100, isOptional = false, isDisabled = false, type = "neutral", isFlip = false, customLocalize, subTitleStyle, optionalText, customTheme, titleStyle, isLoading, isActive, subTitle, onPress, title, style, ...props }) => {
+const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", animationDuration = 100, isDisabled = false, isOptional = false, type = "neutral", customLocalize, isFlip = false, subTitleStyle, optionalText, customTheme, titleStyle, isLoading, isActive, subTitle, onPress, style, title, ...props }) => {
     const { inlineSpaces, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
     const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
     const indicatorAnim = useRef(new Animated.Value(0)).current;
@@ -22,8 +22,8 @@ const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "
         isDisabled,
         isLoading,
         isActive,
-        isFlip,
         colors,
+        isFlip,
         spaces,
         type
     });
@@ -39,8 +39,8 @@ const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "
         else {
             Animated.timing(indicatorAnim, {
                 duration: animationDuration,
-                useNativeDriver: true,
                 easing: Easing.linear,
+                useNativeDriver: true,
                 toValue: 0
             }).start();
         }
@@ -71,9 +71,9 @@ const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "
         if (!isOptional && !optionalText) {
             return null;
         }
-        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+        return _jsxs(Text, { style: [
                 optionalTextDynamicStyle
-            ], ...titleProps, children: ["( ", isOptional ? localize("is-optional") : optionalText, " )"] });
+            ], variant: "labelLargeSize", color: titleProps.color, ...titleProps, children: ["( ", isOptional ? localize("is-optional") : optionalText, " )"] });
     };
     const renderTitle = () => {
         if (!title) {

package/lib/src/components/switch/stylesheet.js

@@ -1,41 +1,41 @@
 import { StyleSheet } from "react-native";
 import {} from "./type";
 export const SWITCH_TYPE_STYLES = {
-    primary: {
-        indicatorColor: "default",
-        containerColor: "mid",
-        subTitleColor: "low",
-        titleColor: "mid"
-    },
-    danger: {
-        subTitleColor: "dangerLow",
-        indicatorColor: "danger",
-        containerColor: "danger",
-        titleColor: "danger"
-    },
     success: {
         subTitleColor: "successLow",
-        indicatorColor: "success",
         containerColor: "success",
+        indicatorColor: "success",
         titleColor: "success"
     },
     warning: {
         subTitleColor: "warningLow",
-        indicatorColor: "warning",
         containerColor: "warning",
+        indicatorColor: "warning",
         titleColor: "warning"
     },
-    info: {
-        subTitleColor: "infoLow",
-        indicatorColor: "info",
-        containerColor: "info",
-        titleColor: "info"
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        indicatorColor: "danger",
+        titleColor: "danger"
     },
     neutral: {
         indicatorColor: "default",
         containerColor: "mid",
         subTitleColor: "low",
         titleColor: "mid"
+    },
+    primary: {
+        indicatorColor: "default",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        indicatorColor: "info",
+        titleColor: "info"
     }
 };
 export const getSwitchType = ({ type }) => {
@@ -51,27 +51,15 @@ const stylesheet = StyleSheet.create({
         alignItems: "center",
         display: "flex"
     },
-    indicatorContainer: {
-        position: "relative"
-    },
-    indicator: {},
-    contentContainer: {
-        justifyContent: "center",
-        flexDirection: "column"
-    },
     titleContainer: {
         justifyContent: "flex-start",
         flexDirection: "row",
         alignItems: "center"
     },
-    title: {
-        textAlign: "left",
-        margin: 0
-    },
-    subTitle: {
-        textAlign: "left"
+    contentContainer: {
+        justifyContent: "center",
+        flexDirection: "column"
     },
-    loading: {},
     overlay: {
         position: "absolute",
         display: "none",
@@ -80,40 +68,52 @@ const stylesheet = StyleSheet.create({
         right: 0,
         left: 0,
         top: 0
-    }
+    },
+    indicatorContainer: {
+        position: "relative"
+    },
+    title: {
+        textAlign: "left",
+        margin: 0
+    },
+    subTitle: {
+        textAlign: "left"
+    },
+    indicator: {},
+    loading: {}
 });
 export const useStyles = ({ displayBehaviourWhileLoading, SWITCH_INDICATOR_SIZE, spreadBehaviour, inlineSpaces, currentType, isDisabled, isLoading, isActive, colors, isFlip, spaces, type }) => {
     const styleType = type === "danger" ? "error" : type;
     const styles = {
-        container: {
-            padding: spaces.spacingSm,
-            alignSelf: "auto"
-        },
         indicatorContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],
             borderRadius: (SWITCH_INDICATOR_SIZE + (spaces.spacingSm * 2)) / 2,
             width: (SWITCH_INDICATOR_SIZE * 1.5) + (spaces.spacingSm * 2),
             padding: spaces.spacingXs
         },
+        overlay: {
+            borderRadius: (SWITCH_INDICATOR_SIZE + (spaces.spacingSm * 2)) / 2
+        },
         indicator: {
             backgroundColor: colors.content.icon[currentType.indicatorColor],
             borderRadius: SWITCH_INDICATOR_SIZE / 2,
             height: SWITCH_INDICATOR_SIZE,
             width: SWITCH_INDICATOR_SIZE
         },
+        optionalText: {
+            marginLeft: inlineSpaces.subTitle
+        },
         contentContainer: {
             marginLeft: spaces.spacingSm
         },
+        container: {
+            padding: spaces.spacingSm,
+            alignSelf: "auto"
+        },
         titleContainer: {},
         title: {},
         subTitle: {},
-        loading: {},
-        overlay: {
-            borderRadius: (SWITCH_INDICATOR_SIZE + (spaces.spacingSm * 2)) / 2
-        },
-        optionalText: {
-            marginLeft: inlineSpaces.subTitle
-        }
+        loading: {}
     };
     if (isLoading) {
         if (displayBehaviourWhileLoading === "disabled") {

package/lib/src/components/systemToolbar/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Pressable, View } from "react-native";
+import {} from "./type";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import Tooltip from "../tooltip";
+import Button from "../button";
+import Text from "../text";
+const ActionItem = ({ action }) => {
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const { borders, colors, spaces } = NCoreUIKitTheme.useContext();
+    const { tooltipContainer: tooltipContainerDynamicStyle, childCaret: childCaretDynamicStyle, actionItem: actionItemDynamicStyle } = useStyles({
+        borders,
+        colors,
+        spaces
+    });
+    const pressableStyle = useMemo(() => {
+        return [
+            stylesheet.systemToolbarAction,
+            actionItemDynamicStyle,
+            action.style
+        ];
+    }, [
+        actionItemDynamicStyle,
+        action.style
+    ]);
+    const titleText = action.titleKey ? localize(action.titleKey) : undefined;
+    const ActionIcon = action.icon;
+    const btn = _jsxs(Pressable, { onPress: action.onPress, style: pressableStyle, children: [ActionIcon ?
+                _jsx(ActionIcon, { color: "mid", size: 16 })
+                :
+                    null, titleText ?
+                _jsx(Text, { variant: "labelMediumSize", style: action.titleProps, children: titleText })
+                :
+                    null] });
+    if (!action.content || action.content.length === 0) {
+        return btn;
+    }
+    return _jsx(Tooltip, { content: _jsx(View, { style: stylesheet.systemToolbarContent, children: action.content.map((childAction, index) => _jsx(ActionItem, { action: childAction }, `system-toolbar-child-action-${index}`)) }), containerStyle: tooltipContainerDynamicStyle, caretStyle: childCaretDynamicStyle, location: {
+            horizontal: "right",
+            vertical: "center"
+        }, triggerMode: "hover", sizing: "content", children: btn });
+};
+const SystemToolbar = ({ variant = "filled", type = "neutral", size = "medium", titleKey, actions, style, title, icon }) => {
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const { borders, colors, spaces } = NCoreUIKitTheme.useContext();
+    const { tooltipContainer: tooltipContainerDynamicStyle, triggerBtn: triggerBtnDynamicStyle, rootCaret: rootCaretDynamicStyle } = useStyles({
+        borders,
+        colors,
+        spaces
+    });
+    const mainTitle = titleKey ? localize(titleKey) : title;
+    const triggerBtn = _jsx(Button, { onPress: () => {
+            // Dropdown triggers typically don't have a main action unless specified.
+            // Wait, we don't have onPress on the root SystemToolbar based on user request.
+        }, customColor: colors.content.container.default, style: [
+            style,
+            triggerBtnDynamicStyle
+        ], isCustomPadding: true, variant: variant, title: mainTitle, size: size, type: type, icon: icon });
+    if (!actions || actions.length === 0) {
+        return triggerBtn;
+    }
+    return _jsx(Tooltip, { content: _jsx(View, { style: stylesheet.systemToolbarContent, children: actions.map((action, index) => _jsx(ActionItem, { action: action }, `system-toolbar-action-${index}`)) }), containerStyle: tooltipContainerDynamicStyle, caretStyle: rootCaretDynamicStyle, location: {
+            horizontal: "center",
+            vertical: "bottom"
+        }, triggerMode: "hover", sizing: "content", children: triggerBtn });
+};
+export default SystemToolbar;

package/lib/src/components/systemToolbar/stylesheet.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    systemToolbarAction: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    systemToolbarContent: {
+        minWidth: 100,
+        gap: 2
+    }
+});
+export const useStyles = ({ borders, colors, spaces }) => {
+    const styles = {
+        tooltipContainer: {
+            backgroundColor: colors.content.container.default,
+            borderColor: colors.content.border.default,
+            borderWidth: borders.line
+        },
+        childCaret: {
+            backgroundColor: colors.content.container.default,
+            borderColor: colors.content.border.default,
+            borderBottomWidth: borders.line,
+            borderLeftWidth: borders.line
+        },
+        rootCaret: {
+            backgroundColor: colors.content.container.default,
+            borderColor: colors.content.border.default,
+            borderLeftWidth: borders.line,
+            borderTopWidth: borders.line
+        },
+        actionItem: {
+            paddingHorizontal: spaces.spacingSm,
+            paddingVertical: spaces.spacingSm
+        },
+        triggerBtn: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingVertical: spaces.spacingSm
+        }
+    };
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/systemToolbar/type.js

@@ -0,0 +1,3 @@
+import {} from "react-native";
+import {} from "../../types";
+import {} from "../button/type";

package/lib/src/components/textAreaInput/index.js

@@ -14,7 +14,7 @@ const TextInputTypeIcon = {
     "info": BadgeInfoIcon,
     "danger": BadgeXIcon
 };
-const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", isShowLengthLimiter = true, isShowHintTextIcon = false, isUpdateOnRealtime = false, icon: IconComponentProp, hintTextContainerStyle, isCleanEnabled = false, contentContainerStyle, subTitle = "Optional", onFocus: onFocusProp, isRequired = false, isDisabled = false, onBlur: onBlurProp, type = "default", rightIconOnPress, maxHeight = 350, minHeight = 250, customLocalize, rightIconStyle, isShowSubTitle, cleanIconStyle, onChangeText, initialValue, customTheme, placeholder, iconOnPress, isOptional, validation, inputStyle, maxLength, iconStyle, hintText, style, title, ...props }, ref) => {
+const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", isShowHintTextIcon = false, isShowLengthLimiter = true, isUpdateOnRealtime = false, icon: IconComponentProp, hintTextContainerStyle, isCleanEnabled = false, contentContainerStyle, subTitle = "Optional", onFocus: onFocusProp, isDisabled = false, isRequired = false, onBlur: onBlurProp, customBorderColor, customTitleColor, rightIconOnPress, type = "default", customIconColor, maxHeight = 350, minHeight = 250, cleanIconStyle, customLocalize, isShowSubTitle, rightIconStyle, initialValue, onChangeText, customColor, customTheme, iconOnPress, placeholder, inputStyle, isOptional, validation, iconStyle, maxLength, hintText, style, title, ...props }, ref) => {
     const { inlineSpaces, typography, radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
     const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
     const currentType = getTextAreaInputType({
@@ -24,11 +24,13 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
     const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
     const [value, setValue] = useState(initialValue ? initialValue : "");
     const [isFocused, setIsFocused] = useState(false);
-    const { lengthLimiterContainer: lengthLimiterContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, inputContainer: inputContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, cleanButton: cleanButtonDynamicStyle, rightIcon: rightIconDynamicStyle, container: containerDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, content: contentDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle, input: inputDynamicStyle, icon: iconDynamicStyle } = useStyles({
+    const { lengthLimiterContainer: lengthLimiterContainerDynamicStyle, inputContainer: inputContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, cleanButton: cleanButtonDynamicStyle, container: containerDynamicStyle, rightIcon: rightIconDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, content: contentDynamicStyle, overlay: overlayDynamicStyle, input: inputDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
         icon: IconComponentProp ? true : false,
+        customBorderColor,
         spreadBehaviour,
         inlineSpaces,
         currentType,
+        customColor,
         isDisabled,
         typography,
         isFocused,
@@ -43,9 +45,14 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
     });
     useEffect(() => {
         if (initialValue) {
-            inputRef.current?.setNativeProps({
-                text: initialValue
-            });
+            if (Platform.OS !== "web") {
+                inputRef.current?.setNativeProps({
+                    text: initialValue
+                });
+            }
+            else if (inputRef.current) {
+                inputRef.current.value = initialValue;
+            }
         }
     }, []);
     useImperativeHandle(ref, () => ({
@@ -80,9 +87,14 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
     };
     const updateValue = (text) => {
         setValue(text);
-        inputRef.current?.setNativeProps({
-            text: text
-        });
+        if (Platform.OS !== "web") {
+            inputRef.current?.setNativeProps({
+                text: text
+            });
+        }
+        else if (inputRef.current) {
+            inputRef.current.value = text;
+        }
     };
     const onFocus = () => {
         setIsFocused(true);
@@ -105,18 +117,18 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
         if (!isCleanEnabled || !value.length) {
             return null;
         }
-        return _jsx(TouchableOpacity, { style: [
-                cleanIconStyle,
-                stylesheet.cleanButton,
-                cleanButtonDynamicStyle
-            ], onPress: () => {
+        return _jsx(TouchableOpacity, { onPress: () => {
                 if (inputRef.current)
                     inputRef.current?.clear();
                 if (onChangeText) {
                     onChangeText("");
                 }
                 setValue("");
-            }, children: _jsx(CircleXIcon, { color: colors.content.icon[currentType.iconColor], size: 20 }) });
+            }, style: [
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ], children: _jsx(CircleXIcon, { color: colors.content.icon[currentType.iconColor], size: 20 }) });
     };
     const renderIcon = () => {
         if (!IconComponentProp) {
@@ -126,7 +138,7 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
                 iconStyle,
                 stylesheet.icon,
                 iconDynamicStyle
-            ], children: _jsx(IconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+            ], children: _jsx(IconComponentProp, { customColor: customIconColor, color: iconProps.color, size: iconProps.size }) });
     };
     const renderRightIcon = () => {
         if (!RightIconComponentProp) {
@@ -146,20 +158,20 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
             return null;
         }
         if (HintTextIconProp) {
-            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, size: 20, style: [
+            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, style: [
                     stylesheet.hintTextIcon,
                     hintTextIconDynamicStyle
-                ] });
+                ], size: 20 });
         }
         const CurrentHintIcon = TextInputTypeIcon[type === "default" ? "question" : type];
         let hintIconColor = colors.content.icon[currentType.hintTextIconColor];
         if (isDisabled) {
             hintIconColor = colors.system.state.content.disabled[styleType];
         }
-        return _jsx(CurrentHintIcon, { color: hintIconColor, size: 20, style: [
+        return _jsx(CurrentHintIcon, { style: [
                 stylesheet.hintTextIcon,
                 hintTextIconDynamicStyle
-            ] });
+            ], color: hintIconColor, size: 20 });
     };
     const renderHintText = () => {
         if (!hintText) {
@@ -175,16 +187,16 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
         if (!isRequired) {
             return null;
         }
-        return _jsx(Text, { color: "danger", style: [
+        return _jsx(Text, { style: [
                 stylesheet.required,
                 requiredDynamicStyle
-            ], children: "*" });
+            ], color: "danger", children: "*" });
     };
     const renderSubtitle = () => {
         if (!isShowSubTitle && !isOptional) {
             return null;
         }
-        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+        return _jsxs(Text, { customColor: customTitleColor, variant: "labelLargeSize", color: titleProps.color, style: [
                 stylesheet.subTitle,
                 subTitleDynamicStyle
             ], children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"] });
@@ -196,7 +208,7 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
         return _jsxs(View, { style: [
                 stylesheet.titleContainer,
                 titleContainerDynamicStyle
-            ], children: [renderRequired(), _jsx(Text, { ...titleProps, variant: titleProps.variant, color: titleProps.color, style: [
+            ], children: [renderRequired(), _jsx(Text, { ...titleProps, customColor: customTitleColor, variant: titleProps.variant, color: titleProps.color, style: [
                         stylesheet.title,
                         titleDynamicStyle
                     ], children: title }), renderSubtitle()] });
@@ -214,7 +226,7 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
         return _jsxs(View, { style: [
                 stylesheet.inputContainer,
                 inputContainerDynamicStyle
-            ], children: [_jsx(NativeTextInput, { ...props, placeholderTextColor: colors.content.text[currentType.placeholderColor], underlineColorAndroid: "rgba(255,255,255,0)", placeholder: placeholder, allowFontScaling: false, editable: !isDisabled, maxLength: maxLength, multiline: true, onFocus: onFocus, onBlur: onBlur, ref: inputRef, onEndEditing: (t) => {
+            ], children: [_jsx(NativeTextInput, { ...props, placeholderTextColor: colors.content.text[currentType.placeholderColor], onEndEditing: (t) => {
                         const text = t.nativeEvent.text;
                         if (!isUpdateOnRealtime) {
                             if (validation) {
@@ -245,17 +257,17 @@ const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIco
                                     onChangeText(text);
                             }
                         }
-                    }, style: [
+                    }, value: isUpdateOnRealtime ? value : undefined, underlineColorAndroid: "rgba(255,255,255,0)", placeholder: placeholder, allowFontScaling: false, editable: !isDisabled, maxLength: maxLength, style: [
                         inputStyle,
                         stylesheet.input,
                         inputDynamicStyle
-                    ] }), renderLengthLimiter()] });
+                    ], onFocus: onFocus, multiline: true, onBlur: onBlur, ref: inputRef }), renderLengthLimiter()] });
     };
     const renderOverlay = () => {
-        return _jsx(View, { pointerEvents: "none", style: [
+        return _jsx(View, { style: [
                 stylesheet.overlay,
                 overlayDynamicStyle
-            ] });
+            ], pointerEvents: "none" });
     };
     return _jsxs(View, { style: [
             style,