Feature: Documents system completed.

.agents/AGENTS.md

@@ -4,12 +4,26 @@ The user expects strict adherence to the following coding, formatting, and behav
 
 ## General Formatting
 1. **Double Quotes:** Use double quotes (`"`) instead of single quotes for all strings and imports.
-2. **Sort by Length:** Sort arrays, JSON object keys, object properties, and import statements from **longest to shortest string length** (uzundan kısaya). This is a strict visual aesthetic preference.
+2. **Sort by Length:** Sort arrays, object properties, and import statements from **longest to shortest string length** (uzundan kısaya). For JSON objects or key-value pairs (like translations), sort by the **combined length of the key and the value (key + value)** from longest to shortest. This is a strict visual aesthetic preference. This applies deeply to destructured imports, props, array data, and types as well.
 3. **Line Breaks (Newlines):** Pay attention to line breaks. Add new lines between imports and JSON object keys where appropriate. ESLint rules regarding newlines must be strictly followed.
+4. **Hook Spacing:** Always leave a blank line between each distinct hook call (e.g. `useContext`, `useState`, `useNavigation`, `useLayoutEffect`). Do not group them tightly together without empty lines.
+5. **Array Destructuring:** When destructuring arrays (such as from `useState`), place the opening bracket on one line, each destructured item on its own separate line, and the closing bracket on its own line.
+   Example:
+   ```typescript
+   const [
+       title,
+       setTitle
+   ] = useState<string>("");
+   ```
+6. **Main Component / Object Export:** Always define the main component or object as a variable/arrow function (e.g., `const PageName = () => { ... }` or `const stylesheet = StyleSheet.create({ ... })`) and place the `export default PageName;` or `export default stylesheet;` at the very bottom of the file. Do not use `export default function PageName()` or inline `export default StyleSheet.create(...)`.
+7. **Top-level Blank Lines:** Top-level variables, arrays, types, and functions located *outside* of the main component must be separated by an empty line. Do not group them without new lines.
+8. **No `any` with `localize`:** Never use `as any` when calling the `localize` function (e.g., use `localize("key")` instead of `localize("key" as any)`). The `any` type is strictly forbidden.
+9. **String Interpolation:** Use template literals (`` `${...}` ``) for string concatenation instead of the `+` operator.
 
 ## Tooling & Checks
 1. **ESLint Validation:** Habitually run `yarn run eslint --fix <file>` or `yarn run eslint <file>` after making code edits to ensure strict ESLint compliance.
 2. **TypeScript Validation:** Habitually check and respect TypeScript compiler errors (e.g., using `tsc` or IDE feedback). Do not ignore `any` or strict typing constraints.
+3. **No External Formatters:** Do not introduce Prettier or automatic scripts that might break these explicit manual formatting rules. Format code block by block meticulously.
 
 ## Behavior
 Always follow these rules by default. Pay "extreme attention" (aşırı dikkat) to the sorting rules, ESLint, and TS constraints during modifications.

example/src/global.d.ts

@@ -1 +1,41 @@
+import defaultLocaleJSON from "./variants/locales/default.json";
+import defaultThemeJSON from "./variants/themes/default.json";
 import "../../src/types/index";
+
+declare global {
+    namespace NCoreUIKit {
+        type PaletteNames = "gmcore";
+
+        interface PaletteKey extends Record<PaletteType, unknown>, Record<PaletteNames, unknown> {
+        }
+
+        type ProjectLocalizationL = typeof defaultLocaleJSON[0];
+
+        type GeneratedProjectTranslations = {
+            [K in keyof ProjectLocalizationL["translations"]]: ProjectLocalizationL["translations"][K];
+        };
+
+        interface Translation extends GeneratedTranslations, GeneratedProjectTranslations {
+        }
+
+        type DefaultPaletteL = typeof defaultThemeJSON.palettes[0];
+
+        type ProjectDataL = DefaultPaletteL["themes"]["dark"]["project"];
+        type DefaultProjectColorsL = ProjectDataL;
+
+        interface ProjectColorPalette extends DefaultProjectColors, DefaultProjectColorsL {
+        }
+
+        type SystemDataL = DefaultPaletteL["themes"]["dark"]["system"];
+        type DefaultSystemColorsL = SystemDataL;
+
+        interface SystemColorPalette extends DefaultSystemColors, DefaultSystemColorsL {
+        }
+
+        type ContentDataL = DefaultPaletteL["themes"]["dark"]["content"];
+        type DefaultContentColorsL = ContentDataL;
+
+        interface ContentColorPalette extends DefaultContentColors, DefaultContentColorsL {
+        }
+    }
+}

example/src/index.tsx

@@ -4,16 +4,16 @@ import {
 import Navigation from "./navigation";
 import defaultLocaleJSON from "./variants/locales/default.json";
 import defaultThemeJSON from "./variants/themes/default.json";
-import {
-    useFonts
-} from "expo-font";
-import moment from "moment";
-import "moment/locale/tr";
 import {
     type NCoreUIKitConfig,
     setupNCoreUIKit,
     Host
 } from "ncore-ui-kit";
+import {
+    useFonts
+} from "expo-font";
+import moment from "moment";
+import "moment/locale/tr";
 
 let NCoreConfig: NCoreUIKitConfig = {
     projectThemes: defaultThemeJSON as NCoreUIKit.Palette,

example/src/navigation/index.tsx

@@ -18,22 +18,119 @@ import {
 import {
     type LinkingOptions,
     NavigationContainer,
-    useNavigation,
+    getStateFromPath,
+    useNavigation
 } from "@react-navigation/native";
+import TypesOverridePage from "../pages/coreFeatures/typesOverride";
 import {
     type NativeStackNavigationProp,
     createNativeStackNavigator
 } from "@react-navigation/native-stack";
 import {
     ComponentIcon,
+    SettingsIcon,
+    GoalIcon,
     HomeIcon
 } from "lucide-react-native";
-import ButtonPage from "../pages/button";
-import TextPage from "../pages/text";
+
+import AvatarPage from "../pages/components/avatar";
+import AvatarGroupPage from "../pages/components/avatarGroup";
+import BottomSheetPage from "../pages/components/bottomSheet";
+import ButtonPage from "../pages/components/button";
+import CheckBoxPage from "../pages/components/checkBox";
+import ChipPage from "../pages/components/chip";
+import DateSelectorPage from "../pages/components/dateSelector";
+import DateTimePickerPage from "../pages/components/dateTimePicker";
+import DateTimeSheetPage from "../pages/components/dateTimeSheet";
+import DialogPage from "../pages/components/dialog";
+import EmbeddedMenuPage from "../pages/components/embeddedMenu";
+import HeaderPage from "../pages/components/header";
+import HighlightButtonPage from "../pages/components/highlightButton";
+import LoadingPage from "../pages/components/loading";
+import LocaleSwitcherPage from "../pages/components/localeSwitcher";
+import MainHeaderPage from "../pages/components/mainHeader";
+import MarkdownViewerPage from "../pages/components/markdownViewer";
+import MenuPage from "../pages/components/menu";
+import ModalPage from "../pages/components/modal";
+import MonthSelectorPage from "../pages/components/monthSelector";
+import NotificationIndicatorPage from "../pages/components/notificationIndicator";
+import NumericInputPage from "../pages/components/numericInput";
+import PageContainerPage from "../pages/components/pageContainer";
+import PaletteSwitcherPage from "../pages/components/paletteSwitcher";
+import RadioButtonPage from "../pages/components/radioButton";
+import RowCardPage from "../pages/components/rowCard";
+import SelectBoxPage from "../pages/components/selectBox";
+import SelectSheetPage from "../pages/components/selectSheet";
+import SeperatorPage from "../pages/components/seperator";
+import SiteLogoPage from "../pages/components/siteLogo";
+import SnackBarPage from "../pages/components/snackBar";
+import StateCardPage from "../pages/components/stateCard";
+import StickerPage from "../pages/components/sticker";
+import SwitchPage from "../pages/components/switch";
+import TextPage from "../pages/components/text";
+import TextAreaInputPage from "../pages/components/textAreaInput";
+import TextInputPage from "../pages/components/textInput";
+import ThemeSwitcherPage from "../pages/components/themeSwitcher";
+import TimeSelectorPage from "../pages/components/timeSelector";
+import ToastPage from "../pages/components/toast";
+import WebScrollbarPage from "../pages/components/webScrollbar";
+import YearSelectorPage from "../pages/components/yearSelector";
+
+import LocaleExamplesPage from "../pages/coreFeatures/localeExamples";
+import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
+import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
 import Home from "../pages/home";
+import ImplementationPage from "../pages/implementation";
+import InstallationPage from "../pages/installation";
 
 const RootStack = createNativeStackNavigator();
 const ComponentsStack = createNativeStackNavigator();
+const GettingStartedStack = createNativeStackNavigator();
+const CoreFeaturesStack = createNativeStackNavigator();
+
+const CoreFeaturesNav = () => {
+    return <CoreFeaturesStack.Navigator
+        initialRouteName="ToolsUsage"
+        screenOptions={{
+            headerShown: true
+        }}
+    >
+        <CoreFeaturesStack.Screen
+            component={ToolsUsagePage}
+            name="ToolsUsage"
+        />
+        <CoreFeaturesStack.Screen
+            component={ThemeExamplesPage}
+            name="ThemeExamples"
+        />
+        <CoreFeaturesStack.Screen
+            component={LocaleExamplesPage}
+            name="LocaleExamples"
+        />
+        <CoreFeaturesStack.Screen
+            component={TypesOverridePage}
+            name="TypesOverride"
+        />
+    </CoreFeaturesStack.Navigator>;
+};
+
+const GettingStartedNav = () => {
+    return <GettingStartedStack.Navigator
+        initialRouteName="Installation"
+        screenOptions={{
+            headerShown: true
+        }}
+    >
+        <GettingStartedStack.Screen
+            component={InstallationPage}
+            name="Installation"
+        />
+        <GettingStartedStack.Screen
+            component={ImplementationPage}
+            name="Implementation"
+        />
+    </GettingStartedStack.Navigator>;
+};
 
 const ComponentsNav = () => {
     return <ComponentsStack.Navigator
@@ -43,20 +140,235 @@ const ComponentsNav = () => {
         }}
     >
         <ComponentsStack.Screen
-            name="Text"
-            component={TextPage}
+            component={AvatarPage}
+            name="Avatar"
+        />
+        <ComponentsStack.Screen
+            component={AvatarGroupPage}
+            name="AvatarGroup"
+        />
+        <ComponentsStack.Screen
+            component={BottomSheetPage}
+            name="BottomSheet"
         />
         <ComponentsStack.Screen
-            name="Button"
             component={ButtonPage}
+            name="Button"
+        />
+        <ComponentsStack.Screen
+            component={CheckBoxPage}
+            name="CheckBox"
+        />
+        <ComponentsStack.Screen
+            component={ChipPage}
+            name="Chip"
+        />
+        <ComponentsStack.Screen
+            component={DateSelectorPage}
+            name="DateSelector"
+        />
+        <ComponentsStack.Screen
+            component={DateTimePickerPage}
+            name="DateTimePicker"
+        />
+        <ComponentsStack.Screen
+            component={DateTimeSheetPage}
+            name="DateTimeSheet"
+        />
+        <ComponentsStack.Screen
+            component={DialogPage}
+            name="Dialog"
+        />
+        <ComponentsStack.Screen
+            component={EmbeddedMenuPage}
+            name="EmbeddedMenu"
+        />
+        <ComponentsStack.Screen
+            component={HeaderPage}
+            name="Header"
+        />
+        <ComponentsStack.Screen
+            component={HighlightButtonPage}
+            name="HighlightButton"
+        />
+        <ComponentsStack.Screen
+            component={LoadingPage}
+            name="Loading"
+        />
+        <ComponentsStack.Screen
+            component={LocaleSwitcherPage}
+            name="LocaleSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={MainHeaderPage}
+            name="MainHeader"
+        />
+        <ComponentsStack.Screen
+            component={MarkdownViewerPage}
+            name="MarkdownViewer"
+        />
+        <ComponentsStack.Screen
+            component={MenuPage}
+            name="Menu"
+        />
+        <ComponentsStack.Screen
+            component={ModalPage}
+            name="Modal"
+        />
+        <ComponentsStack.Screen
+            component={MonthSelectorPage}
+            name="MonthSelector"
+        />
+        <ComponentsStack.Screen
+            component={NotificationIndicatorPage}
+            name="NotificationIndicator"
+        />
+        <ComponentsStack.Screen
+            component={NumericInputPage}
+            name="NumericInput"
+        />
+        <ComponentsStack.Screen
+            component={PageContainerPage}
+            name="PageContainer"
+        />
+        <ComponentsStack.Screen
+            component={PaletteSwitcherPage}
+            name="PaletteSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={RadioButtonPage}
+            name="RadioButton"
+        />
+        <ComponentsStack.Screen
+            component={RowCardPage}
+            name="RowCard"
+        />
+        <ComponentsStack.Screen
+            component={SelectBoxPage}
+            name="SelectBox"
+        />
+        <ComponentsStack.Screen
+            component={SelectSheetPage}
+            name="SelectSheet"
+        />
+        <ComponentsStack.Screen
+            component={SeperatorPage}
+            name="Seperator"
+        />
+        <ComponentsStack.Screen
+            component={SiteLogoPage}
+            name="SiteLogo"
+        />
+        <ComponentsStack.Screen
+            component={SnackBarPage}
+            name="SnackBar"
+        />
+        <ComponentsStack.Screen
+            component={StateCardPage}
+            name="StateCard"
+        />
+        <ComponentsStack.Screen
+            component={StickerPage}
+            name="Sticker"
+        />
+        <ComponentsStack.Screen
+            component={SwitchPage}
+            name="Switch"
+        />
+        <ComponentsStack.Screen
+            component={TextPage}
+            name="Text"
+        />
+        <ComponentsStack.Screen
+            component={TextAreaInputPage}
+            name="TextAreaInput"
+        />
+        <ComponentsStack.Screen
+            component={TextInputPage}
+            name="TextInput"
+        />
+        <ComponentsStack.Screen
+            component={ThemeSwitcherPage}
+            name="ThemeSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={TimeSelectorPage}
+            name="TimeSelector"
+        />
+        <ComponentsStack.Screen
+            component={ToastPage}
+            name="Toast"
+        />
+        <ComponentsStack.Screen
+            component={WebScrollbarPage}
+            name="WebScrollbar"
+        />
+        <ComponentsStack.Screen
+            component={YearSelectorPage}
+            name="YearSelector"
         />
     </ComponentsStack.Navigator>;
 };
 
+const RenderHomeIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <HomeIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderComponentIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <ComponentIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderGettingStartedIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <GoalIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderCoreFeaturesIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <SettingsIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
 const RootNav = () => {
     const {
         activeTheme,
-        colors,
         spaces
     } = NCoreUIKitTheme.useContext();
 
@@ -83,10 +395,72 @@ const RootNav = () => {
                     title: "home",
                     icon: ({
                         color
-                    }) => <HomeIcon
-                        color={colors.content.icon[color]}
+                    }) => <RenderHomeIcon
+                        color={color}
                     />
                 },
+                {
+                    redirectMain: "GettingStarted",
+                    isCollapsible: true,
+                    title: "gettingStarted",
+                    isUseLocalize: true,
+                    icon: ({
+                        color
+                    }) => <RenderGettingStartedIcon
+                        color={color}
+                    />,
+                    subButtons: [
+                        {
+                            redirectMain: "GettingStarted",
+                            redirectSub: "Installation",
+                            title: "installation",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "GettingStarted",
+                            redirectSub: "Implementation",
+                            title: "implementation",
+                            isUseLocalize: true
+                        }
+                    ]
+                },
+                {
+                    redirectMain: "CoreFeatures",
+                    isCollapsible: true,
+                    title: "coreFeatures",
+                    isUseLocalize: true,
+                    icon: ({
+                        color
+                    }) => <RenderCoreFeaturesIcon
+                        color={color}
+                    />,
+                    subButtons: [
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "ToolsUsage",
+                            title: "toolsUsage",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "ThemeExamples",
+                            title: "themeExamples",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "LocaleExamples",
+                            title: "localeExamples",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "TypesOverride",
+                            title: "typesOverride",
+                            isUseLocalize: true
+                        }
+                    ]
+                },
                 {
                     redirectMain: "Components",
                     isUseLocalize: true,
@@ -94,8 +468,8 @@ const RootNav = () => {
                     title: "components",
                     icon: ({
                         color
-                    }) => <ComponentIcon
-                        color={colors.content.icon[color]}
+                    }) => <RenderComponentIcon
+                        color={color}
                     />,
                     subButtons: [
                         {
@@ -107,6 +481,206 @@ const RootNav = () => {
                             redirectMain: "Components",
                             redirectSub: "Button",
                             title: "Button"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "HighlightButton",
+                            title: "HighlightButton"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TextInput",
+                            title: "TextInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TextAreaInput",
+                            title: "TextAreaInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "NumericInput",
+                            title: "NumericInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SelectBox",
+                            title: "SelectBox"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SelectSheet",
+                            title: "SelectSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "CheckBox",
+                            title: "CheckBox"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "RadioButton",
+                            title: "RadioButton"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Switch",
+                            title: "Switch"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateTimePicker",
+                            title: "DateTimePicker"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateTimeSheet",
+                            title: "DateTimeSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateSelector",
+                            title: "DateSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TimeSelector",
+                            title: "TimeSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MonthSelector",
+                            title: "MonthSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "YearSelector",
+                            title: "YearSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Avatar",
+                            title: "Avatar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "AvatarGroup",
+                            title: "AvatarGroup"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Chip",
+                            title: "Chip"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Sticker",
+                            title: "Sticker"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "RowCard",
+                            title: "RowCard"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "StateCard",
+                            title: "StateCard"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Dialog",
+                            title: "Dialog"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Modal",
+                            title: "Modal"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "BottomSheet",
+                            title: "BottomSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SnackBar",
+                            title: "SnackBar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Toast",
+                            title: "Toast"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Loading",
+                            title: "Loading"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "NotificationIndicator",
+                            title: "NotificationIndicator"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MarkdownViewer",
+                            title: "MarkdownViewer"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Seperator",
+                            title: "Seperator"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SiteLogo",
+                            title: "SiteLogo"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "WebScrollbar",
+                            title: "WebScrollbar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "PageContainer",
+                            title: "PageContainer"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Header",
+                            title: "Header"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MainHeader",
+                            title: "MainHeader"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Menu",
+                            title: "Menu"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "EmbeddedMenu",
+                            title: "EmbeddedMenu"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "ThemeSwitcher",
+                            title: "ThemeSwitcher"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "PaletteSwitcher",
+                            title: "PaletteSwitcher"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "LocaleSwitcher",
+                            title: "LocaleSwitcher"
                         }
                     ]
                 }
