ncore-ui-kit 1.0.0-alpha.0

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useState, Fragment } from "react";
+import { View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { ChevronLeftIcon } from "lucide-react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Button from "../button";
+import Text from "../text";
+const Header = ({ backgroundColor = "default", isWrapSafeareaContext = true, isWorkWithHeaderSpace = true, renderTitle: renderTitleProp, renderRight: renderRightProp, safeAreaViewBackgroundColor, renderLeft: renderLeftProp, safeAreaViewStyle, isGoBackEnable, customTheme, headerSpace, titleProps, navigation, children, actions, title, style, ...props }) => {
+    const { configs, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const [opacity, setOpacity] = useState(false);
+    const [leftContainerWidth, setLeftContainerWidth] = useState(null);
+    const [rightContainerWidth, setRightContainerWidth] = useState(null);
+    useLayoutEffect(() => {
+        if (!opacity && leftContainerWidth !== null && rightContainerWidth !== null) {
+            setOpacity(true);
+        }
+    }, [
+        rightContainerWidth,
+        leftContainerWidth
+    ]);
+    const { safeAreaView: safeAreaViewDynamicStyle, content: contentDynamicStyle } = useStyles({
+        safeAreaViewBackgroundColor,
+        isWorkWithHeaderSpace,
+        backgroundColor,
+        headerSpace,
+        configs,
+        spaces,
+        colors
+    });
+    const renderLeft = () => {
+        if (renderLeftProp) {
+            return _jsx(View, { onLayout: (event) => {
+                    const xW = event.nativeEvent.layout.width;
+                    setLeftContainerWidth(xW);
+                }, style: [
+                    stylesheet.leftContainer
+                ], children: renderLeftProp({
+                    navigation
+                }) });
+        }
+        if (!isGoBackEnable || !navigation) {
+            if (leftContainerWidth === null)
+                setLeftContainerWidth(0);
+            return _jsx(View, {});
+        }
+        return _jsx(View, { onLayout: (event) => {
+                const xW = event.nativeEvent.layout.width;
+                setLeftContainerWidth(xW);
+            }, style: [
+                stylesheet.leftContainer
+            ], children: _jsx(Button, { spreadBehaviour: "free", variant: "ghost", type: "neutral", size: "small", icon: ({ color, size }) => {
+                    return _jsx(ChevronLeftIcon, { color: colors.content.icon[color], size: size + 15 });
+                }, onPress: () => {
+                    if (navigation) {
+                        navigation.goBack();
+                    }
+                } }) });
+    };
+    const renderRight = () => {
+        if (renderRightProp) {
+            return _jsx(View, { onLayout: (event) => {
+                    const xW = event.nativeEvent.layout.width;
+                    setRightContainerWidth(xW);
+                }, style: [
+                    stylesheet.rightContainer
+                ], children: renderRightProp({
+                    navigation
+                }) });
+        }
+        if (!actions || !actions.length) {
+            if (rightContainerWidth === null)
+                setRightContainerWidth(0);
+            return _jsx(View, {});
+        }
+        return _jsx(View, { onLayout: (event) => {
+                const xW = event.nativeEvent.layout.width;
+                setRightContainerWidth(xW);
+            }, style: [
+                stylesheet.rightContainer
+            ], children: actions.map((actionItem) => {
+                return _jsx(Button, { spreadBehaviour: "free", variant: "ghost", type: "neutral", size: "small", ...actionItem });
+            }) });
+    };
+    const renderTitle = () => {
+        if (renderTitleProp) {
+            return renderTitleProp({
+                navigation
+            });
+        }
+        if (!title) {
+            return null;
+        }
+        if (leftContainerWidth === null || rightContainerWidth === null) {
+            return null;
+        }
+        const sideWidth = leftContainerWidth > rightContainerWidth ? leftContainerWidth : rightContainerWidth;
+        return _jsxs(View, { style: [
+                stylesheet.titleContainer,
+                {
+                    padding: spaces.spacingMd,
+                    opacity: opacity ? 1 : 0
+                }
+            ], children: [_jsx(View, { style: {
+                        width: sideWidth,
+                        height: 40
+                    } }), _jsx(Text, { variant: "headlineSmallSize", numberOfLines: 2, ...titleProps, style: {
+                        ...stylesheet.title,
+                        ...titleProps?.style
+                    }, children: title }), _jsx(View, { style: {
+                        width: sideWidth,
+                        height: 40
+                    } })] });
+    };
+    const renderContent = () => {
+        return _jsxs(View, { ...props, style: [
+                contentDynamicStyle,
+                stylesheet.container,
+                style
+            ], children: [renderTitle(), _jsxs(View, { style: [
+                        stylesheet.contentContainer
+                    ], children: [renderLeft(), renderRight()] })] });
+    };
+    const renderWithSafeareaView = () => {
+        return _jsx(SafeAreaView, { style: [
+                safeAreaViewStyle,
+                safeAreaViewDynamicStyle,
+                stylesheet.safeAreaViewContainer
+            ], children: children ? children : renderContent() });
+    };
+    const renderSafeareaContext = () => {
+        return isWrapSafeareaContext && !isWorkWithHeaderSpace ? renderWithSafeareaView() : _jsx(Fragment, { children: children ? children : renderContent() });
+    };
+    return renderSafeareaContext();
+};
+export default Header;

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

@@ -0,0 +1,63 @@
+import { StyleSheet } from "react-native";
+import {} from "../../types";
+import { windowHeight, webStyle } from "../../utils";
+const stylesheet = StyleSheet.create({
+    container: {
+        maxHeight: windowHeight * 0.10,
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+        minHeight: 100,
+        width: "100%",
+        ...webStyle({
+            userSelect: "none"
+        })
+    },
+    safeAreaViewContainer: {},
+    titleContainer: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "absolute",
+        alignSelf: "center",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    contentContainer: {
+        justifyContent: "space-between",
+        alignItems: "stretch",
+        flexDirection: "row",
+        position: "relative",
+        flex: 1
+    },
+    title: {
+        textAlign: "center",
+        flex: 1,
+        ...webStyle({
+            overflowWrap: "break-word",
+            wordBreak: "break-word"
+        })
+    },
+    rightContainer: {},
+    leftContainer: {}
+});
+export const useStyles = ({ safeAreaViewBackgroundColor, isWorkWithHeaderSpace, backgroundColor, headerSpace, configs, spaces, colors }) => {
+    const styles = {
+        safeAreaView: {
+            backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
+        },
+        content: {
+            marginTop: isWorkWithHeaderSpace ? headerSpace ? headerSpace : configs.headerSpace : 0,
+            backgroundColor: colors.content.container[backgroundColor],
+            padding: spaces.spacingMd
+        },
+        title: {
+            paddingHorizontal: spaces.spacingMd
+        }
+    };
+    return styles;
+};
+export default stylesheet;

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

@@ -0,0 +1 @@
+import {} from "react";

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getHighlightButtonSize, getHighlightButtonType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Loading from "../loading";
+import Text from "../text";
+/**
+ * A generic button
+ * @param props {@link IHighlightButtonProps}
+ * @returns Element
+ */
+const HighlightButton = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", isCustomPadding = false, icon: IconComponentProp, iconDirection = "left", isDisabled = false, customBorderColor, customIconColor, customTextColor, glassEffect = 5, size = "medium", type = "glass", renderLoading, customColor, customTheme, titleStyle, isLoading, onPress, title, style, ...props }) => {
+    const { typography, radiuses, borders, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const currentSize = getHighlightButtonSize({
+        spaces,
+        size
+    });
+    const currentType = getHighlightButtonType({
+        type,
+    });
+    const { container: containerDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle } = useStyles({
+        displayBehaviourWhileLoading,
+        icon: IconComponentProp,
+        customBorderColor,
+        isCustomPadding,
+        spreadBehaviour,
+        iconDirection,
+        glassEffect,
+        currentType,
+        currentSize,
+        customColor,
+        isDisabled,
+        isLoading,
+        radiuses,
+        borders,
+        colors,
+        spaces,
+        title,
+        type
+    });
+    const titleProps = {
+        color: currentType.titleColor
+    };
+    const iconProps = {
+        size: Number(typography[currentSize.fontSize].fontSize),
+        color: currentType.iconColor
+    };
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+        iconProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+    const renderIcon = () => {
+        if (!isDisabled && !isLoading) {
+            if (customTextColor) {
+                const _customTextColor = customTextColor;
+                iconProps.customColor = colors.project[_customTextColor] ? colors.project[_customTextColor] : customTextColor;
+            }
+            if (customIconColor) {
+                const _customIconColor = customIconColor;
+                iconProps.customColor = colors.project[_customIconColor] ? colors.project[_customIconColor] : customIconColor;
+            }
+        }
+        if (isLoading) {
+            if (renderLoading) {
+                return renderLoading();
+            }
+            return _jsx(Loading, { ...iconProps, style: {
+                    ...loadingDynamicStyle
+                } });
+        }
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(IconComponentProp, { ...iconProps });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        if (!isDisabled && !isLoading) {
+            if (customTextColor) {
+                titleProps.customColor = customTextColor;
+            }
+        }
+        return _jsx(Text, { variant: currentSize.fontSize, style: [
+                titleStyle,
+                stylesheet.title,
+                titleDynamicStyle
+            ], ...titleProps, children: title });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.loading,
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { ...props, onPress: isDisabled || isLoading ? () => null : onPress, disabled: isDisabled || isLoading, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderIcon(), renderTitle(), renderOverlay()] });
+};
+export default HighlightButton;

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

@@ -0,0 +1,185 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+import { webStyle } from "../../utils";
+export const BUTTON_SIZES = {
+    small: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingXs",
+        fontSize: "labelSmallSize"
+    },
+    medium: {
+        paddingHorizontal: "spacingLg",
+        paddingVertical: "spacingSm",
+        fontSize: "labelMediumSize"
+    },
+    large: {
+        paddingHorizontal: "spacingXl",
+        paddingVertical: "spacingMd",
+        fontSize: "labelLargeSize"
+    }
+};
+export const BUTTON_TYPE_STYLES = {
+    glass: {
+        titleColor: "constrastHigh",
+        iconColor: "constrastHigh",
+        containerColor: "neutral",
+        borderColor: "subtle"
+    },
+    primary: {
+        containerColor: "primary",
+        borderColor: "onPrimary",
+        titleColor: "onPrimary",
+        iconColor: "onPrimary"
+    },
+    danger: {
+        containerColor: "error",
+        borderColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "neutral",
+        borderColor: "subtle",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getHighlightButtonType = ({ type }) => {
+    const currentType = BUTTON_TYPE_STYLES[type];
+    return currentType;
+};
+export const getHighlightButtonSize = ({ spaces, size }) => {
+    const currentSize = BUTTON_SIZES[size];
+    return {
+        paddingHorizontal: spaces[currentSize.paddingHorizontal],
+        paddingVertical: spaces[currentSize.paddingVertical],
+        fontSize: currentSize.fontSize
+    };
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex"
+    },
+    title: {
+        textAlign: "center",
+        margin: "0"
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ displayBehaviourWhileLoading, customBorderColor, spreadBehaviour, isCustomPadding, iconDirection, glassEffect, currentType, currentSize, customColor, isDisabled, isLoading, radiuses, borders, colors, spaces, title, icon, type }) => {
+    const styleType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;
+    const styles = {
+        container: {
+            backgroundColor: colors.system.low[currentType.containerColor],
+            borderColor: colors.content.border[currentType.borderColor],
+            paddingRight: currentSize.paddingHorizontal,
+            paddingBottom: currentSize.paddingVertical,
+            paddingLeft: currentSize.paddingHorizontal,
+            paddingTop: currentSize.paddingVertical,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line / 4,
+            ...webStyle({
+                boxShadow: `inset 0 0px 0.5px ${currentType.borderColor}, inset 0 -2px 6px ${currentType.borderColor}, 0 10px 30px ${currentType.borderColor}`,
+                WebkitBackdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`,
+                backdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`
+            })
+        },
+        title: {},
+        loading: {},
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        }
+    };
+    if (isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.overlay.display = "flex";
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        }
+    }
+    if (isLoading && spreadBehaviour === "stretch") {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+    if (icon && !isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isDisabled) {
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+    }
+    if (icon && title) {
+        if (iconDirection === "left") {
+            styles.title.marginLeft = spaces.spacingSm;
+        }
+        else {
+            styles.title.marginRight = spaces.spacingSm;
+        }
+    }
+    if (icon && !title) {
+        styles.container.paddingBottom = currentSize.paddingVertical;
+        styles.container.paddingRight = currentSize.paddingVertical;
+        styles.container.paddingLeft = currentSize.paddingVertical;
+        styles.container.paddingTop = currentSize.paddingVertical;
+    }
+    if (isCustomPadding) {
+        delete styles.container.paddingBottom;
+        delete styles.container.paddingRight;
+        delete styles.container.paddingLeft;
+        delete styles.container.paddingTop;
+    }
+    if (customColor) {
+        const _customContainerColor = customColor;
+        const _customColor = customColor;
+        styles.container.backgroundColor = colors.project[_customColor] ? colors.project[_customColor] : colors.content.container[_customContainerColor] ? colors.content.container[_customContainerColor] : customColor;
+    }
+    if (customBorderColor) {
+        const _customContentBorderColor = customBorderColor;
+        const _customBorderColor = customBorderColor;
+        styles.container.borderColor = colors.project[_customBorderColor] ? colors.project[_customBorderColor] : colors.content.border[_customContentBorderColor] ? colors.content.border[_customContentBorderColor] : customBorderColor;
+    }
+    return styles;
+};
+export default stylesheet;

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

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

