Feature: CheckBox component start.

example/src/pages/home/index.tsx

@@ -13,7 +13,8 @@ import {
     TextInput,
     SelectBox,
     Button,
-    Text
+    Text,
+    CheckBox
 } from "ncore-ui-kit-mobile";
 import {
     useNavigation
@@ -91,12 +92,18 @@ const Home = () => {
                 __title: X[0]?.t as string,
                 __key: `${X[0]?.t}-0`
             }]}
-            minChoice={1}
+            minChoice={2}
             isSearchable={true}
             title="Deneme Box"
             isRequired={true}
             data={X}
         />
+        <CheckBox
+            title="sadfasfsafasf"
+            subTitle="asfgsaf"
+            isDisabled={true}
+            isOptional={true}
+        />
         <TextInput
             variant="hidden"
         />

src/components/bottomSheet/index.tsx

@@ -58,6 +58,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     onOverlayPressed,
     scrollViewProps,
     scrollViewStyle,
+    customTheme,
     modalProps,
     snapPoint,
     customKey,
@@ -72,7 +73,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     const {
         colors,
         spaces
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const {
         bottom,

src/components/bottomSheet/type.ts

@@ -44,6 +44,12 @@ interface IBottomSheetProps {
     isActive?: boolean;
     customKey?: string;
     style?: ViewStyle;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
 }
 export type {
     IBottomSheetProps as default

src/components/button/index.tsx

@@ -36,6 +36,7 @@ const Button: FC<IButtonProps> = ({
     isDisabled = false,
     type = "primary",
     size = "medium",
+    customTheme,
     titleStyle,
     isLoading,
     onPress,
@@ -49,7 +50,7 @@ const Button: FC<IButtonProps> = ({
         borders,
         colors,
         spaces
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const currentSize = getButtonSize({
         spaces,

src/components/button/stylesheet.ts

@@ -223,6 +223,8 @@ export const useStyles = ({
     if (isLoading) {
         styles.title.marginLeft = spaces.spacingSm;
 
+        styles.overlay.display = "flex";
+
         if (displayBehaviourWhileLoading === "disabled") {
             if (variant !== "ghost") {
                 styles.container.borderColor = colors.system.state.overlay.disabled[styleType];

src/components/button/type.ts

@@ -81,6 +81,12 @@ interface IButtonProps extends Omit<ButtonProps, "title"> {
     displayBehaviourWhileLoading?: ButtonDisplayBehaviourWhileLoading;
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
     spreadBehaviour?: ButtonSpreadBehaviour;
     iconDirection?: "left" | "right";
     variant?: ButtonVariant;

src/components/checkBox/index.tsx

@@ -0,0 +1,224 @@
+import {
+    type FC
+} from "react";
+import {
+    TouchableOpacity,
+    View
+} from "react-native";
+import type ICheckBoxProps from "./type";
+import stylesheet, {
+    getCheckBoxType,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type ITextProps from "../text/type";
+import {
+    Check,
+    Minus
+} from "lucide-react-native";
+import Loading from "../loading";
+import Text from "../text";
+
+const CheckBox: FC<ICheckBoxProps> = ({
+    displayBehaviourWhileLoading = "disabled",
+    spreadBehaviour = "baseline",
+    isOptional = false,
+    isDisabled = false,
+    type = "neutral",
+    isFlip = false,
+    customLocalize,
+    subTitleStyle,
+    optionalText,
+    customTheme,
+    titleStyle,
+    isLoading,
+    subTitle,
+    onPress,
+    isHalf,
+    title,
+    style,
+    ...props
+}) => {
+    const {
+        inlineSpaces,
+        radiuses,
+        borders,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext(customLocalize);
+
+    const currentType = getCheckBoxType({
+        type
+    });
+
+    const {
+        indicatorContainer: indicatorContainerDynamicStyle,
+        contentContainer: contentContainerDynamicStyle,
+        titleContainer: titleContainerDynamicStyle,
+        optionalText: optionalTextDynamicStyle,
+        container: containerDynamicStyle,
+        loading: loadingDynamicStyle,
+        overlay: overlayDynamicStyle,
+        title: titleDynamicStyle
+    } = useStyles({
+        displayBehaviourWhileLoading,
+        spreadBehaviour,
+        inlineSpaces,
+        currentType,
+        isDisabled,
+        isLoading,
+        radiuses,
+        borders,
+        isFlip,
+        colors,
+        spaces,
+        type
+    });
+
+    const titleProps: ITextProps = {
+        color: currentType.titleColor,
+    };
+
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type;
+
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+
+    const renderOptionalText = () => {
+        if(!isOptional && !optionalText) {
+            return null;
+        }
+
+        return <Text
+            variant="labelLargeSize"
+            color={titleProps.color}
+            style={[
+                optionalTextDynamicStyle
+            ]}
+            {...titleProps}
+        >
+            ( {isOptional ? localize("is-optional") : optionalText} )
+        </Text>;
+    };
+
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                style={[
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ]}
+                {...titleProps}
+            >
+                {title}
+            </Text>
+            {renderOptionalText()}
+        </View>;
+    };
+
+    const renderCheckIndicator = () => {
+        if (isLoading) {
+            return <Loading
+                style={[
+                    loadingDynamicStyle
+                ]}
+            />;
+        }
+
+        return <View
+            style={[
+                stylesheet.indicatorContainer,
+                indicatorContainerDynamicStyle
+            ]}
+        >
+            {
+                isHalf ?
+                    <Minus
+                        size={18}
+                    />
+                    :
+                    <Check
+                        size={18}
+                    />
+            }
+
+            {renderOverlay()}
+        </View>;
+    };
+
+    const renderOverlay = () => {
+        return <View
+            style={[
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ]}
+        />;
+    };
+
+    const renderSubtitle = () => {
+        if(!subTitle) {
+            return null;
+        }
+
+        return <Text
+            style={[
+                subTitleStyle
+            ]}
+        >
+            {subTitle}
+        </Text>;
+    };
+
+    const renderContent = () => {
+        if(!title) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ]}
+        >
+            {renderTitle()}
+            {renderSubtitle()}
+        </View>;
+    };
+
+    return (
+        <TouchableOpacity
+            {...props}
+            onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
+            disabled={isDisabled || isLoading || !onPress}
+            style={[
+                style,
+                stylesheet.container,
+                containerDynamicStyle
+            ]}
+        >
+            {renderCheckIndicator()}
+
+            {renderContent()}
+        </TouchableOpacity>
+    );
+};
+export default CheckBox;

src/components/checkBox/stylesheet.ts

@@ -0,0 +1,183 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type CheckBoxDynamicStyleType,
+    type CheckBoxTypeConstantType,
+    type CheckBoxTypes,
+    type CheckBoxType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const CHECK_BOX_TYPE_STYLES: Record<
+    CheckBoxType,
+    {
+        containerColor: keyof NCoreUIKit.ContainerContentColors;
+        subTitleColor: keyof NCoreUIKit.TextContentColors;
+        borderColor: keyof NCoreUIKit.BorderContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+    }
+> = {
+    primary: {
+        subTitleColor: "emphasized",
+        containerColor: "primary",
+        borderColor: "emphasized",
+        titleColor: "emphasized"
+    },
+    danger: {
+        containerColor: "danger",
+        subTitleColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        subTitleColor: "success",
+        borderColor: "success",
+        titleColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        subTitleColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        subTitleColor: "info",
+        borderColor: "info",
+        titleColor: "info"
+    },
+    neutral: {
+        containerColor: "subtle",
+        borderColor: "subtle",
+        subTitleColor: "mid",
+        titleColor: "mid"
+    }
+};
+
+export const getCheckBoxType = ({
+    type
+}: CheckBoxTypeConstantType): CheckBoxTypes => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+
+    return currentType;
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        display: "flex"
+    },
+    indicatorContainer: {
+        position: "relative"
+    },
+    contentContainer: {
+
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        margin: "0",
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+
+export const useStyles = ({
+    displayBehaviourWhileLoading,
+    spreadBehaviour,
+    inlineSpaces,
+    currentType,
+    isDisabled,
+    isLoading,
+    radiuses,
+    borders,
+    colors,
+    isFlip,
+    spaces,
+    type
+}: CheckBoxDynamicStyleType) => {
+    const styleType = type === "danger" ? "error" : type;
+
+    const styles = {
+        container: {
+            borderWidth: borders.line,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        indicatorContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderRadius: radiuses.actions,
+            padding: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        contentContainer: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        titleContainer: {
+
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
+        loading: {
+        } as Mutable<ViewStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        } as Mutable<ViewStyle>,
+        optionalText: {
+            marginLeft: inlineSpaces.subTitle
+        } as Mutable<TextStyle>
+    };
+
+    styles.indicatorContainer.borderColor = styles.indicatorContainer.backgroundColor;
+
+    if (isLoading) {
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.indicatorContainer.borderColor = colors.system.state.overlay.disabled[styleType];
+
+            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+            styles.overlay.display = "flex";
+        }
+    }
+
+    if (isFlip) {
+        styles.contentContainer.marginRight = spaces.spacingSm;
+        styles.contentContainer.marginLeft = 0;
+    }
+
+    if (spreadBehaviour === "baseline") {
+        styles.indicatorContainer.alignSelf = spreadBehaviour;
+        styles.indicatorContainer.width = "auto";
+    } else if (spreadBehaviour === "stretch") {
+        styles.indicatorContainer.alignSelf = spreadBehaviour;
+        styles.indicatorContainer.justifyContent = "center";
+        styles.indicatorContainer.flexShrink = 1;
+        styles.indicatorContainer.width = "100%";
+    }
+
+    if (isDisabled) {
+        styles.indicatorContainer.borderColor = colors.system.state.overlay.disabled[styleType];
+
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+
+    return styles;
+};
+export default stylesheet;

src/components/checkBox/type.ts

@@ -0,0 +1,68 @@
+import {
+    type ViewStyle,
+    type StyleProp,
+    type TextStyle
+} from "react-native";
+
+export type CheckBoxDynamicStyleType = {
+    displayBehaviourWhileLoading?: CheckBoxDisplayBehaviourWhileLoading;
+    inlineSpaces: NCoreUIKit.ActivePalette["inlineSpaces"];
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spreadBehaviour?: CheckBoxSpreadBehaviour;
+    borders: NCoreUIKit.Borders;
+    currentType: CheckBoxTypes;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    type: CheckBoxType;
+    theme?: undefined;
+    isFlip?: boolean;
+};
+
+export type CheckBoxTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    subTitleColor: keyof NCoreUIKit.TextContentColors;
+    borderColor: keyof NCoreUIKit.BorderContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+};
+
+export type CheckBoxTypeConstantType = {
+    type: CheckBoxType;
+};
+
+export type CheckBoxType = "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+export type CheckBoxDisplayBehaviourWhileLoading = "none" | "disabled";
+
+export type CheckBoxSpreadBehaviour = "baseline" | "stretch" | "free";
+
+interface ICheckBoxProps {
+    displayBehaviourWhileLoading?: CheckBoxDisplayBehaviourWhileLoading;
+    subTitleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: NCoreUIKit.LocaleKey;
+    };
+    spreadBehaviour?: CheckBoxSpreadBehaviour;
+    optionalText?: string;
+    isDisabled?: boolean;
+    isOptional?: boolean;
+    onPress?: () => void;
+    isLoading?: boolean;
+    type?: CheckBoxType;
+    subTitle?: string;
+    isHalf?: boolean;
+    isFlip?: boolean;
+    title?: string;
+}
+export type {
+    ICheckBoxProps as default
+};

src/components/index.ts

@@ -50,3 +50,7 @@ export type {
 export {
     default as SelectSheet
 } from "./selectSheet";
+
+export {
+    default as CheckBox
+} from "./checkBox";

src/components/modal/index.tsx

@@ -43,12 +43,13 @@ const Modal: RefForwardingComponent<IModalRef, IModalProps> = ({
     onOverlayPress,
     contentStyle,
     overlayProps,
+    customTheme,
     children,
     style
 }, ref) => {
     const {
         colors
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const scaleAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
 

src/components/modal/type.ts

@@ -31,6 +31,12 @@ export type ModalInternalProps = {
     isAnimated?: boolean;
     children?: ReactNode;
     isActive?: boolean;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
 };
 
 interface IModalProps extends ModalInternalProps {

src/components/pageContainer/index.tsx

@@ -22,6 +22,7 @@ const PageContainer: FC<IPageContainerProps> = ({
     safeAreaViewStyle,
     scrollViewStyle,
     scrollViewProps,
+    customTheme,
     children,
     style,
     ...props
@@ -29,7 +30,7 @@ const PageContainer: FC<IPageContainerProps> = ({
     const {
         colors,
         spaces
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const renderScrollview = () => {
         if(style) {

src/components/pageContainer/type.ts

@@ -17,6 +17,12 @@ interface IPageContainerProps {
     style?: StyleProp<ViewStyle>;
     isScrollable?: boolean;
     children?: ReactNode;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
 }
 export type {
     IPageContainerProps as default

src/components/selectBox/index.tsx

@@ -61,11 +61,13 @@ function SelectBox<T>({
     hintTextIcon: HintTextIconProp,
     spreadBehaviour = "baseline",
     isShowHintTextIcon = false,
+    customSelectSheetLocalize,
     isWorkWithRealtime = true,
     isMultipleSelect = false,
     icon: IconComponentProp,
     hintTextContainerStyle,
     removeSelectValidation,
+    customSelectSheetTheme,
     isCleanEnabled = false,
     contentContainerStyle,
     subTitle = "Optional",
@@ -82,12 +84,14 @@ function SelectBox<T>({
     rightIconOnPress,
     renderOptionIcon,
     selectValidation,
+    customLocalize,
     rightIconStyle,
     isShowSubTitle,
     cleanIconStyle,
     titleExtractor,
     keyExtractor,
     contentStyle,
+    customTheme,
     placeholder,
     iconOnPress,
     isOptional,
@@ -109,11 +113,11 @@ function SelectBox<T>({
         borders,
         spaces,
         colors
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const {
         localize
-    } = NCoreUIKitLocalize.useContext();
+    } = NCoreUIKitLocalize.useContext(customLocalize);
 
     const bottomSheetRef = useRef<IBottomSheetRef>(null);
 
@@ -747,8 +751,10 @@ function SelectBox<T>({
 
         <SelectSheet
             LoadingIconComponentProp={LoadingIconComponentProp}
+            customLocalize={customSelectSheetLocalize}
             isWorkWithRealtime={isWorkWithRealtime}
             mainSelectedItems={mainSelectedItems}
+            customTheme={customSelectSheetTheme}
             isMultipleSelect={isMultipleSelect}
             renderOptionIcon={renderOptionIcon}
             selectBoxKey={selectBoxKey.current}
@@ -763,7 +769,6 @@ function SelectBox<T>({
             searchText={searchText}
             renderItem={renderItem}
             maxChoice={maxChoice}
-            minChoice={minChoice}
             isLoading={isLoading}
             isActive={isActive}
             cancel={cancel}

src/components/selectBox/type.ts

@@ -98,6 +98,24 @@ interface ISelectBoxProps<T> {
         index: number;
         key: string;
     }) => ReactElement;
+    customSelectSheetTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
+    customSelectSheetLocalize?: {
+        activeLocale?: NCoreUIKit.LocaleKey;
+    };
+    customLocalize?: {
+        activeLocale?: NCoreUIKit.LocaleKey;
+    };
     isWorkWithRealtime?: boolean;
     isMultipleSelect?: boolean;
     cleanIconStyle?: ViewStyle;

src/components/selectSheet/index.tsx

@@ -29,6 +29,7 @@ function SelectSheet<T>({
     isMultipleSelect,
     renderOptionIcon,
     bottomSheetRef,
+    customLocalize,
     setSearchText,
     selectBoxKey,
     setIsLoading,
@@ -36,6 +37,7 @@ function SelectSheet<T>({
     keyExtractor,
     searchedData,
     isSearchable,
+    customTheme,
     setIsActive,
     renderItem,
     searchText,
@@ -51,11 +53,11 @@ function SelectSheet<T>({
         radiuses,
         colors,
         spaces
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const {
         localize
-    } = NCoreUIKitLocalize.useContext();
+    } = NCoreUIKitLocalize.useContext(customLocalize);
 
     const {
         checkIconContainer: checkIconContainerDynamicStyle,
@@ -63,6 +65,7 @@ function SelectSheet<T>({
         contentContainer: contentContainerDynamicStyle,
         headerContainer: headerContainerDynamicStyle,
         bottomContainer: bottomContainerDynamicStyle,
+        toolsContainer: toolsContainerDynamicStyle,
         itemContainer: itemContainerDynamicStyle,
         cancelButton: cancelButtonDynamicStyle,
         headerTitle: headerTitleDynamicStyle,
@@ -209,6 +212,38 @@ function SelectSheet<T>({
         />;
     };
 
+    const renderTools = () => {
+        return <View
+            style={[
+                stylesheet.toolsContainer,
+                toolsContainerDynamicStyle
+            ]}
+        >
+            <Button
+                title={localize("clean-all")}
+                variant="ghost"
+                type="neutral"
+                style={{
+                    paddingStart: spaces.spacingSm
+                }}
+                onPress={() => {
+
+                }}
+            />
+            <Button
+                title={localize("select-all")}
+                variant="ghost"
+                type="neutral"
+                style={{
+                    paddingEnd: spaces.spacingSm
+                }}
+                onPress={() => {
+
+                }}
+            />
+        </View>;
+    };
+
     const renderBottomSheetHeader = () => {
         return <View
             style={[
@@ -225,6 +260,7 @@ function SelectSheet<T>({
                 {title}
             </Text>
             {renderBottomSheetSearchInput()}
+            {renderTools()}
         </View>;
     };
 

src/components/selectSheet/stylesheet.ts

@@ -33,6 +33,11 @@ const stylesheet = StyleSheet.create({
     checkIconContainer: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    toolsContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center"
     }
 });
 
@@ -44,10 +49,10 @@ export const useStyles = ({
 }: SelectSheetDynamicStyleType) => {
     const styles = {
         contentContainer: {
-            padding: spaces.spacingSm
+            paddingVertical: spaces.spacingSm
         } as Mutable<ViewStyle>,
         headerContainer: {
-            padding: spaces.spacingSm
+            marginBottom: spaces.spacingSm
         } as Mutable<ViewStyle>,
         headerTitle: {
 
@@ -74,6 +79,9 @@ export const useStyles = ({
         } as Mutable<ViewStyle>,
         loadingContainer: {
             padding: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        toolsContainer: {
+
         } as Mutable<ViewStyle>
     };
 

src/components/selectSheet/type.ts

@@ -38,6 +38,15 @@ interface ISelectSheetProps<T> {
         index: number;
         key: string;
     }) => ReactElement;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: NCoreUIKit.LocaleKey;
+    };
     setSearchText: Dispatch<SetStateAction<string>>;
     setIsLoading: Dispatch<SetStateAction<boolean>>;
     setIsActive: Dispatch<SetStateAction<boolean>>;
@@ -54,7 +63,6 @@ interface ISelectSheetProps<T> {
     isSearchable?: boolean;
     selectBoxKey: string;
     maxChoice?: number;
-    minChoice?: number;
     searchText: string;
     isLoading: boolean;
     cancel: () => void;

src/components/text/index.tsx

@@ -14,6 +14,7 @@ const Text: FC<ITextProps> = ({
     variant = "bodyMediumSize",
     color = "mid",
     customColor,
+    customTheme,
     children,
     style,
     ...props
@@ -21,7 +22,7 @@ const Text: FC<ITextProps> = ({
     const {
         typography,
         colors
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     return (
         <NativeText

src/components/text/type.ts

@@ -13,6 +13,12 @@ interface ITextProps extends TextProps {
     variant?: keyof NCoreUIKit.Typography;
     customColor?: string;
     children?: ReactNode;
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
 }
 export type {
     ITextProps as default

src/components/textInput/index.tsx

@@ -68,11 +68,13 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
     variant = "text",
     type = "default",
     rightIconOnPress,
+    customLocalize,
     rightIconStyle,
     isShowSubTitle,
     cleanIconStyle,
     onChangeText,
     initialValue,
+    customTheme,
     placeholder,
     iconOnPress,
     isOptional,
@@ -91,11 +93,11 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
         borders,
         spaces,
         colors
-    } = NCoreUIKitTheme.useContext();
+    } = NCoreUIKitTheme.useContext(customTheme);
 
     const {
         localize
-    } = NCoreUIKitLocalize.useContext();
+    } = NCoreUIKitLocalize.useContext(customLocalize);
 
     const currentType = getTextInputType({
         type

src/components/textInput/type.ts

@@ -52,6 +52,15 @@ export type TextInputSpreadBehaviour = "baseline" | "stretch" | "free";
 export type TextInputVariant = "text" | "hidden";
 
 interface ITextInputProps extends TextInputProps {
+    customTheme?: {
+        gapPropagation?: NCoreUIKit.GapPropagationKey;
+        sharpness?: NCoreUIKit.SharpnessKey;
+        paletteKey?: NCoreUIKit.PaletteKey;
+        themeKey?: NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: NCoreUIKit.LocaleKey;
+    };
     spreadBehaviour?: TextInputSpreadBehaviour;
     onChangeText?: (value: string) => void;
     validation?: (text: string) => boolean;

src/index.tsx

@@ -15,6 +15,7 @@ export {
     SelectSheet,
     TextInput,
     SelectBox,
+    CheckBox,
     Loading,
     // Dialog,
     Button,

src/types/index.ts

@@ -65,6 +65,8 @@ type NCoreUIKitConfig = ThemesType & LocalizeType & ModalType;
 
 declare global {
     namespace NCoreUIKit {
+        type GapPropagationKey = GapPropagationType;
+        type SharpnessKey = SharpnessType;
         type PaletteKey = PaletteType;
         type LocaleKey = LocaleType;
         type ThemeKey = ThemeType;

src/variants/locales/default.json

@@ -5,7 +5,9 @@
         "translations": {
             "selected-options-with-count": "{{0}} items selected",
             "select-an-option": "Select an option",
+            "select-all": "Select All",
             "is-optional": "Opsiyonel",
+            "clean-all": "Clean All",
             "cancel": "İptal",
             "search": "Ara",
             "ok": "Tamam"
@@ -17,6 +19,8 @@
         "translations": {
             "selected-options-with-count": "{{0}} seçim yapıldı",
             "select-an-option": "Seçim yapın",
+            "clean-all": "Tümünü Temizle",
+            "select-all": "Tümünü Seç",
             "is-optional": "Optional",
             "cancel": "Cancel",
             "search": "Search",