@@ -196,6 +770,14 @@ const RootNav = () => {
                     headerShown: false
                 }}
             >
+                <RootStack.Screen
+                    component={GettingStartedNav}
+                    name="GettingStarted"
+                />
+                <RootStack.Screen
+                    component={CoreFeaturesNav}
+                    name="CoreFeatures"
+                />
                 <RootStack.Screen
                     component={Home}
                     name="Home"
@@ -218,15 +800,74 @@ const Navigation = () => {
             ],
             config: {
                 screens: {
-                    Home: "",
+                    Home: "home",
+                    GettingStarted: {
+                        path: "gettingstarted",
+                        screens: {
+                            Installation: "installation",
+                            Implementation: "implementation"
+                        }
+                    },
+                    CoreFeatures: {
+                        path: "corefeatures",
+                        screens: {
+                            ToolsUsage: "toolsusage",
+                            ThemeExamples: "themeexamples",
+                            LocaleExamples: "localeexamples",
+                            TypesOverride: "typesoverride"
+                        }
+                    },
                     Components: {
-                        path: "Components",
+                        path: "components",
                         screens: {
+                            Avatar: "avatar",
+                            AvatarGroup: "avatargroup",
+                            BottomSheet: "bottomsheet",
                             Button: "button",
-                            Text: "text"
+                            CheckBox: "checkbox",
+                            Chip: "chip",
+                            DateSelector: "dateselector",
+                            DateTimePicker: "datetimepicker",
+                            DateTimeSheet: "datetimesheet",
+                            Dialog: "dialog",
+                            EmbeddedMenu: "embeddedmenu",
+                            Header: "header",
+                            HighlightButton: "highlightbutton",
+                            Loading: "loading",
+                            LocaleSwitcher: "localeswitcher",
+                            MainHeader: "mainheader",
+                            MarkdownViewer: "markdownviewer",
+                            Menu: "menu",
+                            Modal: "modal",
+                            MonthSelector: "monthselector",
+                            NotificationIndicator: "notificationindicator",
+                            NumericInput: "numericinput",
+                            PageContainer: "pagecontainer",
+                            PaletteSwitcher: "paletteswitcher",
+                            RadioButton: "radiobutton",
+                            RowCard: "rowcard",
+                            SelectBox: "selectbox",
+                            SelectSheet: "selectsheet",
+                            Seperator: "seperator",
+                            SiteLogo: "sitelogo",
+                            SnackBar: "snackbar",
+                            StateCard: "statecard",
+                            Sticker: "sticker",
+                            Switch: "switch",
+                            Text: "text",
+                            TextAreaInput: "textareainput",
+                            TextInput: "textinput",
+                            ThemeSwitcher: "themeswitcher",
+                            TimeSelector: "timeselector",
+                            Toast: "toast",
+                            WebScrollbar: "webscrollbar",
+                            YearSelector: "yearselector"
                         }
                     }
                 }
+            },
+            getStateFromPath: (path, options) => {
+                return getStateFromPath(path.toLowerCase(), options);
             }
         } as LinkingOptions<RootStackParamList>}
     >

example/src/navigation/type.ts

@@ -2,12 +2,62 @@ import type {
     NavigatorScreenParams
 } from "@react-navigation/native";
 
+export type GettingStartedStackParamList = {
+    Implementation: undefined;
+    Installation: undefined;
+};
+
+export type CoreFeaturesStackParamList = {
+    TypesOverride: undefined;
+    LocaleExamples: undefined;
+    ThemeExamples: undefined;
+    ToolsUsage: undefined;
+};
+
 export type ComponentsStackParamList = {
+    NotificationIndicator: undefined;
+    HighlightButton: undefined;
+    PaletteSwitcher: undefined;
+    DateTimePicker: undefined;
+    MarkdownViewer: undefined;
+    LocaleSwitcher: undefined;
+    DateTimeSheet: undefined;
+    TextAreaInput: undefined;
+    PageContainer: undefined;
+    MonthSelector: undefined;
+    ThemeSwitcher: undefined;
+    DateSelector: undefined;
+    NumericInput: undefined;
+    TimeSelector: undefined;
+    YearSelector: undefined;
+    WebScrollbar: undefined;
+    AvatarGroup: undefined;
+    BottomSheet: undefined;
+    RadioButton: undefined;
+    SelectSheet: undefined;
+    SelectBox: undefined;
+    Seperator: undefined;
+    StateCard: undefined;
+    TextInput: undefined;
+    CheckBox: undefined;
+    SiteLogo: undefined;
+    SnackBar: undefined;
+    Loading: undefined;
+    RowCard: undefined;
+    Sticker: undefined;
+    Avatar: undefined;
     Button: undefined;
+    Dialog: undefined;
+    Switch: undefined;
+    Modal: undefined;
+    Toast: undefined;
+    Chip: undefined;
     Text: undefined;
 };
 
 type RootStackParamList = {
+    CoreFeatures: NavigatorScreenParams<CoreFeaturesStackParamList>;
+    GettingStarted: NavigatorScreenParams<GettingStartedStackParamList>;
     Components: NavigatorScreenParams<ComponentsStackParamList>;
     Home: undefined;
 };

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

@@ -0,0 +1,270 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Avatar,
+    Header,
+    Switch
+    ,
+    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 type {
+    IAvatarProps
+} from "ncore-ui-kit";
+
+const AVATAR_SIZES: Array<IAvatarProps["size"]> = [
+    "small",
+    "medium",
+    "large",
+    "xLarge",
+    "xSmall"
+];
+const AVATAR_STATUS_INDICATOR_TYPES: Array<IAvatarProps["statusIndicatorType"]> = [
+    "online",
+    "offline",
+    "busy",
+    "away",
+    "idle"
+];
+
+const AVATAR_SIZES_DATA = AVATAR_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const AVATAR_STATUS_INDICATOR_TYPES_DATA = AVATAR_STATUS_INDICATOR_TYPES.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const AvatarPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        statusIndicatorIndex,
+        setStatusIndicatorIndex
+    ] = useState<number>(1);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(3);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        imageUrl,
+        setImageUrl
+    ] = useState<string>(
+        "https://ncore.nibgat.space/assets/images/ncorelogo.png",
+    );
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("John Doe");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("avatar-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("avatar-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Avatar
+                        statusIndicatorType={
+                            AVATAR_STATUS_INDICATOR_TYPES[statusIndicatorIndex]
+                        }
+                        size={AVATAR_SIZES[sizeIndex]}
+                        isStatusIndicator={true}
+                        isDisabled={isDisabled}
+                        isLoading={isLoading}
+                        imageUrl={imageUrl}
+                        title={title}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("avatar-enterImageUrl")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    title={localize("avatar-imageUrl")}
+                    onChangeText={setImageUrl}
+                    spreadBehaviour="stretch"
+                    value={imageUrl}
+                />
+                <TextInput
+                    placeholder={localize("avatar-enterText")}
+                    title={localize("avatar-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = AVATAR_SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IAvatarProps["size"],
+                                );
+                                if (index !== -1) setSizeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            AVATAR_SIZES_DATA[sizeIndex]
+                                ? [AVATAR_SIZES_DATA[sizeIndex]]
+                                : []
+                        }
+                        title={localize("change-size")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={AVATAR_SIZES_DATA}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index =
+                                    AVATAR_STATUS_INDICATOR_TYPES.indexOf(
+                                        selectedItems[0]!
+                                            .__key as IAvatarProps["statusIndicatorType"],
+                                    );
+                                if (index !== -1)
+                                    setStatusIndicatorIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            AVATAR_STATUS_INDICATOR_TYPES_DATA[
+                                statusIndicatorIndex
+                            ]
+                                ? [
+                                    AVATAR_STATUS_INDICATOR_TYPES_DATA[
+                                        statusIndicatorIndex
+                                    ],
+                                ]
+                                : []
+                        }
+                        title={localize("avatar-changeStatus")}
+                        data={AVATAR_STATUS_INDICATOR_TYPES_DATA}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("avatar-toggleLoading")}
+                            onPress={() => {
+                                setIsLoading(!isLoading);
+                            }}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            onPress={() => {
+                                setIsDisabled(!isDisabled);
+                            }}
+                            title={localize("avatar-toggleDisabled")}
+                            isActive={isDisabled}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default AvatarPage;

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

@@ -0,0 +1,202 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    AvatarGroup,
+    SelectBox,
+    Header,
+    Switch
+    ,
+    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 type {
+    IAvatarGroupProps
+} from "ncore-ui-kit";
+
+const AVATAR_GROUP_SIZES: Array<IAvatarGroupProps["size"]> = [
+    "small",
+    "medium",
+    "large",
+    "xLarge",
+    "xSmall"
+];
+
+const AVATAR_GROUP_SIZES_DATA = AVATAR_GROUP_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const MOCK_AVATARS = [
+    {
+        imageUrl: "https://ncore.nibgat.space/assets/images/ncorelogo.png",
+        title: "Ncore System"
+    },
+    {
+        title: "Jane Smith"
+    },
+    {
+        title: "Mike Ross"
+    },
+    {
+        title: "John Doe"
+    }
+];
+
+const AvatarGroupPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(3);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("avatarGroup-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("avatarGroup-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <AvatarGroup
+                        size={AVATAR_GROUP_SIZES[sizeIndex]}
+                        isDisabled={isDisabled}
+                        avatars={MOCK_AVATARS}
+                        isLoading={isLoading}
+                    />
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = AVATAR_GROUP_SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IAvatarGroupProps["size"],
+                                );
+                                if (index !== -1) setSizeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            AVATAR_GROUP_SIZES_DATA[sizeIndex]
+                                ? [AVATAR_GROUP_SIZES_DATA[sizeIndex]]
+                                : []
+                        }
+                        title={localize("avatarGroup-changeSize")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={AVATAR_GROUP_SIZES_DATA}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("avatarGroup-toggleLoading")}
+                            onPress={() => {
+                                setIsLoading(!isLoading);
+                            }}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            title={localize(
+                                "avatarGroup-toggleDisabled",
+                            )}
+                            onPress={() => {
+                                setIsDisabled(!isDisabled);
+                            }}
+                            isActive={isDisabled}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default AvatarGroupPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,188 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    BottomSheet,
+    Button,
+    Header,
+    Switch,
+    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";
+
+const BottomSheetPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isWorkWithPortal,
+        setIsWorkWithPortal
+    ] = useState<boolean>(true);
+
+    const [
+        isSwipeClose,
+        setIsSwipeClose
+    ] = useState<boolean>(true);
+
+    const [
+        isShowHandle,
+        setIsShowHandle
+    ] = useState<boolean>(true);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("bottomSheet-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("bottomSheet-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Button
+                        title={localize("bottomSheet-openSheet")}
+                        onPress={() => setIsActive(true)}
+                    />
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize(
+                                "bottomSheet-toggleSwipeClose",
+                            )}
+                            onPress={() => {
+                                setIsSwipeClose(!isSwipeClose);
+                            }}
+                            isActive={isSwipeClose}
+                        />
+                        <Switch
+                            title={localize(
+                                "bottomSheet-toggleShowHandle",
+                            )}
+                            onPress={() => {
+                                setIsShowHandle(!isShowHandle);
+                            }}
+                            isActive={isShowHandle}
+                        />
+                        <Switch
+                            onPress={() => {
+                                setIsWorkWithPortal(!isWorkWithPortal);
+                            }}
+                            title={localize("bottomSheet-togglePortal")}
+                            isActive={isWorkWithPortal}
+                        />
+                    </View>
+                </View>
+            </View>
+            <BottomSheet
+                isWorkWithPortal={isWorkWithPortal}
+                onClose={() => setIsActive(false)}
+                isSwipeClose={isSwipeClose}
+                isShowHandle={isShowHandle}
+                isActive={isActive}
+            >
+                <View
+                    style={{
+                        padding: spaces.spacingMd
+                    }}
+                >
+                    <Text
+                        style={{
+                            marginBottom: spaces.spacingMd,
+                            textAlign: "center"
+                        }}
+                    >
+                        {localize("bottomSheet-content")}
+                    </Text>
+                    <Button
+                        title={localize("bottomSheet-close")}
+                        onPress={() => setIsActive(false)}
+                        spreadBehaviour="stretch"
+                        type="danger"
+                    />
+                </View>
+            </BottomSheet>
+        </PageContainer>
+    );
+};
+export default BottomSheetPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

example/src/pages/button/index.tsx → example/src/pages/components/button/index.tsx

@@ -8,14 +8,15 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
-    type IButtonProps,
     NCoreUIKitTheme,
     PageContainer,
     SelectBox,
     TextInput,
     Button,
-    Switch,
-    Header
+    Header,
+    Switch
+    ,
+    Text
 } from "ncore-ui-kit";
 import {
     useNavigation
@@ -24,6 +25,9 @@ import type RootStackParamList from "../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
+import type {
+    IButtonProps
+} from "ncore-ui-kit";
 import {
     Home as HomeIcon
 } from "lucide-react-native";
@@ -32,23 +36,14 @@ const BUTTON_TYPES: Array<IButtonProps["type"]> = [
     "primary",
     "danger",
     "warning",
-    "neutral",
     "success",
     "info"
 ];
-
-const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
-    "baseline",
-    "stretch",
-    "free"
-];
-
 const BUTTON_VARIANTS: Array<IButtonProps["variant"]> = [
     "filled",
     "outline",
     "ghost"
 ];
