Feature: Checbox Component completed.

example/src/pages/home/index.tsx

@@ -1,5 +1,6 @@
 import {
-    useRef
+    useRef,
+    useState
 } from "react";
 import {
     View
@@ -71,6 +72,11 @@ const Home = () => {
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
+    const [
+        isCheckboxActive,
+        setIsCheckboxActive
+    ] = useState<"partially" | "checked" | null>("checked");
+
     return <View
         style={[
             stylesheet.container,
@@ -83,11 +89,11 @@ const Home = () => {
             keyExtractor={(data, index) => `${data.t}-${index}`}
             titleExtractor={(data) => data.t}
             subTitle="Deneme Subtitle"
+            // isWorkWithRealtime={false}
             hintText="Test deneme"
             isShowSubTitle={true}
             isMultipleSelect={true}
             maxChoice={-1}
-            // isWorkWithRealtime={false}
             initialSelectedItems={[{
                 __title: X[0]?.t as string,
                 __key: `${X[0]?.t}-0`
@@ -99,12 +105,13 @@ const Home = () => {
             data={X}
         />
         <CheckBox
+            isChecked={isCheckboxActive}
             title="sadfasfsafasf"
+            isDisabled={false}
             subTitle="asfgsaf"
-            isDisabled={true}
-            isOptional={true}
-            spreadBehaviour="stretch"
-            isFlip={true}
+            onPress={() => {
+                setIsCheckboxActive(isCheckboxActive === "checked" ? null : isCheckboxActive === null ? "partially" : "checked");
+            }}
         />
         <TextInput
             variant="hidden"

src/components/checkBox/index.tsx

@@ -34,10 +34,10 @@ const CheckBox: FC<ICheckBoxProps> = ({
     optionalText,
     customTheme,
     titleStyle,
+    isChecked,
     isLoading,
     subTitle,
     onPress,
-    isHalf,
     title,
     style,
     ...props
@@ -74,6 +74,7 @@ const CheckBox: FC<ICheckBoxProps> = ({
         inlineSpaces,
         currentType,
         isDisabled,
+        isChecked,
         isLoading,
         radiuses,
         borders,
@@ -87,10 +88,28 @@ const CheckBox: FC<ICheckBoxProps> = ({
         color: currentType.titleColor,
     };
 
+    const subTitleProps: ITextProps = {
+        color: currentType.subTitleColor,
+    };
+
+    const indicatorIconProps: {
+        color: keyof NCoreUIKit.BorderContentColors;
+        customColor?: string;
+    } = {
+        color: currentType.indicatorColor
+    };
+
     if (isDisabled || isLoading) {
         const stateType = type === "danger" ? "error" : type;
 
+        subTitleProps.customColor = colors.system.state.content.disabled[stateType];
         titleProps.customColor = colors.system.state.content.disabled[stateType];
+
+        if(isChecked && stateType === "neutral") {
+            indicatorIconProps.customColor = colors.system.state.border.disabled.primary;
+        } else {
+            indicatorIconProps.customColor = colors.system.state.border.disabled[stateType];
+        }
     }
 
     const renderOptionalText = () => {
@@ -136,6 +155,31 @@ const CheckBox: FC<ICheckBoxProps> = ({
         </View>;
     };
 
+    const renderCheckIcon = () => {
+        if(!isChecked) {
+            return <View
+                style={{
+                    height: 16,
+                    width: 16
+                }}
+            />;
+        }
+
+        const selectedColor = indicatorIconProps.customColor ? indicatorIconProps.customColor : colors.content.border[indicatorIconProps.color];
+
+        if(isChecked === "partially") {
+            return <Minus
+                color={selectedColor}
+                size={16}
+            />;
+        }
+
+        return <Check
+            color={selectedColor}
+            size={16}
+        />;
+    };
+
     const renderCheckIndicator = () => {
         if (isLoading) {
             return <Loading
@@ -151,16 +195,7 @@ const CheckBox: FC<ICheckBoxProps> = ({
                 indicatorContainerDynamicStyle
             ]}
         >
-            {
-                isHalf ?
-                    <Minus
-                        size={18}
-                    />
-                    :
-                    <Check
-                        size={18}
-                    />
-            }
+            {renderCheckIcon()}
 
             {renderOverlay()}
         </View>;
@@ -181,6 +216,7 @@ const CheckBox: FC<ICheckBoxProps> = ({
         }
 
         return <Text
+            {...subTitleProps}
             style={[
                 subTitleStyle,
                 stylesheet.subTitle,

src/components/checkBox/stylesheet.ts

@@ -17,45 +17,52 @@ export const CHECK_BOX_TYPE_STYLES: Record<
     CheckBoxType,
     {
         containerColor: keyof NCoreUIKit.ContainerContentColors;
+        indicatorColor: keyof NCoreUIKit.BorderContentColors;
         subTitleColor: keyof NCoreUIKit.TextContentColors;
         borderColor: keyof NCoreUIKit.BorderContentColors;
         titleColor: keyof NCoreUIKit.TextContentColors;
     }
 > = {
     primary: {
-        subTitleColor: "emphasized",
-        containerColor: "primary",
+        indicatorColor: "emphasized",
         borderColor: "emphasized",
-        titleColor: "emphasized"
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
     },
     danger: {
+        subTitleColor: "dangerLow",
+        indicatorColor: "danger",
         containerColor: "danger",
-        subTitleColor: "danger",
         borderColor: "danger",
         titleColor: "danger"
     },
     success: {
+        subTitleColor: "successLow",
+        indicatorColor: "success",
         containerColor: "success",
-        subTitleColor: "success",
         borderColor: "success",
         titleColor: "success"
     },
     warning: {
+        subTitleColor: "warningLow",
+        indicatorColor: "warning",
         containerColor: "warning",
-        subTitleColor: "warning",
         borderColor: "warning",
         titleColor: "warning"
     },
     info: {
+        subTitleColor: "infoLow",
+        indicatorColor: "info",
         containerColor: "info",
-        subTitleColor: "info",
         borderColor: "info",
         titleColor: "info"
     },
     neutral: {
-        containerColor: "subtle",
+        indicatorColor: "emphasized",
+        containerColor: "mid",
         borderColor: "subtle",
-        subTitleColor: "mid",
+        subTitleColor: "low",
         titleColor: "mid"
     }
 };
@@ -81,7 +88,8 @@ const stylesheet = StyleSheet.create({
         position: "relative"
     },
     contentContainer: {
-
+        justifyContent: "center",
+        flexDirection: "column"
     },
     titleContainer: {
         justifyContent: "flex-start",
@@ -99,10 +107,11 @@ const stylesheet = StyleSheet.create({
     overlay: {
         position: "absolute",
         display: "none",
-        bottom: 0,
-        right: 0,
-        left: 0,
-        top: 0
+        zIndex: 999,
+        bottom: -2,
+        right: -2,
+        left: -2,
+        top: -2
     }
 });
 
@@ -113,7 +122,9 @@ export const useStyles = ({
     currentType,
     isDisabled,
     isLoading,
+    isChecked,
     radiuses,
+    borders,
     colors,
     isFlip,
     spaces,
@@ -127,7 +138,9 @@ export const useStyles = ({
         } as Mutable<ViewStyle>,
         indicatorContainer: {
             backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.border[currentType.borderColor],
             borderRadius: radiuses.actions,
+            borderWidth: borders.line,
             padding: spaces.spacingXs
         } as Mutable<ViewStyle>,
         contentContainer: {
@@ -145,14 +158,16 @@ export const useStyles = ({
         loading: {
         } as Mutable<ViewStyle>,
         overlay: {
-            borderRadius: radiuses.actions - 2
+            borderRadius: radiuses.actions
         } as Mutable<ViewStyle>,
         optionalText: {
             marginLeft: inlineSpaces.subTitle
         } as Mutable<TextStyle>
     };
 
-    styles.indicatorContainer.borderColor = styles.indicatorContainer.backgroundColor;
+    if(styleType === "neutral") {
+        styles.indicatorContainer.borderColor = colors.content.border.default;
+    }
 
     if (isLoading) {
         if (displayBehaviourWhileLoading === "disabled") {
@@ -185,8 +200,20 @@ export const useStyles = ({
         styles.container.width = "100%";
     }
 
+    if(isChecked) {
+        if(styleType === "neutral") {
+            styles.indicatorContainer.backgroundColor = colors.content.container.selected;
+            styles.indicatorContainer.borderColor = colors.content.border.emphasized;
+        }
+    }
+
     if (isDisabled) {
-        styles.indicatorContainer.borderColor = colors.system.state.overlay.disabled[styleType];
+        if(styleType === "neutral" && isChecked) {
+            styles.indicatorContainer.backgroundColor = colors.system.state.border.disabled.primary;
+            styles.indicatorContainer.borderColor = colors.system.state.border.disabled.primary;
+        } else {
+            styles.indicatorContainer.borderColor = colors.system.state.border.disabled[styleType];
+        }
 
         styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
         styles.overlay.display = "flex";

src/components/checkBox/type.ts

@@ -8,6 +8,7 @@ export type CheckBoxDynamicStyleType = {
     displayBehaviourWhileLoading?: CheckBoxDisplayBehaviourWhileLoading;
     inlineSpaces: NCoreUIKit.ActivePalette["inlineSpaces"];
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    isChecked?: "checked" | "partially" | null;
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
     spreadBehaviour?: CheckBoxSpreadBehaviour;
@@ -22,6 +23,7 @@ export type CheckBoxDynamicStyleType = {
 
 export type CheckBoxTypes = {
     containerColor: keyof NCoreUIKit.ContainerContentColors;
+    indicatorColor: keyof NCoreUIKit.BorderContentColors;
     subTitleColor: keyof NCoreUIKit.TextContentColors;
     borderColor: keyof NCoreUIKit.BorderContentColors;
     titleColor: keyof NCoreUIKit.TextContentColors;
@@ -51,6 +53,7 @@ interface ICheckBoxProps {
     customLocalize?: {
         activeLocale?: NCoreUIKit.LocaleKey;
     };
+    isChecked?: "checked" | "partially" | null;
     spreadBehaviour?: CheckBoxSpreadBehaviour;
     optionalText?: string;
     isDisabled?: boolean;
@@ -59,7 +62,6 @@ interface ICheckBoxProps {
     isLoading?: boolean;
     type?: CheckBoxType;
     subTitle?: string;
-    isHalf?: boolean;
     isFlip?: boolean;
     title?: string;
 }