Feature: Browser locale added.

example/src/index.tsx

@@ -58,6 +58,29 @@ if (Platform.OS === "web") {
             NCoreConfig.initialSelectedLocale = langParam as keyof NCoreUIKit.LocaleKey;
         }
     }
+
+    if (!NCoreConfig.initialSelectedLocale) {
+        const browserLang = window.navigator.language || "";
+
+        const exactMatch = defaultLocaleJSON.find(item => item.locale === browserLang);
+
+        if (exactMatch) {
+            NCoreConfig.initialSelectedLocale = exactMatch.locale as keyof NCoreUIKit.LocaleKey;
+        } else {
+            const primaryLang = (browserLang.split(/[-_]/)[0] || "").toLowerCase();
+
+            const similarMatch = defaultLocaleJSON.find(item =>
+                item.locale.toLowerCase() === primaryLang ||
+                item.locale.toLowerCase().startsWith(`${primaryLang}-`)
+            );
+
+            if (similarMatch) {
+                NCoreConfig.initialSelectedLocale = similarMatch.locale as keyof NCoreUIKit.LocaleKey;
+            } else {
+                NCoreConfig.initialSelectedLocale = (primaryLang === "tr" ? "tr-TR" : "en-US") as keyof NCoreUIKit.LocaleKey;
+            }
+        }
+    }
 }
 
 const NCoreUIKitBase = setupNCoreUIKit(NCoreConfig);

example/web/public/index.html

@@ -35,7 +35,7 @@
             rel="stylesheet"
             href="https://fonts.nibgat.com/ncore.css"
         />
-        <title>React Native Web Test</title>
+        <title>NCore - Design System & UI Kit</title>
         <style>
             html, body, #app-root {
                 flex-direction: column;

src/components/localeSwitcher/index.tsx

@@ -24,9 +24,11 @@ const LocaleSwitcher: FC<ILocaleSwitcherProps> = ({
     variants: variantsProps = [],
     isWorkWithHighlightButton,
     isWorkWithNextShowSystem,
+    customBorderColor,
     customLocalize,
-    color,
+    customColor,
     style,
+    color,
     ...props
 }) => {
     const {
@@ -120,14 +122,14 @@ const LocaleSwitcher: FC<ILocaleSwitcherProps> = ({
 
     const allProps = {
         ...props,
-        customBorderColor: currentVariant && currentVariant.borderColor ?
+        customBorderColor: customBorderColor || (currentVariant && currentVariant.borderColor ?
             currentVariant.borderColor
             :
-            color,
-        customColor: currentVariant && currentVariant.backgroundColor ?
+            color),
+        customColor: customColor || (currentVariant && currentVariant.backgroundColor ?
             currentVariant.backgroundColor
             :
-            color,
+            color),
         icon: ({
             color,
             size

src/components/paletteSwitcher/index.tsx

@@ -25,9 +25,11 @@ const PaletteSwitcher: FC<IPaletteSwitcherProps> = ({
     variants: variantsProps = [],
     isWorkWithHighlightButton,
     isWorkWithNextShowSystem,
+    customBorderColor,
     customTheme,
-    color,
+    customColor,
     style,
+    color,
     ...props
 }) => {
     const {
@@ -138,14 +140,14 @@ const PaletteSwitcher: FC<IPaletteSwitcherProps> = ({
 
     const allProps = {
         ...props,
-        customBorderColor: currentVariant && currentVariant.borderColor ?
+        customBorderColor: customBorderColor || (currentVariant && currentVariant.borderColor ?
             currentVariant.borderColor
             :
-            color,
-        customColor: currentVariant && currentVariant.backgroundColor ?
+            color),
+        customColor: customColor || (currentVariant && currentVariant.backgroundColor ?
             currentVariant.backgroundColor
             :
-            color,
+            color),
         icon: ({
             color,
             size

src/components/themeSwitcher/index.tsx

@@ -24,9 +24,11 @@ const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
     variants: variantsProps = [],
     isWorkWithHighlightButton,
     isWorkWithNextShowSystem,
+    customBorderColor,
     customTheme,
-    color,
+    customColor,
     style,
+    color,
     ...props
 }) => {
     const {
@@ -131,14 +133,14 @@ const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
 
     const allProps = {
         ...props,
-        customBorderColor: currentVariant && currentVariant.borderColor ?
+        customBorderColor: customBorderColor || (currentVariant && currentVariant.borderColor ?
             currentVariant.borderColor
             :
-            color,
-        customColor: currentVariant && currentVariant.backgroundColor ?
+            color),
+        customColor: customColor || (currentVariant && currentVariant.backgroundColor ?
             currentVariant.backgroundColor
             :
-            color,
+            color),
         icon: ({
             color,
             size