-
 const BUTTON_SIZES: Array<IButtonProps["size"]> = [
     "small",
     "medium",
@@ -60,6 +55,12 @@ const BUTTON_TYPES_DATA = BUTTON_TYPES.map(item => ({
     __title: item as string
 }));
 
+const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
 const BUTTON_VARIANTS_DATA = BUTTON_VARIANTS.map(item => ({
     __key: item as string,
     __title: item as string
@@ -161,6 +162,15 @@ const ButtonPage = () => {
                 stylesheet.contentContainer
             ]}
         >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={{
+                    marginBottom: 20
+                }}
+            >
+                {localize("button-desc")}
+            </Text>
             <View
                 style={{
                     borderColor: colors.content.border.subtle,

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,317 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    type ICheckBoxProps,
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    CheckBox,
+    Header,
+    Switch
+    ,
+    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";
+
+const CHECK_BOX_TYPES: Array<ICheckBoxProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+
+const CHECK_BOX_SPREAD_BEHAVIOURS: Array<ICheckBoxProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const CHECK_BOX_TYPES_DATA = CHECK_BOX_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHECK_BOX_SPREAD_BEHAVIOURS_DATA = CHECK_BOX_SPREAD_BEHAVIOURS.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+type IsCheckedType = "checked" | "partially" | null;
+
+const IS_CHECKED_TYPES: Array<IsCheckedType> = [
+    "partially",
+    "checked",
+    null
+];
+
+const IS_CHECKED_TYPES_DATA = IS_CHECKED_TYPES.map((item) => ({
+    __title: String(item),
+    __key: String(item)
+}));
+
+const CheckBoxPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        isCheckedIndex,
+        setIsCheckedIndex
+    ] = useState<number>(0);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("Subtitle");
+
+    const [
+        isFlip,
+        setIsFlip
+    ] = useState<boolean>(false);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("CheckBox Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("checkBox-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("checkBox-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <CheckBox
+                        onPress={() => {
+                            setIsCheckedIndex((prev) => (prev === 0 ? 2 : 0));
+                        }}
+                        spreadBehaviour={
+                            CHECK_BOX_SPREAD_BEHAVIOURS[spreadIndex]
+                        }
+                        isChecked={IS_CHECKED_TYPES[isCheckedIndex]}
+                        type={CHECK_BOX_TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isLoading={isLoading}
+                        subTitle={subTitle}
+                        isFlip={isFlip}
+                        title={title}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("checkBox-enterText")}
+                    title={localize("checkBox-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("checkBox-enterSubText")}
+                    title={localize("checkBox-subTitleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    onChangeText={setSubTitle}
+                    spreadBehaviour="stretch"
+                    value={subTitle}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = CHECK_BOX_TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as ICheckBoxProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            CHECK_BOX_TYPES_DATA[typeIndex]
+                                ? [CHECK_BOX_TYPES_DATA[typeIndex]]
+                                : []
+                        }
+                        title={localize("checkBox-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={CHECK_BOX_TYPES_DATA}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index =
+                                    CHECK_BOX_SPREAD_BEHAVIOURS.indexOf(
+                                        selectedItems[0]!
+                                            .__key as ICheckBoxProps["spreadBehaviour"],
+                                    );
+                                if (index !== -1) setSpreadIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            CHECK_BOX_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+                                ? [
+                                    CHECK_BOX_SPREAD_BEHAVIOURS_DATA[
+                                        spreadIndex
+                                    ],
+                                ]
+                                : []
+                        }
+                        title={localize("checkBox-changeSpread")}
+                        data={CHECK_BOX_SPREAD_BEHAVIOURS_DATA}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = IS_CHECKED_TYPES_DATA.findIndex(
+                                    (item) =>
+                                        item.__key === selectedItems[0]!.__key,
+                                );
+                                if (index !== -1) setIsCheckedIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            IS_CHECKED_TYPES_DATA[isCheckedIndex]
+                                ? [IS_CHECKED_TYPES_DATA[isCheckedIndex]]
+                                : []
+                        }
+                        title={localize("checkBox-changeIsChecked")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={IS_CHECKED_TYPES_DATA}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("checkBox-toggleLoading")}
+                            onPress={() => {
+                                setIsLoading(!isLoading);
+                            }}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            title={localize("checkBox-toggleDisabled")}
+                            onPress={() => {
+                                setIsDisabled(!isDisabled);
+                            }}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize("checkBox-toggleFlip")}
+                            onPress={() => {
+                                setIsFlip(!isFlip);
+                            }}
+                            isActive={isFlip}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default CheckBoxPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,286 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Header,
+    Switch,
+    Chip
+    ,
+    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 type {
+    IChipProps
+} from "ncore-ui-kit";
+
+const CHIP_TYPES: Array<IChipProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+const CHIP_SPREAD_BEHAVIOURS: Array<IChipProps["spreadBehaviour"]> = [
+    "baseline",
+    "free"
+];
+const CHIP_SIZES: Array<IChipProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
+
+const CHIP_TYPES_DATA = CHIP_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHIP_SPREAD_BEHAVIOURS_DATA = CHIP_SPREAD_BEHAVIOURS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHIP_SIZES_DATA = CHIP_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const ChipPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    const [
+        isClosable,
+        setIsClosable
+    ] = useState<boolean>(true);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Chip Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("chip-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("chip-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Chip
+                        spreadBehaviour={CHIP_SPREAD_BEHAVIOURS[spreadIndex]}
+                        type={CHIP_TYPES[typeIndex]}
+                        size={CHIP_SIZES[sizeIndex]}
+                        isClosable={isClosable}
+                        isDisabled={isDisabled}
+                        isLoading={isLoading}
+                        title={title}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("chip-enterText")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    title={localize("chip-titleLabel")}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = CHIP_TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            CHIP_TYPES_DATA[typeIndex]
+                                ? [CHIP_TYPES_DATA[typeIndex]]
+                                : []
+                        }
+                        title={localize("chip-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={CHIP_TYPES_DATA}
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = CHIP_SPREAD_BEHAVIOURS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["spreadBehaviour"],
+                                );
+                                if (index !== -1) setSpreadIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+                                ? [CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]]
+                                : []
+                        }
+                        title={localize("chip-changeSpread")}
+                        titleExtractor={(item) => item.__title}
+                        data={CHIP_SPREAD_BEHAVIOURS_DATA}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = CHIP_SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["size"],
+                                );
+                                if (index !== -1) setSizeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            CHIP_SIZES_DATA[sizeIndex]
+                                ? [CHIP_SIZES_DATA[sizeIndex]]
+                                : []
+                        }
+                        title={localize("chip-changeSize")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={CHIP_SIZES_DATA}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            onPress={() => {
+                                setIsClosable(!isClosable);
+                            }}
+                            title={localize("chip-toggleClosable")}
+                            isActive={isClosable}
+                        />
+                        <Switch
+                            onPress={() => {
+                                setIsLoading(!isLoading);
+                            }}
+                            title={localize("chip-toggleLoading")}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            onPress={() => {
+                                setIsDisabled(!isDisabled);
+                            }}
+                            title={localize("chip-toggleDisabled")}
+                            isActive={isDisabled}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default ChipPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,91 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    DateSelector,
+    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";
+
+const DateSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-dateSelector")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("dateSelector-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-dateSelector")}
+                </Text>
+                <DateSelector
+                    setIsSheetContentReady={setIsSheetContentReady}
+                    selectMultipleObject={() => {}}
+                    selectObject={() => {}}
+                    variant="single"
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default DateSelectorPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,307 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    DateTimePicker,
+    PageContainer,
+    SelectBox,
+    Header,
+    Switch
+    ,
+    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 type {
+    DateTimePickerPickerType,
+    IDateTimePickerProps
+} from "ncore-ui-kit";
+
+const DATE_TIME_PICKER_TYPES: Array<IDateTimePickerProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "success",
+    "info",
+    "question"
+];
+const DATE_TIME_PICKER_SPREAD_BEHAVIOURS: Array<IDateTimePickerProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+const DATE_TIME_PICKER_PICKER_TYPES: Array<IDateTimePickerProps["pickerType"]> = [
+    "date",
+    "time",
+    "date-time"
+];
+const DATE_TIME_PICKER_VARIANTS: Array<IDateTimePickerProps["variant"]> = [
+    "single",
+    "range",
+    "rrule"
+];
+
+const DATE_TIME_PICKER_TYPES_DATA = DATE_TIME_PICKER_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA =
+    DATE_TIME_PICKER_SPREAD_BEHAVIOURS.map((item) => ({
+        __title: item as string,
+        __key: item as string
+    }));
+
+const DATE_TIME_PICKER_PICKER_TYPES_DATA = DATE_TIME_PICKER_PICKER_TYPES.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const DATE_TIME_PICKER_VARIANTS_DATA = DATE_TIME_PICKER_VARIANTS.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const DateTimePickerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(1);
+
+    const [
+        pickerTypeIndex,
+        setPickerTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("dateTimePicker-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("dateTimePicker-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <DateTimePicker
+                        spreadBehaviour={
+                            DATE_TIME_PICKER_SPREAD_BEHAVIOURS[spreadIndex]
+                        }
+                        pickerType={
+                            DATE_TIME_PICKER_PICKER_TYPES[pickerTypeIndex]
+                        }
+                        variant={DATE_TIME_PICKER_VARIANTS[variantIndex]}
+                        title={localize("dateTimePicker-title")}
+                        type={DATE_TIME_PICKER_TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                    />
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = DATE_TIME_PICKER_TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IDateTimePickerProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            DATE_TIME_PICKER_TYPES_DATA[typeIndex]
+                                ? [DATE_TIME_PICKER_TYPES_DATA[typeIndex]]
+                                : []
+                        }
+                        title={localize("dateTimePicker-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        data={DATE_TIME_PICKER_TYPES_DATA}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index =
+                                    DATE_TIME_PICKER_SPREAD_BEHAVIOURS.indexOf(
+                                        selectedItems[0]!
+                                            .__key as IDateTimePickerProps["spreadBehaviour"],
+                                    );
+                                if (index !== -1) setSpreadIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+                                ? [
+                                    DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA[
+                                        spreadIndex
+                                    ],
+                                ]
+                                : []
+                        }
+                        title={localize("dateTimePicker-changeSpread")}
+                        data={DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index =
+                                    DATE_TIME_PICKER_PICKER_TYPES.indexOf(
+                                        selectedItems[0]!
+                                            .__key as DateTimePickerPickerType,
+                                    );
+                                if (index !== -1) setPickerTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            DATE_TIME_PICKER_PICKER_TYPES_DATA[pickerTypeIndex]
+                                ? [
+                                    DATE_TIME_PICKER_PICKER_TYPES_DATA[
+                                        pickerTypeIndex
+                                    ],
+                                ]
+                                : []
+                        }
+                        title={localize(
+                            "dateTimePicker-changePickerType",
+                        )}
+                        data={DATE_TIME_PICKER_PICKER_TYPES_DATA}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = DATE_TIME_PICKER_VARIANTS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IDateTimePickerProps["variant"],
+                                );
+                                if (index !== -1) setVariantIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]
+                                ? [DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]]
+                                : []
+                        }
+                        title={localize("dateTimePicker-changeVariant")}
+                        titleExtractor={(item) => item.__title}
+                        data={DATE_TIME_PICKER_VARIANTS_DATA}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize(
+                                "dateTimePicker-toggleDisabled",
+                            )}
+                            onPress={() => {
+                                setIsDisabled(!isDisabled);
+                            }}
+                            isActive={isDisabled}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default DateTimePickerPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,113 @@
+import {
+    useLayoutEffect,
+    useState,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    DateTimeSheet,
+    PageContainer,
+    Header,
+    Button,
+    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 type {
+    IBottomSheetRef
+} from "ncore-ui-kit";
+
+const DateTimeSheetPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const bottomSheetRef = useRef<IBottomSheetRef>(null);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-dateTimeSheet")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("dateTimeSheet-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-dateTimeSheet")}
+                </Text>
+                <Button
+                    onPress={() => setIsActive(true)}
+                    title="Open DateTime Sheet"
+                    spreadBehaviour="stretch"
+                />
+                <DateTimeSheet
+                    selectMultipleObject={() => {}}
+                    selectDateRule={() => {}}
+                    selectObject={() => {}}
+                    isWorkWithRealtime={true}
+                    dateTimePickerKey="test"
+                    bottomSheetRef={bottomSheetRef}
+                    setIsActive={setIsActive}
+                    cancel={() => setIsActive(false)}
+                    clean={() => {}}
+                    ok={() => setIsActive(false)}
+                    pickerType="date"
+                    isLoading={false}
+                    isActive={isActive}
+                    variant="single"
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default DateTimeSheetPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,210 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Button,
+    Dialog,
+    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 type {
+    IDialogProps
+} from "ncore-ui-kit";
+
+const DIALOG_VARIANTS: Array<IDialogProps["variant"]> = [
+    "yes-no",
+    "ok",
+    "info"
+];
+
+const DIALOG_VARIANTS_DATA = DIALOG_VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const DialogPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        isVisible,
+        setIsVisible
+    ] = useState<boolean>(false);
+
+    const [
+        content,
+        setContent
+    ] = useState<string>("This is a dialog content.");
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Dialog Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("dialog-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("dialog-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Button
+                        title={localize("dialog-openDialog")}
+                        onPress={() => setIsVisible(true)}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("dialog-enterText")}
+                    title={localize("dialog-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("dialog-enterContentText")}
+                    title={localize("dialog-contentLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setContent}
+                    value={content}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = DIALOG_VARIANTS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IDialogProps["variant"],
+                                );
+                                if (index !== -1) setVariantIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            DIALOG_VARIANTS_DATA[variantIndex]
+                                ? [DIALOG_VARIANTS_DATA[variantIndex]]
+                                : []
+                        }
+                        title={localize("dialog-changeVariant")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        data={DIALOG_VARIANTS_DATA}
+                        spreadBehaviour="free"
+                    />
+                </View>
+            </View>
+            <Dialog
+                secondaryButtonProps={{
+                    onPress: ({
+                        closeAnimation
+                    }) => {
+                        closeAnimation();
+                    }
+                }}
+                primaryButtonProps={{
+                    onPress: ({
+                        closeAnimation
+                    }) => {
+                        closeAnimation();
+                    }
+                }}
+                onOverlayPress={({
+                    closeAnimation
+                }) => {
+                    closeAnimation();
+                }}
+                onClosed={() => {
+                    setIsVisible(false);
+                }}
+                variant={DIALOG_VARIANTS[variantIndex]}
+                isVisible={isVisible}
+                content={content}
+                title={title}
+            />
+        </PageContainer>
+    );
+};
+export default DialogPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,108 @@
+import {
+    useLayoutEffect,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    EmbeddedMenu,
+    Button,
+    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,
+    HomeIcon
+} from "lucide-react-native";
+
+const EmbeddedMenuPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const menuRef = useRef<any>(null);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("embeddedMenu-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <View style={stylesheet.container}>
+            <EmbeddedMenu
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                buttons={[
+                    {
+                        title: localize("embeddedMenu-settings"),
+                        icon: ({
+                            color
+                        }) => <SettingsIcon color={color} />
+                    },
+                    {
+                        title: localize("embeddedMenu-home"),
+                        icon: ({
+                            color
+                        }) => <HomeIcon color={color} />
+                    }
+                ]}
+                id="embedded-menu-page-example"
+                ref={menuRef}
+            />
+            <PageContainer
+                scrollViewProps={{
+                    contentContainerStyle: stylesheet.scrollContent
+                }}
+                scrollViewStyle={[
+                    stylesheet.container
+                ]}
+                isWorkWithHeaderSpace={false}
+                isScrollable={true}
+            >
+                <View
+                    style={[
+                        stylesheet.contentContainer
+                    ]}
+                >
+                    <Text
+                        variant="bodyMediumSize"
+                        color="mid"
+                        style={{
+                            marginBottom: 20
+                        }}
+                    >
+                        {localize("embeddedMenu-desc")}
+                    </Text>
+                    <Button
+                        title={localize("embeddedMenu-openMenu")}
+                        onPress={() => menuRef.current?.open()}
+                        spreadBehaviour="stretch"
+                    />
+                </View>
+            </PageContainer>
+        </View>
+    );
+};
+export default EmbeddedMenuPage;

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

@@ -0,0 +1,17 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,131 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextInput,
+    Header,
+    Switch
+    ,
+    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";
+
+const HeaderPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Header Example");
+
+    const [
+        isGoBackEnable,
+        setIsGoBackEnable
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("header-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("header-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Header
+                        isWrapSafeareaContext={false}
+                        isGoBackEnable={isGoBackEnable}
+                        navigation={navigation}
+                        title={title}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("header-enterTitle")}
+                    title={localize("header-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <Switch
+                        title={localize("header-toggleGoBack")}
+                        onPress={() => setIsGoBackEnable(!isGoBackEnable)}
+                        isActive={isGoBackEnable}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default HeaderPage;

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

@@ -0,0 +1,17 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,320 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    HighlightButton,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Header,
+    Switch
+    ,
+    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 type {
+    IHighlightButtonProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<IHighlightButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "neutral",
+    "success",
+    "info",
+    "glass"
+];
+const SIZES: Array<IHighlightButtonProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
+const SPREAD_BEHAVIOURS: Array<IHighlightButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const SIZES_DATA = SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const HighlightButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isCustomPadding,
+        setIsCustomPadding
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        iconDirection,
+        setIconDirection
+    ] = useState<"left" | "right">("left");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("highlightButton-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("highlightButton-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <HighlightButton
+                        icon={
+                            showIcon
+                                ? ({
+                                    color,
+                                    size
+                                }) => (
+                                    <HomeIcon
+                                        color={colors.content.icon[color]}
+                                        size={size}
+                                    />
+                                )
+                                : undefined
+                        }
+                        title={
+                            title || localize("highlightButton-example")
+                        }
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        isCustomPadding={isCustomPadding}
+                        iconDirection={iconDirection}
+                        type={TYPES[typeIndex]}
+                        size={SIZES[sizeIndex]}
+                        isDisabled={isDisabled}
+                        isLoading={isLoading}
+                        onPress={() => {}}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("highlightButton-enterText")}
+                    title={localize("highlightButton-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IHighlightButtonProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize("highlightButton-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <HighlightButton
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("highlightButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IHighlightButtonProps["size"],
+                                );
+                                if (index !== -1) setSizeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            SIZES_DATA[sizeIndex] ? [SIZES_DATA[sizeIndex]] : []
+                        }
+                        title={localize("highlightButton-changeSize")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={SIZES_DATA}
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            onPress={() =>
+                                setIconDirection(
+                                    iconDirection === "left" ? "right" : "left",
+                                )
+                            }
+                            title={localize(
+                                "highlightButton-toggleIconDir",
+                            )}
+                            isActive={iconDirection === "right"}
+                        />
+                        <Switch
+                            title={localize(
+                                "highlightButton-toggleIcon",
+                            )}
+                            onPress={() => setShowIcon(!showIcon)}
+                            isActive={showIcon}
+                        />
+                        <Switch
+                            title={localize(
+                                "highlightButton-toggleLoading",
+                            )}
+                            onPress={() => setIsLoading(!isLoading)}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            title={localize(
+                                "highlightButton-toggleDisabled",
+                            )}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize(
+                                "highlightButton-toggleCustomPadding",
+                            )}
+                            onPress={() => setIsCustomPadding(!isCustomPadding)}
+                            isActive={isCustomPadding}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default HighlightButtonPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,141 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    Loading,
+    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 type {
+    ILoadingProps
+} from "ncore-ui-kit";
+
+const SIZES: Array<ILoadingProps["size"]> = [
+    16,
+    24,
+    32
+];
+
+const SIZES_DATA = SIZES.map((item) => ({
+    __title: String(item),
+    __key: String(item)
+}));
+
+const LoadingPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("loading-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("loading-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Loading size={SIZES[sizeIndex]} />
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = SIZES.indexOf(
+                                    Number(
+                                        selectedItems[0]!.__key,
+                                    ) as ILoadingProps["size"],
+                                );
+                                if (index !== -1) setSizeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            SIZES_DATA[sizeIndex] ? [SIZES_DATA[sizeIndex]] : []
+                        }
+                        title={localize("loading-changeSize")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={SIZES_DATA}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default LoadingPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,80 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    LocaleSwitcher,
+    PageContainer,
+    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";
+
+const LocaleSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-localeSwitcher")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("localeSwitcher-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-localeSwitcher")}
+                </Text>
+                <LocaleSwitcher />
+            </View>
+        </PageContainer>
+    );
+};
+export default LocaleSwitcherPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,136 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    MainHeader,
+    Header,
+    Switch
+    ,
+    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";
+
+const MainHeaderPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isWorkWithBackButton,
+        setIsWorkWithBackButton
+    ] = useState<boolean>(true);
+
+    const [
+        isWorkWithSeperator,
+        setIsWorkWithSeperator
+    ] = useState<boolean>(true);
+
+    const [
+        isWorkWithSticky,
+        setIsWorkWithSticky
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("mainHeader-title")}
+                    isGoBackEnable={isWorkWithBackButton}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                />
+            ),
+            headerShown: true
+        });
+    }, [isWorkWithBackButton]);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("mainHeader-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <MainHeader
+                        isWorkWithSafeAreaView={false}
+                        isWorkWithSeperator={isWorkWithSeperator}
+                        isWorkWithSticky={isWorkWithSticky}
+                        isWorkWithPortal={false}
+                    />
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <Switch
+                        title={localize("mainHeader-toggleGoBack")}
+                        onPress={() => setIsWorkWithBackButton(!isWorkWithBackButton)}
+                        isActive={isWorkWithBackButton}
+                    />
+                    <Switch
+                        title={localize("mainHeader-toggleSeperator")}
+                        onPress={() => setIsWorkWithSeperator(!isWorkWithSeperator)}
+                        isActive={isWorkWithSeperator}
+                    />
+                    <Switch
+                        title={localize("mainHeader-toggleSticky")}
+                        onPress={() => setIsWorkWithSticky(!isWorkWithSticky)}
+                        isActive={isWorkWithSticky}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default MainHeaderPage;

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

@@ -0,0 +1,17 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,107 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    MarkdownViewer,
+    PageContainer,
+    TextAreaInput,
+    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";
+
+const MarkdownViewerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        content,
+        setContent
+    ] = useState<string>(
+        "# Markdown Viewer\n\nThis is a **MarkdownViewer** component from *NCore UI Kit*.\n\n- It supports lists\n- And bold text",
+    );
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("markdownViewer-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("markdownViewer-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        minHeight: 120
+                    }}
+                >
+                    <MarkdownViewer content={content} />
+                </View>
+                <TextAreaInput
+                    placeholder={localize("markdownViewer-enterContent")}
+                    title={localize("markdownViewer-contentLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setContent}
+                    value={content}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default MarkdownViewerPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,109 @@
+import {
+    useLayoutEffect,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    Button,
+    Header,
+    Menu
+    ,
+    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 type {
+    IMenuRef
+} from "ncore-ui-kit";
+import {
+    SettingsIcon,
+    HomeIcon
+} from "lucide-react-native";
+
+const MenuPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const menuRef = useRef<IMenuRef>(null);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    isWrapSafeareaContext={false}
+                    title={localize("menu-title")}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("menu-desc")}
+                </Text>
+                <Button
+                    title={localize("menu-openMenu")}
+                    onPress={() => menuRef.current?.open()}
+                    spreadBehaviour="stretch"
+                />
+            </View>
+            <Menu
+                buttons={[
+                    {
+                        title: localize("menu-settings"),
+                        icon: ({
+                            color
+                        }) => <SettingsIcon color={color} />
+                    },
+                    {
+                        title: localize("menu-home"),
+                        icon: ({
+                            color
+                        }) => <HomeIcon color={color} />
+                    }
+                ]}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                id="menu-page-example"
+                ref={menuRef}
+            />
+        </PageContainer>
+    );
+};
+export default MenuPage;

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

