X: 1.

.github/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

example/src/navigation/index.tsx

@@ -2,13 +2,15 @@ import {
     useEffect
 } from "react";
 import {
-    Platform
+    Platform,
+    View
 } from "react-native";
 import type RootStackParamList from "./type";
 import {
     NCoreUIKitEmbeddedMenu,
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
+    ThemeSwitcher,
     MainHeader
 } from "ncore-ui-kit";
 import {
@@ -23,23 +25,28 @@ import {
     ComponentIcon,
     HomeIcon
 } from "lucide-react-native";
-import Home from "../pages/home";
+import ButtonPage from "../pages/button";
 import TextPage from "../pages/text";
+import Home from "../pages/home";
 
 const RootStack = createNativeStackNavigator();
 const ComponentsStack = createNativeStackNavigator();
 
 const ComponentsNav = () => {
     return <ComponentsStack.Navigator
-        initialRouteName="TextPage"
+        initialRouteName="Text"
         screenOptions={{
             headerShown: true
         }}
     >
         <ComponentsStack.Screen
-            name="TextPage"
+            name="Text"
             component={TextPage}
         />
+        <ComponentsStack.Screen
+            name="Button"
+            component={ButtonPage}
+        />
     </ComponentsStack.Navigator>;
 };
 
@@ -88,8 +95,13 @@ const RootNav = () => {
                     subButtons: [
                         {
                             redirectMain: "Components",
-                            redirectSub: "TextPage",
+                            redirectSub: "Text",
                             title: "Text"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Button",
+                            title: "Button"
                         }
                     ]
                 }
@@ -99,16 +111,29 @@ const RootNav = () => {
         });
 
         NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
+        NCoreUIKitTheme.addEventListener("state", updateThemeStorage);
     }, []);
 
     const updateStorage = () => {
-        const data = NCoreUIKitEmbeddedMenu.state.data;
+        if(Platform.OS === "web") {
+            const data = NCoreUIKitEmbeddedMenu.state.data;
 
-        if(Platform.OS === "web" && data && data.length) {
-            const currentMenu = data.find(dI => dI.id === "main-menu");
+            if(data && data.length) {
+                const currentMenu = data.find(dI => dI.id === "main-menu");
 
-            if(currentMenu) {
-                window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
+                if(currentMenu) {
+                    window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
+                }
+            }
+        }
+    };
+
+    const updateThemeStorage = () => {
+        if(Platform.OS === "web") {
+            const themeData = NCoreUIKitTheme.state;
+
+            if(themeData) {
+                window.localStorage.setItem("theme", String(themeData));
             }
         }
     };
@@ -129,6 +154,17 @@ const RootNav = () => {
             isWorkWithFlex1: true
         }}
         isWorkWithSticky={true}
+        renderRight={() => {
+            return <View
+                style={{
+                    justifyContent: "center",
+                    flexDirection: "row",
+                    alignItems: "center"
+                }}
+            >
+                <ThemeSwitcher/>
+            </View>;
+        }}
         glassEffect={5}
     >
         <NCoreUIKitEmbeddedMenu.Render
@@ -164,7 +200,8 @@ const Navigation = () => {
             config: {
                 screens: {
                     Home: "",
-                    TestSubPage: "text"
+                    Text: "text",
+                    button: "button"
                 }
             }
         }}

example/src/navigation/type.ts

@@ -1,7 +1,9 @@
 type RootStackParamList = {
-    TextPage: undefined;
+    Button: undefined;
     Home: undefined;
+    Text: undefined;
 };
+
 export type {
     RootStackParamList as default
 };

example/src/pages/button/index.tsx

