Feature: CodeEditor Component added.

eslint.config.mjs

@@ -37,6 +37,8 @@ export default tseslint.config(
             "local-rules/sort-import-specifiers": "error",
             "local-rules/ncore-sort-styles": "error",
             "local-rules/ncore-sort-types": "error",
+            "local-rules/ncore-format-union-types": "error",
+            "local-rules/sort-objects-by-length": "error",
             "padded-blocks": ["error", "never"],
             "padding-line-between-statements": [
                 "error",

example/src/navigation/index.tsx

@@ -45,6 +45,7 @@ import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
 import DateTimeSheetPage from "../pages/components/dateTimeSheet";
 import MonthSelectorPage from "../pages/components/monthSelector";
 import PageContainerPage from "../pages/components/pageContainer";
+import SystemToolbarPage from "../pages/components/systemToolbar";
 import TextAreaInputPage from "../pages/components/textAreaInput";
 import ThemeSwitcherPage from "../pages/components/themeSwitcher";
 import DefaultJSONsPage from "../pages/coreFeatures/defaultJSONs";
@@ -94,10 +95,10 @@ const CoreFeaturesStack = createNativeStackNavigator();
 
 const CoreFeaturesNav = () => {
     return <CoreFeaturesStack.Navigator
+        initialRouteName="ToolsUsage"
         screenOptions={{
             headerShown: true
         }}
-        initialRouteName="ToolsUsage"
     >
         <CoreFeaturesStack.Screen
             component={ToolsUsagePage}
@@ -124,10 +125,10 @@ const CoreFeaturesNav = () => {
 
 const GettingStartedNav = () => {
     return <GettingStartedStack.Navigator
+        initialRouteName="Installation"
         screenOptions={{
             headerShown: true
         }}
-        initialRouteName="Installation"
     >
         <GettingStartedStack.Screen
             component={InstallationPage}
@@ -142,10 +143,10 @@ const GettingStartedNav = () => {
 
 const ComponentsNav = () => {
     return <ComponentsStack.Navigator
+        initialRouteName="Text"
         screenOptions={{
             headerShown: true
         }}
-        initialRouteName="Text"
     >
         <ComponentsStack.Screen
             component={AvatarPage}
@@ -295,6 +296,10 @@ const ComponentsNav = () => {
             component={SwitchPage}
             name="Switch"
         />
+        <ComponentsStack.Screen
+            component={SystemToolbarPage}
+            name="SystemToolbar"
+        />
         <ComponentsStack.Screen
             component={TextPage}
             name="Text"
@@ -407,32 +412,18 @@ const RootNav = () => {
 
         NCoreUIKitEmbeddedMenu.load({
             isCollapse: currentMenuStatus === "true" ? true : false,
-            isWorkWithSafeAreaView: false,
-            siteLogoProps: {
-                isShowIcon: false,
-                title: localize("menu")
-            },
             buttons: [
                 {
-                    redirectMain: "Home",
-                    isUseLocalize: true,
-                    title: "home",
                     icon: ({
                         color
                     }) => <RenderHomeIcon
                         color={color}
-                    />
+                    />,
+                    redirectMain: "Home",
+                    isUseLocalize: true,
+                    title: "home"
                 },
                 {
-                    redirectMain: "GettingStarted",
-                    isCollapsible: true,
-                    title: "gettingStarted",
-                    isUseLocalize: true,
-                    icon: ({
-                        color
-                    }) => <RenderGettingStartedIcon
-                        color={color}
-                    />,
                     subButtons: [
                         {
                             redirectMain: "GettingStarted",
@@ -446,18 +437,18 @@ const RootNav = () => {
                             title: "implementation",
                             isUseLocalize: true
                         }
-                    ]
-                },
-                {
-                    redirectMain: "CoreFeatures",
-                    isCollapsible: true,
-                    title: "coreFeatures",
-                    isUseLocalize: true,
+                    ],
                     icon: ({
                         color
-                    }) => <RenderCoreFeaturesIcon
+                    }) => <RenderGettingStartedIcon
                         color={color}
                     />,
+                    redirectMain: "GettingStarted",
+                    title: "gettingStarted",
+                    isCollapsible: true,
+                    isUseLocalize: true
+                },
+                {
                     subButtons: [
                         {
                             redirectMain: "CoreFeatures",
@@ -472,8 +463,8 @@ const RootNav = () => {
                             isUseLocalize: true
                         },
                         {
-                            redirectMain: "CoreFeatures",
                             redirectSub: "LocaleExamples",
+                            redirectMain: "CoreFeatures",
                             title: "localeExamples",
                             isUseLocalize: true
                         },
@@ -489,18 +480,18 @@ const RootNav = () => {
                             title: "defaultJSONs",
                             isUseLocalize: true
                         }
-                    ]
-                },
-                {
-                    redirectMain: "Components",
-                    isUseLocalize: true,
-                    isCollapsible: true,
-                    title: "components",
+                    ],
                     icon: ({
                         color
-                    }) => <RenderComponentIcon
+                    }) => <RenderCoreFeaturesIcon
                         color={color}
                     />,
+                    redirectMain: "CoreFeatures",
+                    title: "coreFeatures",
+                    isCollapsible: true,
+                    isUseLocalize: true
+                },
+                {
                     subButtons: [
                         {
                             redirectMain: "Components",
@@ -513,8 +504,8 @@ const RootNav = () => {
                             title: "Button"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "HighlightButton",
+                            redirectMain: "Components",
                             title: "HighlightButton"
                         },
                         {
@@ -523,13 +514,13 @@ const RootNav = () => {
                             title: "TextInput"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "TextAreaInput",
+                            redirectMain: "Components",
                             title: "TextAreaInput"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "NumericInput",
+                            redirectMain: "Components",
                             title: "NumericInput"
                         },
                         {
@@ -558,33 +549,33 @@ const RootNav = () => {
                             title: "Switch"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "DateTimePicker",
+                            redirectMain: "Components",
                             title: "DateTimePicker"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "DateTimeSheet",
+                            redirectMain: "Components",
                             title: "DateTimeSheet"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "DateSelector",
+                            redirectMain: "Components",
                             title: "DateSelector"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "TimeSelector",
+                            redirectMain: "Components",
                             title: "TimeSelector"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "MonthSelector",
+                            redirectMain: "Components",
                             title: "MonthSelector"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "YearSelector",
+                            redirectMain: "Components",
                             title: "YearSelector"
                         },
                         {
@@ -605,7 +596,14 @@ const RootNav = () => {
                         {
                             redirectMain: "Components",
                             redirectSub: "CodeEditor",
-                            title: "CodeEditor"
+                            title: "CodeEditor",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectSub: "SystemToolbar",
+                            redirectMain: "Components",
+                            title: "SystemToolbar",
+                            isUseLocalize: true
                         },
                         {
                             redirectMain: "Components",
@@ -663,18 +661,18 @@ const RootNav = () => {
                             title: "Loading"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "NotificationIndicator",
-                            title: "NotificationIndicator"
+                            title: "NotificationIndicator",
+                            redirectMain: "Components"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "MarkdownViewer",
+                            redirectMain: "Components",
                             title: "MarkdownViewer"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "MarkdownEditor",
+                            redirectMain: "Components",
                             title: "MarkdownEditor"
                         },
                         {
@@ -688,13 +686,13 @@ const RootNav = () => {
                             title: "SiteLogo"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "WebScrollbar",
+                            redirectMain: "Components",
                             title: "WebScrollbar"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "PageContainer",
+                            redirectMain: "Components",
                             title: "PageContainer"
                         },
                         {
@@ -713,28 +711,42 @@ const RootNav = () => {
                             title: "Menu"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "EmbeddedMenu",
+                            redirectMain: "Components",
                             title: "EmbeddedMenu"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "ThemeSwitcher",
+                            redirectMain: "Components",
                             title: "ThemeSwitcher"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "PaletteSwitcher",
+                            redirectMain: "Components",
                             title: "PaletteSwitcher"
                         },
                         {
-                            redirectMain: "Components",
                             redirectSub: "LocaleSwitcher",
+                            redirectMain: "Components",
                             title: "LocaleSwitcher"
                         }
-                    ]
+                    ],
+                    redirectMain: "Components",
+                    icon: ({
+                        color
+                    }) => <RenderComponentIcon
+                        color={color}
+                    />,
+                    isCollapsible: true,
+                    isUseLocalize: true,
+                    title: "components"
                 }
             ],
+            isWorkWithSafeAreaView: false,
+            siteLogoProps: {
+                title: localize("menu"),
+                isShowIcon: false
+            },
             isAutoClosed: true,
             id: "main-menu"
         });
@@ -781,13 +793,13 @@ const RootNav = () => {
     return <MainHeader
         siteLogoProps={{
             imageUrl: activeTheme.indexOf("dark") !== -1 ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "http://ncore.nibgat.space/assets/images/ncorelogo.png",
+            subTitle: "Design System - UI Kit",
             onPress: () => {
                 navigation.navigate("Home");
             },
             imageProps: {
                 resizeMode: "stretch"
             },
-            subTitle: "Design System - UI Kit",
             title: "NİBGAT® | NCore",
             isWorkWithAction: true,
             isWorkWithFlex1: true
@@ -815,10 +827,10 @@ const RootNav = () => {
             id="main-menu"
         >
             <RootStack.Navigator
+                initialRouteName="Home"
                 screenOptions={{
                     headerShown: false
                 }}
-                initialRouteName="Home"
             >
                 <RootStack.Screen
                     component={GettingStartedNav}
@@ -843,91 +855,92 @@ const RootNav = () => {
 
 const Navigation = () => {
     return <NavigationContainer
+        documentTitle={{
+            formatter: (options, route) => `${options?.title ?? route?.name ?? "Home"} || NCore - Design System | UI Kit`
+        }}
         linking={{
-            prefixes: [
-                "http://localhost:3000",
-                "https://ncore.nibgat.space"
-            ],
             config: {
                 screens: {
-                    Home: "home",
-                    GettingStarted: {
-                        path: "gettingstarted",
-                        screens: {
-                            Installation: "installation",
-                            Implementation: "implementation"
-                        }
-                    },
-                    CoreFeatures: {
-                        path: "corefeatures",
-                        screens: {
-                            ToolsUsage: "toolsusage",
-                            ThemeExamples: "themeexamples",
-                            LocaleExamples: "localeexamples",
-                            TypesOverride: "typesoverride",
-                            DefaultJSONs: "defaultjsons"
-                        }
-                    },
                     Components: {
-                        path: "components",
                         screens: {
-                            Avatar: "avatar",
-                            AvatarGroup: "avatargroup",
-                            BottomSheet: "bottomsheet",
-                            Button: "button",
-                            CheckBox: "checkbox",
-                            Chip: "chip",
-                            CodeViewer: "codeviewer",
-                            CodeEditor: "codeeditor",
-                            DateSelector: "dateselector",
-                            DateTimePicker: "datetimepicker",
-                            DateTimeSheet: "datetimesheet",
-                            Dialog: "dialog",
-                            EmbeddedMenu: "embeddedmenu",
-                            Header: "header",
+                            NotificationIndicator: "notificationindicator",
                             HighlightButton: "highlightbutton",
-                            Loading: "loading",
+                            PaletteSwitcher: "paletteswitcher",
+                            DateTimePicker: "datetimepicker",
                             LocaleSwitcher: "localeswitcher",
-                            MainHeader: "mainheader",
-                            MarkdownViewer: "markdownviewer",
                             MarkdownEditor: "markdowneditor",
-                            Menu: "menu",
-                            Modal: "modal",
+                            MarkdownViewer: "markdownviewer",
+                            DateTimeSheet: "datetimesheet",
                             MonthSelector: "monthselector",
-                            NotificationIndicator: "notificationindicator",
-                            NumericInput: "numericinput",
                             PageContainer: "pagecontainer",
-                            PaletteSwitcher: "paletteswitcher",
+                            SystemToolbar: "systemtoolber",
+                            TextAreaInput: "textareainput",
+                            ThemeSwitcher: "themeswitcher",
+                            DateSelector: "dateselector",
+                            EmbeddedMenu: "embeddedmenu",
+                            NumericInput: "numericinput",
+                            TimeSelector: "timeselector",
+                            WebScrollbar: "webscrollbar",
+                            YearSelector: "yearselector",
+                            AvatarGroup: "avatargroup",
+                            BottomSheet: "bottomsheet",
                             RadioButton: "radiobutton",
-                            RowCard: "rowcard",
-                            SelectBox: "selectbox",
                             SelectSheet: "selectsheet",
+                            CodeEditor: "codeeditor",
+                            CodeViewer: "codeviewer",
+                            MainHeader: "mainheader",
+                            SelectBox: "selectbox",
                             Seperator: "seperator",
+                            StateCard: "statecard",
+                            TextInput: "textinput",
+                            CheckBox: "checkbox",
                             SiteLogo: "sitelogo",
                             SnackBar: "snackbar",
-                            StateCard: "statecard",
+                            Loading: "loading",
+                            RowCard: "rowcard",
                             Sticker: "sticker",
+                            Tooltip: "tooltip",
+                            Avatar: "avatar",
+                            Button: "button",
+                            Dialog: "dialog",
+                            Header: "header",
                             Switch: "switch",
-                            Text: "text",
-                            TextAreaInput: "textareainput",
-                            TextInput: "textinput",
-                            ThemeSwitcher: "themeswitcher",
-                            TimeSelector: "timeselector",
+                            Modal: "modal",
                             Toast: "toast",
-                            Tooltip: "tooltip",
-                            WebScrollbar: "webscrollbar",
-                            YearSelector: "yearselector"
-                        }
-                    }
+                            Chip: "chip",
+                            Menu: "menu",
+                            Text: "text"
+                        },
+                        path: "components"
+                    },
+                    CoreFeatures: {
+                        screens: {
+                            LocaleExamples: "localeexamples",
+                            ThemeExamples: "themeexamples",
+                            TypesOverride: "typesoverride",
+                            DefaultJSONs: "defaultjsons",
+                            ToolsUsage: "toolsusage"
+                        },
+                        path: "corefeatures"
+                    },
+                    GettingStarted: {
+                        screens: {
+                            Implementation: "implementation",
+                            Installation: "installation"
+                        },
+                        path: "gettingstarted"
+                    },
+                    Home: "home"
                 }
             },
             getStateFromPath: (path, options) => {
                 return getStateFromPath(path.toLowerCase(), options);
-            }
+            },
+            prefixes: [
+                "http://localhost:3000",
+                "https://ncore.nibgat.space"
+            ]
         } as LinkingOptions<RootStackParamList>}
-        documentTitle={{
-            formatter: (options, route) => `${options?.title ?? route?.name ?? "Home"} || NCore - Design System | UI Kit`
-        }}
     >
         <RootNav/>
     </NavigationContainer>;

example/src/pages/components/codeEditor/index.tsx

@@ -3,6 +3,7 @@ import {
     useState
 } from "react";
 import {
+    Platform,
     View
 } from "react-native";
 import stylesheet from "./stylesheet";
@@ -22,6 +23,9 @@ import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
+import {
+    File
+} from "lucide-react-native";
 
 const CodeEditorPage = () => {
     const {
@@ -38,7 +42,7 @@ const CodeEditorPage = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
-                title={localize("codeEditor-title") || "Code Editor"}
+                title={localize("codeEditor-title")}
                 isWrapSafeareaContext={false}
                 navigation={navigation}
                 isGoBackEnable={true}
@@ -56,10 +60,10 @@ const CodeEditorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -72,7 +76,7 @@ const CodeEditorPage = () => {
                 variant="bodyMediumSize"
                 color="mid"
             >
-                {localize("codeEditor-desc") || "This is a CodeEditor component from NCore UI Kit."}
+                {localize("codeEditor-desc")}
             </Text>
             <View
                 style={{
@@ -85,59 +89,81 @@ const CodeEditorPage = () => {
                     }}
                     variant="headlineSmallSize"
                 >
-                    {localize("usage") || "Usage"}
+                    {localize("usage")}
                 </Text>
                 <CodeViewer
-                    code={"import {\n    CodeEditor\n} from \"ncore-ui-kit\";\n\n<CodeEditor\n    language=\"javascript\"\n    onChangeText={setCode}\n    value={code}\n    isScrollable={true}\n    isToolbarVisible={true}\n    toolbarActions={[\n        {\n            title: \"Save\",\n            onPress: () => alert(\"Saved!\")\n        }\n    ]}\n/>"}
+                    code={"import {\n    CodeEditor\n} from \"ncore-ui-kit\";\n\n<CodeEditor\n    language=\"javascript\"\n    onChangeText={setCode}\n    value={code}\n    isScrollable={true}\n    isToolbarVisible={true}\n    toolbarActions={[\n        {\n            icon: ({ color, size }) => <File color={colors.content.icon[color]} size={size} />,\n            content: () => {\n                // Return your ReactNode options here.\n            }\n        }\n    ]}\n/>"}
                     language="tsx"
                 />
             </View>
             <CodeEditor
                 toolbarActions={[
                     {
-                        style: {
-                            backgroundColor: colors.content.container.default,
-                            paddingHorizontal: spaces.spacingLg,
-                            paddingVertical: 2,
-                            borderRadius: 4
-                        },
-                        onPress: () => console.log("File"),
-                        spreadBehaviour: "baseline",
-                        isCustomPadding: true,
-                        variant: "ghost",
-                        type: "neutral",
-                        size: "small",
-                        title: "File"
-                    },
-                    {
-                        style: {
-                            backgroundColor: colors.content.container.default,
-                            paddingHorizontal: spaces.spacingLg,
-                            paddingVertical: 2,
-                            borderRadius: 4
-                        },
-                        onPress: () => console.log("Edit"),
-                        spreadBehaviour: "baseline",
-                        isCustomPadding: true,
-                        variant: "ghost",
-                        type: "neutral",
-                        size: "small",
-                        title: "Edit"
-                    },
-                    {
-                        style: {
-                            backgroundColor: colors.content.container.default,
-                            paddingHorizontal: spaces.spacingLg,
-                            paddingVertical: 2,
-                            borderRadius: 4
-                        },
-                        onPress: () => console.log("View"),
-                        spreadBehaviour: "baseline",
-                        isCustomPadding: true,
-                        variant: "ghost",
+                        actions: [
+                            {
+                                onPress: () => {
+                                    if (Platform.OS === "web") {
+                                        const input = document.createElement("input");
+
+                                        input.type = "file";
+                                        input.accept = ".js,.ts,.tsx,.json,.txt";
+
+                                        input.onchange = (e) => {
+                                            const file = (e.target as HTMLInputElement).files?.[0];
+
+                                            if (file) {
+                                                const reader = new FileReader();
+
+                                                reader.onload = (ev) => {
+                                                    setCode(ev.target?.result as string);
+                                                };
+
+                                                reader.readAsText(file);
+                                            }
+                                        };
+
+                                        input.click();
+                                    } else {
+                                        // TODO: Will be code it.
+                                    }
+                                },
+                                titleKey: "open"
+                            },
+                            {
+                                onPress: () => {
+                                    if (Platform.OS === "web") {
+                                        const blob = new Blob([
+                                            code
+                                        ], {
+                                            type: "text/plain"
+                                        });
+
+                                        const url = URL.createObjectURL(blob);
+
+                                        const a = document.createElement("a");
+                                        a.href = url;
+                                        a.download = "code.js";
+                                        a.click();
+
+                                        URL.revokeObjectURL(url);
+                                    } else {
+                                        // TODO: Will be code it.
+                                    }
+                                },
+                                titleKey: "save"
+                            }
+                        ],
+                        icon: ({
+                            color,
+                            size
+                        }) => <File
+                            color={colors.content.icon[color]}
+                            size={size}
+                        />,
+                        variant: "filled",
+                        titleKey: "file",
                         type: "neutral",
-                        size: "small",
-                        title: "View"
+                        size: "medium"
                     }
                 ]}
                 style={stylesheet.editorScrollable}

example/src/pages/components/codeEditor/stylesheet.ts

@@ -3,15 +3,18 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
     editorScrollable: {
         minHeight: 350,
         width: "100%",
         height: 200
     },
-    scrollContent: {
-        justifyContent: "center",
-        alignItems: "center"
-    },
     contentContainer: {
         maxWidth: 850,
         width: "100%"
@@ -20,9 +23,6 @@ const stylesheet = StyleSheet.create({
         minHeight: 350,
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
-    },
     container: {
         flex: 1
     }

example/src/pages/components/systemToolbar/index.tsx

@@ -0,0 +1,175 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    SystemToolbar,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    SettingsIcon,
+    LogOutIcon,
+    UserIcon,
+    MenuIcon,
+    HomeIcon
+} from "lucide-react-native";
+
+const SystemToolbarPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("systemToolbar-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                style={stylesheet.marginContainer}
+                variant="bodyMediumSize"
+                color="mid"
+            >
+                {localize("systemToolbar-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SystemToolbar
+                    actions={[
+                        {
+                            onPress: () => console.log("Settings pressed"),
+                            icon: ({
+                                color,
+                                size
+                            }) => <SettingsIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />,
+                            titleKey: "menu-settings"
+                        },
+                        {
+                            content: [
+                                {
+                                    icon: ({
+                                        color,
+                                        size
+                                    }) => <HomeIcon
+                                        color={colors.content.icon[color]}
+                                        size={size}
+                                    />,
+                                    onPress: () => console.log("Home"),
+                                    titleKey: "menu-home"
+                                },
+                                {
+                                    icon: ({
+                                        color,
+                                        size
+                                    }) => <LogOutIcon
+                                        color={colors.content.icon[color]}
+                                        size={size}
+                                    />,
+                                    onPress: () => console.log("Logout"),
+                                    titleKey: "close"
+                                }
+                            ],
+                            icon: ({
+                                color,
+                                size
+                            }) => <UserIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />,
+                            titleKey: "avatar-title"
+                        }
+                    ]}
+                    icon={({
+                        color,
+                        size
+                    }) => <MenuIcon
+                        color={colors.content.icon[color]}
+                        size={size}
+                    />}
+                    titleKey="menu-title"
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                    variant="headlineSmallSize"
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    SystemToolbar\n} from \"ncore-ui-kit\";\nimport {\n    Settings,\n    User,\n    LogOut,\n    Menu,\n    Home\n} from \"lucide-react-native\";\n\n<SystemToolbar\n    titleKey=\"menu\"\n    icon={({ color, size }) => <Menu color={colors.content.icon[color]} size={size} />}\n    actions={[\n        {\n            titleKey: \"menu-settings\",\n            icon: ({ color, size }) => <Settings color={colors.content.icon[color]} size={size} />,\n            onPress: () => console.log(\"Settings pressed\")\n        }\n    ]}\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+
+export default SystemToolbarPage;

example/src/pages/components/systemToolbar/stylesheet.ts

@@ -0,0 +1,25 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120,
+        zIndex: 99
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        flex: 1
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    }
+});
+export default stylesheet;

example/src/pages/components/tooltip/index.tsx

@@ -30,17 +30,17 @@ import type {
 } from "ncore-ui-kit";
 
 const TOOLTIP_TYPES: Array<ITooltipProps["type"]> = [
+    "neutral",
     "primary",
     "danger",
     "warning",
     "success",
-    "info",
-    "neutral"
+    "info"
 ];
 
 const TOOLTIP_TYPES_DATA = TOOLTIP_TYPES.map(item => ({
-    __key: item as string,
-    __title: item as string
+    __title: item as string,
+    __key: item as string
 }));
 
 const TOOLTIP_LOCATIONS: Array<TooltipLocation> = [
@@ -64,20 +64,20 @@ const TOOLTIP_LOCATIONS: Array<TooltipLocation> = [
 
 const TOOLTIP_LOCATIONS_DATA = [
     {
-        __key: "0",
-        __title: "Top"
+        __title: "Top",
+        __key: "0"
     },
     {
-        __key: "1",
-        __title: "Bottom"
+        __title: "Bottom",
+        __key: "1"
     },
     {
-        __key: "2",
-        __title: "Left"
+        __title: "Left",
+        __key: "2"
     },
     {
-        __key: "3",
-        __title: "Right"
+        __title: "Right",
+        __key: "3"
     }
 ];
 
@@ -85,8 +85,8 @@ const TooltipPage = () => {
     const {
         radiuses,
         borders,
-        spaces,
-        colors
+        colors,
+        spaces
     } = NCoreUIKitTheme.useContext();
 
     const {
@@ -107,13 +107,13 @@ const TooltipPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            headerShown: true,
             header: () => <Header
                 isWrapSafeareaContext={false}
                 title={localize("tooltip")}
                 navigation={navigation}
                 isGoBackEnable={true}
-            />
+            />,
+            headerShown: true
         });
     }, []);
 

example/src/variants/locales/default.json

@@ -19,6 +19,7 @@
             "markdownViewer-desc": "Markdown formatındaki zengin metinleri ayrıştırıp biçimlendirilmiş olarak gösteren içerik bileşeni.",
             "implementation-desc": "Projelerinizde NCore UI Kit'i kurduktan sonra en dış katmandan nasıl uygulayacağınıza dair örnek.",
             "modal-desc": "Mevcut sayfanın üzerine binen ve kullanıcıyı belirli bir göreve odaklayan kalıcı (modal) pencere bileşeni.",
+            "systemToolbar-desc": "Kullanıcıya iç içe menüler ve çeşitli aksiyonları kompakt bir şekilde sunan araç çubuğu bileşeni.",
             "notificationIndicator-desc": "Okunmamış bildirim veya mesaj sayılarını görsel olarak belirten ufak belirteç bileşeni.",
             "paletteSwitcher-desc": "Kullanıcının uygulamanın renk paletini ve görünümünü özelleştirmesine olanak tanıyan bileşen.",
             "selectSheet-desc": "Ekranın altından açılarak bir liste içerisinden pratik seçim yapılmasını sağlayan sayfa bileşeni.",
@@ -41,6 +42,8 @@
             "checkBox-desc": "Birden fazla seçenek arasından bağımsız seçimler yapmayı sağlayan onay kutusu bileşeni.",
             "embeddedMenu-desc": "Sayfa içine gömülü (inline) olarak çalışan ve bağlamsal menü öğeleri sunan bileşen.",
             "numericInput-desc": "Sadece sayısal verilerin veya miktarların girilmesini sağlayan özel girdi bileşeni.",
+            "selected-end-time-cannot-before-from-start-time": "Seçilen bitiş saati, başlangıç saatinden önce olamaz.",
+            "selected-start-time-cannot-after-then-end-time": "Seçilen başlangıç saati, bitiş saatinden sonra olamaz.",
             "seperator-desc": "Bileşenler veya içerikler arasında görsel bir ayrım çizgisi oluşturan boşluk bileşeni.",
             "textInput-desc": "Kullanıcıdan kısa metin veya veri girmesini talep eden standart form girdi bileşeni.",
             "monthSelector-desc": "Bir yıl içerisinden belirli bir ayı veya ayları seçmek için kullanılan bileşen.",
@@ -53,6 +56,7 @@
             "themeExamples-desc": "Farklı tema, palet ve tipografi kullanımları ve canlı olarak değiştirilmesi.",
             "highlightButton-desc": "Önemli eylemleri vurgulamak için kullanılan dikkat çekici buton bileşeni.",
             "bottomSheet-desc": "Ekranın altından açılan ve ek içerikler sunan kaydırılabilir panel bileşeni.",
+            "minimum-selection-number-of-days-required-not-provided": "Gerekli minimum gün seçimi sağlanmadı.",
             "button-desc": "Kullanıcı etkileşimlerini tetiklemek için kullanılan temel tıklanabilir bileşen.",
             "toolsUsage-codeThemeComment": "Mevcut tema renklerine, boşluklarına ve aktif tercihlere erişin",
             "localeExamples-desc": "Diller arası geçiş ve localize fonksiyonu ile dinamik metin kullanımı.",
@@ -63,17 +67,25 @@
             "toolsUsage-desc": "NCore UI Kit hook'ları olan useTheme, useLocale ve useToast kullanımı.",
             "siteLogo-desc": "Markayı veya uygulamayı temsil eden ana logo görselini işleyen bileşen.",
             "codeViewer-desc": "Kod bloklarını görüntülemek ve kopyalamak için kullanılan bileşen.",
+            "maximum-selection-number-of-days-limit-exceeds": "Maksimum gün seçim sınırı aşıldı.",
             "avatarGroup-desc": "Birden fazla avatarı bir arada gruplayarak gösteren bileşen.",
             "avatar-desc": "Kullanıcı veya varlıkları temsil eden profil görseli bileşeni.",
+            "maximum-selection-limit-has-been-reached": "Maksimum seçim limitine ulaşıldı.",
             "toolsUsage-codeLocaleComment": "Mevcut çevirilere ve aktif dile erişin",
+            "code-copy-error-to-clipboard": "Kod panoya kopyalanırken hata oluştu.",
+            "minimum-a-item-selection-required": "En az bir öğe seçimi zorunludur.",
+            "start-date-select-is-required": "Başlangıç tarihi seçimi zorunludur.",
+            "code-copy-success-to-clipboard": "Kod başarıyla panoya kopyalandı.",
             "markdownViewer-title": "Markdown Görüntüleyici (Markdown Viewer)",
             "typesOverride-tsconfigIntegration": "tsconfig.json Entegrasyonu",
+            "end-date-select-is-required": "Bitiş tarihi seçimi zorunludur.",
             "markdownEditor-title": "Markdown Düzenleyici (Markdown Editor)",
             "bottomSheet-toggleSwipeClose": "Kaydırarak Kapatmayı Aç/Kapat",
             "highlightButton-toggleCustomPadding": "Özel Boşluğu Aç/Kapat",
             "notificationIndicator-toggleShowCount": "Sayıyı Göster/Gizle",
             "themeExamples-headlineLarge": "Büyük Başlık (Headline Large)",
             "localeExamples-localizedTexts": "Yerelleştirilmiş Metinler",
+            "systemToolbar-title": "Sistem Araç Çubuğu (System Toolbar)",
             "themeExamples-titleLarge": "Büyük Alt Başlık (Title Large)",
             "dateTimePicker-changePickerType": "Seçici Türünü Değiştir",
             "themeExamples-displayLarge": "Büyük Ekran (Display Large)",
@@ -192,6 +204,7 @@
             "numericInput-exampleTitle": "Sayısal Değer",
             "numericInput-placeholder": "Bir sayı girin",
             "rowCard-exampleSubTitle": "Kart Alt Başlık",
+            "select-an-option": "Bir seçenek belirleyin",
             "siteLogo-enterSubTitle": "Alt Başlık Girin",
             "toolsUsage-codeViewer": "Kod Görüntüleyici",
             "typesOverride-globalTypes": "Global Tipler",
@@ -286,6 +299,7 @@
             "defaultJSONs": "Varsayılan JSONlar",
             "open-bottom-sheet": "Alt Paneli Aç",
             "rowCard-enterTitle": "Başlık Girin",
+            "select-any-date": "Bir tarih seçin",
             "stateCard-exampleValue": "$ 12,000",
             "sticker-enterTitle": "Başlık Girin",
             "switch-subTitleLabel": "Alt Başlık",
@@ -294,6 +308,7 @@
             "avatarGroup-title": "Avatar Grubu",
             "change-location": "Konum Değiştir",
             "checkBox-enterText": "Metin Girin",
+            "clean-selection": "Seçimi Temizle",
             "enter-sub-text": "Alt Metin Girin",
             "numericInput-titleLabel": "Başlık",
             "radioButton-title": "Radyo Butonu",
@@ -340,6 +355,7 @@
             "image-url": "Resim Bağlantısı",
             "seperator-titleLabel": "Metin",
             "siteLogo-titleLabel": "Başlık",
+            "start-time": "Başlangıç Saati",
             "stateCard-valueLabel": "Değer",
             "toggle-icon": "İkonu Aç/Kapat",
             "avatar-group": "Avatar Grubu",
@@ -351,8 +367,10 @@
             "sticker-exampleTitle": "Yeni",
             "sticker-titleLabel": "Başlık",
             "avatar-titleLabel": "Başlık",
+            "clean-all": "Tümünü Temizle",
             "dialog-titleLabel": "Başlık",
             "gettingStarted": "Başlarken",
+            "is-optional": "İsteğe Bağlı",
             "switch-titleLabel": "Başlık",
             "themeExamples-info": "Bilgi",
             "bottomSheet-close": "Kapat",
@@ -361,30 +379,48 @@
             "chip-titleLabel": "Başlık",
             "dialog": "İletişim Kutusu",
             "enter-text": "Metin Girin",
+            "go-to-today": "Bugüne Git",
             "check-box": "Onay Kutusu",
+            "components": "Bileşenler",
             "enter-code": "Kodu Girin",
             "menu-title": "Menu Title",
+            "select-all": "Tümünü Seç",
+            "end-time": "Bitiş Saati",
             "installation": "Kurulum",
             "sub-title": "Alt Başlık",
             "avatar-title": "Avatar",
             "codeViewer-code": "Kod",
             "menu-home": "Menu Home",
             "text": "Text ( Metin )",
+            "preview": "Önizleme",
             "chip-title": "Çip",
             "content": "İçerik",
             "home": "Ana Sayfa",
             "usage": "Kullanım",
             "avatar": "Avatar",
             "button": "Button",
+            "monthly": "Aylık",
             "tooltip": "İpucu",
             "version": "Sürüm",
+            "yearly": "Yıllık",
+            "cancel": "İptal",
+            "daily": "Günlük",
             "next": "Sonraki",
             "title": "Başlık",
             "close": "Kapat",
+            "save": "Kaydet",
             "bottom": "Alt",
+            "file": "Dosya",
+            "live": "Canlı",
+            "search": "Ara",
+            "menu": "Menü",
             "right": "Sağ",
+            "write": "Yaz",
             "chip": "Çip",
             "left": "Sol",
+            "ok": "Tamam",
+            "open": "Aç",
+            "or": "Veya",
             "top": "Üst"
         },
         "locale": "tr-TR",
@@ -417,6 +453,7 @@
             "dialog-desc": "A pop-up window component used to draw the user's attention, get confirmation, or provide information.",
             "markdownViewer-desc": "A content component that parses and displays rich text in Markdown format as formatted output.",
             "paletteSwitcher-desc": "A component that allows the user to customize the application's color palette and appearance.",
+            "systemToolbar-desc": "A toolbar component providing nested menus and various actions to the user in a compact layout.",
             "toast-desc": "A component that shows system messages appearing and disappearing momentarily at the top of the screen.",
             "localeSwitcher-desc": "A control component that allows instant switching between the application's language options.",
             "dateTimeSheet-desc": "A sheet component that opens from the bottom of the screen to allow date and time selection.",
@@ -428,6 +465,7 @@
             "text-desc": "The core typography component that handles all text in the application according to theme rules.",
             "yearSelector-desc": "A specialized time interface component focused solely on selecting the year from a list.",
             "themeSwitcher-desc": "A component that allows switching between light and dark themes, or the system theme.",
+            "minimum-selection-number-of-days-required-not-provided": "Minimum number of days required is not provided.",
             "themeExamples-desc": "Usage of different themes, palettes, and typography, and switching them dynamically.",
             "header-desc": "A top-area component located at the top of pages, containing title and navigation actions.",
             "seperator-desc": "A spacing component that creates a visual dividing line between components or content.",
@@ -439,24 +477,33 @@
             "textInput-desc": "A standard form input component that requests the user to enter short text or data.",
             "siteLogo-desc": "A component that renders the main logo image representing the brand or application.",
             "timeSelector-desc": "An interface component optimized for selecting a specific time (hour, minute).",
+            "maximum-selection-number-of-days-limit-exceeds": "Maximum number of days selection limit exceeded.",
             "menu-desc": "A general-purpose menu component that presents various options and links to the user.",
+            "selected-end-time-cannot-before-from-start-time": "Selected end time cannot be before start time.",
             "chip-desc": "A compact component used to display small pieces of information, tags, or statuses.",
             "markdownEditor-desc": "A content component that allows you to edit rich text in Markdown format.",
             "localeExamples-desc": "Switching between locales and dynamic text usage with localize function.",
+            "selected-start-time-cannot-after-then-end-time": "Selected start time cannot be after end time.",
             "highlightButton-desc": "An eye-catching button component used to highlight important actions.",
             "toolsUsage-codeViewerDesc": "To render code beautifully in your app and copy it to clipboard.",
             "toolsUsage-codeLocaleComment": "Access current localization translations and active language",
             "codeEditor-desc": "Code editing component with syntax highlighting for software developers.",
+            "code-copy-error-to-clipboard": "An error occurred while copying the code to the clipboard.",
             "monthSelector-desc": "A component used to select a specific month or months within a year.",
             "toolsUsage-codeThemeComment": "Access current theme colors, spaces, and active preferences",
             "dateSelector-desc": "An interface component that allows users to select a specific date.",
+            "maximum-selection-limit-has-been-reached": "Maximum selection limit has been reached.",
             "sticker-desc": "A dynamic sticker component used for adding playful visuals or icons.",
             "switch-desc": "A toggle switch component used to change binary (on/off) preferences.",
             "avatarGroup-desc": "A component that groups and displays multiple avatars together.",
+            "minimum-a-item-selection-required": "A minimum of one item selection is required.",
             "toolsUsage-desc": "Usage of NCore UI Kit hooks useTheme, useLocale, and useToast.",
             "button-desc": "A basic clickable component used to trigger user interactions.",
             "avatar-desc": "A profile image component representing users or entities.",
+            "code-copy-success-to-clipboard": "Code successfully copied to clipboard.",
             "codeViewer-desc": "A component used to display and copy code blocks.",
+            "start-date-select-is-required": "Start date selection is required.",
+            "end-date-select-is-required": "End date selection is required.",
             "typesOverride-tsconfigIntegration": "tsconfig.json Integration",
             "highlightButton-toggleCustomPadding": "Toggle Custom Padding",
             "notificationIndicator-toggleShowCount": "Toggle Show Count",
@@ -618,6 +665,7 @@
             "radioButton-subTitleLabel": "Subtitle",
             "radioButton-toggleFlip": "Toggle Flip",
             "selectBox-toggleClean": "Toggle Clean",
+            "systemToolbar-title": "System Toolbar",
             "textInput-toggleClean": "Toggle Clean",
             "themeExamples-bodyLarge": "Body Large",
             "themeExamples-title": "Theme Examples",
@@ -625,6 +673,7 @@
             "chip-toggleLoading": "Toggle Loading",
             "date-time-picker": "Date Time Picker",
             "mainHeader-title": "MainHeader Title",
+            "select-an-option": "Select an option",
             "switch-changeSpread": "Change Spread",
             "switch-toggleActive": "Toggle Active",
             "themeExamples-switchers": "Switchers",
@@ -648,9 +697,11 @@
             "checkBox-changeType": "Change Type",
             "checkBox-toggleFlip": "Toggle Flip",
             "chip-changeSpread": "Change Spread",
+            "clean-selection": "Clean Selection",
             "enter-image-url": "Enter Image URL",
             "getting-started": "Getting Started",
             "rowCard-exampleTitle": "Card Title",
+            "select-any-date": "Select any date",
             "selectBox-placeholder": "Select...",
             "seperator-enterTitle": "Enter Text",
             "siteLogo-enterTitle": "Enter Title",
@@ -734,6 +785,7 @@
             "change-size": "Change Size",
             "change-type": "Change Type",
             "dialog-titleLabel": "Title",
+            "go-to-today": "Go To Today",
             "hello-world": "Hello World",
             "open-dialog": "Open Dialog",
             "switch-titleLabel": "Title",
@@ -746,37 +798,57 @@
             "rowCard-title": "Row Card",
             "toolsUsage": "Tools Usage",
             "chip-titleLabel": "Title",
+            "components": "Components",
             "enter-code": "Enter Code",
             "enter-text": "Enter Text",
             "loading-title": "Loading",
             "menu-title": "Menu Title",
+            "select-all": "Select All",
+            "start-time": "Start Time",
             "sticker-title": "Sticker",
             "codeViewer-code": "Code",
+            "is-optional": "Optional",
             "avatar-title": "Avatar",
             "check-box": "Check Box",
+            "clean-all": "Clean All",
             "dialog-title": "Dialog",
             "image-url": "Image URL",
             "menu-home": "Menu Home",
             "sub-title": "Sub Title",
             "switch-title": "Switch",
+            "end-time": "End Time",
             "chip-title": "Chip",
             "content": "Content",
+            "monthly": "Monthly",
+            "preview": "Preview",
             "tooltip": "Tooltip",
             "version": "Version",
             "home": "Home Page",
             "avatar": "Avatar",
             "bottom": "Bottom",
             "button": "Button",
+            "cancel": "Cancel",
             "dialog": "Dialog",
+            "search": "Search",
+            "yearly": "Yearly",
             "close": "Close",
+            "daily": "Daily",
             "right": "Right",
             "title": "Title",
             "usage": "Usage",
+            "write": "Write",
             "chip": "Chip",
+            "file": "File",
             "left": "Left",
+            "live": "Live",
+            "menu": "Menu",
             "next": "Next",
+            "open": "Open",
+            "save": "Save",
             "text": "Text",
-            "top": "Top"
+            "top": "Top",
+            "ok": "OK",
+            "or": "Or"
         },
         "locale": "en-US",
         "isRTL": false

src/components/button/index.tsx

@@ -28,12 +28,12 @@ const Button: FC<IButtonProps> = ({
     displayBehaviourWhileLoading = "disabled",
     verticalLocationForStretchFix = "start",
     spreadBehaviour = "baseline",
-    isCustomPadding = false,
     icon: IconComponentProp,
+    isCustomPadding = false,
     iconDirection = "left",
     isFixVerticalStretch,
-    variant = "filled",
     isDisabled = false,
+    variant = "filled",
     customBorderColor,
     type = "primary",
     customIconColor,
@@ -46,8 +46,8 @@ const Button: FC<IButtonProps> = ({
     isLoading,
     iconSize,
     onPress,
-    title,
     style,
+    title,
     ...props
 }) => {
     const {
@@ -86,14 +86,14 @@ const Button: FC<IButtonProps> = ({
         spreadBehaviour,
         currentVariant,
         iconDirection,
-        currentType,
         currentSize,
+        currentType,
         customColor,
         isDisabled,
         isLoading,
         radiuses,
-        variant,
         borders,
+        variant,
         colors,
         spaces,
         title,

src/components/button/stylesheet.ts

@@ -21,20 +21,20 @@ import type {
 } from "../../types";
 
 export const BUTTON_SIZES: Record<ButtonSize, ButtonMeasuresKeys> = {
-    small: {
-        paddingHorizontal: "spacingMd",
-        paddingVertical: "spacingSm",
-        fontSize: "labelSmallSize"
+    large: {
+        paddingHorizontal: "spacingXl",
+        paddingVertical: "spacingLg",
+        fontSize: "labelLargeSize"
     },
     medium: {
         paddingHorizontal: "spacingLg",
         paddingVertical: "spacingMd",
         fontSize: "labelMediumSize"
     },
-    large: {
-        paddingHorizontal: "spacingXl",
-        paddingVertical: "spacingLg",
-        fontSize: "labelLargeSize"
+    small: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingSm",
+        fontSize: "labelSmallSize"
     }
 };
 
@@ -48,9 +48,9 @@ export const BUTTON_VARIANT_STYLES: Record<
         containerColor: "transparent" | "type";
     }
 > = {
-    filled: {
-        borderColor: "container",
-        containerColor: "type",
+    ghost: {
+        containerColor: "transparent",
+        borderColor: "transparent",
         titleColor: "type",
         iconColor: "type"
     },
@@ -60,9 +60,9 @@ export const BUTTON_VARIANT_STYLES: Record<
         titleColor: "type",
         iconColor: "type"
     },
-    ghost: {
-        containerColor: "transparent",
-        borderColor: "transparent",
+    filled: {
+        borderColor: "container",
+        containerColor: "type",
         titleColor: "type",
         iconColor: "type"
     }
@@ -83,12 +83,6 @@ export const BUTTON_TYPE_STYLES: Record<
         titleColor: "onPrimary",
         iconColor: "onPrimary"
     },
-    danger: {
-        containerColor: "danger",
-        borderColor: "danger",
-        titleColor: "danger",
-        iconColor: "danger"
-    },
     success: {
         containerColor: "success",
         borderColor: "success",
@@ -101,17 +95,23 @@ export const BUTTON_TYPE_STYLES: Record<
         titleColor: "warning",
         iconColor: "warning"
     },
-    info: {
-        containerColor: "info",
-        borderColor: "info",
-        titleColor: "info",
-        iconColor: "info"
+    danger: {
+        containerColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
     },
     neutral: {
         containerColor: "subtle",
         borderColor: "subtle",
         titleColor: "mid",
         iconColor: "mid"
+    },
+    info: {
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        iconColor: "info"
     }
 };
 
@@ -154,11 +154,6 @@ const stylesheet = StyleSheet.create({
         position: "relative",
         display: "flex"
     },
-    title: {
-        textAlign: "center",
-        margin: 0
-    },
-    loading: {},
     overlay: {
         position: "absolute",
         display: "none",
@@ -166,7 +161,12 @@ const stylesheet = StyleSheet.create({
         right: 0,
         left: 0,
         top: 0
-    }
+    },
+    title: {
+        textAlign: "center",
+        margin: 0
+    },
+    loading: {}
 });
 
 export const useStyles = ({
@@ -174,18 +174,18 @@ export const useStyles = ({
     displayBehaviourWhileLoading,
     isFixVerticalStretch,
     customBorderColor,
-    spreadBehaviour,
     isCustomPadding,
+    spreadBehaviour,
     currentVariant,
     iconDirection,
-    currentType,
     currentSize,
+    currentType,
     customColor,
     isDisabled,
     isLoading,
     radiuses,
-    variant,
     borders,
+    variant,
     colors,
     spaces,
     title,
@@ -204,12 +204,12 @@ export const useStyles = ({
             borderRadius: radiuses.actions,
             borderWidth: borders.line
         } as Mutable<ViewStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        } as Mutable<ViewStyle>,
         title: {
         } as Mutable<TextStyle>,
         loading: {
-        } as Mutable<ViewStyle>,
-        overlay: {
-            borderRadius: radiuses.actions - 2
         } as Mutable<ViewStyle>
     };
 

src/components/codeEditor/index.tsx

@@ -27,17 +27,17 @@ import {
     splitTokensIntoLines,
     parseCode
 } from "../codeViewer/parser";
-import Button from "../button";
+import SystemToolbar from "../systemToolbar";
 
 const CodeEditor = ({
     isLineNumberVisible = true,
-    onChangeText,
+    isToolbarVisible = false,
+    toolbarActions = [],
     containerStyle,
+    onChangeText,
     language,
-    value,
     style,
-    isToolbarVisible = false,
-    toolbarActions = [],
+    value,
     ...props
 }: ICodeEditorProps) => {
     const {
@@ -54,8 +54,8 @@ const CodeEditor = ({
         selection,
         setSelection
     ] = useState<{ start: number; end: number; }>({
-        end: 0,
-        start: 0
+        start: 0,
+        end: 0
     });
 
     const tokens = useMemo(() => parseCode(value, language), [
@@ -68,18 +68,18 @@ const CodeEditor = ({
     }, [tokens]);
 
     const {
-        languageText: languageTextDynamicStyle,
+        toolbarContainer: toolbarContainerDynamicStyle,
         editorContainer: editorContainerDynamicStyle,
+        languageText: languageTextDynamicStyle,
         editorInput: editorInputDynamicStyle,
-        toolbarContainer: toolbarContainerDynamicStyle,
         container: containerDynamicStyle,
         lineRow: lineRowDynamicStyle,
         gutter: gutterDynamicStyle,
         text: textDynamicStyle
     } = useStyles({
+        hasLanguage: !!language,
         isLineNumberVisible,
         isToolbarVisible,
-        hasLanguage: !!language,
         typography,
         radiuses,
         borders,
@@ -136,11 +136,11 @@ const CodeEditor = ({
                 }
 
                 const pairs: Record<string, string> = {
-                    "{": "}",
-                    "[": "]",
-                    "(": ")",
                     "\"": "\"",
                     "'": "'",
+                    "(": ")",
+                    "[": "]",
+                    "{": "}",
                     "`": "`"
                 };
 
@@ -371,29 +371,32 @@ const CodeEditor = ({
             containerStyle
         ]}
     >
-        {isToolbarVisible && (
-            <View
-                style={[
-                    stylesheet.toolbarContainer,
-                    toolbarContainerDynamicStyle
-                ]}
-            >
-                {toolbarActions.map((action, index) => <Button
-                    key={`toolbar-action-${index}`}
-                    onPress={action.onPress}
-                    title={action.title}
-                    variant="outline"
-                    size="small"
-                />)}
-            </View>)}
+        {
+            isToolbarVisible ?
+                <View
+                    style={[
+                        stylesheet.toolbarContainer,
+                        toolbarContainerDynamicStyle
+                    ]}
+                >
+                    {toolbarActions.map((action, index) => <SystemToolbar
+                        key={`toolbar-action-${index}`}
+                        {...action}
+                    />)}
+                </View>
+            :
+                null
+        }
         <View
-            style={[editorContainerDynamicStyle]}
+            style={[
+                editorContainerDynamicStyle
+            ]}
         >
             <ScrollView
+                showsHorizontalScrollIndicator={true}
                 contentContainerStyle={[
                     stylesheet.scrollContent
                 ]}
-                showsHorizontalScrollIndicator={true}
                 style={[
                     stylesheet.scrollView
                 ]}

src/components/codeEditor/stylesheet.ts

@@ -41,8 +41,8 @@ const stylesheet = StyleSheet.create({
         fontWeight: "400",
         letterSpacing: 0,
         ...webStyle({
-            fontVariantLigatures: "none",
-            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap"
+            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap",
+            fontVariantLigatures: "none"
         })
     },
     codeText: {
@@ -64,6 +64,16 @@ const stylesheet = StyleSheet.create({
             userSelect: "none"
         })
     },
+    toolbarContainer: {
+        justifyContent: "flex-start",
+        borderBottomWidth: 0,
+        alignItems: "center",
+        flexDirection: "row",
+        position: "relative",
+        paddingVertical: 4,
+        flexWrap: "wrap",
+        zIndex: 1
+    },
     gutter: {
         justifyContent: "flex-end",
         alignItems: "flex-start",
@@ -73,23 +83,19 @@ const stylesheet = StyleSheet.create({
             userSelect: "none"
         })
     },
-    toolbarContainer: {
-        justifyContent: "flex-start",
-        borderBottomWidth: 0,
-        alignItems: "center",
+    lineRow: {
+        alignItems: "flex-start",
         flexDirection: "row",
-        paddingVertical: 4,
-        flexWrap: "wrap"
+        minHeight: 24
     },
     container: {
         flexDirection: "column",
         position: "relative",
         width: "100%"
     },
-    lineRow: {
-        alignItems: "flex-start",
-        flexDirection: "row",
-        minHeight: 24
+    editorContainer: {
+        position: "relative",
+        zIndex: 0
     },
     scrollContent: {
         minWidth: "100%",
@@ -104,8 +110,8 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
-    isToolbarVisible = false,
     isLineNumberVisible = true,
+    isToolbarVisible = false,
     hasLanguage = false,
     spreadBehaviour,
     typography,
@@ -128,6 +134,25 @@ export const useStyles = ({
     const lineHeight = (typography.bodyMediumSize?.lineHeight as number) || 24;
 
     const styles = {
+        container: {
+            alignSelf: spreadBehaviour === "stretch" ? "stretch" : (spreadBehaviour === "baseline" ? "baseline" : "auto"),
+            width: spreadBehaviour === "baseline" ? "auto" : "100%",
+            marginVertical: spaces.spacingSm
+        } as ViewStyle,
+        editorInput: {
+            ...typography.bodyMediumSize,
+            paddingLeft: (isLineNumberVisible ? (gutterWidth + gutterMarginRight) : spaces.spacingSm),
+            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
+            paddingTop: hasLanguage ? (lineHeight + spaces.spacingSm) : 0,
+            paddingRight: spaces.spacingMd,
+            ...webStyle({
+                caretColor: colors.content.text.high
+            })
+        } as TextStyle,
+        text: {
+            ...typography.bodyMediumSize,
+            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace"
+        } as TextStyle,
         editorContainer: {
             paddingTop: isToolbarVisible ? spaces.spacingXs : spaces.spacingMd,
             borderTopRightRadius: isToolbarVisible ? 0 : radiuses.form,
@@ -141,6 +166,11 @@ export const useStyles = ({
             borderWidth: borders.line,
             borderTopWidth: isToolbarVisible ? 0 : borders.line
         } as ViewStyle,
+        lineRow: {
+            marginLeft: !isLineNumberVisible ? spaces.spacingSm : 0,
+            minHeight: lineHeight,
+            height: lineHeight
+        } as ViewStyle,
         toolbarContainer: {
             backgroundColor: colors.content.container.subtle,
             borderColor: colors.content.border.subtle,
@@ -154,20 +184,14 @@ export const useStyles = ({
             paddingTop: spaces.spacingMd,
             gap: spaces.spacingXs
         } as ViewStyle,
-        editorInput: {
-            ...typography.bodyMediumSize,
-            paddingLeft: (isLineNumberVisible ? (gutterWidth + gutterMarginRight) : spaces.spacingSm),
-            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
-            paddingTop: hasLanguage ? (lineHeight + spaces.spacingSm) : 0,
-            paddingRight: spaces.spacingMd,
-            ...webStyle({
-                caretColor: colors.content.text.high
-            })
-        } as TextStyle,
-        container: {
-            alignSelf: spreadBehaviour === "stretch" ? "stretch" : (spreadBehaviour === "baseline" ? "baseline" : "auto"),
-            width: spreadBehaviour === "baseline" ? "auto" : "100%",
-            marginVertical: spaces.spacingSm
+        toolbarActionBtn: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingVertical: spaces.spacingSm
+        } as ViewStyle,
+        gutter: {
+            paddingRight: gutterPaddingRight,
+            marginRight: gutterMarginRight,
+            width: gutterWidth
         } as ViewStyle,
         languageText: {
             marginBottom: spaces.spacingSm,
@@ -176,21 +200,7 @@ export const useStyles = ({
             ...webStyle({
                 userSelect: "none"
             })
-        } as TextStyle,
-        text: {
-            ...typography.bodyMediumSize,
-            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace"
-        } as TextStyle,
-        lineRow: {
-            marginLeft: !isLineNumberVisible ? spaces.spacingSm : 0,
-            minHeight: lineHeight,
-            height: lineHeight
-        } as ViewStyle,
-        gutter: {
-            paddingRight: gutterPaddingRight,
-            marginRight: gutterMarginRight,
-            width: gutterWidth
-        } as ViewStyle
+        } as TextStyle
     };
 
     return styles;

src/components/codeEditor/type.ts

@@ -3,7 +3,6 @@ import {
     type StyleProp,
     type ViewStyle
 } from "react-native";
-import type IButtonProps from "../button/type";
 
 export type CodeEditorSpreadBehaviour = "baseline" | "stretch" | "free";
 
@@ -19,11 +18,13 @@ export interface ICodeEditorDynamicStyleProps {
     hasLanguage?: boolean;
 }
 
+import type ISystemToolbarProps from "../systemToolbar/type";
+
 interface ICodeEditorProps extends Omit<TextInputProps, "style" | "value" | "onChangeText"> {
     toolbarContainerStyle?: StyleProp<ViewStyle>;
+    toolbarActions?: Array<ISystemToolbarProps>;
     spreadBehaviour?: CodeEditorSpreadBehaviour;
     onChangeText?: (text: string) => void;
-    toolbarActions?: Array<IButtonProps>;
     isLineNumberVisible?: boolean;
     isToolbarVisible?: boolean;
     containerStyle?: ViewStyle;

src/components/index.ts

@@ -447,3 +447,11 @@ export type {
     default as ITooltipProps,
     TooltipLocation
 } from "./tooltip/type";
+
+export {
+    default as SystemToolbar
+} from "./systemToolbar";
+
+export type {
+    default as ISystemToolbarProps
+} from "./systemToolbar/type";

src/components/systemToolbar/index.tsx

@@ -0,0 +1,188 @@
+import {
+    useMemo,
+    type FC
+} from "react";
+import {
+    Pressable,
+    View
+} from "react-native";
+import type ISystemToolbarProps from "./type";
+import {
+    type ISystemToolbarAction
+} 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: FC<{ action: ISystemToolbarAction }> = ({
+    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 = <Pressable
+        onPress={action.onPress}
+        style={pressableStyle}
+    >
+        {
+            ActionIcon ?
+                <ActionIcon
+                    color="mid"
+                    size={16}
+                />
+            :
+                null
+        }
+        {
+            titleText ?
+                <Text
+                    variant="labelMediumSize"
+                    style={action.titleProps}
+                >
+                    {titleText}
+                </Text>
+            :
+                null
+        }
+    </Pressable>;
+
+    if (!action.content || action.content.length === 0) {
+        return btn;
+    }
+
+    return <Tooltip
+        content={<View
+            style={stylesheet.systemToolbarContent}
+        >
+            {action.content.map((childAction, index) => <ActionItem
+                key={`system-toolbar-child-action-${index}`}
+                action={childAction}
+            />)}
+        </View>}
+        containerStyle={tooltipContainerDynamicStyle}
+        caretStyle={childCaretDynamicStyle}
+        location={{
+            horizontal: "right",
+            vertical: "center"
+        }}
+        triggerMode="hover"
+        sizing="content"
+    >
+        {btn}
+    </Tooltip>;
+};
+
+const SystemToolbar: FC<ISystemToolbarProps> = ({
+    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 = <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 <Tooltip
+        content={<View
+            style={stylesheet.systemToolbarContent}
+        >
+            {actions.map((action, index) => <ActionItem
+                key={`system-toolbar-action-${index}`}
+                action={action}
+            />)}
+        </View>}
+        containerStyle={tooltipContainerDynamicStyle}
+        caretStyle={rootCaretDynamicStyle}
+        location={{
+            horizontal: "center",
+            vertical: "bottom"
+        }}
+        triggerMode="hover"
+        sizing="content"
+    >
+        {triggerBtn}
+    </Tooltip>;
+};
+export default SystemToolbar;

src/components/systemToolbar/stylesheet.ts

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

src/components/systemToolbar/type.ts

@@ -0,0 +1,43 @@
+import {
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle
+} from "react-native";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+import {
+    type ButtonVariant,
+    type ButtonSize,
+    type ButtonType
+} from "../button/type";
+
+export interface SystemToolbarDynamicStyleType {
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+}
+
+export interface ISystemToolbarAction {
+    titleKey?: keyof NCoreUIKit.Translation;
+    titleProps?: StyleProp<TextStyle>;
+    content?: ISystemToolbarAction[];
+    style?: StyleProp<ViewStyle>;
+    icon?: NCoreUIKitIcon;
+    onPress?: () => void;
+}
+
+export interface ISystemToolbarProps {
+    titleKey?: keyof NCoreUIKit.Translation;
+    actions: ISystemToolbarAction[];
+    style?: StyleProp<ViewStyle>;
+    variant?: ButtonVariant;
+    icon?: NCoreUIKitIcon;
+    size?: ButtonSize;
+    type?: ButtonType;
+    title?: string;
+}
+
+export type {
+    ISystemToolbarProps as default
+};

src/components/textAreaInput/index.tsx

@@ -54,8 +54,8 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
     rightIcon: RightIconComponentProp,
     hintTextIcon: HintTextIconProp,
     spreadBehaviour = "baseline",
-    isShowLengthLimiter = true,
     isShowHintTextIcon = false,
+    isShowLengthLimiter = true,
     isUpdateOnRealtime = false,
     icon: IconComponentProp,
     hintTextContainerStyle,
@@ -63,27 +63,31 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
     contentContainerStyle,
     subTitle = "Optional",
     onFocus: onFocusProp,
-    isRequired = false,
     isDisabled = false,
+    isRequired = false,
     onBlur: onBlurProp,
-    type = "default",
+    customBorderColor,
+    customTitleColor,
     rightIconOnPress,
+    type = "default",
+    customIconColor,
     maxHeight = 350,
     minHeight = 250,
+    cleanIconStyle,
     customLocalize,
-    rightIconStyle,
     isShowSubTitle,
-    cleanIconStyle,
-    onChangeText,
+    rightIconStyle,
     initialValue,
+    onChangeText,
+    customColor,
     customTheme,
-    placeholder,
     iconOnPress,
+    placeholder,
+    inputStyle,
     isOptional,
     validation,
-    inputStyle,
-    maxLength,
     iconStyle,
+    maxLength,
     hintText,
     style,
     title,
@@ -122,25 +126,27 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
 
     const {
         lengthLimiterContainer: lengthLimiterContainerDynamicStyle,
-        titleContainer: titleContainerDynamicStyle,
         inputContainer: inputContainerDynamicStyle,
+        titleContainer: titleContainerDynamicStyle,
         hintTextIcon: hintTextIconDynamicStyle,
         cleanButton: cleanButtonDynamicStyle,
-        rightIcon: rightIconDynamicStyle,
         container: containerDynamicStyle,
+        rightIcon: rightIconDynamicStyle,
         hintText: hintTextDynamicStyle,
         required: requiredDynamicStyle,
         subTitle: subTitleDynamicStyle,
         content: contentDynamicStyle,
         overlay: overlayDynamicStyle,
-        title: titleDynamicStyle,
         input: inputDynamicStyle,
+        title: titleDynamicStyle,
         icon: iconDynamicStyle
     } = useStyles({
         icon: IconComponentProp ? true : false,
+        customBorderColor,
         spreadBehaviour,
         inlineSpaces,
         currentType,
+        customColor,
         isDisabled,
         typography,
         isFocused,
@@ -249,11 +255,6 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         }
 
         return <TouchableOpacity
-            style={[
-                cleanIconStyle,
-                stylesheet.cleanButton,
-                cleanButtonDynamicStyle
-            ]}
             onPress={() => {
                 if(inputRef.current) inputRef.current?.clear();
 
@@ -263,6 +264,11 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
 
                 setValue("");
             }}
+            style={[
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ]}
         >
             <CircleXIcon
                 color={colors.content.icon[currentType.iconColor]}
@@ -285,6 +291,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
             ]}
         >
             <IconComponentProp
+                customColor={customIconColor}
                 color={iconProps.color}
                 size={iconProps.size}
             />
@@ -323,11 +330,11 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         if(HintTextIconProp) {
             return <HintTextIconProp
                 color={isDisabled ? "disabled" : currentType.hintTextIconColor}
-                size={20}
                 style={[
                     stylesheet.hintTextIcon,
                     hintTextIconDynamicStyle
                 ]}
+                size={20}
             />;
         }
 
@@ -340,12 +347,12 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         }
 
         return <CurrentHintIcon
-            color={hintIconColor}
-            size={20}
             style={[
                 stylesheet.hintTextIcon,
                 hintTextIconDynamicStyle
             ]}
+            color={hintIconColor}
+            size={20}
         />;
     };
 
@@ -378,11 +385,11 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         }
 
         return <Text
-            color="danger"
             style={[
                 stylesheet.required,
                 requiredDynamicStyle
             ]}
+            color="danger"
         >
             *
         </Text>;
@@ -394,6 +401,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         }
 
         return <Text
+            customColor={customTitleColor}
             variant="labelLargeSize"
             color={titleProps.color}
             style={[
@@ -419,6 +427,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
             {renderRequired()}
             <Text
                 {...titleProps}
+                customColor={customTitleColor}
                 variant={titleProps.variant}
                 color={titleProps.color}
                 style={[
@@ -459,16 +468,6 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
             <NativeTextInput
                 {...props}
                 placeholderTextColor={colors.content.text[currentType.placeholderColor]}
-                value={isUpdateOnRealtime ? value : undefined}
-                underlineColorAndroid="rgba(255,255,255,0)"
-                placeholder={placeholder}
-                allowFontScaling={false}
-                editable={!isDisabled}
-                maxLength={maxLength}
-                multiline={true}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                ref={inputRef}
                 onEndEditing={(t) => {
                     const text = t.nativeEvent.text;
 
@@ -501,11 +500,21 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
                         }
                     }
                 }}
+                value={isUpdateOnRealtime ? value : undefined}
+                underlineColorAndroid="rgba(255,255,255,0)"
+                placeholder={placeholder}
+                allowFontScaling={false}
+                editable={!isDisabled}
+                maxLength={maxLength}
                 style={[
                     inputStyle,
                     stylesheet.input,
                     inputDynamicStyle
                 ]}
+                onFocus={onFocus}
+                multiline={true}
+                onBlur={onBlur}
+                ref={inputRef}
             />
             {renderLengthLimiter()}
         </View>;
@@ -513,11 +522,11 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
 
     const renderOverlay = () => {
         return <View
-            pointerEvents="none"
             style={[
                 stylesheet.overlay,
                 overlayDynamicStyle
             ]}
+            pointerEvents="none"
         />;
     };
 

src/components/textAreaInput/stylesheet.ts

@@ -27,16 +27,16 @@ export const TEXT_AREA_INPUT_TYPE_STYLES: Record<
         inputColor: "mid",
         iconColor: "mid"
     },
-    danger: {
-        placeholderColor: "dangerLow",
-        hintTextIconColor: "danger",
-        focusBorderColor: "danger",
-        containerColor: "danger",
-        hintTextColor: "danger",
-        borderColor: "danger",
-        titleColor: "danger",
-        inputColor: "danger",
-        iconColor: "danger"
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
     },
     success: {
         placeholderColor: "successLow",
@@ -60,6 +60,17 @@ export const TEXT_AREA_INPUT_TYPE_STYLES: Record<
         inputColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
     info: {
         placeholderColor: "infoLow",
         hintTextIconColor: "info",
@@ -70,17 +81,6 @@ export const TEXT_AREA_INPUT_TYPE_STYLES: Record<
         titleColor: "info",
         inputColor: "info",
         iconColor: "info"
-    },
-    question: {
-        focusBorderColor: "emphasized",
-        borderColor: "emphasized",
-        hintTextIconColor: "mid",
-        placeholderColor: "low",
-        containerColor: "mid",
-        hintTextColor: "mid",
-        titleColor: "mid",
-        inputColor: "mid",
-        iconColor: "mid"
     }
 };
 
@@ -95,20 +95,6 @@ export const getTextAreaInputType = ({
 };
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flexDirection: "column",
-        boxSizing: "border-box",
-        display: "flex"
-    },
-    content: {
-        alignItems: "flex-start",
-        boxSizing: "border-box",
-        flexDirection: "row",
-        borderStyle: "solid",
-        position: "relative",
-        display: "flex",
-        minWidth: 250
-    },
     input: {
         backgroundColor: "transparent",
         borderColor: "transparent",
@@ -121,6 +107,19 @@ const stylesheet = StyleSheet.create({
         minHeight: 55,
         zIndex: 99
     },
+    lengthLimiterContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row"
+    },
+    content: {
+        alignItems: "flex-start",
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        position: "relative",
+        display: "flex",
+        minWidth: 250
+    },
     cleanButton: {
         justifyContent: "center",
         alignSelf: "flex-start",
@@ -136,12 +135,6 @@ const stylesheet = StyleSheet.create({
         zIndex: 99,
         height: 18
     },
-    titleContainer: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
-    title: {
-    },
     icon: {
         justifyContent: "center",
         alignContent: "center",
@@ -149,17 +142,32 @@ const stylesheet = StyleSheet.create({
         display: "flex",
         zIndex: 99
     },
-    required: {
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99
     },
-    hintTextIcon: {
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box",
+        alignSelf: "auto",
+        display: "flex"
+    },
+    inputContainer: {
+        flexDirection: "column",
+        flex: 1
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
     },
     hintText: {
         flexDirection: "row",
         alignItems: "center",
         display: "flex"
     },
-    subTitle: {
-    },
     overlay: {
         position: "absolute",
         zIndex: 98,
@@ -168,29 +176,24 @@ const stylesheet = StyleSheet.create({
         left: 0,
         top: 0
     },
-    rightIcon: {
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "center",
-        display: "flex",
-        zIndex: 99
+    hintTextIcon: {
     },
-    lengthLimiterContainer: {
-        justifyContent: "flex-end",
-        flexDirection: "row"
+    required: {
     },
-    inputContainer: {
-        flexDirection: "column",
-        flex: 1
+    subTitle: {
+    },
+    title: {
     }
 });
 
 export const useStyles = ({
+    customBorderColor,
     spreadBehaviour,
     inlineSpaces,
     currentType,
-    typography,
+    customColor,
     isDisabled,
+    typography,
     isFocused,
     maxHeight,
     minHeight,
@@ -203,9 +206,6 @@ export const useStyles = ({
     const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
 
     const styles = {
-        container: {
-            alignSelf: "auto"
-        } as Mutable<ViewStyle>,
         content: {
             backgroundColor: colors.content.container[currentType.containerColor],
             borderColor: colors.content.container[currentType.containerColor],
@@ -222,44 +222,43 @@ export const useStyles = ({
             minHeight: minHeight,
             maxHeight: maxHeight
         } as Mutable<TextStyle>,
-        cleanButton: {
-            marginLeft: spaces.spacingSm
+        required: {
+            marginRight: inlineSpaces.required
         } as Mutable<ViewStyle>,
-        hintTextIconContainer: {
-            marginLeft: spaces.spacingSm
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        } as Mutable<TextStyle>,
+        overlay: {
+            borderRadius: radiuses.form - 1
         } as Mutable<ViewStyle>,
         titleContainer: {
             marginBottom: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        title: {
-
-        } as Mutable<TextStyle>,
         icon: {
             marginRight: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        required: {
-            marginRight: inlineSpaces.required
-        } as Mutable<ViewStyle>,
         hintTextIcon: {
             marginRight: spaces.spacingXs
         } as Mutable<ViewStyle>,
-        hintText: {
-            marginTop: spaces.spacingSm
-        } as Mutable<TextStyle>,
-        subTitle: {
-            marginLeft: inlineSpaces.subTitle
-        } as Mutable<TextStyle>,
-        overlay: {
-            borderRadius: radiuses.form - 1
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        hintTextIconContainer: {
+            marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
         rightIcon: {
             marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
+        hintText: {
+            marginTop: spaces.spacingSm
+        } as Mutable<TextStyle>,
         lengthLimiterContainer: {
-
         } as Mutable<ViewStyle>,
+        container: {
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
         inputContainer: {
-
         } as Mutable<ViewStyle>
     };
 
@@ -284,6 +283,10 @@ export const useStyles = ({
         styles.container.width = "100%";
     }
 
+    if(customBorderColor) {
+        styles.container.borderColor = customBorderColor;
+    }
+
     if(isFocused && !isDisabled) {
         if(type === "question" || type === "default") {
             styles.content.borderColor = colors.content.border.emphasized;
@@ -292,6 +295,10 @@ export const useStyles = ({
         }
     }
 
+    if(customColor) {
+        styles.container.backgroundColor = customColor;
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/textAreaInput/type.ts

@@ -28,7 +28,9 @@ export type TextAreaInputDynamicStyleType = {
     colors: NCoreUIKit.ActivePalette["colors"];
     currentType: TextAreaInputTypes;
     borders: NCoreUIKit.Borders;
+    customBorderColor?: string;
     type: TextAreaInputType;
+    customColor?: string;
     isDisabled?: boolean;
     maxHeight?: number;
     minHeight?: number;
@@ -62,10 +64,10 @@ interface ITextAreaInputProps extends TextInputProps {
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    spreadBehaviour?: TextAreaInputSpreadBehaviour;
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
-    spreadBehaviour?: TextAreaInputSpreadBehaviour;
     hintTextContainerStyle?: StyleProp<ViewStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
     onChangeText?: (value: string) => void;
@@ -81,13 +83,17 @@ interface ITextAreaInputProps extends TextInputProps {
     isShowHintTextIcon?: boolean;
     isUpdateOnRealtime?: boolean;
     style?: StyleProp<ViewStyle>;
+    customBorderColor?: string;
     rightIcon?: NCoreUIKitIcon;
+    customTitleColor?: string;
+    customIconColor?: string;
     isShowSubTitle?: boolean;
     isCleanEnabled?: boolean;
     iconOnPress?: () => void;
     type?: TextAreaInputType;
     initialValue?: string;
     icon?: NCoreUIKitIcon;
+    customColor?: string;
     placeholder?: string;
     isRequired?: boolean;
     isDisabled?: boolean;

src/components/textInput/index.tsx

@@ -63,25 +63,29 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
     contentContainerStyle,
     subTitle = "Optional",
     onFocus: onFocusProp,
-    isRequired = false,
     isDisabled = false,
+    isRequired = false,
     onBlur: onBlurProp,
+    customBorderColor,
     hideTextIconStyle,
-    variant = "text",
-    type = "default",
+    customTitleColor,
     rightIconOnPress,
+    type = "default",
+    variant = "text",
+    customIconColor,
+    cleanIconStyle,
     customLocalize,
-    rightIconStyle,
     isShowSubTitle,
-    cleanIconStyle,
-    onChangeText,
+    rightIconStyle,
     initialValue,
+    onChangeText,
+    customColor,
     customTheme,
-    placeholder,
     iconOnPress,
+    placeholder,
+    inputStyle,
     isOptional,
     validation,
-    inputStyle,
     iconStyle,
     hintText,
     style,
@@ -129,28 +133,30 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         titleContainer: titleContainerDynamicStyle,
         hintTextIcon: hintTextIconDynamicStyle,
         cleanButton: cleanButtonDynamicStyle,
-        rightIcon: rightIconDynamicStyle,
         container: containerDynamicStyle,
+        rightIcon: rightIconDynamicStyle,
         hintText: hintTextDynamicStyle,
         required: requiredDynamicStyle,
         subTitle: subTitleDynamicStyle,
         content: contentDynamicStyle,
         overlay: overlayDynamicStyle,
-        title: titleDynamicStyle,
         input: inputDynamicStyle,
+        title: titleDynamicStyle,
         icon: iconDynamicStyle
     } = useStyles({
         icon: IconComponentProp ? true : false,
+        customBorderColor,
         spreadBehaviour,
         inlineSpaces,
         currentType,
+        customColor,
         isDisabled,
         typography,
         isFocused,
         radiuses,
         borders,
-        spaces,
         colors,
+        spaces,
         title,
         type
     });
@@ -246,11 +252,6 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         }
 
         return <TouchableOpacity
-            style={[
-                cleanIconStyle,
-                stylesheet.cleanButton,
-                cleanButtonDynamicStyle
-            ]}
             onPress={() => {
                 if(inputRef.current) inputRef.current.clear();
 
@@ -260,6 +261,11 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
 
                 setValue("");
             }}
+            style={[
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ]}
         >
             <CircleXIcon
                 color={colors.content.icon[currentType.iconColor]}
@@ -282,6 +288,7 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
             ]}
         >
             <IconComponentProp
+                customColor={customIconColor}
                 color={iconProps.color}
                 size={iconProps.size}
             />
@@ -326,12 +333,12 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         }
 
         return <TouchableOpacity
-            onPress={toggleValueVisibility}
             style={[
                 hideTextIconStyle,
                 stylesheet.hideTextIconContainer,
                 hideTextIconContainerDynamicStyle
             ]}
+            onPress={toggleValueVisibility}
         >
             {
                 hideValue ?
@@ -356,11 +363,11 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         if(HintTextIconProp) {
             return <HintTextIconProp
                 color={isDisabled ? "disabled" : currentType.hintTextIconColor}
-                size={20}
                 style={[
                     stylesheet.hintTextIcon,
                     hintTextIconDynamicStyle
                 ]}
+                size={20}
             />;
         }
 
@@ -373,12 +380,12 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         }
 
         return <CurrentHintIcon
-            color={hintIconColor}
-            size={20}
             style={[
                 stylesheet.hintTextIcon,
                 hintTextIconDynamicStyle
             ]}
+            color={hintIconColor}
+            size={20}
         />;
     };
 
@@ -411,11 +418,11 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         }
 
         return <Text
-            color="danger"
             style={[
                 stylesheet.required,
                 requiredDynamicStyle
             ]}
+            color="danger"
         >
             *
         </Text>;
@@ -427,12 +434,13 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         }
 
         return <Text
-            variant="labelLargeSize"
-            color={titleProps.color}
+            customColor={customTitleColor}
             style={[
                 stylesheet.subTitle,
                 subTitleDynamicStyle
             ]}
+            variant="labelLargeSize"
+            color={titleProps.color}
         >
             ( {isOptional ? localize("is-optional") : subTitle} )
         </Text>;
@@ -469,15 +477,6 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         return <NativeTextInput
             {...props}
             placeholderTextColor={colors.content.text[currentType.placeholderColor]}
-            secureTextEntry={variant === "hidden" && hideValue}
-            underlineColorAndroid="rgba(255,255,255,0)"
-            placeholder={placeholder}
-            allowFontScaling={false}
-            editable={!isDisabled}
-            multiline={false}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            ref={inputRef}
             onChangeText={(text) => {
                 const inputValue = text.replace(/\n/g, "");
 
@@ -501,11 +500,20 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                     if(onChangeText) onChangeText(inputValue);
                 }
             }}
+            secureTextEntry={variant === "hidden" && hideValue}
+            underlineColorAndroid="rgba(255,255,255,0)"
+            placeholder={placeholder}
+            allowFontScaling={false}
+            editable={!isDisabled}
             style={[
                 inputStyle,
                 stylesheet.input,
                 inputDynamicStyle
             ]}
+            multiline={false}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            ref={inputRef}
         />;
     };
 
@@ -519,15 +527,15 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
     };
 
     return <TouchableOpacity
-        disabled={isDisabled}
+        onPress={() => {
+            if(!isDisabled) inputRef.current?.focus();
+        }}
         style={[
             style,
             stylesheet.container,
             containerDynamicStyle
         ]}
-        onPress={() => {
-            if(!isDisabled) inputRef.current?.focus();
-        }}
+        disabled={isDisabled}
         {...Platform.select({
             web: {
                 dataSet: {

src/components/textInput/stylesheet.ts

@@ -27,16 +27,16 @@ export const TEXT_INPUT_TYPE_STYLES: Record<
         inputColor: "mid",
         iconColor: "mid"
     },
-    danger: {
-        placeholderColor: "dangerLow",
-        hintTextIconColor: "danger",
-        focusBorderColor: "danger",
-        containerColor: "danger",
-        hintTextColor: "danger",
-        borderColor: "danger",
-        titleColor: "danger",
-        inputColor: "danger",
-        iconColor: "danger"
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
     },
     success: {
         placeholderColor: "successLow",
@@ -60,6 +60,17 @@ export const TEXT_INPUT_TYPE_STYLES: Record<
         inputColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
     info: {
         placeholderColor: "infoLow",
         hintTextIconColor: "info",
@@ -70,17 +81,6 @@ export const TEXT_INPUT_TYPE_STYLES: Record<
         titleColor: "info",
         inputColor: "info",
         iconColor: "info"
-    },
-    question: {
-        focusBorderColor: "emphasized",
-        borderColor: "emphasized",
-        hintTextIconColor: "mid",
-        placeholderColor: "low",
-        containerColor: "mid",
-        hintTextColor: "mid",
-        titleColor: "mid",
-        inputColor: "mid",
-        iconColor: "mid"
     }
 };
 
@@ -95,20 +95,6 @@ export const getTextInputType = ({
 };
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flexDirection: "column",
-        boxSizing: "border-box",
-        display: "flex"
-    },
-    content: {
-        boxSizing: "border-box",
-        flexDirection: "row",
-        borderStyle: "solid",
-        alignItems: "center",
-        position: "relative",
-        display: "flex",
-        minWidth: 250
-    },
     input: {
         backgroundColor: "transparent",
         textAlignVertical: "center",
@@ -122,6 +108,14 @@ const stylesheet = StyleSheet.create({
         zIndex: 99,
         flex: 1
     },
+    hideTextIconContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99,
+        height: 18
+    },
     cleanButton: {
         justifyContent: "center",
         alignItems: "center",
@@ -129,19 +123,12 @@ const stylesheet = StyleSheet.create({
         display: "flex",
         zIndex: 99
     },
-    hideTextIconContainer: {
+    rightIcon: {
         justifyContent: "center",
         alignItems: "center",
         alignSelf: "center",
         display: "flex",
-        zIndex: 99,
-        height: 18
-    },
-    titleContainer: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
-    title: {
+        zIndex: 99
     },
     icon: {
         justifyContent: "center",
@@ -150,40 +137,52 @@ const stylesheet = StyleSheet.create({
         display: "flex",
         zIndex: 99
     },
-    required: {
+    content: {
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex",
+        minWidth: 250
     },
-    hintTextIcon: {
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box",
+        alignSelf: "auto",
+        display: "flex"
     },
     hintText: {
         flexDirection: "row",
         alignItems: "center",
         display: "flex"
     },
-    subTitle: {
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
     },
     overlay: {
         position: "absolute",
-        zIndex: 98,
-        bottom: 0,
-        right: 0,
-        left: 0,
-        top: 0
+        zIndex: 98
     },
-    rightIcon: {
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "center",
-        display: "flex",
-        zIndex: 99
+    hintTextIcon: {
+    },
+    required: {
+    },
+    subTitle: {
+    },
+    title: {
     }
 });
 
 export const useStyles = ({
+    customBorderColor,
     spreadBehaviour,
     inlineSpaces,
     currentType,
-    typography,
+    customColor,
     isDisabled,
+    typography,
     isFocused,
     radiuses,
     borders,
@@ -194,9 +193,6 @@ export const useStyles = ({
     const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
 
     const styles = {
-        container: {
-            alignSelf: "auto"
-        } as Mutable<ViewStyle>,
         content: {
             backgroundColor: colors.content.container[currentType.containerColor],
             borderColor: colors.content.container[currentType.containerColor],
@@ -211,39 +207,44 @@ export const useStyles = ({
             ...typography.labelLargeSize,
             color: colors.content.text[currentType.inputColor]
         } as Mutable<TextStyle>,
-        cleanButton: {
-            marginLeft: spaces.spacingSm
+        overlay: {
+            borderRadius: radiuses.actions - 1,
+            bottom: -borders.line,
+            right: -borders.line,
+            left: -borders.line,
+            top: -borders.line
         } as Mutable<ViewStyle>,
-        hideTextIconContainer: {
-            marginLeft: spaces.spacingSm
+        required: {
+            marginRight: inlineSpaces.required
         } as Mutable<ViewStyle>,
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        } as Mutable<TextStyle>,
         titleContainer: {
             marginBottom: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        title: {
-
-        } as Mutable<TextStyle>,
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        } as Mutable<ViewStyle>,
         icon: {
             marginRight: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        required: {
-            marginRight: inlineSpaces.required
+        hideTextIconContainer: {
+            marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        hintTextIcon: {
-            marginRight: spaces.spacingXs
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        rightIcon: {
+            marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
         hintText: {
             marginTop: spaces.spacingSm
         } as Mutable<TextStyle>,
-        subTitle: {
-            marginLeft: inlineSpaces.subTitle
-        } as Mutable<TextStyle>,
-        overlay: {
-            borderRadius: radiuses.actions - 1
+        container: {
         } as Mutable<ViewStyle>,
-        rightIcon: {
-            marginLeft: spaces.spacingSm
-        } as Mutable<ViewStyle>
+        title: {
+        } as Mutable<TextStyle>
     };
 
     if(isDisabled) {
@@ -267,6 +268,10 @@ export const useStyles = ({
         styles.container.width = "100%";
     }
 
+    if(customBorderColor) {
+        styles.container.borderColor = customBorderColor;
+    }
+
     if(isFocused && !isDisabled) {
         if(type === "question" || type === "default") {
             styles.content.borderColor = colors.content.border.emphasized;
@@ -275,6 +280,10 @@ export const useStyles = ({
         }
     }
 
+    if(customColor) {
+        styles.container.backgroundColor = customColor;
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/textInput/type.ts

@@ -28,6 +28,8 @@ export type TextInputDynamicStyleType = {
     colors: NCoreUIKit.ActivePalette["colors"];
     currentType: TextInputTypes;
     borders: NCoreUIKit.Borders;
+    customBorderColor?: string;
+    customColor?: string;
     isDisabled?: boolean;
     type: TextInputType;
     isFocused: boolean;
@@ -62,10 +64,10 @@ interface ITextInputProps extends TextInputProps {
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
-    spreadBehaviour?: TextInputSpreadBehaviour;
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
+    spreadBehaviour?: TextInputSpreadBehaviour;
     onChangeText?: (value: string) => void;
     validation?: (text: string) => boolean;
     isAutoKeyboardDismissOnBlur?: boolean;
@@ -77,16 +79,20 @@ interface ITextInputProps extends TextInputProps {
     rightIconOnPress?: () => void;
     hintTextIcon?: NCoreUIKitIcon;
     isShowHintTextIcon?: boolean;
+    customBorderColor?: string;
     cleanIconStyle?: ViewStyle;
     rightIconStyle?: ViewStyle;
     rightIcon?: NCoreUIKitIcon;
     variant?: TextInputVariant;
+    customTitleColor?: string;
+    customIconColor?: string;
     isShowSubTitle?: boolean;
     isCleanEnabled?: boolean;
     iconOnPress?: () => void;
     initialValue?: string;
     iconStyle?: ViewStyle;
     icon?: NCoreUIKitIcon;
+    customColor?: string;
     placeholder?: string;
     isRequired?: boolean;
     isDisabled?: boolean;

src/components/tooltip/index.tsx

@@ -5,9 +5,10 @@ import {
     useRef
 } from "react";
 import {
-    TouchableWithoutFeedback,
     type ViewStyle,
+    Pressable,
     Animated,
+    Platform,
     Easing,
     View
 } from "react-native";
@@ -32,19 +33,26 @@ const Tooltip: FC<ITooltipProps> = ({
         vertical: "top"
     },
     isCloseOnPress = false,
+    contentContainerStyle,
+    triggerMode = "hover",
+    sizing = "content",
     icon: CustomIcon,
     type = "neutral",
+    containerStyle,
     customTheme,
+    caretStyle,
     isVisible,
+    children,
     onClosed,
     subTitle,
-    children,
-    onClose,
-    onOpen,
     content,
+    onClose,
     action,
+    height,
+    onOpen,
     style,
-    title
+    title,
+    width
 }) => {
     const {
         radiuses,
@@ -74,14 +82,37 @@ const Tooltip: FC<ITooltipProps> = ({
     ] = useState(false);
 
     const opacityAnim = useRef(new Animated.Value(0)).current;
+    const wrapperRef = useRef<View>(null);
+    const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const handleHoverIn = () => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        if (isVisible === undefined) {
+            setIsInternalVisible(true);
+        }
+        if (onOpen) onOpen();
+    };
+
+    const handleHoverOut = () => {
+        hoverTimeoutRef.current = setTimeout(() => {
+            if (isVisible === undefined) {
+                setIsInternalVisible(false);
+            }
+            if (onClose) onClose();
+            hoverTimeoutRef.current = null;
+        }, 100);
+    };
 
     const currentType = getTooltipType({
         type
     });
 
     const {
-        containerObject: containerObjectDynamicStyle,
         contentContainer: contentContainerDynamicStyle,
+        containerObject: containerObjectDynamicStyle,
         iconContainer: iconContainerDynamicStyle,
         container: containerDynamicStyle,
         subTitle: subTitleDynamicStyle,
@@ -93,6 +124,9 @@ const Tooltip: FC<ITooltipProps> = ({
         radiuses,
         colors,
         spaces,
+        height,
+        sizing,
+        width,
         type
     });
 
@@ -103,16 +137,16 @@ const Tooltip: FC<ITooltipProps> = ({
             if(onOpen) onOpen();
 
             Animated.timing(opacityAnim, {
-                useNativeDriver: true,
-                easing: Easing.linear,
-                duration: 200,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.bezier(0, 0, 0, 1),
+                duration: 250,
                 toValue: 1
             }).start();
         } else {
             Animated.timing(opacityAnim, {
-                useNativeDriver: true,
-                easing: Easing.linear,
-                duration: 200,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.bezier(0, 0, 0, 1),
+                duration: 250,
                 toValue: 0
             }).start(({
                 finished
@@ -126,6 +160,36 @@ const Tooltip: FC<ITooltipProps> = ({
         isShow
     ]);
 
+    useEffect(() => {
+        if (Platform.OS === "web" && triggerMode === "click" && isShow) {
+            const handleClickOutside = (event: Event) => {
+                const target = event.target as Node;
+                const node = wrapperRef.current as unknown as HTMLElement;
+
+                if (node && node.contains && !node.contains(target)) {
+                    if (isVisible === undefined) {
+                        setIsInternalVisible(false);
+                    }
+
+                    if (onClose) onClose();
+                }
+            };
+
+            document.addEventListener("mousedown", handleClickOutside);
+
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+
+        return undefined;
+    }, [
+        isShow,
+        triggerMode,
+        isVisible,
+        onClose
+    ]);
+
     const handleClose = () => {
         if(isVisible === undefined) {
             setIsInternalVisible(false);
@@ -137,6 +201,7 @@ const Tooltip: FC<ITooltipProps> = ({
         if(isVisible === undefined) {
             setIsInternalVisible(!isInternalVisible);
         }
+
         if(!isShow && onOpen) {
             onOpen();
         } else if (isShow && onClose) {
@@ -174,18 +239,19 @@ const Tooltip: FC<ITooltipProps> = ({
         return <View
             style={[
                 stylesheet.contentContainer,
-                contentContainerDynamicStyle
+                contentContainerDynamicStyle,
+                contentContainerStyle
             ]}
         >
             {
                 title ?
                     <Text
+                        color={currentType.titleColor}
+                        variant="labelMediumSize"
                         style={{
                             ...stylesheet.title,
                             ...titleDynamicStyle
                         }}
-                        color={currentType.titleColor}
-                        variant="labelMediumSize"
                         numberOfLines={3}
                     >
                         {title}
@@ -196,11 +262,11 @@ const Tooltip: FC<ITooltipProps> = ({
             {
                 subTitle ?
                     <Text
+                        color={currentType.subTitleColor}
                         style={{
                             ...stylesheet.subTitle,
                             ...subTitleDynamicStyle
                         }}
-                        color={currentType.subTitleColor}
                         variant="labelSmallSize"
                         numberOfLines={2}
                     >
@@ -218,15 +284,6 @@ const Tooltip: FC<ITooltipProps> = ({
         }
 
         return <Button
-            onPress={() => {
-                if(isCloseOnPressActionButton) handleClose();
-
-                if(action.onPress) {
-                    action.onPress({
-                        closeAnimation: handleClose
-                    });
-                }
-            }}
             icon={() => {
                 if(action.title) {
                     return null;
@@ -237,11 +294,20 @@ const Tooltip: FC<ITooltipProps> = ({
                     size={16}
                 />;
             }}
+            onPress={() => {
+                if(isCloseOnPressActionButton) handleClose();
+
+                if(action.onPress) {
+                    action.onPress({
+                        closeAnimation: handleClose
+                    });
+                }
+            }}
+            title={action.title ? action.title : undefined}
             style={{
                 ...action.style,
                 ...actionDynamicStyle
             }}
-            title={action.title ? action.title : undefined}
             spreadBehaviour="free"
             isCustomPadding={true}
             variant="ghost"
@@ -329,8 +395,11 @@ const Tooltip: FC<ITooltipProps> = ({
             stylesheet.wrapper,
             style
         ]}
+        ref={wrapperRef}
     >
-        <TouchableWithoutFeedback
+        <Pressable
+            onPointerLeave={triggerMode === "hover" ? handleHoverOut : undefined}
+            onPointerEnter={triggerMode === "hover" ? handleHoverIn : undefined}
             onPress={() => {
                 if(!isCloseOnPress) {
                     handleToggle();
@@ -344,7 +413,7 @@ const Tooltip: FC<ITooltipProps> = ({
             <View>
                 {children}
             </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
         {
             isShow || opacityAnim !== undefined ?
                 <Animated.View
@@ -364,32 +433,40 @@ const Tooltip: FC<ITooltipProps> = ({
                             };
                         });
                     }}
+                    pointerEvents={isShow ? "auto" : "none"}
                     style={[
                         stylesheet.container,
                         containerDynamicStyle,
                         getTooltipStyle(),
                         {
                             opacity: opacityAnim
-                        }
+                        },
+                        containerStyle
                     ]}
-                    pointerEvents={isShow ? "auto" : "none"}
                 >
                     <View
-                        style={[
-                            stylesheet.caret,
-                            caretDynamicStyle,
-                            getCaretStyle()
-                        ]}
-                    />
-                    <View
-                        style={[
-                            stylesheet.containerObject,
-                            containerObjectDynamicStyle
-                        ]}
+                        onPointerLeave={triggerMode === "hover" ? handleHoverOut : undefined}
+                        onPointerEnter={triggerMode === "hover" ? handleHoverIn : undefined}
+                        style={stylesheet.hoverWrapper}
                     >
-                        {renderIcon()}
-                        {renderContent()}
-                        {renderAction()}
+                        <View
+                            style={[
+                                stylesheet.caret,
+                                caretDynamicStyle,
+                                getCaretStyle(),
+                                caretStyle
+                            ]}
+                        />
+                        <View
+                            style={[
+                                stylesheet.containerObject,
+                                containerObjectDynamicStyle
+                            ]}
+                        >
+                            {renderIcon()}
+                            {renderContent()}
+                            {renderAction()}
+                        </View>
                     </View>
                 </Animated.View>
             :

src/components/tooltip/stylesheet.ts

@@ -1,7 +1,8 @@
 import {
     type TextStyle,
     type ViewStyle,
-    StyleSheet
+    StyleSheet,
+    Platform
 } from "react-native";
 import type {
     TooltipTypeConstantType,
@@ -26,20 +27,6 @@ export const TOOLTIP_TYPE_STYLES: Record<
         iconColor: keyof NCoreUIKit.IconContentColors;
     }
 > = {
-    primary: {
-        actionColor: "onPrimary",
-        iconColor: "emphasized",
-        containerColor: "primary",
-        subTitleColor: "onPrimary",
-        titleColor: "onPrimary"
-    },
-    danger: {
-        subTitleColor: "dangerLow",
-        containerColor: "danger",
-        actionColor: "danger",
-        titleColor: "danger",
-        iconColor: "danger"
-    },
     success: {
         subTitleColor: "successLow",
         containerColor: "success",
@@ -54,6 +41,20 @@ export const TOOLTIP_TYPE_STYLES: Record<
         titleColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    primary: {
+        subTitleColor: "onPrimary",
+        containerColor: "primary",
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        titleColor: "onPrimary"
+    },
     info: {
         subTitleColor: "infoLow",
         containerColor: "info",
@@ -101,11 +102,6 @@ const stylesheet = StyleSheet.create({
         position: "relative",
         alignItems: "center"
     },
-    container: {
-        position: "absolute",
-        zIndex: 99998,
-        minWidth: 50
-    },
     iconContainer: {
         justifyContent: "center",
         alignItems: "center"
@@ -114,11 +110,18 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center"
     },
+    container: {
+        position: "absolute",
+        zIndex: 99998
+    },
     subTitle: {
         textAlign: "left"
     },
     title: {
         textAlign: "left"
+    },
+    hoverWrapper: {
+        flex: 1
     }
 });
 
@@ -126,9 +129,22 @@ export const useStyles = ({
     currentType,
     radiuses,
     colors,
-    spaces
+    height,
+    sizing,
+    spaces,
+    width
 }: TooltipDynamicStyleType) => {
+    const isFixed = sizing === "fixed";
+
     const styles = {
+        container: {
+            width: isFixed ? width : (Platform.OS === "web" ? "max-content" : undefined),
+            backgroundColor: colors.content.container[currentType.containerColor],
+            maxWidth: isFixed ? undefined : windowWidth - (spaces.spacingMd * 2),
+            height: isFixed ? height : undefined,
+            minWidth: isFixed ? undefined : 50,
+            borderRadius: radiuses.md
+        } as Mutable<ViewStyle>,
         action: {
             paddingBottom: spaces.spacingSm,
             paddingRight: spaces.spacingSm,
@@ -136,11 +152,6 @@ export const useStyles = ({
             paddingTop: spaces.spacingSm,
             marginLeft: spaces.spacingMd
         } as Mutable<ViewStyle>,
-        container: {
-            backgroundColor: colors.content.container[currentType.containerColor],
-            maxWidth: windowWidth - (spaces.spacingMd * 2),
-            borderRadius: radiuses.md
-        } as Mutable<ViewStyle>,
         containerObject: {
             paddingHorizontal: spaces.spacingMd,
             paddingVertical: spaces.spacingSm
@@ -156,7 +167,6 @@ export const useStyles = ({
             marginTop: spaces.spacingXs
         } as Mutable<TextStyle>,
         contentContainer: {
-
         } as Mutable<ViewStyle>,
         title: {
         } as Mutable<TextStyle>

src/components/tooltip/type.ts

@@ -13,8 +13,11 @@ export type TooltipDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    sizing?: "content" | "fixed";
     currentType: TooltipTypes;
     type: TooltipType;
+    height?: number;
+    width?: number;
 };
 
 export type TooltipTypes = {
@@ -38,13 +41,15 @@ export type TooltipLocation = {
 
 export type TooltipInternalProps = {
     contentContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
-    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    caretStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
         gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
         sharpness?: keyof NCoreUIKit.SharpnessKey;
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     content?: ReactNode | (() => ReactNode);
     isCloseOnPressActionButton?: boolean;
     action?: {
@@ -55,6 +60,7 @@ export type TooltipInternalProps = {
         style?: ViewStyle;
         title?: string;
     };
+    triggerMode?: "hover" | "click";
     location?: TooltipLocation;
     isCloseOnPress?: boolean;
     icon?: NCoreUIKitIcon;
@@ -68,8 +74,19 @@ export type TooltipInternalProps = {
     title?: string;
 };
 
-interface ITooltipProps extends TooltipInternalProps {
-};
+export type TooltipSizingProps = |
+    {
+        sizing?: "content";
+        height?: never;
+        width?: never;
+    } |
+    {
+        sizing: "fixed";
+        height: number;
+        width: number;
+    };
+
+type ITooltipProps = TooltipInternalProps & TooltipSizingProps;
 
 export type {
     ITooltipProps as default

src/index.tsx

@@ -28,6 +28,7 @@ export {
     PageContainer,
     TextAreaInput,
     ThemeSwitcher,
+    SystemToolbar,
     WebScrollbar,
     DateSelector,
     EmbeddedMenu,
@@ -106,6 +107,7 @@ export type {
     IPageContainerProps,
     ITextAreaInputProps,
     IThemeSwitcherProps,
+    ISystemToolbarProps,
     AvatarMeasuresKeys,
     DateTimePickerType,
     EnterMarkdownTypes,

src/variants/locales/default.json

@@ -6,10 +6,10 @@
             "selected-start-and-end-times-cannot-be-less-than-x-times-apart": "Seçilen başlangıç ve bitiş zamanı {{0}} aralığından az olamaz.",
             "selected-start-and-end-times-cannot-exceed-x-intervals": "Seçilen başlangıç ve bitiş zamanı {{0}} aralığından çok olamaz.",
             "minimum-selection-number-of-days-required-not-provided": "Minimum seçilmesi gereken gün sayısını karşılamıyor.",
-            "selected-start-time-cannot-after-then-end-time": "Seçilen başlangıç zamanı, başlangıç zamanından sonra olamaz.",
             "selected-start-date-cannot-after-then-end-date": "Seçilen başlangıç tarihi, başlangıç tarihinden sonra olamaz.",
-            "selected-end-time-cannot-before-from-start-time": "Seçilen bitiş zamanı, başlangıç zamanından önce olamaz.",
+            "selected-start-time-cannot-after-then-end-time": "Seçilen başlangıç zamanı, başlangıç zamanından sonra olamaz.",
             "selected-end-date-cannot-before-from-start-date": "Seçilen bitiş tarihi, başlangıç tarihinden önce olamaz.",
+            "selected-end-time-cannot-before-from-start-time": "Seçilen bitiş zamanı, başlangıç zamanından önce olamaz.",
             "maximum-selection-number-of-days-limit-exceeds": "Maksimum seçilebilen gün sınırını aşıyor.",
             "maximum-selection-limit-has-been-reached": "Maksimum seçim limitine ulaşıldı.",
             "minimum-a-item-selection-required": "Minimum 1 öğe seçimi gereklidir.",
@@ -18,12 +18,12 @@
             "end-date-select-is-required": "Bitiş tarihi seçimi zorunlu.",
             "code-copy-error-to-clipboard": "❌ Kod kopyalanamadı.",
             "copy-success-to-clipboard": "✅ Başarıyla kopyalandı.",
-            "copy-error-to-clipboard": "❌ Kopyalama başarısız.",
             "selected-options-with-count": "{{0}} seçim yapıldı",
+            "copy-error-to-clipboard": "❌ Kopyalama başarısız.",
             "typography-headlineMediumSize": "H-M",
+            "typography-displayMediumSize": "D-M",
             "typography-headlineLargeSize": "H-L",
             "typography-headlineSmallSize": "H-S",
-            "typography-displayMediumSize": "D-M",
             "select-any-date": "Bir tarih seçin",
             "typography-displayLargeSize": "D-L",
             "typography-displaySmallSize": "D-S",
@@ -40,10 +40,10 @@
             "typography-bodyLargeSize": "H4",
             "typography-bodySmallSize": "H6",
             "clean-all": "Tümünü Temizle",
-            "is-optional": "Opsiyonel",
-            "select-all": "Tümünü Seç",
             "components": "Bileşenler",
             "end-time": "Bitiş Zamanı",
+            "is-optional": "Opsiyonel",
+            "select-all": "Tümünü Seç",
             "go-to-today": "Bugün",
             "preview": "Önizleme",
             "home": "Ana Sayfa",
@@ -53,10 +53,11 @@
             "daily": "Günlük",
             "live": "Canlı",
             "search": "Ara",
-            "write": "Yaz",
             "menu": "Menü",
+            "write": "Yaz",
             "ok": "Tamam",
-            "or": "ya da"
+            "or": "ya da",
+            "open": "Aç"
         },
         "rruleConfig": {
             "dayNames": [
@@ -136,10 +137,10 @@
             "selected-start-and-end-times-cannot-be-less-than-x-times-apart": "Selected start and end times cannot be less than {{0}}.",
             "selected-start-and-end-times-cannot-exceed-x-intervals": "selected start and end times cannot exceed {{0}} intervals.",
             "maximum-selection-number-of-days-limit-exceeds": "It exceeds the maximum number of days that can be selected.",
-            "selected-end-time-cannot-before-from-start-time": "Selected end time cannot before from start time.",
             "selected-end-date-cannot-before-from-start-date": "Selected end date cannot before from start date.",
-            "selected-start-time-cannot-after-then-end-time": "Selected start time cannot after then end time.",
+            "selected-end-time-cannot-before-from-start-time": "Selected end time cannot before from start time.",
             "selected-start-date-cannot-after-then-end-date": "Selected start date cannot after then end date.",
+            "selected-start-time-cannot-after-then-end-time": "Selected start time cannot after then end time.",
             "maximum-selection-limit-has-been-reached": "Maximum selection limit has been reached.",
             "minimum-a-item-selection-required": "Minimum 1 item selection required.",
             "start-date-select-is-required": "Start date select is required.",
@@ -151,9 +152,9 @@
             "copy-error-to-clipboard": "❌ Copy unsuccessful.",
             "select-an-option": "Select an option",
             "typography-headlineMediumSize": "H-M",
+            "typography-displayMediumSize": "D-M",
             "typography-headlineLargeSize": "H-L",
             "typography-headlineSmallSize": "H-S",
-            "typography-displayMediumSize": "D-M",
             "clean-selection": "Clean Selection",
             "select-any-date": "Select any date",
             "typography-displayLargeSize": "D-L",
@@ -167,23 +168,24 @@
             "typography-titleSmallSize": "H3",
             "typography-bodyLargeSize": "H4",
             "typography-bodySmallSize": "H6",
-            "start-time": "Start Time",
-            "select-all": "Select All",
             "components": "Components",
-            "is-optional": "Optional",
+            "select-all": "Select All",
+            "start-time": "Start Time",
             "go-to-today": "Go Today",
+            "is-optional": "Optional",
             "clean-all": "Clean All",
             "end-time": "End Time",
             "monthly": "Monthly",
             "preview": "Preview",
-            "search": "Search",
             "cancel": "Cancel",
+            "search": "Search",
             "yearly": "Yearly",
             "daily": "Daily",
             "write": "Write",
             "home": "Home",
-            "menu": "Menu",
             "live": "Live",
+            "menu": "Menu",
+            "open": "Open",
             "ok": "Okey",
             "or": "or"
         },