@@ -0,0 +1,17 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,110 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    Header,
+    Button,
+    Modal,
+    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";
+
+const ModalPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-modal")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("modal-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-modal")}
+                </Text>
+                <Button
+                    onPress={() => setIsActive(true)}
+                    spreadBehaviour="stretch"
+                    title="Open Modal"
+                />
+                <Modal
+                    onClosed={() => setIsActive(false)}
+                    isActive={isActive}
+                    id="example-modal"
+                >
+                    <View
+                        style={stylesheet.modalContent}
+                    >
+                        <Text>
+                            This is an example modal content.
+                        </Text>
+                        <Button
+                            onPress={() => setIsActive(false)}
+                            spreadBehaviour="stretch"
+                            title="Close Modal"
+                            type="primary"
+                        />
+                    </View>
+                </Modal>
+            </View>
+        </PageContainer>
+    );
+};
+export default ModalPage;

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

@@ -0,0 +1,26 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    modalContent: {
+        backgroundColor: "white",
+        borderRadius: 10,
+        padding: 20,
+        gap: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,91 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    MonthSelector,
+    PageContainer,
+    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";
+
+const MonthSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-monthSelector")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("monthSelector-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-monthSelector")}
+                </Text>
+                <MonthSelector
+                    setIsSheetContentReady={setIsSheetContentReady}
+                    selectMultipleObject={() => {}}
+                    selectObject={() => {}}
+                    variant="single"
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default MonthSelectorPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,189 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NotificationIndicator,
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    INotificationIndicatorProps
+} from "ncore-ui-kit";
+import {
+    Bell as BellIcon
+} from "lucide-react-native";
+
+const TYPES: Array<INotificationIndicatorProps["type"]> = [
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const NotificationIndicatorPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        count,
+        setCount
+    ] = useState<number>(5);
+
+    const [
+        isShowCount,
+        setIsShowCount
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("notificationIndicator-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("notificationIndicator-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <NotificationIndicator
+                        type={TYPES[typeIndex]}
+                        isVisible={isShowCount}
+                        title={count}
+                    >
+                        <View
+                            style={{
+                                backgroundColor: "transparent",
+                                borderRadius: radiuses.form,
+                                padding: spaces.spacingSm
+                            }}
+                        >
+                            <BellIcon
+                                color={colors.content.icon.mid}
+                                size={32}
+                            />
+                        </View>
+                    </NotificationIndicator>
+                </View>
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as INotificationIndicatorProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize(
+                            "notificationIndicator-changeType",
+                        )}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <Button
+                        title={localize(
+                            "notificationIndicator-addCount",
+                        )}
+                        onPress={() => setCount((prev) => prev + 1)}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "notificationIndicator-toggleShowCount",
+                        )}
+                        onPress={() => setIsShowCount(!isShowCount)}
+                        isActive={isShowCount}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default NotificationIndicatorPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,323 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    NumericInput,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    INumericInputProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<INumericInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const VARIANTS: Array<INumericInputProps["variant"]> = [
+    "text",
+    "hidden"
+];
+const SPREAD_BEHAVIOURS: Array<INumericInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const VARIANTS_DATA = VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const NumericInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("numericInput-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("numericInput-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <NumericInput
+                        icon={
+                            showIcon
+                                ? ({
+                                    color,
+                                    size
+                                }) => (
+                                    <HomeIcon
+                                        color={colors.content.icon[color]}
+                                        size={size}
+                                    />
+                                )
+                                : undefined
+                        }
+                        title={
+                            title ||
+                            localize("numericInput-exampleTitle")
+                        }
+                        placeholder={localize(
+                            "numericInput-placeholder",
+                        )}
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        variant={VARIANTS[variantIndex]}
+                        isCleanEnabled={isCleanEnabled}
+                        type={TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isRequired={isRequired}
+                        isOptional={isOptional}
+                        onChangeText={setVal}
+                        value={val}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("numericInput-enterTitle")}
+                    title={localize("numericInput-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as INumericInputProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize("numericInput-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = VARIANTS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as INumericInputProps["variant"],
+                                );
+                                if (index !== -1) setVariantIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            VARIANTS_DATA[variantIndex]
+                                ? [VARIANTS_DATA[variantIndex]]
+                                : []
+                        }
+                        title={localize("numericInput-changeVariant")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={VARIANTS_DATA}
+                    />
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("numericInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("numericInput-toggleIcon")}
+                            onPress={() => setShowIcon(!showIcon)}
+                            isActive={showIcon}
+                        />
+                        <Switch
+                            title={localize(
+                                "numericInput-toggleDisabled",
+                            )}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize("numericInput-toggleClean")}
+                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                            isActive={isCleanEnabled}
+                        />
+                        <Switch
+                            title={localize(
+                                "numericInput-toggleRequired",
+                            )}
+                            onPress={() => setIsRequired(!isRequired)}
+                            isActive={isRequired}
+                        />
+                        <Switch
+                            title={localize(
+                                "numericInput-toggleOptional",
+                            )}
+                            onPress={() => setIsOptional(!isOptional)}
+                            isActive={isOptional}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default NumericInputPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,81 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    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";
+
+const PageContainerPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-pageContainer")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("pageContainer-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-pageContainer")}
+                </Text>
+                <Text>
+                    This entire page is already wrapped in a PageContainer!
+                </Text>
+            </View>
+        </PageContainer>
+    );
+};
+export default PageContainerPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,80 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PaletteSwitcher,
+    PageContainer,
+    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";
+
+const PaletteSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-paletteSwitcher")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("paletteSwitcher-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-paletteSwitcher")}
+                </Text>
+                <PaletteSwitcher />
+            </View>
+        </PageContainer>
+    );
+};
+export default PaletteSwitcherPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,237 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    RadioButton,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    IRadioButtonProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<IRadioButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<IRadioButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const RadioButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        isSelected,
+        setIsSelected
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("radioButton-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("radioButton-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <RadioButton
+                        title={
+                            title || localize("radioButton-exampleTitle")
+                        }
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        onPress={() => setIsSelected(!isSelected)}
+                        type={TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isChecked={isSelected}
+                        isLoading={isLoading}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("radioButton-enterTitle")}
+                    title={localize("radioButton-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IRadioButtonProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize("radioButton-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("radioButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize(
+                                "radioButton-toggleDisabled",
+                            )}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize("radioButton-toggleLoading")}
+                            onPress={() => setIsLoading(!isLoading)}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            title={localize(
+                                "radioButton-toggleSelected",
+                            )}
+                            onPress={() => setIsSelected(!isSelected)}
+                            isActive={isSelected}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default RadioButtonPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,181 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextInput,
+    RowCard,
+    Header,
+    Switch
+    ,
+    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 {
+    ChevronRight as ChevronRightIcon,
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const RowCardPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        showLeftIcon,
+        setShowLeftIcon
+    ] = useState<boolean>(true);
+
+    const [
+        showRightIcon,
+        setShowRightIcon
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("rowCard-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("rowCard-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <RowCard
+                        rightIcon={showRightIcon ? ({
+                            color,
+                            size
+                        }: {
+                                    color: string;
+                                    size: number;
+                                }) => (
+                            <ChevronRightIcon
+                                        color={
+                                    colors.content.icon[
+                                                color as keyof typeof colors.content.icon
+                                    ]
+                                }
+                                        size={size}
+                            />
+                        )
+                            : undefined
+                        }
+                        icon={showLeftIcon ? ({
+                            color,
+                            size
+                        }: {
+                                    color: string;
+                                    size: number;
+                                }) => (
+                            <HomeIcon
+                                        color={
+                                    colors.content.icon[
+                                                color as keyof typeof colors.content.icon
+                                    ]
+                                }
+                                        size={size}
+                            />
+                        )
+                            : undefined
+                        }
+                        title={title || localize("rowCard-exampleTitle")}
+                        onPress={() => {}}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("rowCard-enterTitle")}
+                    title={localize("rowCard-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <Switch
+                        title={localize("rowCard-toggleLeftIcon")}
+                        onPress={() => setShowLeftIcon(!showLeftIcon)}
+                        isActive={showLeftIcon}
+                    />
+                    <Switch
+                        title={localize("rowCard-toggleRightIcon")}
+                        onPress={() => setShowRightIcon(!showRightIcon)}
+                        isActive={showRightIcon}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default RowCardPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,295 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    ISelectBoxProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<ISelectBoxProps<unknown>["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<ISelectBoxProps<unknown>["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const SelectBoxPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isSearchable,
+        setIsSearchable
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isMultiSelect,
+        setIsMultiSelect
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("selectBox-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("selectBox-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <SelectBox
+                        data={[
+                            {
+                                __title: "Option 1",
+                                __key: "1"
+                            },
+                            {
+                                __title: "Option 2",
+                                __key: "2"
+                            },
+                            {
+                                __title: "Option 3",
+                                __key: "3"
+                            },
+                            {
+                                __title: "Option 4",
+                                __key: "4"
+                            }
+                        ]}
+                        title={
+                            title || localize("selectBox-exampleTitle")
+                        }
+                        placeholder={localize("selectBox-placeholder")}
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        titleExtractor={(item) => item.__title}
+                        maxChoice={isMultiSelect ? 3 : 1}
+                        keyExtractor={(item) => item.__key}
+                        isCleanEnabled={isCleanEnabled}
+                        isSearchable={isSearchable}
+                        type={TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isOptional={isOptional}
+                        subTitle={subTitle}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("selectBox-enterTitle")}
+                    title={localize("selectBox-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("selectBox-enterSubTitle")}
+                    title={localize("selectBox-subTitleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    onChangeText={setSubTitle}
+                    spreadBehaviour="stretch"
+                    value={subTitle}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as ISelectBoxProps<unknown>["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize("selectBox-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("selectBox-toggleDisabled")}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize(
+                                "selectBox-toggleSearchable",
+                            )}
+                            onPress={() => setIsSearchable(!isSearchable)}
+                            isActive={isSearchable}
+                        />
+                        <Switch
+                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                            title={localize("selectBox-toggleClean")}
+                            isActive={isCleanEnabled}
+                        />
+                        <Switch
+                            title={localize(
+                                "selectBox-toggleMultiSelect",
+                            )}
+                            onPress={() => setIsMultiSelect(!isMultiSelect)}
+                            isActive={isMultiSelect}
+                        />
+                        <Switch
+                            title={localize("selectBox-toggleOptional")}
+                            onPress={() => setIsOptional(!isOptional)}
+                            isActive={isOptional}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default SelectBoxPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,119 @@
+import {
+    useLayoutEffect,
+    useState,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    SelectSheet,
+    Header,
+    Button,
+    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 type {
+    IBottomSheetRef
+} from "ncore-ui-kit";
+
+const SelectSheetPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const bottomSheetRef = useRef<IBottomSheetRef>(null);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-selectSheet")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("selectSheet-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-selectSheet")}
+                </Text>
+                <Button
+                    onPress={() => setIsActive(true)}
+                    spreadBehaviour="stretch"
+                    title="Open Select Sheet"
+                />
+                <SelectSheet
+                    keyExtractor={(item: { __key: string }) => item.__key}
+                    selectObject={() => {}}
+                    setSearchText={() => {}}
+                    setIsLoading={() => {}}
+                    isWorkWithRealtime={true}
+                    selectBoxKey="example"
+                    bottomSheetRef={bottomSheetRef}
+                    setIsMoreLoading={() => {}}
+                    setIsActive={setIsActive}
+                    cancel={() => setIsActive(false)}
+                    ok={() => setIsActive(false)}
+                    mainSelectedItems={[]}
+                    cleanAll={() => {}}
+                    selectAll={() => {}}
+                    searchedData={[]}
+                    searchText=""
+                    isLoading={false}
+                    isMoreLoading={false}
+                    isActive={isActive}
+                    data={[]}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default SelectSheetPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,106 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    Seperator,
+    TextInput,
+    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";
+
+const SeperatorPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Or");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("seperator-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("seperator-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Seperator title={title} />
+                </View>
+                <TextInput
+                    placeholder={localize("seperator-enterTitle")}
+                    title={localize("seperator-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default SeperatorPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,148 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextInput,
+    SiteLogo,
+    Header,
+    Switch
+    ,
+    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";
+
+const SiteLogoPage = () => {
+    const {
+        activeTheme,
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isShowIcon,
+        setIsShowIcon
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("siteLogo-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("siteLogo-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <SiteLogo
+                        imageUrl={
+                            activeTheme.indexOf("dark") !== -1
+                                ? "http://ncore.nibgat.space/assets/images/darklogo.png"
+                                : "http://ncore.nibgat.space/assets/images/ncorelogo.png"
+                        }
+                        subTitle={
+                            subTitle ||
+                            localize("siteLogo-exampleSubTitle")
+                        }
+                        title={
+                            title || localize("siteLogo-exampleTitle")
+                        }
+                        isShowIcon={isShowIcon}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("siteLogo-enterTitle")}
+                    title={localize("siteLogo-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("siteLogo-enterSubTitle")}
+                    title={localize("siteLogo-subTitleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    onChangeText={setSubTitle}
+                    spreadBehaviour="stretch"
+                    value={subTitle}
+                />
+                <Switch
+                    title={localize("siteLogo-toggleIcon")}
+                    onPress={() => setIsShowIcon(!isShowIcon)}
+                    isActive={isShowIcon}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default SiteLogoPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,91 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    SnackBar,
+    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";
+
+const SnackBarPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-snackBar")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("snackBar-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-snackBar")}
+                </Text>
+
+                <View style={{
+                    position: "relative",
+                    height: 200
+                }}>
+                    <SnackBar
+                        title="This is an example SnackBar"
+                        subTitle="This is an example subtitle"
+                        type="primary"
+                        id="example-snackbar"
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default SnackBarPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,164 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    StateCard,
+    TextInput,
+    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 {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const StateCardPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        value,
+        setValue
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("stateCard-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("stateCard-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <StateCard
+                        icon={({
+                            color,
+                            size
+                        }: {
+                            color: string;
+                            size: number;
+                        }) => (
+                            <HomeIcon
+                                color={
+                                    colors.content.icon[
+                                        color as keyof typeof colors.content.icon
+                                    ]
+                                }
+                                size={size}
+                            />
+                        )}
+                        subTitle={
+                            subTitle ||
+                            localize("stateCard-exampleSubTitle")
+                        }
+                        title={
+                            title || localize("stateCard-exampleTitle")
+                        }
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("stateCard-enterTitle")}
+                    title={localize("stateCard-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("stateCard-enterSubTitle")}
+                    title={localize("stateCard-subTitleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    onChangeText={setSubTitle}
+                    spreadBehaviour="stretch"
+                    value={subTitle}
+                />
+                <TextInput
+                    placeholder={localize("stateCard-enterValue")}
+                    title={localize("stateCard-valueLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setValue}
+                    value={value}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default StateCardPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,121 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextInput,
+    Sticker,
+    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 {
+    Star as StarIcon
+} from "lucide-react-native";
+
+const StickerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("sticker-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("sticker-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Sticker
+                        icon={({
+                            color,
+                            size
+                        }) => (
+                            <StarIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />
+                        )}
+                        title={title || localize("sticker-exampleTitle")}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("sticker-enterTitle")}
+                    title={localize("sticker-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default StickerPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,208 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    ISwitchProps
+} from "ncore-ui-kit";
+
+const SPREAD_BEHAVIOURS: Array<ISwitchProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const SwitchPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("switch-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("switch-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <Switch
+                        title={title || localize("switch-exampleTitle")}
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        onPress={() => setIsActive(!isActive)}
+                        isDisabled={isDisabled}
+                        isLoading={isLoading}
+                        subTitle={subTitle}
+                        isActive={isActive}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("switch-enterTitle")}
+                    title={localize("switch-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <TextInput
+                    placeholder={localize("switch-enterSubTitle")}
+                    title={localize("switch-subTitleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    onChangeText={setSubTitle}
+                    spreadBehaviour="stretch"
+                    value={subTitle}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("switch-toggleDisabled")}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize("switch-toggleLoading")}
+                            onPress={() => setIsLoading(!isLoading)}
+                            isActive={isLoading}
+                        />
+                        <Switch
+                            title={localize("switch-toggleActive")}
+                            onPress={() => setIsActive(!isActive)}
+                            isActive={isActive}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default SwitchPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

example/src/pages/text/index.tsx → example/src/pages/components/text/index.tsx

@@ -66,6 +66,15 @@ const TextPage = () => {
                 stylesheet.contentContainer
             ]}
         >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={{
+                    marginBottom: 20
+                }}
+            >
+                {localize("text-desc")}
+            </Text>
             <View
                 style={{
                     borderColor: colors.content.border.subtle,

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

@@ -0,0 +1,261 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TextAreaInput,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    ITextAreaInputProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<ITextAreaInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<ITextAreaInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const TextAreaInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("textAreaInput-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("textAreaInput-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <TextAreaInput
+                        title={
+                            title ||
+                            localize("textAreaInput-exampleTitle")
+                        }
+                        placeholder={localize(
+                            "textAreaInput-placeholder",
+                        )}
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        isCleanEnabled={isCleanEnabled}
+                        type={TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isRequired={isRequired}
+                        isOptional={isOptional}
+                        onChangeText={setVal}
+                        value={val}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("textAreaInput-enterTitle")}
+                    title={localize("textAreaInput-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as ITextAreaInputProps["type"],
+                                );
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={
+                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                        }
+                        title={localize("textAreaInput-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) =>
+                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                    ? 0
+                                    : prev + 1,
+                            );
+                        }}
+                        title={
+                            `${localize("textAreaInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                        }
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize(
+                                "textAreaInput-toggleDisabled",
+                            )}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            title={localize("textAreaInput-toggleClean")}
+                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                            isActive={isCleanEnabled}
+                        />
+                        <Switch
+                            title={localize(
+                                "textAreaInput-toggleRequired",
+                            )}
+                            onPress={() => setIsRequired(!isRequired)}
+                            isActive={isRequired}
+                        />
+                        <Switch
+                            title={localize(
+                                "textAreaInput-toggleOptional",
+                            )}
+                            onPress={() => setIsOptional(!isOptional)}
+                            isActive={isOptional}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default TextAreaInputPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,297 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch
+    ,
+    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 type {
+    ITextInputProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<ITextInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const VARIANTS: Array<ITextInputProps["variant"]> = [
+    "text",
+    "hidden"
+];
+const SPREAD_BEHAVIOURS: Array<ITextInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const VARIANTS_DATA = VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const TextInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("textInput-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[stylesheet.container]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View style={[stylesheet.contentContainer]}>
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("textInput-desc")}
+                </Text>
+                <View
+                    style={{
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: 120
+                    }}
+                >
+                    <TextInput
+                        icon={
+                            showIcon
+                                ? ({
+                                    color,
+                                    size
+                                }) => (
+                                    <HomeIcon
+                                        color={colors.content.icon[color]}
+                                        size={size}
+                                    />
+                                )
+                                : undefined
+                        }
+                        title={
+                            title || localize("textInput-exampleTitle")
+                        }
+                        placeholder={localize("textInput-placeholder")}
+                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                        variant={VARIANTS[variantIndex]}
+                        isCleanEnabled={isCleanEnabled}
+                        type={TYPES[typeIndex]}
+                        isDisabled={isDisabled}
+                        isRequired={isRequired}
+                        isOptional={isOptional}
+                        onChangeText={setVal}
+                        value={val}
+                    />
+                </View>
+                <TextInput
+                    placeholder={localize("textInput-enterTitle")}
+                    title={localize("textInput-titleLabel")}
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                    spreadBehaviour="stretch"
+                    onChangeText={setTitle}
+                    value={title}
+                />
+                <View
+                    style={{
+                        justifyContent: "space-between",
+                        gap: spaces.spacingMd,
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        width: "100%"
+                    }}
+                >
+                    <SelectBox
+                        initialSelectedItems={TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []}
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = TYPES.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["type"]);
+
+                                if (index !== -1) setTypeIndex(index);
+                            }
+                        }}
+                        title={localize("textInput-changeType")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={TYPES_DATA}
+                    />
+                    <SelectBox
+                        onChange={(selectedItems) => {
+                            if (selectedItems.length > 0) {
+                                const index = VARIANTS.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["variant"]);
+
+                                if (index !== -1) setVariantIndex(index);
+                            }
+                        }}
+                        initialSelectedItems={VARIANTS_DATA[variantIndex] ? [VARIANTS_DATA[variantIndex]] : []}
+                        title={localize("textInput-changeVariant")}
+                        titleExtractor={(item) => item.__title}
+                        keyExtractor={(item) => item.__key}
+                        spreadBehaviour="free"
+                        data={VARIANTS_DATA}
+                    />
+                    <Button
+                        onPress={() => {
+                            setSpreadIndex((prev) => prev + 1 > SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
+                        }}
+                        title={`${localize("textInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`}
+                        spreadBehaviour="free"
+                    />
+                    <View
+                        style={{
+                            justifyContent: "space-between",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            width: "100%"
+                        }}
+                    >
+                        <Switch
+                            title={localize("textInput-toggleIcon")}
+                            onPress={() => setShowIcon(!showIcon)}
+                            isActive={showIcon}
+                        />
+                        <Switch
+                            title={localize("textInput-toggleDisabled")}
+                            onPress={() => setIsDisabled(!isDisabled)}
+                            isActive={isDisabled}
+                        />
+                        <Switch
+                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                            title={localize("textInput-toggleClean")}
+                            isActive={isCleanEnabled}
+                        />
+                        <Switch
+                            title={localize("textInput-toggleRequired")}
+                            onPress={() => setIsRequired(!isRequired)}
+                            isActive={isRequired}
+                        />
+                        <Switch
+                            title={localize("textInput-toggleOptional")}
+                            onPress={() => setIsOptional(!isOptional)}
+                            isActive={isOptional}
+                        />
+                    </View>
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default TextInputPage;

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

@@ -0,0 +1,18 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,80 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    ThemeSwitcher,
+    PageContainer,
+    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";
+
+const ThemeSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-themeSwitcher")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("themeSwitcher-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-themeSwitcher")}
+                </Text>
+                <ThemeSwitcher />
+            </View>
+        </PageContainer>
+    );
+};
+export default ThemeSwitcherPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,93 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    TimeSelector,
+    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";
+
+const TimeSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-timeSelector")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("timeSelector-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-timeSelector")}
+                </Text>
+
+                <TimeSelector
+                    setIsSheetContentReady={setIsSheetContentReady}
+                    selectMultipleObject={() => {}}
+                    selectObject={() => {}}
+                    pickerType="time"
+                    variant="single"
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default TimeSelectorPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,91 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    Header,
+    Toast,
+    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";
+
+const ToastPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-toast")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("toast-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-toast")}
+                </Text>
+
+                <View style={{
+                    position: "relative",
+                    height: 200
+                }}>
+                    <Toast
+                        title="This is an example Toast"
+                        subTitle="This is an example subtitle"
+                        type="success"
+                        id="example-toast"
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default ToastPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,72 @@
+import {
+    ScrollView,
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    Text
+} from "ncore-ui-kit";
+
+const WebScrollbar = () => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    return <PageContainer
+        isScrollable={true}
+        scrollViewProps={{
+            showsVerticalScrollIndicator: true
+        }}
+    >
+        <Text
+            variant="headlineSmallSize"
+            style={{
+                marginBottom: 20
+            }}
+        >
+            {localize("webScrollbar-title")}
+        </Text>
+        <Text
+            variant="bodyMediumSize"
+            color="mid"
+            style={{
+                marginBottom: 20
+            }}
+        >
+            {localize("webScrollbar-desc")}
+        </Text>
+        <ScrollView
+            style={{
+                backgroundColor: colors.content.container.default,
+                borderColor: colors.content.container.mid,
+                borderRadius: 10,
+                borderWidth: 1,
+                height: 300
+            }}
+        >
+            {Array.from({
+                length: 30
+            }).map((_, index) => (
+                <View
+                    key={index}
+                    style={{
+                        padding: 15,
+                        borderBottomWidth: 1,
+                        borderBottomColor: colors.content.container.mid
+                    }}
+                >
+                    <Text>
+                        {localize("webScrollbar-item")} {index + 1}
+                    </Text>
+                </View>
+            ))}
+        </ScrollView>
+    </PageContainer>;
+};
+export default WebScrollbar;

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

@@ -0,0 +1,91 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    PageContainer,
+    YearSelector,
+    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";
+
+const YearSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("components-yearSelector")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: 20
+                    }}
+                >
+                    {localize("yearSelector-desc")}
+                </Text>
+                <Text
+                    style={stylesheet.title}
+                    variant="titleMediumSize"
+                >
+                    {localize("components-yearSelector")}
+                </Text>
+                <YearSelector
+                    setIsSheetContentReady={setIsSheetContentReady}
+                    selectMultipleObject={() => {}}
+                    selectObject={() => {}}
+                    variant="single"
+                />
+            </View>
+        </PageContainer>
+    );
+};
+export default YearSelectorPage;

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

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
+    },
+    title: {
+        marginBottom: 20
+    }
+});
+export default stylesheet;

example/src/pages/coreFeatures/localeExamples/index.tsx

@@ -0,0 +1,223 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    LocaleSwitcher,
+    PageContainer,
+    Button,
+    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 {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const LocaleExamples = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize,
+        activeLocale
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    navigation={navigation as unknown as NCoreUIKit.Navigation}
+                    title={localize("localeExamples-title")}
+                    isWrapSafeareaContext={false}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("localeExamples-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("localeExamples-desc")}
+        </Text>
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginBottom: spaces.spacingLg,
+                marginTop: spaces.spacingXl
+            }}
+        >
+            {localize("localeExamples-languageSwitcher")}
+        </Text>
+        <View
+            style={{
+                flexDirection: "row",
+                gap: spaces.spacingMd
+            }}
+        >
+            <LocaleSwitcher/>
+        </View>
+
+        <View
+            style={{
+                backgroundColor: colors.content.container.subtle,
+                marginTop: spaces.spacingLg,
+                padding: spaces.spacingLg,
+                borderRadius: 12
+            }}
+        >
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("localeExamples-localizedTexts")}
+            </Text>
+
+            <Text
+                color="mid"
+                style={{
+                    marginBottom: spaces.spacingSm
+                }}
+            >
+                {localize("localeExamples-currentLanguage")}<Text
+                    color="high"
+                    variant="labelLargeSize"
+                >
+                    {activeLocale}
+                </Text>
+            </Text>
+
+            <View
+                style={{
+                    backgroundColor: colors.content.container.default,
+                    padding: spaces.spacingMd,
+                    gap: spaces.spacingMd,
+                    borderRadius: 8
+                }}
+            >
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "hello-world" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("hello-world")}
+                    </Text>
+                </View>
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "menu" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("menu")}
+                    </Text>
+                </View>
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "installation" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("installation")}
+                    </Text>
+                </View>
+            </View>
+        </View>
+
+        <View
+            style={{
+                justifyContent: "space-between",
+                marginTop: spaces.spacingXl,
+                flexDirection: "row"
+            }}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ThemeExamples"
+                    });
+                }}
+                title={localize("themeExamples-title")}
+            />
+
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "TypesOverride"
+                    });
+                }}
+                title={localize("typesOverride-title")}
+                iconDirection="right"
+            />
+        </View>
+    </PageContainer>;
+};
+export default LocaleExamples;

example/src/pages/coreFeatures/themeExamples/index.tsx

@@ -0,0 +1,277 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PaletteSwitcher,
+    ThemeSwitcher,
+    PageContainer,
+    Button,
+    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 {
+    ChevronRightIcon,
+    ChevronLeftIcon
+} from "lucide-react-native";
+
+const ThemeExamples = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("themeExamples-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation as unknown as NCoreUIKit.Navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("themeExamples-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("themeExamples-desc")}
+        </Text>
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginBottom: spaces.spacingLg,
+                marginTop: spaces.spacingXl
+            }}
+        >
+            {localize("themeExamples-switchers")}
+        </Text>
+        <View
+            style={{
+                flexDirection: "row",
+                gap: spaces.spacingMd
+            }}
+        >
+            <ThemeSwitcher/>
+            <PaletteSwitcher/>
+        </View>
+        <View
+            style={{
+                backgroundColor: colors.content.container.subtle,
+                marginTop: spaces.spacingLg,
+                padding: spaces.spacingLg,
+                borderRadius: 12
+            }}
+        >
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("themeExamples-typographyExamples")}
+            </Text>
+            <Text
+                variant="displayLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-displayLarge")}
+            </Text>
+            <Text
+                variant="headlineLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-headlineLarge")}
+            </Text>
+            <Text
+                variant="titleLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-titleLarge")}
+            </Text>
+            <Text
+                variant="bodyLargeSize"
+                color="mid"
+            >
+                {localize("themeExamples-bodyLarge")}
+            </Text>
+            <Text
+                variant="labelLargeSize"
+                color="mid"
+            >
+                {localize("themeExamples-labelLarge")}
+            </Text>
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd,
+                    marginTop: spaces.spacingXl
+                }}
+            >
+                {localize("themeExamples-colorExamples")}
+            </Text>
+            <View
+                style={{
+                    gap: spaces.spacingSm,
+                    flexDirection: "row",
+                    flexWrap: "wrap"
+                }}
+            >
+                <View style={{
+                    backgroundColor: colors.content.container.primary,
+                    padding: spaces.spacingMd,
+                    borderRadius: 8
+                }}>
+                    <Text
+                        style={{
+                            color: colors.content.text.onPrimary
+                        }}
+                    >
+                        {localize("themeExamples-primary")}
+                    </Text>
+                </View>
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.danger,
+                        padding: spaces.spacingMd,
+                        borderRadius: 8
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.danger
+                        }}
+                    >
+                        {localize("themeExamples-danger")}
+                    </Text>
+                </View>
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.warning,
+                        padding: spaces.spacingMd,
+                        borderRadius: 8
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.warning
+                        }}
+                    >
+                        {localize("themeExamples-warning")}
+                    </Text>
+                </View>
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.success,
+                        padding: spaces.spacingMd,
+                        borderRadius: 8
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.success
+                        }}
+                    >
+                        {localize("themeExamples-success")}
+                    </Text>
+                </View>
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.info,
+                        padding: spaces.spacingMd,
+                        borderRadius: 8
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.info
+                        }}
+                    >
+                        {localize("themeExamples-info")}
+                    </Text>
+                </View>
+            </View>
+        </View>
+        <View
+            style={{
+                justifyContent: "space-between",
+                marginTop: spaces.spacingXl,
+                flexDirection: "row"
+            }}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("toolsUsage-title")}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ToolsUsage"
+                    });
+                }}
+            />
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("localeExamples-title")}
+                iconDirection="right"
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "LocaleExamples"
+                    });
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+
+export default ThemeExamples;