@@ -0,0 +1,107 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    Button,
+    Header
+} 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 ButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        variant,
+        setVariant
+    ] = useState<number>(0);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerShown: true,
+            header: () => <Header
+                isWrapSafeareaContext={false}
+                title={localize("button")}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />
+        });
+    }, []);
+
+    const buttonVariants: Array<"primary" | "danger" | "warning" | "neutral" | "success" | "info"> = [
+        "primary",
+        "danger",
+        "warning",
+        "neutral",
+        "success",
+        "info"
+    ];
+
+    return <PageContainer
+        isScrollable={false}
+        isWorkWithHeaderSpace={false}
+        style={[
+            stylesheet.container
+        ]}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <View
+                style={{
+                    borderColor: colors.content.border.subtle,
+                    marginBottom: spaces.spacingMd,
+                    borderRadius: radiuses.form,
+                    borderWidth: borders.line,
+                    padding: spaces.spacingMd,
+                    minHeight: 120
+                }}
+            >
+                <Button
+                    title={`variant = ${buttonVariants[variant]}`}
+                    spreadBehaviour="stretch"
+                    type={buttonVariants[variant]}
+                    style={{
+                        marginBottom: spaces.spacingLg
+                    }}
+                    onPress={() => {
+                    }}
+                />
+            </View>
+            <Button
+                title="Change Variant"
+                spreadBehaviour="stretch"
+                onPress={() => {
+                    setVariant(variant + 1 > buttonVariants.length - 1 ? 0 : variant + 1);
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+export default ButtonPage;

example/src/pages/button/stylesheet.ts

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

example/src/tsconfig.json

@@ -2,12 +2,11 @@
     "extends": [
         "../../tsconfig.json",
         "../mobile/tsconfig.json",
-        "../web/tsconfig.json",
+        "../web/tsconfig.json"
     ],
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
         "moduleResolution": "bundler",
-        "ignoreDeprecations": "6.0",
         "preserveSymlinks": true,
         "esModuleInterop": true,
         "jsx": "react-native",

example/src/variants/locales/default.json

@@ -9,6 +9,7 @@
             "ui-kit-library": "KA Araçları - Kütüphanesi",
             "text": "Text ( Metin )",
             "home": "Ana Sayfa",
+            "button": "Button",
             "version": "Sürüm"
         }
     },
@@ -22,6 +23,7 @@
             "ui-kit-library": "UI Kit - Library",
             "version": "Version",
             "home": "Home Page",
+            "button": "Button",
             "text": "Text"
         }
     }

example/src/variants/themes/default.json

@@ -475,6 +475,8 @@
                         }
                     },
                     "project": {
+                        "english": "#3333FF",
+                        "turkish": "#FF5555",
                         "moon": "#0F5792",
                         "sun": "#C09E13"
                     }
@@ -667,6 +669,8 @@
                         }
                     },
                     "project": {
+                        "english": "#2222FF",
+                        "turkish": "#FF3333",
                         "moon": "#54A7EB",
                         "sun": "#FFCF11"
                     }

yarn.lock

@@ -4792,7 +4792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^19.2.3":
+"@types/react-dom@npm:19.2.3":
   version: 19.2.3
   resolution: "@types/react-dom@npm:19.2.3"
   peerDependencies:
@@ -7468,7 +7468,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-env@npm:^10.1.0":
+"cross-env@npm:10.1.0":
   version: 10.1.0
   resolution: "cross-env@npm:10.1.0"
   dependencies:
@@ -12902,7 +12902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ncore-context@npm:^1.0.8":
+"ncore-context@npm:1.0.8":
   version: 1.0.8
   resolution: "ncore-context@npm:1.0.8"
   peerDependencies:
@@ -12955,7 +12955,7 @@ __metadata:
     "@types/jest": "npm:29.5.13"
     "@types/node": "npm:25.9.3"
     "@types/react": "npm:19.2.0"
-    "@types/react-dom": "npm:^19.2.3"
+    "@types/react-dom": "npm:19.2.3"
     "@types/react-native": "npm:0.73.0"
     "@types/react-test-renderer": "npm:19.1.0"
     babel-loader: "npm:10.1.1"
@@ -12964,7 +12964,7 @@ __metadata:
     babel-preset-expo: "npm:56.0.15"
     copy-webpack-plugin: "npm:11.0.0"
     copyfiles: "npm:2.4.1"
-    cross-env: "npm:^10.1.0"
+    cross-env: "npm:10.1.0"
     del-cli: "npm:6.0.0"
     eslint: "npm:9.37.0"
     eslint-import-resolver-typescript: "npm:4.4.4"
@@ -12985,7 +12985,7 @@ __metadata:
     jsonc-eslint-parser: "npm:2.4.1"
     lucide-react-native: "npm:1.16.0"
     moment: "https://git.nibgat.space/nibgat-community/moment.git"
-    ncore-context: "npm:^1.0.8"
+    ncore-context: "npm:1.0.8"
     react: "npm:19.2.3"
     react-dom: "npm:19.2.3"
     react-native: "npm:0.85.3"