package/lib/src/components/index.js

@@ -0,0 +1,42 @@
+export { default as Text } from "./text";
+export { default as Button } from "./button";
+export { default as PageContainer } from "./pageContainer";
+export { default as Dialog } from "./dialog";
+export { default as Modal } from "./modal";
+export { default as Loading } from "./loading";
+export { default as TextInput } from "./textInput";
+export { default as SelectBox } from "./selectBox";
+export { default as BottomSheet } from "./bottomSheet";
+export { default as SelectSheet } from "./selectSheet";
+export { default as CheckBox } from "./checkBox";
+export { default as Toast } from "./toast";
+export { default as SnackBar } from "./snackBar";
+export { default as TextAreaInput } from "./textAreaInput";
+export { default as RadioButton } from "./radioButton";
+export { default as RowCard } from "./rowCard";
+export { default as Switch } from "./switch";
+export { default as NotificationIndicator } from "./notificationIndicator";
+export { default as DateTimePicker } from "./dateTimePicker";
+export { default as DateTimeSheet } from "./dateTimeSheet";
+export { default as DateSelector } from "./dateSelector";
+export { default as NumericInput } from "./numericInput";
+export { default as MarkdownViewer } from "./markdownViewer";
+export { default as StateCard } from "./stateCard";
+export { default as MonthSelector } from "./monthSelector";
+export { default as TimeSelector } from "./timeSelector";
+export { default as Sticker } from "./sticker";
+export { default as Chip } from "./chip";
+export { default as Header } from "./header";
+export { default as ThemeSwitcher } from "./themeSwitcher";
+export { default as PaletteSwitcher } from "./paletteSwitcher";
+export { default as Avatar } from "./avatar";
+export { default as AvatarGroup } from "./avatarGroup";
+export { default as Menu } from "./menu";
+export { default as MenuButton } from "./menu/components/menuButton";
+export { default as SiteLogo } from "./siteLogo";
+export { default as Seperator } from "./seperator";
+export { default as EmbeddedMenu } from "./embeddedMenu";
+export { default as MainHeader } from "./mainHeader";
+export { default as HighlightButton } from "./highlightButton";
+export { default as LocaleSwitcher } from "./localeSwitcher";
+export { blockquoteMarkdown, centerMarkdown, enterMarkdown, imageMarkdown, parseMarkdown, rightMarkdown, textMarkdown, codeMarkdown, leftMarkdown, linkMarkdown, listMarkdown } from "./markdownViewer/util";

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import stylesheet from "./stylesheet";
+import LoadingIcon from "../../assets/svg/loadingIcon";
+const Loading = ({ color = "emphasized", customColor, size = 22, style, ...props }) => {
+    return _jsx(LoadingIcon, { ...props, customColor: customColor, color: color, size: size, style: {
+            ...stylesheet.container,
+            ...style
+        } });
+};
+export default Loading;

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

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        transformOrigin: "center"
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,2 @@
+import {} from "react";
+import {} from "react-native-svg";

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { NCoreUIKitLocalize } from "../../core/hooks";
+import Button from "../button";
+import { EnUsIcon, TRTRIcon } from "../../assets/svg";
+const PaletteSwitcher = ({ variants: variantsProps = [], isWorkWithNextShowSystem, customLocalize, color, style, ...props }) => {
+    const { activeLocale, localeKeys } = NCoreUIKitLocalize.useContext(customLocalize);
+    const [currentIndex, setCurrentIndex] = useState(localeKeys.findIndex(t => t === activeLocale));
+    useEffect(() => {
+        const cI = localeKeys.findIndex(tI => tI === activeLocale);
+        const nextCI = isWorkWithNextShowSystem ? cI + 1 > localeKeys.length - 1 ? 0 : cI + 1 : cI;
+        if (currentIndex !== nextCI) {
+            setCurrentIndex(nextCI);
+        }
+    }, [activeLocale]);
+    const variantsPre = variantsProps;
+    const isHaveNCTRTR = variantsProps.findIndex(iV => iV.localeKey === "tr-TR") !== -1;
+    const isHaveNCENUS = variantsProps.findIndex(iV => iV.localeKey === "en-US") !== -1;
+    if (!isHaveNCTRTR) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            iconColor: "turkish",
+            localeKey: "tr-TR",
+            icon: ({ size }) => {
+                return _jsx(TRTRIcon, { size: size + 5 });
+            }
+        });
+    }
+    if (!isHaveNCENUS) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            iconColor: "english",
+            localeKey: "en-US",
+            icon: ({ size }) => {
+                return _jsx(EnUsIcon, { size: size + 5 });
+            }
+        });
+    }
+    const variants = [...variantsPre].sort((a, b) => {
+        return localeKeys.indexOf(a.localeKey) - localeKeys.indexOf(b.localeKey);
+    });
+    const currentVariantIndex = variants.findIndex(e => e.localeKey === activeLocale);
+    if (currentVariantIndex === -1) {
+        return null;
+    }
+    const nextVariantIndex = currentVariantIndex + 1;
+    const viewVariantIndex = nextVariantIndex > variants.length - 1 ? 0 : nextVariantIndex;
+    const currentVariant = variants[isWorkWithNextShowSystem ? viewVariantIndex : currentVariantIndex];
+    return _jsx(Button, { ...props, customBorderColor: currentVariant && currentVariant.borderColor ?
+            currentVariant.borderColor
+            :
+                color, customColor: currentVariant && currentVariant.backgroundColor ?
+            currentVariant.backgroundColor
+            :
+                color, icon: ({ color, size }) => {
+            const Icon = currentVariant?.icon;
+            return _jsx(Icon, { customColor: currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined, color: color, size: size });
+        }, onPress: () => {
+            NCoreUIKitLocalize.switch({
+                localeKey: localeKeys[viewVariantIndex]
+            });
+        }, style: [
+            style
+        ] });
+};
+export default PaletteSwitcher;

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

@@ -0,0 +1 @@
+import {} from "react-native";