example/src/pages/coreFeatures/toolsUsage/index.tsx

@@ -0,0 +1,255 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    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 {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const ToolsUsage = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("toolsUsage-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation as unknown as NCoreUIKit.Navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    const codeTheme = `import { NCoreUIKitTheme } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    // Access current theme colors, spaces, and active preferences
+    const {
+        colors,
+        spaces,
+        activeTheme,
+        activePalette
+    } = NCoreUIKitTheme.useContext();
+
+    return (
+        <View style={{ backgroundColor: colors.content.container.default, padding: spaces.spacingMd, borderRadius: 10 }}>
+            <Text style={{ color: colors.content.text.high }}>Current Theme: {activeTheme}</Text>
+        </View>
+    );
+};`;
+
+    const codeLocale = `import { NCoreUIKitLocalize } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    // Access current localization translations and active language
+    const {
+        localize,
+        activeLocale
+    } = NCoreUIKitLocalize.useContext();
+
+    return (
+        <Text>
+            {localize("hello-world")} - Current: {activeLocale}
+        </Text>
+    );
+};`;
+
+    const codeToast = `import { NCoreUIKitToast } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    const { showToast } = NCoreUIKitToast.useContext();
+
+    const handlePress = () => {
+        showToast({
+            title: "Success",
+            content: "Action completed successfully!",
+            variant: "success",
+            duration: 3000
+        });
+    };
+
+    return <Button title="Show Toast" onPress={handlePress} />;
+};`;
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("toolsUsage-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("toolsUsage-desc")}
+        </Text>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitTheme.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreThemeDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeTheme}
+                language="tsx"
+            />
+        </View>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitLocalize.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreLocalizeDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeLocale}
+                language="tsx"
+            />
+        </View>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitToast.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreToastDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeToast}
+                language="tsx"
+            />
+        </View>
+
+        <View
+            style={{
+                marginTop: spaces.spacingXl,
+                flexDirection: "row",
+                justifyContent: "space-between"
+            }}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("implementation")}
+                onPress={() => {
+                    navigation.navigate("GettingStarted", {
+                        screen: "Implementation"
+                    });
+                }}
+            />
+
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("themeExamples-title")}
+                iconDirection="right"
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ThemeExamples"
+                    });
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+
+export default ToolsUsage;

example/src/pages/coreFeatures/typesOverride/index.tsx

@@ -0,0 +1,210 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    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 {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const codeGlobalDts = `import "ncore-ui-kit";
+
+// Kendi projenizin kök dizinine global.d.ts oluşturun.
+// Ardından NCoreUIKit tiplerini extend edin.
+declare module "ncore-ui-kit" {
+    export namespace NCoreUIKit {
+        export type ThemeKey = "dark" | "light";
+        export type PaletteKey = "default" | "red" | "green";
+        export type LocalesKey = "tr-TR" | "en-US";
+
+        export interface ThemeColors {
+            // Theme colors override here if needed
+            myCustomColor: string;
+        }
+
+        export interface LanguageObject {
+            translations: {
+                "welcome-msg": string;
+                "submit-btn": string;
+                // Add your project's custom keys here
+            }
+        }
+    }
+}`;
+
+const codeTsConfig = `{
+  "compilerOptions": {
+    "typeRoots": [
+        "./node_modules/@types",
+        "./global.d.ts"
+    ]
+  }
+}`;
+
+const TypesOverride = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("typesOverride-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation as unknown as NCoreUIKit.Navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("typesOverride-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("typesOverride-desc")}
+        </Text>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            global.d.ts
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("typesOverride-globalDtsDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeGlobalDts}
+                language="tsx"
+            />
+        </View>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            tsconfig.json
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("typesOverride-tsconfigDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeTsConfig}
+                language="json"
+            />
+        </View>
+
+        <View
+            style={{
+                marginTop: spaces.spacingXl,
+                flexDirection: "row",
+                justifyContent: "space-between"
+            }}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("localeExamples-title")}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "LocaleExamples"
+                    });
+                }}
+            />
+
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("components")}
+                iconDirection="right"
+                onPress={() => {
+                    navigation.navigate("Components", {
+                        screen: "Text"
+                    });
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+
+export default TypesOverride;

example/src/pages/home/index.tsx

@@ -10,6 +10,8 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    Seperator,
+    Button,
     Text
 } from "ncore-ui-kit";
 import {
@@ -23,8 +25,9 @@ import packageJSON from "../../../../package.json";
 
 const Home = () => {
     const {
-        colors,
-        spaces
+        activeTheme,
+        spaces,
+        colors
     } = NCoreUIKitTheme.useContext();
 
     const {
@@ -39,12 +42,14 @@ const Home = () => {
         });
     }, []);
 
+    const isDarkTheme = activeTheme.indexOf("dark") !== -1;
+
     return <PageContainer
         scrollViewStyle={stylesheet.container}
         isScrollable={true}
         scrollViewProps={{
             showsHorizontalScrollIndicator: false,
-            showsVerticalScrollIndicator: false,
+            showsVerticalScrollIndicator: true,
             contentContainerStyle: {
                 backgroundColor: colors.content.container.default,
                 ...stylesheet.contentContainer
@@ -61,7 +66,7 @@ const Home = () => {
         >
             <Image
                 source={{
-                    uri: "https://ncore.nibgat.space/assets/images/ncorelogo.png"
+                    uri: isDarkTheme ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "https://ncore.nibgat.space/assets/images/ncorelogo.png"
                 }}
                 style={{
                     height: 300,
@@ -78,7 +83,7 @@ const Home = () => {
                 {localize("ncore-design-system")}
             </Text>
             <Text
-                variant="headlineLargeSize"
+                variant="headlineSmallSize"
                 style={{
                     marginBottom: spaces.spacingLg,
                     textAlign: "center"
@@ -87,7 +92,6 @@ const Home = () => {
                 {localize("ui-kit-library")}
             </Text>
             <Text
-                variant="bodyLargeSize"
                 style={{
                     marginBottom: spaces.spacingMd,
                     textAlign: "center"
@@ -95,14 +99,25 @@ const Home = () => {
             >
                 {localize("ncore-about")}
             </Text>
+            <Seperator />
             <Text
+                variant="bodySmallSize"
                 color="low"
                 style={{
-                    marginBottom: spaces.spacingMd
+                    marginBottom: spaces.spacingMd,
+                    marginTop: spaces.spacingMd
                 }}
             >
                 {localize("version")}: {packageJSON.version}
             </Text>
+            <Button
+                spreadBehaviour="free"
+                title={localize("getting-started")}
+                size="small"
+                onPress={() => {
+                    navigation.navigate("GettingStarted");
+                }}
+            />
         </View>
     </PageContainer>;
 };

example/src/pages/implementation/index.tsx

@@ -0,0 +1,169 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    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 {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const Implementation = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("implementation-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    const exampleCode = `import {
+    type NCoreUIKitConfig,
+    setupNCoreUIKit,
+    Host
+} from "ncore-ui-kit";
+
+// Kendi temanızı ve dil dosyanızı dahil edin
+import defaultLocaleJSON from "./variants/locales/default.json";
+import defaultThemeJSON from "./variants/themes/default.json";
+
+// NCore konfigürasyonunu oluşturun
+const NCoreConfig: NCoreUIKitConfig = {
+    projectThemes: defaultThemeJSON as NCoreUIKit.Palette,
+    initialSelectedGapPropagation: "spacious",
+    projectLocales: defaultLocaleJSON,
+    initialSelectedPalette: "nibgat",
+    initialSelectedTheme: "light"
+};
+
+// NCoreUIKitBase nesnesini ayağa kaldırın
+const NCoreUIKitBase = setupNCoreUIKit(NCoreConfig);
+
+const App = () => {
+    return <NCoreUIKitBase.Provider>
+        <Host name="main-header">
+            {/* Sayfalarınız veya Navigasyon yapınız burada yer almalı */}
+        </Host>
+    </NCoreUIKitBase.Provider>;
+};
+export default App;`;
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={{
+                padding: spaces.spacingMd,
+                width: "100%"
+            }}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("implementation-desc")}
+            </Text>
+
+            <View
+                style={{
+                    backgroundColor: colors.content.container.default,
+                    borderColor: colors.content.border.subtle,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    padding: spaces.spacingMd,
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text variant="headlineSmallSize">{localize("your-project-main-directory")}/src/index.tsx</Text>
+                <CodeViewer
+                    code={exampleCode}
+                    language="tsx"
+                />
+            </View>
+
+            <View
+                style={{
+                    justifyContent: "space-between",
+                    marginTop: spaces.spacingMd,
+                    flexDirection: "row"
+                }}
+            >
+                <Button
+                    icon={({
+                        color,
+                        size
+                    }) => {
+                        return <ChevronLeftIcon
+                            color={colors.content.icon[color]}
+                            size={size + 3}
+                        />;
+                    }}
+                    title={localize("installation")}
+                    iconDirection="left"
+                    onPress={() => {
+                        navigation.navigate("GettingStarted", {
+                            screen: "Installation"
+                        });
+                    }}
+                />
+                <Button
+                    icon={({
+                        color,
+                        size
+                    }) => {
+                        return <ChevronRightIcon
+                            color={colors.content.icon[color]}
+                            size={size + 3}
+                        />;
+                    }}
+                    title={localize("coreFeatures")}
+                    iconDirection="right"
+                    onPress={() => {
+                        navigation.navigate("CoreFeatures", {
+                            screen: "ToolsUsage"
+                        });
+                    }}
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default Implementation;

example/src/pages/installation/index.tsx

@@ -0,0 +1,148 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    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 {
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const Installation = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => (
+                <Header
+                    title={localize("installation-title")}
+                    isWrapSafeareaContext={false}
+                    navigation={navigation}
+                    isGoBackEnable={true}
+                />
+            ),
+            headerShown: true
+        });
+    }, []);
+
+    return (
+        <PageContainer
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={{
+                    padding: spaces.spacingMd,
+                    width: "100%"
+                }}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={{
+                        marginBottom: spaces.spacingMd
+                    }}
+                >
+                    {localize("installation-desc")}
+                </Text>
+
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.default,
+                        borderColor: colors.content.border.subtle,
+                        borderRadius: 10,
+                        borderWidth: 1,
+                        padding: spaces.spacingMd,
+                        marginBottom: spaces.spacingMd
+                    }}
+                >
+                    <Text variant="headlineSmallSize">{localize("installation-installationTitle")}</Text>
+                    <CodeViewer
+                        code={"yarn add ncore-ui-kit"}
+                        language="bash"
+                    />
+                </View>
+
+                <View
+                    style={{
+                        backgroundColor: colors.content.container.default,
+                        borderColor: colors.content.border.subtle,
+                        borderRadius: 10,
+                        borderWidth: 1,
+                        padding: spaces.spacingMd,
+                        marginBottom: spaces.spacingMd
+                    }}
+                >
+                    <Text variant="headlineSmallSize">{localize("installation-peerDepsTitle")}</Text>
+                    <Text
+                        variant="bodyMediumSize"
+                        color="mid"
+                        style={{
+                            marginBottom: 10,
+                            marginTop: 10
+                        }}
+                    >
+                        {localize("installation-peerDepsDesc")}
+                    </Text>
+                    <CodeViewer
+                        code="yarn add @react-native-clipboard/clipboard lucide-react-native moment ncore-context react-native-safe-area-context react-native-svg rrule"
+                        language="bash"
+                    />
+                </View>
+
+                <View
+                    style={{
+                        flexDirection: "row",
+                        justifyContent: "flex-end",
+                        marginTop: spaces.spacingMd
+                    }}
+                >
+                    <Button
+                        icon={({
+                            color,
+                            size
+                        }) => {
+                            return <ChevronRightIcon
+                                color={colors.content.icon[color]}
+                                size={size + 3}
+                            />;
+                        }}
+                        title={localize("next")}
+                        iconDirection="right"
+                        onPress={() => {
+                            navigation.navigate("GettingStarted", {
+                                screen: "Implementation"
+                            });
+                        }}
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    );
+};
+export default Installation;

example/src/variants/locales/default.json

@@ -1,58 +1,732 @@
 [
     {
-        "locale": "tr-TR",
-        "isRTL": false,
         "translations": {
             "ncore-about": "NCore, başta NİBGAT® ve NİBGAT® | Topluluk olmak üzere herkes için geliştirilmiş bir tasarım sistemi ve bileşen kütüphanesidir. Hızlı geliştirme süreçleri ve yüksek stabilizasyon ile şık sistemler üretmek üzere tasarlanmıştır.",
+            "typesOverride-globalDtsDesc": "TypeScript projelerinde NCore UI Kit kütüphanesini kullanırken, temanızdaki veya dil dosyanızdaki özel anahtarları TypeScript'e tanıtmak için global.d.ts kullanmanız gerekir.",
+            "toolsUsage-ncoreThemeDesc": "Tema değerlerine dinamik olarak erişim sağlar, prop drilling gerektirmez. Renkleri ve boşlukları global olarak kullanabilirsiniz.",
+            "installation-peerDepsDesc": "Aşağıdaki paketlerin projenizde kurulu olması gereklidir. Geliştirme ortamınıza uygun olan komut ile (yarn/npm) kurabilirsiniz.",
+            "pageContainer-desc": "Sayfa içeriklerini sararak tema boşluklarına, güvenli alanlara ve kaydırma yapılarına uygun hale getiren temel bileşen.",
+            "typesOverride-tsconfigDesc": "Projenizin tsconfig.json dosyasında global.d.ts dosyanızı typeRoots veya include içerisine eklemeyi unutmayın.",
+            "stateCard-desc": "Boş durum, hata durumu veya başarılı işlem gibi uygulama anlarını kullanıcıya gösteren bilgilendirici kart bileşeni.",
+            "toolsUsage-ncoreToastDesc": "Kullanıcıyı bir işlemin sonucu hakkında bilgilendirmek için interaktif toast mesajları göstermeyi sağlar.",
+            "installation-desc": "NCore UI Kit kurulumu, temel kullanımı ve geliştirme ortamınıza nasıl entegre edeceğiniz hakkında bilgiler.",
+            "typesOverride-desc": "Kendi projelerinizde NCore UI Kit tiplerini (tema, dil vb.) global.d.ts ile nasıl ezebileceğinizin örneği.",
+            "webScrollbar-desc": "Web platformlarında tarayıcının varsayılan kaydırma çubuğunu özel temalı bir çubukla değiştiren bileşen.",
+            "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.",
+            "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.",
+            "toolsUsage-ncoreLocalizeDesc": "Herhangi bir bileşen içinde çeviri sözlüğüne erişmeyi ve aktif dili yönetmeyi sağlar.",
+            "mainHeader-desc": "Ana menü ve genel uygulama yönlendirmeleri için kullanılan büyük ve kapsamlı üst başlık bileşeni.",
+            "dateTimePicker-desc": "Tarih ve saati aynı anda seçebilmeyi veya ayarlayabilmeyi sağlayan kapsamlı seçici bileşeni.",
+            "dialog-desc": "Kullanıcının dikkatini çekmek, onay almak veya bilgi vermek için kullanılan açılır pencere bileşeni.",
+            "radioButton-desc": "Birbirini dışlayan birden çok seçenek arasından yalnızca birini seçmeye yarayan buton bileşeni.",
+            "dateTimeSheet-desc": "Ekranın altından açılarak tarih ve saat seçimi yapılmasını sağlayan sayfa (sheet) bileşeni.",
+            "text-desc": "Uygulama içerisindeki tüm metinleri tipografi ve tema kurallarına göre işleyen temel yazı bileşeni.",
+            "textAreaInput-desc": "Kullanıcıların uzun ve çok satırlı metinler girmesini sağlayan geniş girdi alanı bileşeni.",
+            "localeSwitcher-desc": "Uygulamanın dil seçenekleri arasında anında geçiş yapılmasını sağlayan kontrol bileşeni.",
+            "themeSwitcher-desc": "Aydınlık ve karanlık tema veya sistem teması arasında geçiş yapılmasını sağlayan bileşen.",
+            "header-desc": "Sayfaların en üstünde yer alan, başlık ve navigasyon eylemlerini barındıran üst alan bileşeni.",
+            "loading-desc": "Arka planda devam eden asenkron bir işlemin veya veri yüklemesinin durumunu gösteren bileşen.",
+            "chip-desc": "Küçük bilgi parçalarını, etiketleri veya durumları göstermek için kullanılan kompakt bileşen.",
+            "snackBar-desc": "Ekranın alt kısmında geçici olarak beliren ve kısa durum mesajları sunan uyarı bileşeni.",
+            "toolsUsage-codeViewerDesc": "Kodu uygulamanızda güzel bir şekilde render etmek ve panoya kopyalamak için.",
+            "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.",
+            "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.",
+            "sticker-desc": "Eğlenceli görseller veya ikonlar eklemek için kullanılan dinamik yapıştırma bileşeni.",
+            "toast-desc": "Ekranın üst kısmında anlık olarak belirip kaybolan sistem mesajlarını gösteren bileşen.",
+            "timeSelector-desc": "Belirli bir zamanı (saat, dakika) seçmek için optimize edilmiş arayüz bileşeni.",
+            "rowCard-desc": "Bilgileri veya görselleri yatay bir satır düzeni içinde sunan bilgi kartı bileşeni.",
+            "selectBox-desc": "Açılır liste içerisinden tekil veya çoklu seçim yapmayı sağlayan seçici bileşeni.",
+            "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.",
+            "button-desc": "Kullanıcı etkileşimlerini tetiklemek için kullanılan temel tıklanabilir bileşen.",
+            "localeExamples-desc": "Diller arası geçiş ve localize fonksiyonu ile dinamik metin kullanımı.",
+            "menu-desc": "Kullanıcıya çeşitli seçenekler ve bağlantılar sunan genel amaçlı menü bileşeni.",
+            "yearSelector-desc": "Bir listeden sadece yılı seçmeye odaklanan özel zaman arayüzü bileşeni.",
+            "dateSelector-desc": "Kullanıcıların belirli bir tarihi seçmesini sağlayan arayüz bileşeni.",
+            "switch-desc": "İki durumlu (açık/kapalı) tercihleri değiştirmeye yarayan anahtar bileşeni.",
+            "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.",
+            "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.",
+            "markdownViewer-title": "Markdown Görüntüleyici (Markdown Viewer)",
+            "typesOverride-tsconfigIntegration": "tsconfig.json Entegrasyonu",
+            "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",
+            "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)",
+            "mainHeader-toggleSeperator": "MainHeader ToggleSeperator",
+            "highlightButton-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "textAreaInput-toggleOptional": "İsteğe Bağlıyı Aç/Kapat",
+            "themeExamples-typographyExamples": "Tipografi Örnekleri",
+            "dateTimePicker-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "numericInput-toggleOptional": "İsteğe Bağlıyı Aç/Kapat",
+            "themeExamples-labelLarge": "Büyük Etiket (Label Large)",
+            "highlightButton-toggleIconDir": "İkon Yönünü Aç/Kapat",
+            "highlightButton-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "markdownViewer-enterContent": "Markdown İçeriği Girin",
+            "textAreaInput-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "checkBox-changeIsChecked": "İşaret Durumunu Değiştir",
+            "numericInput-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "radioButton-toggleFlip": "Tersine Çevirmeyi Aç/Kapat",
+            "radioButton-toggleSelected": "Seçili Durumu Aç/Kapat",
+            "selectBox-toggleMultiSelect": "Çoklu Seçimi Aç/Kapat",
             "this-is-test-sub-page": "Bu bir test alt sayfasıdır.",
-            "toggle-custom-padding": "Özel Boşluğu Aç/Kapat",
+            "your-project-main-directory": "PROJENIZIN_ANA_DIZINI",
+            "avatarGroup-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "components-dateTimeSheet": "Tarih Saat Seçim Paneli",
+            "installation-peerDepsTitle": "Gerekli Bağımlılıklar",
+            "radioButton-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "selectBox-toggleOptional": "İsteğe Bağlıyı Aç/Kapat",
+            "textInput-toggleOptional": "İsteğe Bağlıyı Aç/Kapat",
+            "themeExamples-bodyLarge": "Büyük Gövde (Body Large)",
+            "toggle-swipe-close": "Kaydırarak Kapatmayı Aç/Kapat",
+            "typesOverride-title": "Tip Değiştirme (global.d.ts)",
+            "localeExamples-languageSwitcher": "Dil Değiştirici",
+            "mainHeader-toggleGoBack": "MainHeader ToggleGoBack",
+            "mainHeader-toggleSticky": "MainHeader ToggleSticky",
+            "notificationIndicator-title": "Bildirim Göstergesi",
+            "textAreaInput-toggleRequired": "Zorunluyu Aç/Kapat",
+            "avatarGroup-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "bottomSheet-toggleShowHandle": "Tutamacı Aç/Kapat",
+            "checkBox-toggleFlip": "Tersine Çevirmeyi Aç/Kapat",
+            "dateTimePicker-changeVariant": "Varyantı Değiştir",
+            "highlightButton-changeSpread": "Yayılımı Değiştir",
+            "notificationIndicator-changeType": "Türü Değiştir",
+            "numericInput-toggleRequired": "Zorunluyu Aç/Kapat",
+            "radioButton-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "selectBox-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "textAreaInput-toggleClean": "Temizlemeyi Aç/Kapat",
+            "textInput-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "checkBox-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "dateTimePicker-changeSpread": "Yayılımı Değiştir",
+            "numericInput-toggleClean": "Temizlemeyi Aç/Kapat",
+            "textAreaInput-exampleTitle": "Metin Alanı Başlık",
+            "textAreaInput-placeholder": "Bir şeyler yazın...",
+            "webScrollbar-item": "Kaydırılabilir İçerik Öğesi",
+            "components-paletteSwitcher": "Palet Değiştirici",
+            "dialog-enterContentText": "İçerik Metnini Girin",
+            "numericInput-changeVariant": "Varyantı Değiştir",
+            "rowCard-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "seperator-changeThickness": "Kalınlığı Değiştir",
+            "textAreaInput-changeSpread": "Yayılımı Değiştir",
+            "avatar-enterImageUrl": "Resim Bağlantısı Girin",
+            "avatar-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "checkBox-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "components-snackBar": "Bilgi Çubuğu (SnackBar)",
+            "embeddedMenu-openMenu": "EmbeddedMenu OpenMenu",
+            "embeddedMenu-settings": "EmbeddedMenu Settings",
+            "localeExamples-currentLanguage": "Mevcut Dil: ",
             "ncore-design-system": "NCore | Tasarım Sistemi",
+            "numericInput-changeSpread": "Yayılımı Değiştir",
+            "selectBox-changePosition": "Pozisyonu Değiştir",
+            "selectBox-toggleSearchable": "Aramayı Aç/Kapat",
+            "switch-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "textInput-toggleRequired": "Zorunluyu Aç/Kapat",
+            "toggle-custom-padding": "Özel Boşluğu Aç/Kapat",
+            "change-is-checked": "İşaret Durumunu Değiştir",
+            "chip-toggleClosable": "Kapatılabilir Aç/Kapat",
+            "highlightButton-changeSize": "Boyutu Değiştir",
+            "radioButton-changeSpread": "Yayılımı Değiştir",
+            "radioButton-enterSubTitle": "Alt Başlık Girin",
+            "rowCard-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "rowCard-toggleRightIcon": "Sağ İkonu Aç/Kapat",
+            "selectBox-toggleClean": "Temizlemeyi Aç/Kapat",
+            "textInput-exampleTitle": "Metin Girişi Başlık",
+            "textInput-toggleClean": "Temizlemeyi Aç/Kapat",
+            "themeExamples-colorExamples": "Renk Örnekleri",
             "toggle-icon-direction": "İkon Yönünü Aç/Kapat",
+            "avatar-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "bottomSheet-togglePortal": "Portalı Aç/Kapat",
+            "change-picker-type": "Seçici Türünü Değiştir",
+            "chip-toggleDisabled": "Devre Dışıyı Aç/Kapat",
+            "components-localeSwitcher": "Dil Değiştirici",
+            "components-pageContainer": "Sayfa Konteyneri",
+            "components-themeSwitcher": "Tema Değiştirici",
+            "highlightButton-toggleIcon": "İkonu Aç/Kapat",
+            "rowCard-toggleLeftIcon": "Sol İkonu Aç/Kapat",
+            "switch-changeIconDir": "İkon Yönünü Değiştir",
+            "switch-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "textInput-changeVariant": "Varyantı Değiştir",
+            "textInput-placeholder": "Bir şeyler yazın...",
+            "highlightButton-changeType": "Türü Değiştir",
+            "notificationIndicator-addCount": "Sayı Ekle",
+            "selectBox-changeSpread": "Yayılımı Değiştir",
+            "selectBox-enterSubTitle": "Alt Başlık Girin",
+            "stateCard-enterSubTitle": "Alt Başlık Girin",
+            "stateCard-title": "Durum Kartı (State Card)",
+            "textInput-changeSpread": "Yayılımı Değiştir",
             "ui-kit-library": "KA Araçları - Kütüphanesi",
+            "checkBox-changeSpread": "Yayılımı Değiştir",
+            "chip-toggleLoading": "Yükleniyoru Aç/Kapat",
+            "components-modal": "Kalıcı Pencere (Modal)",
+            "dateTimePicker-changeType": "Türü Değiştir",
+            "enter-content-text": "İçerik Metnini Girin",
+            "header-toggleGoBack": "Header ToggleGoBack",
+            "numericInput-exampleTitle": "Sayısal Değer",
+            "numericInput-placeholder": "Bir sayı girin",
+            "rowCard-exampleSubTitle": "Kart Alt Başlık",
+            "siteLogo-enterSubTitle": "Alt Başlık Girin",
+            "toolsUsage-codeViewer": "Kod Görüntüleyici",
+            "typesOverride-globalTypes": "Global Tipler",
+            "avatarGroup-changeSize": "Boyutu Değiştir",
+            "bottom-sheet-content": "Alt Panel İçeriği",
+            "dateTimePicker-title": "Tarih Saat Seçici",
+            "dialog-changeVariant": "Varyantı Değiştir",
+            "dialog-openDialog": "İletişim Kutusunu Aç",
+            "enter-image-url": "Resim Bağlantısı Girin",
+            "installation-installationTitle": "Kurulum",
+            "numericInput-toggleIcon": "İkonu Aç/Kapat",
+            "rowCard-enterSubTitle": "Alt Başlık Girin",
+            "siteLogo-exampleSubTitle": "Design System",
+            "siteLogo-title": "Site Logosu (Site Logo)",
+            "switch-toggleActive": "Aktifliği Aç/Kapat",
+            "textAreaInput-changeType": "Türü Değiştir",
+            "themeExamples-switchers": "Değiştiriciler",
+            "toggle-closable": "Kapatılabilir Aç/Kapat",
+            "toggle-flip": "Tersine Çevirmeyi Aç/Kapat",
+            "bottomSheet-content": "Alt Panel İçeriği",
+            "checkBox-enterSubText": "Alt Metin Girin",
+            "embeddedMenu-title": "EmbeddedMenu Title",
+            "highlightButton-enterText": "Metin Girin",
+            "numericInput-changeType": "Türü Değiştir",
+            "radioButton-exampleTitle": "Radyo Başlık",
+            "switch-changeSpread": "Yayılımı Değiştir",
+            "switch-enterSubTitle": "Alt Başlık Girin",
+            "textAreaInput-enterTitle": "Başlık Girin",
             "toggle-disabled": "Devre Dışıyı Aç/Kapat",
+            "toolsUsage-languageTs": "Dil: TypeScript",
+            "components-dateSelector": "Tarih Seçici",
+            "components-toast": "Tost Mesajı (Toast)",
+            "numericInput-enterTitle": "Başlık Girin",
+            "radioButton-changeType": "Türü Değiştir",
+            "radioButton-subTitleLabel": "Alt Başlık",
+            "rowCard-title": "Satır Kartı (Row Card)",
+            "toggle-show-handle": "Tutamacı Aç/Kapat",
+            "avatar-changeStatus": "Durumu Değiştir",
+            "bottomSheet-openSheet": "Alt Paneli Aç",
+            "chip-changeSpread": "Yayılımı Değiştir",
+            "components-selectSheet": "Seçim Paneli",
+            "components-timeSelector": "Saat Seçici",
+            "embeddedMenu-home": "EmbeddedMenu Home",
+            "header-enterTitle": "Header EnterTitle",
+            "header-titleLabel": "Header TitleLabel",
+            "highlightButton-example": "Örnek Buton",
+            "highlightButton-title": "Vurgulu Buton",
+            "radioButton-enterTitle": "Başlık Girin",
+            "selectBox-exampleTitle": "Seçim Başlık",
+            "seperator-title": "Ayırıcı (Seperator)",
+            "stateCard-exampleSubTitle": "Nisan Ayı",
+            "textInput-toggleIcon": "İkonu Aç/Kapat",
             "toggle-loading": "Yükleniyoru Aç/Kapat",
+            "components-monthSelector": "Ay Seçici",
+            "components-yearSelector": "Yıl Seçici",
+            "date-time-picker": "Tarih Saat Seçici",
+            "loading-changeSize": "Boyutu Değiştir",
+            "loading-title": "Yükleniyor (Loading)",
+            "localeExamples-title": "Dil Örnekleri",
+            "markdownViewer-contentLabel": "İçerik",
+            "selectBox-changeType": "Türü Değiştir",
+            "selectBox-subTitleLabel": "Alt Başlık",
+            "siteLogo-toggleIcon": "İkonu Aç/Kapat",
+            "stateCard-exampleTitle": "Aylık Satış",
+            "stateCard-subTitleLabel": "Alt Başlık",
+            "switch-exampleTitle": "Anahtar Başlık",
+            "textInput-changeType": "Türü Değiştir",
+            "themeExamples-title": "Tema Örnekleri",
+            "toolsUsage-title": "Araç Kullanımları",
+            "checkBox-changeType": "Türü Değiştir",
+            "checkBox-subTitleLabel": "Alt Başlık",
+            "highlightButton-titleLabel": "Başlık",
+            "mainHeader-title": "MainHeader Title",
+            "selectBox-enterTitle": "Başlık Girin",
+            "siteLogo-subTitleLabel": "Alt Başlık",
+            "stateCard-enterTitle": "Başlık Girin",
+            "textInput-enterTitle": "Başlık Girin",
+            "avatar-imageUrl": "Resim Bağlantısı",
             "change-variant": "Varyantı Değiştir",
+            "numericInput-title": "Sayısal Giriş",
+            "open-dialog": "İletişim Kutusunu Aç",
+            "rowCard-exampleTitle": "Kart Başlık",
+            "rowCard-subTitleLabel": "Alt Başlık",
+            "seperator-enterTitle": "Metin Girin",
+            "siteLogo-enterTitle": "Başlık Girin",
+            "stateCard-enterValue": "Değer Girin",
+            "webScrollbar-title": "Web Scrollbar",
             "change-spread": "Yayılımı Değiştir",
+            "chip-changeSize": "Boyutu Değiştir",
+            "open-bottom-sheet": "Alt Paneli Aç",
+            "rowCard-enterTitle": "Başlık Girin",
+            "stateCard-exampleValue": "$ 12,000",
+            "sticker-enterTitle": "Başlık Girin",
+            "switch-subTitleLabel": "Alt Başlık",
+            "textAreaInput-title": "Metin Alanı",
+            "textAreaInput-titleLabel": "Başlık",
+            "avatarGroup-title": "Avatar Grubu",
+            "checkBox-enterText": "Metin Girin",
+            "enter-sub-text": "Alt Metin Girin",
+            "numericInput-titleLabel": "Başlık",
+            "radioButton-title": "Radyo Butonu",
+            "sticker-title": "Etiket (Sticker)",
+            "switch-enterTitle": "Başlık Girin",
+            "themeExamples-primary": "Birincil",
+            "themeExamples-success": "Başarılı",
+            "toggle-portal": "Portalı Aç/Kapat",
+            "change-status": "Durumu Değiştir",
+            "chip-changeType": "Türü Değiştir",
+            "coreFeatures": "Temel Özellikler",
+            "implementation-title": "Uygulama",
+            "radioButton-titleLabel": "Başlık",
+            "selectBox-placeholder": "Seçiniz",
+            "switch-title": "Anahtar (Switch)",
+            "avatar-enterText": "Metin Girin",
+            "dialog-enterText": "Metin Girin",
+            "dialog-title": "İletişim Kutusu",
+            "installation-title": "Başlarken",
+            "localeExamples": "Dil Örnekleri",
+            "selectBox-title": "Seçim Kutusu",
+            "siteLogo-exampleTitle": "NİBGAT",
+            "textInput-title": "Metin Girişi",
+            "themeExamples": "Tema Örnekleri",
+            "themeExamples-danger": "Tehlike",
+            "toolsUsage": "Araç Kullanımları",
+            "typesOverride": "Tip Değiştirme",
+            "bottomSheet-title": "Alt Panel",
             "change-size": "Boyutu Değiştir",
-            "example-button": "Örnek Buton",
+            "menu-openMenu": "Menu OpenMenu",
+            "menu-settings": "Menu Settings",
+            "selectBox-titleLabel": "Başlık",
+            "stateCard-titleLabel": "Başlık",
+            "textInput-titleLabel": "Başlık",
+            "themeExamples-warning": "Uyarı",
             "button-title": "Buton Başlığı",
+            "checkBox-title": "Onay Kutusu",
+            "checkBox-titleLabel": "Başlık",
+            "chip-enterText": "Metin Girin",
+            "dialog-contentLabel": "İçerik",
+            "example-button": "Örnek Buton",
+            "image-url": "Resim Bağlantısı",
+            "seperator-titleLabel": "Metin",
+            "siteLogo-titleLabel": "Başlık",
+            "stateCard-valueLabel": "Değer",
             "toggle-icon": "İkonu Aç/Kapat",
+            "avatar-group": "Avatar Grubu",
             "change-type": "Türü Değiştir",
+            "getting-started": "Başlarken",
+            "header-title": "Header Title",
+            "hello-world": "Merhaba Dünya",
+            "rowCard-titleLabel": "Başlık",
+            "sticker-exampleTitle": "Yeni",
+            "sticker-titleLabel": "Başlık",
+            "avatar-titleLabel": "Başlık",
+            "dialog-titleLabel": "Başlık",
+            "gettingStarted": "Başlarken",
+            "switch-titleLabel": "Başlık",
+            "themeExamples-info": "Bilgi",
+            "bottomSheet-close": "Kapat",
+            "implementation": "Uygulama",
+            "bottom-sheet": "Alt Panel",
+            "chip-titleLabel": "Başlık",
+            "dialog": "İletişim Kutusu",
             "enter-text": "Metin Girin",
+            "check-box": "Onay Kutusu",
+            "menu-title": "Menu Title",
+            "installation": "Kurulum",
+            "sub-title": "Alt Başlık",
+            "avatar-title": "Avatar",
+            "menu-home": "Menu Home",
             "text": "Text ( Metin )",
+            "chip-title": "Çip",
+            "content": "İçerik",
             "home": "Ana Sayfa",
-            "version": "Sürüm",
+            "avatar": "Avatar",
             "button": "Button",
+            "version": "Sürüm",
+            "next": "Sonraki",
+            "title": "Başlık",
+            "close": "Kapat",
             "right": "Sağ",
+            "chip": "Çip",
             "left": "Sol"
-        }
+        },
+        "locale": "tr-TR",
+        "isRTL": false
     },
     {
-        "locale": "en-US",
-        "isRTL": false,
         "translations": {
             "ncore-about": "NCore is a design system and component library developed for everyone, primarily NİBGAT® and NİBGAT® | Community. It is designed to build elegant systems with rapid development processes and high stability.",
+            "installation-peerDepsDesc": "The following packages must be installed in your project. You can install them using the appropriate command (yarn/npm) for your development environment.",
+            "toolsUsage-ncoreThemeDesc": "Provides access to theme values dynamically without needing prop drilling. You can consume colors, spaces, radiuses globally.",
+            "typesOverride-globalDtsDesc": "When using NCore UI Kit in TypeScript projects, you must use global.d.ts to introduce your custom keys to TypeScript.",
+            "pageContainer-desc": "A foundational component that wraps page content to comply with theme spacing, safe areas, and scrolling structures.",
+            "installation-desc": "Information on how to install NCore UI Kit, basic usage, and how to integrate it into your development environment.",
+            "toolsUsage-ncoreToastDesc": "Gives the ability to throw interactive toast messages globally to inform the user about an action result.",
+            "stateCard-desc": "An informative card component that shows application moments to the user, such as empty states, errors, or success.",
+            "typesOverride-desc": "Example of how to override NCore UI Kit types (theme, locale, etc.) with global.d.ts in your own projects.",
+            "implementation-desc": "Example of how to implement NCore UI Kit from the outermost layer after installing it in your projects.",
+            "notificationIndicator-desc": "A small indicator component that visually shows the number of unread notifications or messages.",
+            "webScrollbar-desc": "A component that replaces the default browser scrollbar with a custom-themed scrollbar on web platforms.",
+            "dateTimePicker-desc": "A comprehensive picker component that allows selecting or setting both date and time simultaneously.",
+            "loading-desc": "A component that indicates the status of an ongoing asynchronous process or data loading in the background.",
+            "snackBar-desc": "An alert component that temporarily appears at the bottom of the screen to provide short status messages.",
+            "mainHeader-desc": "A large and comprehensive top header component used for main menus and general application navigation.",
+            "bottomSheet-desc": "A scrollable panel component that opens from the bottom of the screen to present additional content.",
+            "selectSheet-desc": "A sheet component that opens from the bottom of the screen to allow practical selection from a list.",
+            "toolsUsage-ncoreLocalizeDesc": "Allows translation dictionary lookups and managing active language inside any component.",
+            "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.",
+            "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.",
+            "radioButton-desc": "A button component used to select exactly one option from a set of mutually exclusive choices.",
+            "typesOverride-tsconfigDesc": "Don't forget to add your global.d.ts to typeRoots or include in your tsconfig.json.",
+            "numericInput-desc": "A specialized input component that only allows numerical data or quantities to be entered.",
+            "modal-desc": "A modal window component that overlays the current page and focuses the user on a specific task.",
+            "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.",
+            "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.",
+            "rowCard-desc": "An information card component that presents data or visuals in a horizontal row layout.",
+            "textAreaInput-desc": "A large input area component that allows users to enter long and multi-line text.",
+            "checkBox-desc": "A checkbox component that allows making independent selections from multiple options.",
+            "embeddedMenu-desc": "A component that works inline within the page and provides contextual menu items.",
+            "selectBox-desc": "A selector component that enables single or multiple selection from a dropdown list.",
+            "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).",
+            "menu-desc": "A general-purpose menu component that presents various options and links to the user.",
+            "chip-desc": "A compact component used to display small pieces of information, tags, or statuses.",
+            "localeExamples-desc": "Switching between locales and dynamic text usage with localize function.",
+            "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.",
+            "monthSelector-desc": "A component used to select a specific month or months within a year.",
+            "dateSelector-desc": "An interface component that allows users to select a specific date.",
+            "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.",
+            "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.",
+            "typesOverride-tsconfigIntegration": "tsconfig.json Integration",
+            "highlightButton-toggleCustomPadding": "Toggle Custom Padding",
+            "notificationIndicator-toggleShowCount": "Toggle Show Count",
+            "your-project-main-directory": "YOUR_PROJECT_MAIN_DIRECTORY",
+            "mainHeader-toggleSeperator": "MainHeader ToggleSeperator",
+            "themeExamples-typographyExamples": "Typography Examples",
+            "highlightButton-toggleIconDir": "Toggle Icon Direction",
+            "dateTimePicker-changePickerType": "Change Picker Type",
+            "markdownViewer-enterContent": "Enter Markdown Content",
+            "notificationIndicator-title": "Notification Indicator",
+            "localeExamples-currentLanguage": "Current Language: ",
+            "localeExamples-languageSwitcher": "Language Switcher",
+            "typesOverride-title": "Types Override (global.d.ts)",
+            "bottomSheet-toggleShowHandle": "Toggle Show Handle",
+            "bottomSheet-toggleSwipeClose": "Toggle Swipe Close",
+            "mainHeader-toggleGoBack": "MainHeader ToggleGoBack",
+            "mainHeader-toggleSticky": "MainHeader ToggleSticky",
+            "selectBox-toggleMultiSelect": "Toggle Multi-Select",
+            "highlightButton-toggleDisabled": "Toggle Disabled",
+            "checkBox-changeIsChecked": "Change Checked State",
+            "dateTimePicker-toggleDisabled": "Toggle Disabled",
+            "localeExamples-localizedTexts": "Localized Texts",
+            "highlightButton-toggleLoading": "Toggle Loading",
+            "installation-peerDepsTitle": "Peer Dependencies",
+            "notificationIndicator-changeType": "Change Type",
+            "selectBox-toggleSearchable": "Toggle Searchable",
+            "textAreaInput-toggleDisabled": "Toggle Disabled",
+            "textAreaInput-toggleOptional": "Toggle Optional",
+            "textAreaInput-toggleRequired": "Toggle Required",
             "this-is-test-sub-page": "This is test sub-page.",
-            "toggle-icon-direction": "Toggle Icon Direction",
+            "components-paletteSwitcher": "Palette Switcher",
+            "dateTimePicker-changeVariant": "Change Variant",
+            "embeddedMenu-openMenu": "EmbeddedMenu OpenMenu",
+            "embeddedMenu-settings": "EmbeddedMenu Settings",
+            "installation-installationTitle": "Installation",
+            "numericInput-toggleDisabled": "Toggle Disabled",
+            "numericInput-toggleOptional": "Toggle Optional",
+            "numericInput-toggleRequired": "Toggle Required",
+            "textAreaInput-placeholder": "Type something...",
             "toggle-custom-padding": "Toggle Custom Padding",
+            "toggle-icon-direction": "Toggle Icon Direction",
+            "avatarGroup-toggleDisabled": "Toggle Disabled",
+            "dialog-enterContentText": "Enter Content Text",
+            "highlightButton-changeSpread": "Change Spread",
+            "radioButton-toggleDisabled": "Toggle Disabled",
+            "radioButton-toggleSelected": "Toggle Selected",
+            "seperator-changeThickness": "Change Thickness",
+            "switch-changeIconDir": "Change Icon Direction",
+            "textAreaInput-exampleTitle": "Text Area Title",
+            "themeExamples-colorExamples": "Color Examples",
+            "themeExamples-headlineLarge": "Headline Large",
+            "toolsUsage-languageTs": "Language: TypeScript",
+            "bottom-sheet-content": "Bottom Sheet Content",
+            "components-localeSwitcher": "Locale Switcher",
+            "dateTimePicker-changeSpread": "Change Spread",
             "ncore-design-system": "NCore | Design System",
-            "ui-kit-library": "UI Kit - Library",
+            "numericInput-changeVariant": "Change Variant",
+            "rowCard-toggleRightIcon": "Toggle Right Icon",
+            "webScrollbar-item": "Scrollable Content Item",
+            "avatarGroup-toggleLoading": "Toggle Loading",
+            "bottomSheet-content": "Bottom Sheet Content",
+            "components-dateTimeSheet": "Date Time Sheet",
+            "notificationIndicator-addCount": "Add Count",
+            "radioButton-enterSubTitle": "Enter Subtitle",
+            "radioButton-toggleLoading": "Toggle Loading",
+            "selectBox-changePosition": "Change Position",
+            "selectBox-toggleDisabled": "Toggle Disabled",
+            "selectBox-toggleOptional": "Toggle Optional",
+            "textAreaInput-changeSpread": "Change Spread",
+            "textInput-toggleDisabled": "Toggle Disabled",
+            "textInput-toggleOptional": "Toggle Optional",
+            "textInput-toggleRequired": "Toggle Required",
+            "themeExamples-displayLarge": "Display Large",
+            "bottomSheet-openSheet": "Open Bottom Sheet",
+            "checkBox-toggleDisabled": "Toggle Disabled",
+            "components-monthSelector": "Month Selector",
+            "components-pageContainer": "Page Container",
+            "components-themeSwitcher": "Theme Switcher",
+            "header-toggleGoBack": "Header ToggleGoBack",
+            "numericInput-changeSpread": "Change Spread",
+            "numericInput-exampleTitle": "Numeric Value",
+            "numericInput-placeholder": "Enter a number",
+            "rowCard-toggleLeftIcon": "Toggle Left Icon",
+            "textInput-exampleTitle": "Text Input Title",
+            "textInput-placeholder": "Type something...",
+            "bottomSheet-togglePortal": "Toggle Portal",
+            "change-is-checked": "Change Checked State",
+            "highlightButton-changeSize": "Change Size",
+            "highlightButton-changeType": "Change Type",
+            "highlightButton-example": "Example Button",
+            "highlightButton-title": "Highlight Button",
+            "highlightButton-toggleIcon": "Toggle Icon",
+            "radioButton-changeSpread": "Change Spread",
+            "rowCard-toggleDisabled": "Toggle Disabled",
+            "selectBox-enterSubTitle": "Enter Subtitle",
+            "siteLogo-exampleSubTitle": "Design System",
+            "stateCard-enterSubTitle": "Enter Subtitle",
+            "textAreaInput-toggleClean": "Toggle Clean",
+            "textInput-changeVariant": "Change Variant",
+            "typesOverride-globalTypes": "Global Types",
+            "avatar-toggleDisabled": "Toggle Disabled",
+            "change-picker-type": "Change Picker Type",
+            "checkBox-toggleLoading": "Toggle Loading",
+            "components-dateSelector": "Date Selector",
+            "components-timeSelector": "Time Selector",
+            "components-yearSelector": "Year Selector",
+            "dateTimePicker-changeType": "Change Type",
+            "dateTimePicker-title": "Date Time Picker",
+            "embeddedMenu-title": "EmbeddedMenu Title",
+            "enter-content-text": "Enter Content Text",
+            "numericInput-toggleClean": "Toggle Clean",
+            "rowCard-exampleSubTitle": "Card Subtitle",
+            "siteLogo-enterSubTitle": "Enter Subtitle",
+            "switch-toggleDisabled": "Toggle Disabled",
+            "toggle-show-handle": "Toggle Show Handle",
+            "toggle-swipe-close": "Toggle Swipe Close",
+            "avatar-enterImageUrl": "Enter Image URL",
+            "checkBox-enterSubText": "Enter Sub Text",
+            "highlightButton-enterText": "Enter Text",
+            "localeExamples-title": "Locale Examples",
+            "markdownViewer-title": "Markdown Viewer",
+            "radioButton-exampleTitle": "Radio Title",
+            "rowCard-enterSubTitle": "Enter Subtitle",
+            "rowCard-toggleLoading": "Toggle Loading",
+            "selectBox-changeSpread": "Change Spread",
+            "stateCard-exampleTitle": "Monthly Sales",
+            "textAreaInput-changeType": "Change Type",
+            "textAreaInput-enterTitle": "Enter Title",
+            "textInput-changeSpread": "Change Spread",
+            "themeExamples-labelLarge": "Label Large",
+            "themeExamples-titleLarge": "Title Large",
+            "avatar-toggleLoading": "Toggle Loading",
+            "checkBox-changeSpread": "Change Spread",
+            "chip-toggleClosable": "Toggle Closable",
+            "chip-toggleDisabled": "Toggle Disabled",
+            "components-selectSheet": "Select Sheet",
+            "dialog-changeVariant": "Change Variant",
+            "embeddedMenu-home": "EmbeddedMenu Home",
+            "header-enterTitle": "Header EnterTitle",
+            "header-titleLabel": "Header TitleLabel",
+            "implementation-title": "Implementation",
+            "markdownViewer-contentLabel": "Content",
+            "numericInput-changeType": "Change Type",
+            "numericInput-enterTitle": "Enter Title",
+            "numericInput-toggleIcon": "Toggle Icon",
+            "open-bottom-sheet": "Open Bottom Sheet",
+            "selectBox-exampleTitle": "Select Title",
+            "switch-enterSubTitle": "Enter Subtitle",
+            "switch-toggleLoading": "Toggle Loading",
+            "avatarGroup-changeSize": "Change Size",
+            "installation-title": "Getting Started",
+            "radioButton-changeType": "Change Type",
+            "radioButton-enterTitle": "Enter Title",
+            "radioButton-subTitleLabel": "Subtitle",
+            "radioButton-toggleFlip": "Toggle Flip",
+            "selectBox-toggleClean": "Toggle Clean",
+            "textInput-toggleClean": "Toggle Clean",
+            "themeExamples-bodyLarge": "Body Large",
+            "themeExamples-title": "Theme Examples",
+            "avatar-changeStatus": "Change Status",
+            "chip-toggleLoading": "Toggle Loading",
+            "date-time-picker": "Date Time Picker",
+            "mainHeader-title": "MainHeader Title",
+            "switch-changeSpread": "Change Spread",
+            "switch-toggleActive": "Toggle Active",
+            "themeExamples-switchers": "Switchers",
+            "toolsUsage-codeViewer": "Code Viewer",
+            "checkBox-subTitleLabel": "Sub Title",
+            "highlightButton-titleLabel": "Title",
+            "numericInput-title": "Numeric Input",
+            "selectBox-changeType": "Change Type",
+            "selectBox-enterTitle": "Enter Title",
+            "selectBox-subTitleLabel": "Subtitle",
+            "stateCard-enterTitle": "Enter Title",
+            "stateCard-enterValue": "Enter Value",
+            "stateCard-subTitleLabel": "Subtitle",
+            "switch-exampleTitle": "Switch Title",
+            "textInput-changeType": "Change Type",
+            "textInput-enterTitle": "Enter Title",
+            "textInput-toggleIcon": "Toggle Icon",
+            "webScrollbar-title": "Web Scrollbar",
+            "checkBox-changeType": "Change Type",
+            "checkBox-toggleFlip": "Toggle Flip",
+            "chip-changeSpread": "Change Spread",
+            "enter-image-url": "Enter Image URL",
+            "getting-started": "Getting Started",
+            "rowCard-exampleTitle": "Card Title",
+            "selectBox-placeholder": "Select...",
+            "seperator-enterTitle": "Enter Text",
+            "siteLogo-enterTitle": "Enter Title",
+            "siteLogo-subTitleLabel": "Subtitle",
+            "siteLogo-toggleIcon": "Toggle Icon",
+            "stateCard-exampleSubTitle": "April",
+            "stateCard-exampleValue": "$ 12,000",
+            "toggle-closable": "Toggle Closable",
             "toggle-disabled": "Toggle Disabled",
-            "toggle-loading": "Toggle Loading",
-            "example-button": "Example Button",
+            "ui-kit-library": "UI Kit - Library",
+            "avatarGroup-title": "Avatar Group",
+            "bottomSheet-title": "Bottom Sheet",
+            "gettingStarted": "Getting Started",
+            "loading-changeSize": "Change Size",
+            "localeExamples": "Locale Examples",
+            "radioButton-title": "Radio Button",
+            "rowCard-enterTitle": "Enter Title",
+            "rowCard-subTitleLabel": "Subtitle",
+            "sticker-enterTitle": "Enter Title",
+            "textAreaInput-titleLabel": "Title",
             "change-variant": "Change Variant",
+            "checkBox-enterText": "Enter Text",
+            "dialog-openDialog": "Open Dialog",
+            "enter-sub-text": "Enter Sub Text",
+            "example-button": "Example Button",
+            "implementation": "Implementation",
+            "numericInput-titleLabel": "Title",
+            "switch-enterTitle": "Enter Title",
+            "switch-subTitleLabel": "Subtitle",
+            "textAreaInput-title": "Text Area",
+            "themeExamples-primary": "Primary",
+            "themeExamples-success": "Success",
+            "themeExamples-warning": "Warning",
+            "toggle-loading": "Toggle Loading",
+            "components-snackBar": "SnackBar",
+            "radioButton-titleLabel": "Title",
+            "siteLogo-exampleTitle": "NİBGAT",
+            "themeExamples": "Theme Examples",
+            "toolsUsage-title": "Tools Usage",
+            "typesOverride": "Types Override",
+            "avatar-enterText": "Enter Text",
             "change-spread": "Change Spread",
+            "change-status": "Change Status",
+            "chip-changeSize": "Change Size",
+            "chip-changeType": "Change Type",
+            "dialog-contentLabel": "Content",
+            "dialog-enterText": "Enter Text",
+            "menu-openMenu": "Menu OpenMenu",
+            "menu-settings": "Menu Settings",
+            "themeExamples-danger": "Danger",
+            "toggle-portal": "Toggle Portal",
+            "coreFeatures": "Core Features",
+            "selectBox-title": "Select Box",
+            "selectBox-titleLabel": "Title",
+            "stateCard-title": "State Card",
+            "stateCard-titleLabel": "Title",
+            "stateCard-valueLabel": "Value",
+            "textInput-title": "Text Input",
+            "textInput-titleLabel": "Title",
+            "avatar-group": "Avatar Group",
+            "avatar-imageUrl": "Image URL",
+            "bottom-sheet": "Bottom Sheet",
             "button-title": "Button Title",
-            "change-type": "Change Type",
+            "checkBox-titleLabel": "Title",
+            "chip-enterText": "Enter Text",
+            "header-title": "Header Title",
+            "installation": "Installation",
+            "seperator-title": "Seperator",
+            "seperator-titleLabel": "Text",
+            "siteLogo-titleLabel": "Title",
+            "checkBox-title": "Check Box",
+            "rowCard-titleLabel": "Title",
+            "siteLogo-title": "Site Logo",
+            "sticker-exampleTitle": "New",
+            "sticker-titleLabel": "Title",
+            "avatar-titleLabel": "Title",
+            "bottomSheet-close": "Close",
             "change-size": "Change Size",
+            "change-type": "Change Type",
+            "dialog-titleLabel": "Title",
+            "hello-world": "Hello World",
+            "open-dialog": "Open Dialog",
+            "switch-titleLabel": "Title",
+            "themeExamples-info": "Info",
+            "toggle-flip": "Toggle Flip",
             "toggle-icon": "Toggle Icon",
+            "components-modal": "Modal",
+            "components-toast": "Toast",
+            "rowCard-title": "Row Card",
+            "toolsUsage": "Tools Usage",
+            "chip-titleLabel": "Title",
             "enter-text": "Enter Text",
+            "loading-title": "Loading",
+            "menu-title": "Menu Title",
+            "sticker-title": "Sticker",
+            "avatar-title": "Avatar",
+            "check-box": "Check Box",
+            "dialog-title": "Dialog",
+            "image-url": "Image URL",
+            "menu-home": "Menu Home",
+            "sub-title": "Sub Title",
+            "switch-title": "Switch",
+            "chip-title": "Chip",
+            "content": "Content",
             "version": "Version",
             "home": "Home Page",
+            "avatar": "Avatar",
             "button": "Button",
+            "dialog": "Dialog",
+            "close": "Close",
             "right": "Right",
-            "text": "Text",
-            "left": "Left"
-        }
+            "title": "Title",
+            "chip": "Chip",
+            "left": "Left",
+            "next": "Next",
+            "text": "Text"
+        },
+        "locale": "en-US",
+        "isRTL": false
     }
-]
+]

example/src/variants/themes/default.json

@@ -3,6 +3,10 @@
     "shapes": {
         "radiuses": {
             "soft": {
+                "scrollBarThumbActive": 14,
+                "scrollBarThumbHover": 14,
+                "scrollBarTrack": 14,
+                "scrollBarThumb": 14,
                 "form": 8,
                 "surface": 12,
                 "actions": 8,
@@ -16,6 +20,10 @@
                 "xl": 28
             },
             "sharp": {
+                "scrollBarThumbActive": 10,
+                "scrollBarThumbHover": 8,
+                "scrollBarTrack": 10,
+                "scrollBarThumb": 8,
                 "form": 4,
                 "surface": 8,
                 "actions": 4,
@@ -29,6 +37,10 @@
                 "xl": 16
             },
             "rounded": {
+                "scrollBarThumbActive": 24,
+                "scrollBarThumbHover": 20,
+                "scrollBarTrack": 18,
+                "scrollBarThumb": 20,
                 "form": 12,
                 "surface": 28,
                 "actions": 9999,
@@ -47,6 +59,11 @@
             "required": 4
         },
         "borders": {
+            "scrollBarThumbActive": 2,
+            "scrollBarThumbHover": 3,
+            "scrollBarTrack": 6,
+            "scrollBarThumb": 4,
+            "seperator": 1,
             "subtract": 3,
             "line": 2
         },
@@ -65,6 +82,10 @@
                 "spacingLg": 16,
                 "spacingXl": 24
             }
+        },
+        "shapeConfigs": {
+            "scrollBarHeight": 14,
+            "scrollBarWidth": 14
         }
     },
     "typography": {
@@ -479,6 +500,17 @@
                         "turkish": "#FF5555",
                         "moon": "#0F5792",
                         "sun": "#C09E13"
+                    },
+                    "code": {
+                        "punctuation": "#ABB2BF",
+                        "operator": "#56B6C2",
+                        "default": "#D4D4D4",
+                        "keyword": "#C678DD",
+                        "comment": "#5C6370",
+                        "htmlTag": "#E06C75",
+                        "string": "#98C379",
+                        "number": "#D19A66",
+                        "text": "#D4D4D4"
                     }
                 },
                 "light": {
@@ -673,6 +705,17 @@
                         "turkish": "#FF3333",
                         "moon": "#54A7EB",
                         "sun": "#FFCF11"
+                    },
+                    "code": {
+                        "punctuation": "#383A42",
+                        "operator": "#0184BC",
+                        "default": "#383A42",
+                        "keyword": "#A626A4",
+                        "comment": "#A0A1A7",
+                        "htmlTag": "#E45649",
+                        "string": "#50A14F",
+                        "number": "#986801",
+                        "text": "#383A42"
                     }
                 }
             }

example/web/global.d.ts

@@ -0,0 +1,41 @@
+import "../../src/types/index";
+import defaultLocaleJSON from "../src/variants/locales/default.json";
+import defaultThemeJSON from "../src/variants/themes/default.json";
+
+declare global {
+    namespace NCoreUIKit {
+        type PaletteNames = "gmcore";
+
+        interface PaletteKey extends Record<PaletteType, unknown>, Record<PaletteNames, unknown> {
+        }
+
+        type ProjectLocalizationL = typeof defaultLocaleJSON[0];
+
+        type GeneratedProjectTranslations = {
+            [K in keyof ProjectLocalizationL["translations"]]: ProjectLocalizationL["translations"][K];
+        };
+
+        interface Translation extends GeneratedTranslations, GeneratedProjectTranslations {
+        }
+
+        type DefaultPaletteL = typeof defaultThemeJSON.palettes[0];
+
+        type ProjectDataL = DefaultPaletteL["themes"]["dark"]["project"];
+        type DefaultProjectColorsL = ProjectDataL;
+
+        interface ProjectColorPalette extends DefaultProjectColors, DefaultProjectColorsL {
+        }
+
+        type SystemDataL = DefaultPaletteL["themes"]["dark"]["system"];
+        type DefaultSystemColorsL = SystemDataL;
+
+        interface SystemColorPalette extends DefaultSystemColors, DefaultSystemColorsL {
+        }
+
+        type ContentDataL = DefaultPaletteL["themes"]["dark"]["content"];
+        type DefaultContentColorsL = ContentDataL;
+
+        interface ContentColorPalette extends DefaultContentColors, DefaultContentColorsL {
+        }
+    }
+}

example/web/tsconfig.json

@@ -6,11 +6,12 @@
         ]
     },
     "include": [
+        "../../src/assets/svg/nibgatIcon",
+        "../../src/**/*",
         "../src/**/*",
         "**/*.json",
         "**/*.tsx",
-        "**/*.ts",
-        "../../src/assets/svg/nibgatIcon"
+        "**/*.ts"
     ],
     "exclude": [
         "**/node_modules",

package.json

@@ -101,7 +101,6 @@
         "@types/node": "25.9.3",
         "@types/react": "19.2.0",
         "@types/react-dom": "19.2.3",
-        "@types/react-native": "0.73.0",
         "@types/react-test-renderer": "19.1.0",
         "babel-loader": "10.1.1",
         "babel-plugin-module-resolver": "5.0.3",
@@ -146,6 +145,7 @@
         "webpack-dev-server": "5.2.4"
     },
     "peerDependencies": {
+        "@react-native-clipboard/clipboard": ">= 1.16.3",
         "lucide-react-native": ">= 1.16.0",
         "moment": "*",
         "ncore-context": ">= 1.0.7",
@@ -207,6 +207,7 @@
         "version": "0.57.2"
     },
     "dependencies": {
+        "@react-native-clipboard/clipboard": "1.16.3",
         "lucide-react-native": "1.16.0",
         "moment": "https://git.nibgat.space/nibgat-community/moment.git",
         "ncore-context": "1.0.8",