Merge branch 'release/1.0.0-pre-alpha.18'

.gitignore

@@ -86,3 +86,4 @@ nitrogen/
 
 #nibgat:
 /.history
+/.VSCodeCounter

eslint.config.mjs

@@ -15,7 +15,8 @@ export default tseslint.config(
             "node_modules",
             "dist",
             "lib",
-            ".history"
+            ".history",
+            "version.mjs"
         ]
     },
     js.configs.recommended,

example/package.json

@@ -19,8 +19,8 @@
         "expo-status-bar": "~55.0.4",
         "lucide-react-native": "^1.8.0",
         "ncore-context": "^1.0.5",
-        "react": "19.2.0",
-        "react-dom": "19.2.0",
+        "react": "19.2.6",
+        "react-dom": "19.2.6",
         "react-native": "0.83.2",
         "react-native-safe-area-context": "^5.7.0",
         "react-native-screens": "^4.24.0",

example/src/index.tsx

@@ -8,7 +8,7 @@ import {
 
 const NCoreUIKitBase = setupNCoreUIKit({
     initialSelectedGapPropagation: "spacious",
-    initialSelectedTheme: "dark"
+    initialSelectedTheme: "light"
 });
 
 const App = () => {

example/src/pages/home/index.tsx

@@ -1,4 +1,5 @@
 import {
+    Fragment,
     useState,
     useRef
 } from "react";
@@ -8,6 +9,7 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitBottomSheet,
+    NotificationIndicator,
     getNCoreUIKitVersion,
     type IBottomSheetRef,
     NCoreUIKitSnackBar,
@@ -26,7 +28,7 @@ import {
     Dialog,
     Switch,
     Text,
-    NotificationIndicator
+    MarkdownViewer
 } from "ncore-ui-kit-mobile";
 import {
     useNavigation
@@ -232,13 +234,150 @@ const Home = () => {
         scrollViewStyle={stylesheet.container}
         scrollViewProps={{
             contentContainerStyle: {
-                backgroundColor: colors.content.container.default
+                backgroundColor: colors.content.container.default,
+                ...stylesheet.contentContainer
             }
         }}
+        renderOverlays={() => {
+            return <Fragment>
+                <Dialog
+                    isVisible={isDialogActive}
+                    content="etgweı09gı9w0eg"
+                    title="Merhaba Dünya!"
+                    contentJustify="centered"
+                    modalProps={{
+                        isWorkWithPortal: false
+                    }}
+                    onOverlayPress={({
+                        closeAnimation
+                    }) => {
+                        closeAnimation(() => setIsDialogActive(false));
+                    }}
+                    variant="yes-no"
+                    secondaryButtonProps={{
+                        title: "sdfgsdg",
+                        onPress: () => {
+
+                        }
+                    }}
+                    primaryButtonProps={{
+                        onPress: ({
+                            closeAnimation
+                        }) => {
+                            closeAnimation(() => setIsDialogActive(false));
+                        }
+                    }}
+                />
+                <BottomSheet
+                    ref={bottomSheetRef}
+                    renderHeader={() => {
+                        return <View
+                            style={[
+                                {
+                                    backgroundColor: "blue",
+                                    padding: 20
+                                }
+                            ]}
+                        >
+                            <Text>Burası header.</Text>
+                        </View>;
+                    }}
+                    isCanFullScreenOnSwipe={true}
+                    isWorkWithPortal={false}
+                    snapPoint={300}
+                    key="ahmet"
+                >
+                    <Button
+                        title="Open Toast"
+                        variant="filled"
+                        type="warning"
+                        onPress={() => {
+                            NCoreUIKitToast.open({
+                                title: "sdgfsdgsdg",
+                                type: "danger"
+                            });
+                        }}
+                    />
+                    <Button
+                        onPress={() => {
+                            navigation.navigate("TestSubPage");
+                        }}
+                        title="Git."
+                    />
+                    {[
+                        0,
+                        1,
+                        2,
+                        3,
+                        4,
+                        5,
+                        6,
+                        7,
+                        8,
+                        9,
+                        10,
+                        11,
+                        12,
+                        13,
+                        14,
+                        15,
+                        16,
+                        17,
+                        18,
+                        19,
+                        20,
+                        21,
+                        22,
+                        23,
+                        24,
+                        25,
+                        26,
+                        27,
+                        28,
+                        29,
+                        30,
+                        31,
+                        32,
+                        33,
+                        34,
+                        35
+                    ].map((it) => {
+                        return <View
+                            key={`fds-${it}`}
+                            style={{
+                                backgroundColor: `rgb(${it * 10}, ${it > 30 ? it * 5 : "0"}, ${it > 20 ? it * 4 : "0"})`,
+                                height: 150
+                            }}
+                        />;
+                    })}
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                    <Text>Deneme 123</Text>
+                </BottomSheet>
+            </Fragment>;
+        }}
     >
+        <MarkdownViewer
+            content={`
+# Merhaba Furkan!.
+Nabersin ?
+## Deneme title 2
+iyisindir **umarım.**
+
+* Merhaba madde1.
+- Deneme madde2.
+
+[Alt text için deneme](https://static.vecteezy.com/system/resources/thumbnails/060/843/811/small/close-up-of-raindrops-on-leaves-hd-background-luxury-hd-wallpaper-image-trendy-background-illustration-free-photo.jpg)
+            `}
+        />
         <NotificationIndicator
             type="danger"
-            title={153}
+            title={53}
         >
             <Button
                 size="small"
@@ -315,6 +454,7 @@ const Home = () => {
             hintText="Test deneme"
             isShowSubTitle={true}
             isMultipleSelect={true}
+            isWorkWithRealtime={false}
             maxChoice={-1}
             minChoice={0}
             initialSelectedItems={[{
@@ -339,6 +479,7 @@ const Home = () => {
                 navigation.navigate("TestSubPage");
             }}
             title="Open Test Sub Page"
+            isDisabled={true}
             variant="filled"
             spreadBehaviour="stretch"
         />
@@ -434,123 +575,6 @@ const Home = () => {
                 });
             }}
         />
-        <Dialog
-            isVisible={isDialogActive}
-            content="etgweı09gı9w0eg"
-            title="Merhaba Dünya!"
-            modalProps={{
-                isWorkWithPortal: false
-            }}
-            onOverlayPress={({
-                closeAnimation
-            }) => {
-                closeAnimation(() => setIsDialogActive(false));
-            }}
-            variant="info"
-            secondaryButtonProps={{
-                title: "sdfgsdg",
-                onPress: () => {
-
-                }
-            }}
-            primaryButtonProps={{
-                onPress: ({
-                    closeAnimation
-                }) => {
-                    closeAnimation(() => setIsDialogActive(false));
-                }
-            }}
-        />
-        <BottomSheet
-            ref={bottomSheetRef}
-            renderHeader={() => {
-                return <View
-                    style={[
-                        {
-                            backgroundColor: "blue",
-                            padding: 20
-                        }
-                    ]}
-                >
-                    <Text>Burası header.</Text>
-                </View>;
-            }}
-            isCanFullScreenOnSwipe={true}
-            snapPoint={300}
-            key="ahmet"
-        >
-            <Button
-                title="Open Toast"
-                variant="filled"
-                type="warning"
-                onPress={() => {
-                    NCoreUIKitToast.open({
-                        title: "sdgfsdgsdg",
-                        type: "danger"
-                    });
-                }}
-            />
-            <Button
-                onPress={() => {
-                    navigation.navigate("TestSubPage");
-                }}
-                title="Git."
-            />
-            {[
-                0,
-                1,
-                2,
-                3,
-                4,
-                5,
-                6,
-                7,
-                8,
-                9,
-                10,
-                11,
-                12,
-                13,
-                14,
-                15,
-                16,
-                17,
-                18,
-                19,
-                20,
-                21,
-                22,
-                23,
-                24,
-                25,
-                26,
-                27,
-                28,
-                29,
-                30,
-                31,
-                32,
-                33,
-                34,
-                35
-            ].map((it) => {
-                return <View
-                    key={`fds-${it}`}
-                    style={{
-                        backgroundColor: `rgb(${it * 10}, ${it > 30 ? it * 5 : "0"}, ${it > 20 ? it * 4 : "0"})`,
-                        height: 150
-                    }}
-                />;
-            })}
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-            <Text>Deneme 123</Text>
-        </BottomSheet>
     </PageContainer>;
 };
 export default Home;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ncore-ui-kit-mobile",
-    "version": "1.0.0-pre-alpha.14",
+    "version": "1.0.0-pre-alpha.17",
     "description": "NİBGAT® | NCore - UI Kit for React-Native Mobile Apps.",
     "main": "./lib/module/index.js",
     "types": "./lib/typescript/src/index.d.ts",
@@ -35,7 +35,7 @@
         "example": "yarn workspace ncore-ui-kit-mobile-example",
         "clean": "del-cli lib",
         "lint": "eslint . --ext .ts,.tsx --fix",
-        "prepare": "bob build && copyfiles -u 1 \"src/variants/**/*.json\" lib/typescript/src/",
+        "prepare": "bob build && copyfiles -u 1 \"src/variants/**/*.json\" lib/typescript/src/ && node version.mjs",
         "typecheck": "tsc",
         "release": "release-it --only-version",
         "build": "yarn clean && yarn lint && yarn typecheck && yarn prepare && npm publish"
@@ -89,7 +89,7 @@
         "eslint-plugin-react-native": "5.0.0",
         "globals": "17.4.0",
         "jsonc-eslint-parser": "2.4.1",
-        "react": "19.2.0",
+        "react": "19.2.6",
         "react-native": "0.83.2",
         "react-native-builder-bob": "0.40.13",
         "release-it": "19.0.4",

react-native.config.js

@@ -1,7 +1,5 @@
 module.exports = {
-    dependency: {
-        assets: [
-            "./src/assets/fonts"
-        ]
-    }
+    assets: [
+        "./src/assets/fonts"
+    ]
 };

src/assets/svg/loadingIcon/index.tsx

@@ -23,9 +23,7 @@ const SvgLoadingIcon = ({
     customColor,
     size = 22,
     ...props
-}: INCoreUIKitIconProps & {
-    className?: string;
-}) => {
+}: INCoreUIKitIconProps) => {
     const {
         colors
     } = NCoreUIKitTheme.useContext();

src/components/bottomSheet/type.ts

@@ -54,10 +54,10 @@ interface IBottomSheetProps {
     customKey?: string;
     style?: ViewStyle;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     id?: string;
 }

src/components/button/index.tsx

@@ -34,6 +34,7 @@ const Button: FC<IButtonProps> = ({
     isDisabled = false,
     type = "primary",
     size = "medium",
+    renderLoading,
     customTheme,
     titleStyle,
     isLoading,
@@ -124,6 +125,10 @@ const Button: FC<IButtonProps> = ({
 
     const renderIcon = () => {
         if (isLoading) {
+            if(renderLoading) {
+                return renderLoading();
+            }
+
             return <Loading
                 {...iconProps}
                 style={[
@@ -167,22 +172,20 @@ const Button: FC<IButtonProps> = ({
         />;
     };
 
-    return (
-        <TouchableOpacity
-            {...props}
-            onPress={isDisabled || isLoading ? () => null : onPress}
-            disabled={isDisabled || isLoading}
-            style={[
-                style,
-                stylesheet.container,
-                containerDynamicStyle
-            ]}
-        >
-            {renderIcon()}
-            {renderTitle()}
-
-            {renderOverlay()}
-        </TouchableOpacity>
-    );
+    return <TouchableOpacity
+        {...props}
+        onPress={isDisabled || isLoading ? () => null : onPress}
+        disabled={isDisabled || isLoading}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderIcon()}
+        {renderTitle()}
+
+        {renderOverlay()}
+    </TouchableOpacity>;
 };
 export default Button;

src/components/button/stylesheet.ts

@@ -195,7 +195,7 @@ export const useStyles = ({
             paddingBottom: currentSize.paddingVertical,
             paddingLeft: currentSize.paddingHorizontal,
             paddingTop: currentSize.paddingVertical,
-            borderRadius: radiuses.md,
+            borderRadius: radiuses.actions,
             borderWidth: borders.line
         } as Mutable<ViewStyle>,
         title: {
@@ -203,7 +203,7 @@ export const useStyles = ({
         loading: {
         } as Mutable<ViewStyle>,
         overlay: {
-            borderRadius: radiuses.md - 2
+            borderRadius: radiuses.actions - 2
         } as Mutable<ViewStyle>
     };
 

src/components/button/type.ts

@@ -1,3 +1,6 @@
+import type {
+    ReactNode
+} from "react";
 import {
     type ButtonProps,
     type ViewStyle,
@@ -82,13 +85,14 @@ interface IButtonProps extends Omit<ButtonProps, "title"> {
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     spreadBehaviour?: ButtonSpreadBehaviour;
     iconDirection?: "left" | "right";
+    renderLoading?: () => ReactNode;
     isCustomPadding?: boolean;
     variant?: ButtonVariant;
     icon?: NCoreUIKitIcon;

src/components/checkBox/type.ts

@@ -44,13 +44,13 @@ interface ICheckBoxProps {
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     isChecked?: "checked" | "partially" | null;
     spreadBehaviour?: CheckBoxSpreadBehaviour;

src/components/dialog/stylesheet.ts

@@ -104,6 +104,9 @@ export const useStyles = ({
     }
 
     if(contentJustify === "centered") {
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+
         styles.content.justifyContent = "center";
         styles.content.alignItems = "center";
         styles.content.display = "flex";

src/components/dialog/type.ts

@@ -76,7 +76,7 @@ interface IDialogProps {
         id: string;
     }) => void;
     content?: string;
-    title: string;
+    title?: string;
     id?: string;
 };
 

src/components/index.ts

@@ -89,3 +89,7 @@ export {
 export {
     default as NotificationIndicator
 } from "./notificationIndicator";
+
+export {
+    default as MarkdownViewer
+} from "./markdownViewer";

src/components/markdownViewer/index.tsx

@@ -0,0 +1,180 @@
+import type {
+    FC
+} from "react";
+import {
+    Text as NativeText,
+    Image,
+    View
+} from "react-native";
+import type IMarkdownViewerProps from "./type";
+import stylesheet from "./stylesheet";
+import Text from "../text";
+
+type MarkdownKeys = "# " |
+    "## " |
+    "### " |
+    "#### " |
+    "##### " |
+    "###### " |
+    "* " |
+    "- " |
+    "p";
+
+const DEFAULT_VARIANTS: Record<MarkdownKeys, keyof NCoreUIKit.Typography> = {
+    "# ": "displayLargeSize",
+    "## ": "displayMediumSize",
+    "### ": "displaySmallSize",
+    "#### ": "headlineLargeSize",
+    "##### ": "headlineMediumSize",
+    "###### ": "headlineSmallSize",
+    "* ": "bodyLargeSize",
+    "- ": "bodyLargeSize",
+    "p": "bodyMediumSize"
+};
+
+const parseMarkdown = (rawText: string): Array<{
+    variant?: keyof NCoreUIKit.Typography;
+    nativeType: MarkdownKeys | "image";
+    type: "text" | "bullet" | "image";
+    content: string;
+    url?: string;
+    key: number;
+}> => {
+    const lines = rawText.split("\n");
+
+    return lines.map((line, index) => {
+        if (line.startsWith("# ")) return {
+            content: line.replace("# ", ""),
+            variant: DEFAULT_VARIANTS["# "],
+            nativeType: "# ",
+            type: "text",
+            key: index
+        };
+
+        if (line.startsWith("## ")) return {
+            content: line.replace("## ", ""),
+            variant: DEFAULT_VARIANTS["## "],
+            nativeType: "## ",
+            type: "text",
+            key: index
+        };
+
+        const isStartWithImage = line.startsWith("[");
+
+        if(isStartWithImage || line.startsWith("[")) {
+            const contentMatch = line.match(/\[(.*?)\]/);
+
+            const imageContent = (contentMatch && contentMatch[1]) ? contentMatch[1] : "";
+
+            const tmpLine = line.replace(/\[.*?\]/g, "");
+
+            const urlMatch = tmpLine.match(/\((.*?)\)/);
+
+            const imageURL = (urlMatch && urlMatch[1]) ? urlMatch[1] : "";
+
+            return {
+                content: imageContent,
+                nativeType: "image",
+                type: "image",
+                url: imageURL,
+                key: index
+            };
+        }
+
+        const isStarList = line.startsWith("* ");
+
+        if (isStarList || line.startsWith("- ")) {
+            return {
+                variant: DEFAULT_VARIANTS[isStarList ? "* " : "- "],
+                nativeType: isStarList ? "* " : "- ",
+                content: line.substring(2),
+                type: "bullet",
+                key: index
+            };
+        }
+
+        return {
+            variant: DEFAULT_VARIANTS["p"],
+            nativeType: "p",
+            content: line,
+            type: "text",
+            key: index
+        };
+    });
+};
+
+const MarkdownViewer: FC<IMarkdownViewerProps> = ({
+    content
+}) => {
+    const nodes = parseMarkdown(content);
+
+    const renderInlineStyles = (_content: string) => {
+        const parts = _content.split(/(\*\*.*?\*\*)/g);
+
+        return parts.map((part, i) => {
+            if (part.startsWith("**") && part.endsWith("**")) {
+                return (
+                    <NativeText
+                        key={i}
+                        style={{
+                            fontWeight: "bold"
+                        }}
+                    >
+                        {part.replace(/\*\*/g, "")}
+                    </NativeText>
+                );
+            }
+
+            return part;
+        });
+    };
+
+    return <View
+        style={[
+            stylesheet.container
+        ]}
+    >
+        {nodes.map((node) => {
+            if (!node.content.trim() && node.nativeType === "p") return null;
+
+            switch (node.type) {
+                case "text":
+                    return <Text
+                        variant={node.variant}
+                        key={node.key}
+                    >{renderInlineStyles(node.content)}</Text>;
+                case "image":
+                    return <Image
+                        alt={node.content}
+                        key={node.key}
+                        source={{
+                            uri: node.url
+                        }}
+                        resizeMode="contain"
+                        style={{
+                            width: 300,
+                            height: 300
+                        }}
+                    />;
+                case "bullet":
+                    return (
+                        <View
+                            key={node.key}
+                            style={{
+                                flexDirection: "row",
+                                alignItems: "center"
+                            }}
+                        >
+                            <Text variant={node.variant}>• </Text><Text variant={node.variant}>{renderInlineStyles(node.content)}</Text>
+                        </View>
+                    );
+                default:
+                    return <Text
+                        variant={node.variant}
+                        key={node.key}
+                    >{renderInlineStyles(node.content)}</Text>;
+            }
+        })}
+    </View>;
+};
+export default MarkdownViewer;

src/components/markdownViewer/stylesheet.ts

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

src/components/markdownViewer/type.ts

@@ -0,0 +1,6 @@
+interface IMarkdownViewerProps {
+    content: string;
+};
+export type {
+    IMarkdownViewerProps as default
+};

src/components/modal/type.ts

@@ -20,10 +20,10 @@ export type ModalInternalProps = {
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     onContainerLayout?: (e: LayoutChangeEvent) => void;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     onOverlayPress?: (props: {
         closeAnimation: (onClosed?: (props: {

src/components/notificationIndicator/index.tsx

@@ -2,6 +2,7 @@ import {
     type FC
 } from "react";
 import {
+    TouchableOpacity,
     View
 } from "react-native";
 import type INotificationIndicatorProps from "./type";
@@ -19,14 +20,16 @@ import Text from "../text";
 const NotificationIndicator: FC<INotificationIndicatorProps> = ({
     floorBackgroundColor = "default",
     titleVariant = "labelSmallSize",
+    spreadBehaviour = "baseline",
     isDisabled = false,
+    isVisible = true,
     type = "neutral",
-    spreadBehaviour,
     customTheme,
     titleStyle,
     isLoading,
     location,
     children,
+    onPress,
     title,
     style,
     ...props
@@ -119,6 +122,10 @@ const NotificationIndicator: FC<INotificationIndicatorProps> = ({
     };
 
     const renderIndicatorContainer = () => {
+        if(!isVisible) {
+            return null;
+        }
+
         if (isLoading) {
             return <Loading
                 style={[
@@ -147,8 +154,11 @@ const NotificationIndicator: FC<INotificationIndicatorProps> = ({
         />;
     };
 
-    return <View
+    return <TouchableOpacity
         {...props}
+        onPress={isDisabled ? undefined : () => {
+            if(onPress) onPress();
+        }}
         style={[
             style,
             stylesheet.container,
@@ -157,6 +167,6 @@ const NotificationIndicator: FC<INotificationIndicatorProps> = ({
     >
         {children}
         {renderIndicatorContainer()}
-    </View>;
+    </TouchableOpacity>;
 };
 export default NotificationIndicator;

src/components/notificationIndicator/stylesheet.ts

@@ -65,7 +65,6 @@ const stylesheet = StyleSheet.create({
     container: {
         backgroundColor: "transparent",
         borderColor: "transparent",
-        alignSelf: "baseline",
         position: "relative"
     },
     indicatorContainer: {

src/components/notificationIndicator/type.ts

@@ -39,16 +39,18 @@ interface INotificationIndicatorProps {
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     titleVariant?: keyof NCoreUIKit.Typography;
     spreadBehaviour?: SwitchSpreadBehaviour;
     type?: NotificationIndicatorType;
     isDisabled?: boolean;
+    onPress?: () => void;
     isLoading?: boolean;
+    isVisible?: boolean;
     children: ReactNode;
     title?: number;
     location?: {

src/components/pageContainer/index.tsx

@@ -1,4 +1,5 @@
 import {
+    Fragment,
     type FC
 } from "react";
 import {
@@ -22,6 +23,7 @@ const PageContainer: FC<IPageContainerProps> = ({
     safeAreaViewStyle,
     scrollViewStyle,
     scrollViewProps,
+    renderOverlays,
     customTheme,
     children,
     style,
@@ -97,6 +99,7 @@ const PageContainer: FC<IPageContainerProps> = ({
             ]}
         >
             {isScrollable ? renderScrollview() : renderView()}
+            {renderOverlays ? renderOverlays() : null}
         </SafeAreaView>;
     };
 
@@ -105,7 +108,10 @@ const PageContainer: FC<IPageContainerProps> = ({
     };
 
     const renderSafeareaContext = () => {
-        return isWrapSafeareaContext ? renderWithSafeareaView() : renderWithoutSafeareaView();
+        return isWrapSafeareaContext ? renderWithSafeareaView() : <Fragment>
+            {renderWithoutSafeareaView()}
+            {renderOverlays ? renderOverlays() : null}
+        </Fragment>;
     };
 
     return renderSafeareaContext();

src/components/pageContainer/type.ts

@@ -13,15 +13,16 @@ interface IPageContainerProps {
     safeAreaViewStyle?: StyleProp<ViewStyle>;
     scrollViewStyle?: StyleProp<ViewStyle>;
     scrollViewProps?: ScrollViewProps;
+    renderOverlays?: () => ReactNode;
     isWrapSafeareaContext?: boolean;
     style?: StyleProp<ViewStyle>;
     isScrollable?: boolean;
     children?: ReactNode;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
 }
 export type {

src/components/radioButton/type.ts

@@ -45,14 +45,14 @@ interface IRadioButtonProps {
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     spreadBehaviour?: RadioButtonSpreadBehaviour;
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     type?: RadioButtonType;
     optionalText?: string;

src/components/rowCard/index.tsx

@@ -15,20 +15,29 @@ import {
 import Text from "../text";
 
 const RowCard: FC<IRowCardProps> = ({
+    rightSubTitleVariant = "labelLargeSize",
+    rightTitleVariant = "labelLargeSize",
+    subTitleVariant = "labelLargeSize",
+    titleVariant = "labelLargeSize",
     rightContentContainerStyle,
     rightIcon: CustomRightIcon,
     leftContentContainerStyle,
+    isTransparentBackground,
     type = "first-based",
     rightContainerStyle,
     rightSubTitleStyle,
     leftContainerStyle,
+    rightSubTitleColor,
     leftSubTitleStyle,
     icon: CustomIcon,
+    rightTitleColor,
     rightTitleStyle,
     rightIconStyle,
     leftTitleStyle,
+    subTitleColor,
     rightSubTitle,
     customTheme,
+    titleColor,
     rightTitle,
     iconStyle,
     subTitle,
@@ -53,6 +62,7 @@ const RowCard: FC<IRowCardProps> = ({
         subTitle: subTitleDynamicStyle,
         title: titleDynamicStyle
     } = useStyles({
+        isTransparentBackground,
         radiuses,
         subTitle,
         spaces,
@@ -104,8 +114,8 @@ const RowCard: FC<IRowCardProps> = ({
         }
 
         return <Text
-            variant="labelLargeSize"
-            color="low"
+            color={subTitleColor ? subTitleColor : "low"}
+            variant={subTitleVariant}
             style={[
                 leftSubTitleStyle,
                 stylesheet.subTitle,
@@ -123,7 +133,8 @@ const RowCard: FC<IRowCardProps> = ({
             ]}
         >
             <Text
-                variant="labelLargeSize"
+                variant={titleVariant}
+                color={titleColor}
                 style={[
                     leftTitleStyle,
                     stylesheet.title,
@@ -154,8 +165,8 @@ const RowCard: FC<IRowCardProps> = ({
         }
 
         return <Text
-            variant="labelLargeSize"
-            color="low"
+            color={rightSubTitleColor? rightSubTitleColor : "low"}
+            variant={rightSubTitleVariant}
             style={[
                 rightSubTitleStyle,
                 stylesheet.rightSubTitle,
@@ -173,7 +184,8 @@ const RowCard: FC<IRowCardProps> = ({
             ]}
         >
             <Text
-                variant="labelLargeSize"
+                variant={rightTitleVariant}
+                color={rightTitleColor}
                 style={[
                     rightTitleStyle,
                     stylesheet.rightTitle,

src/components/rowCard/stylesheet.ts

@@ -47,13 +47,14 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
+    isTransparentBackground,
     spaces,
     colors,
     type
 }: RowCardDynamicStyleType) => {
     const styles = {
         container: {
-            backgroundColor: colors.content.container.mid,
+            backgroundColor: isTransparentBackground ? "transparent" : colors.content.container.mid,
             padding: spaces.spacingMd
         } as Mutable<ViewStyle>,
         title: {

src/components/rowCard/type.ts

@@ -10,6 +10,7 @@ export type RowCardDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    isTransparentBackground?: boolean;
     subTitle?: string;
     type: RowCardType;
 };
@@ -27,7 +28,16 @@ type IRowCardProps = {
     leftTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     rightIconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     iconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightSubTitleColor?: keyof NCoreUIKit.TextContentColors;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightTitleColor?: keyof NCoreUIKit.TextContentColors;
+    rightSubTitleVariant?: keyof NCoreUIKit.Typography;
+    subTitleColor?: keyof NCoreUIKit.TextContentColors;
+    rightTitleVariant?: keyof NCoreUIKit.Typography;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    subTitleVariant?: keyof NCoreUIKit.Typography;
+    titleVariant?: keyof NCoreUIKit.Typography;
+    isTransparentBackground?: boolean;
     rightIcon?: NCoreUIKitIcon;
     rightSubTitle?: string;
     icon?: NCoreUIKitIcon;
@@ -37,10 +47,10 @@ type IRowCardProps = {
     subTitle?: string;
     title: string;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
 };
 

src/components/selectBox/type.ts

@@ -119,22 +119,22 @@ interface ISelectBoxProps<T> {
         key: string;
     }) => ReactElement;
     customSelectSheetTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     customSelectSheetLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     selectSheetProps?: Omit<
         IBottomSheetProps,

src/components/selectSheet/type.ts

@@ -41,13 +41,13 @@ interface ISelectSheetProps<T> {
         key: string;
     }) => ReactElement;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     onMoreLoad?: (props: {
         data: Array<T & SelectedItem | SelectedItem>;

src/components/snackBar/index.tsx

@@ -6,6 +6,7 @@ import {
 } from "react";
 import {
     TouchableWithoutFeedback,
+    PanResponder,
     Animated,
     Easing,
     View
@@ -123,6 +124,73 @@ const SnackBar: FC<ISnackBarProps> = ({
         }
     }, [isMeasured]);
 
+    const panResponder = useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => false,
+            onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+                const {
+                    dy
+                } = gestureState;
+
+                if(Math.abs(dy) < 20) {
+                    return false;
+                }
+
+                return true;
+            },
+            onPanResponderMove: (_, gestureState) => {
+                const {
+                    moveY,
+                    y0,
+                    dy
+                } = gestureState;
+
+                if(moveY > y0) {
+                    return;
+                }
+
+                const op = moveY / y0;
+
+                opacityAnim.setValue(op);
+                transformAnim.setValue(dy);
+            },
+            onPanResponderEnd: (_, gestureState) => {
+                const {
+                    moveY,
+                    y0,
+                    vy
+                } = gestureState;
+
+                if(vy < -1) {
+                    closeAnimation();
+                    return;
+                }
+
+                if(y0 - moveY > 25) {
+                    closeAnimation();
+                    return;
+                }
+
+                Animated.parallel([
+                    Animated.timing(opacityAnim, {
+                        duration: openAnimationDelay,
+                        useNativeDriver: true,
+                        easing: Easing.linear,
+                        toValue: 1
+                    }),
+                    Animated.timing(transformAnim, {
+                        duration: openAnimationDelay,
+                        useNativeDriver: true,
+                        easing: Easing.linear,
+                        toValue: 0
+                    })
+                ]).start();
+            },
+            onPanResponderTerminationRequest: () => false,
+            onShouldBlockNativeResponder: () => true
+        })
+    ).current;
+
     const closeAnimation = (_onClosed?: (props: {
         id: string;
     }) => void) => {
@@ -263,6 +331,7 @@ const SnackBar: FC<ISnackBarProps> = ({
 
     return <Portal name="snack-bar-system">
         <Animated.View
+            {...panResponder.panHandlers}
             onLayout={(event) => {
                 const _contentHeight = event.nativeEvent.layout.height;
 

src/components/snackBar/type.ts

@@ -70,10 +70,10 @@ export type SnackBarInternalProps = {
         id: string;
     }) => void;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
 };
 

src/components/switch/type.ts

@@ -42,14 +42,14 @@ interface ISwitchProps {
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     spreadBehaviour?: SwitchSpreadBehaviour;
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     animationDuration?: number;
     optionalText?: string;

src/components/text/type.ts

@@ -14,10 +14,10 @@ interface ITextProps extends TextProps {
     customColor?: string;
     children?: ReactNode;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
 }
 export type {

src/components/textAreaInput/stylesheet.ts

@@ -209,9 +209,9 @@ export const useStyles = ({
             borderColor: colors.content.container[currentType.containerColor],
             paddingBottom: spaces.spacingMd,
             paddingRight: spaces.spacingMd,
-            borderRadius: radiuses.actions,
             paddingLeft: spaces.spacingMd,
             paddingTop: spaces.spacingMd,
+            borderRadius: radiuses.form,
             borderWidth: borders.line
         } as Mutable<ViewStyle>,
         input: {
@@ -247,7 +247,7 @@ export const useStyles = ({
             marginLeft: inlineSpaces.subTitle
         } as Mutable<TextStyle>,
         overlay: {
-            borderRadius: radiuses.actions - 1
+            borderRadius: radiuses.form - 1
         } as Mutable<ViewStyle>,
         rightIcon: {
             marginLeft: spaces.spacingSm

src/components/textAreaInput/type.ts

@@ -56,13 +56,13 @@ export type TextAreaInputSpreadBehaviour = "baseline" | "stretch" | "free";
 
 interface ITextAreaInputProps extends TextInputProps {
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     customLocalize?: {
-        activeLocale?: NCoreUIKit.LocaleKey;
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     spreadBehaviour?: TextAreaInputSpreadBehaviour;
     onChangeText?: (value: string) => void;

src/components/textInput/type.ts

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

src/components/toast/type.ts

@@ -64,10 +64,10 @@ export type ToastInternalProps = {
         id: string;
     }) => void;
     customTheme?: {
-        gapPropagation?: NCoreUIKit.GapPropagationKey;
-        sharpness?: NCoreUIKit.SharpnessKey;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
     };
 };
 

src/context/localize.tsx

@@ -24,7 +24,7 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
     useContext = ({
         activeLocale
     }: {
-        activeLocale?: NCoreUIKit.LocaleKey
+        activeLocale?: keyof NCoreUIKit.LocaleKey
     } = {}): LocalizeContextType => {
         const currentState = useContext(this.stateContext);
 
@@ -80,14 +80,14 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
     }
 
     prepare = (props?: {
-        activeLocale?: NCoreUIKit.LocaleKey
+        activeLocale?: keyof NCoreUIKit.LocaleKey
     }): LocalizeContextStateType => {
         const locale = props && props.activeLocale ? props.activeLocale : this.state.activeLocale;
 
         const defaultLocale = defaultLocalesData.find(l => l.locale === locale) ?? defaultLocalesData[0]!;
 
         const defaultState: LocalizeContextStateType = {
-            activeLocale: defaultLocale.locale as NCoreUIKit.LocaleKey,
+            activeLocale: defaultLocale.locale as keyof NCoreUIKit.LocaleKey,
             // localizeWithObject: this.localizeWithObject,
             translations: defaultLocale.translations,
             isRTL: defaultLocale.isRTL
@@ -105,7 +105,7 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
         }
 
         const newState: LocalizeContextStateType = {
-            activeLocale: currentProjectLocale.locale as NCoreUIKit.LocaleKey,
+            activeLocale: currentProjectLocale.locale as keyof NCoreUIKit.LocaleKey,
             // localizeWithObject: this.localizeWithObject,
             isRTL: currentProjectLocale.isRTL,
             // localize: this.localize,
@@ -178,7 +178,7 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
     switch = ({
         localeKey
     }: {
-        localeKey: NCoreUIKit.LocaleKey
+        localeKey: keyof NCoreUIKit.LocaleKey
     }) => {
         const activeState = this.prepare({
             activeLocale: localeKey
@@ -188,7 +188,7 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
     };
 
     updateProjectLocales = (newProjectLocales: NCoreUIKit.Locales, newState?: {
-        activeLocale?: NCoreUIKit.LocaleKey
+        activeLocale?: keyof NCoreUIKit.LocaleKey
     }) => {
         this.projectLocales = newProjectLocales;
         const activeState = this.prepare(newState);

src/context/theme.tsx

@@ -32,9 +32,9 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
         sharpness,
         themeKey
     }: {
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
         gapPropagation?: GapPropagationType;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
         sharpness?: SharpnessType;
     } = {}): ThemeContextType => {
         const currentState = useContext(this.stateContext);
@@ -106,9 +106,9 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
     }
 
     prepare = (props?: {
+        activePalette?: keyof NCoreUIKit.PaletteKey;
         activeGapPropagation?: GapPropagationType;
-        activePalette?: NCoreUIKit.PaletteKey;
-        activeTheme?: NCoreUIKit.ThemeKey;
+        activeTheme?: keyof NCoreUIKit.ThemeKey;
         activeSharpness?: SharpnessType;
     }): ThemeContextStateType => {
         const gapPropagation = props && props.activeGapPropagation ? props.activeGapPropagation : this.state.activeGapPropagation;
@@ -187,9 +187,9 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
         sharpness,
         themeKey
     }: {
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
         gapPropagation?: GapPropagationType;
-        paletteKey?: NCoreUIKit.PaletteKey;
-        themeKey?: NCoreUIKit.ThemeKey;
         sharpness?: SharpnessType;
     }) => {
         const activeState = this.prepare({
@@ -203,9 +203,9 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
     };
 
     updateProjectTheme = (newProjectThemes: NCoreUIKit.Palette, newState?: {
+        activePalette?: keyof NCoreUIKit.PaletteKey;
         activeGapPropagation?: GapPropagationType;
-        activePalette?: NCoreUIKit.PaletteKey;
-        activeTheme?: NCoreUIKit.ThemeKey;
+        activeTheme?: keyof NCoreUIKit.ThemeKey;
         activeSharpness?: SharpnessType;
     }) => {
         this.projectThemes = newProjectThemes;

src/helpers/theme/palette.ts

@@ -39,8 +39,8 @@ export const mergeTheme = (
 export const mergePalettes = (
     defaultPalettes: NCoreUIKit.ThemePalettes,
     projectPalettes: NCoreUIKit.ThemePalettes,
-    activePalette: NCoreUIKit.PaletteKey,
-    activeTheme: NCoreUIKit.ThemeKey
+    activePalette: keyof NCoreUIKit.PaletteKey,
+    activeTheme: keyof NCoreUIKit.ThemeKey
 ): NCoreUIKit.ThemeTokens => {
     const defaultPalette = defaultPalettes.find(p => p.name === activePalette);
 

src/index.tsx

@@ -15,6 +15,7 @@ export {
 
 export {
     NotificationIndicator,
+    MarkdownViewer,
     PageContainer,
     TextAreaInput,
     BottomSheet,

src/types/index.ts

@@ -69,11 +69,11 @@ type NCoreUIKitConfig = ThemesType & LocalizeType & ModalType;
 
 declare global {
     namespace NCoreUIKit {
-        type GapPropagationKey = GapPropagationType;
-        type SharpnessKey = SharpnessType;
-        type PaletteKey = PaletteType;
-        type LocaleKey = LocaleType;
-        type ThemeKey = ThemeType;
+        interface GapPropagationKey extends Record<GapPropagationType, unknown> {}
+        interface SharpnessKey extends Record<SharpnessType, unknown> {}
+        interface PaletteKey extends Record<PaletteType, unknown> {}
+        interface LocaleKey extends Record<LocaleType, unknown> {}
+        interface ThemeKey extends Record<ThemeType, unknown> {}
 
         type IconCallbackProps = INCoreUIKitIconCallbackProps;
 
@@ -143,7 +143,7 @@ declare global {
             name: string;
         }
 
-        type Theme = Record<ThemeKey, ThemeTokens>;
+        type Theme = Record<keyof ThemeKey, ThemeTokens>;
 
         type ColorsMerged = DefaultSystemColors & DefaultContentColors;
 

src/types/locale.ts

@@ -5,7 +5,7 @@ import {
 import type ITextProps from "../components/text/type";
 
 export type LocalizeType = {
-    initialSelectedLocale?: NCoreUIKit.LocaleKey;
+    initialSelectedLocale?: keyof NCoreUIKit.LocaleKey;
     projectLocales?: NCoreUIKit.Locales;
 };
 
@@ -20,7 +20,7 @@ export type LocalizeContextType = {
         parameters?: Array<string | ReactNode | ReactElement>,
         props?: Array<ITextProps>
     ) => string;
-    activeLocale: NCoreUIKit.LocaleKey;
+    activeLocale: keyof NCoreUIKit.LocaleKey;
     localize: (
         translation: keyof NCoreUIKit.Translation,
         parameters?: Array<string | number>

src/types/theme.ts

@@ -1,8 +1,8 @@
 export type ThemesType = {
+    initialSelectedPalette?: keyof NCoreUIKit.PaletteKey;
     initialSelectedGapPropagation?: GapPropagationType;
+    initialSelectedTheme?: keyof NCoreUIKit.ThemeKey;
     initialSelectedActiveSharpness?: SharpnessType;
-    initialSelectedPalette?: NCoreUIKit.PaletteKey;
-    initialSelectedTheme?: NCoreUIKit.ThemeKey;
     projectThemes?: NCoreUIKit.Palette;
 };
 
@@ -17,11 +17,11 @@ export type ThemeType = "light" | "dark";
 export type ThemeContextStateType = Partial<ThemeContextType>;
 
 export type ThemeContextType = {
+    activePalette: keyof NCoreUIKit.PaletteKey;
     activeGapPropagation: GapPropagationType;
+    activeTheme: keyof NCoreUIKit.ThemeKey;
     inlineSpaces: NCoreUIKit.InlineSpaces;
-    activePalette: NCoreUIKit.PaletteKey;
     typography: NCoreUIKit.Typography;
-    activeTheme: NCoreUIKit.ThemeKey;
     activeSharpness: SharpnessType;
     colors: NCoreUIKit.ThemeTokens;
     radiuses: NCoreUIKit.Radiuses;

src/variants/themes/default.json

@@ -582,7 +582,7 @@
                             },
                             "content": {
                                 "disabled": {
-                                    "primary": "rgba(0,107,92,0.32)",
+                                    "primary": "rgba(101,250,222,0.32)",
                                     "error": "rgba(186,16,16,0.32)",
                                     "warning": "rgba(176,108,0,0.32)",
                                     "success": "rgba(74,128,82,0.32)",

tsconfig.json

@@ -32,5 +32,8 @@
         "strict": true,
         "target": "ESNext",
         "verbatimModuleSyntax": true
-    }
+    },
+    "exclude": [
+        "version.mjs"
+    ]
 }

version.mjs

@@ -0,0 +1,26 @@
+import fs from "fs";
+
+const rootPkg = JSON.parse(fs.readFileSync("./package.json"), "utf-8");
+const version = rootPkg.version;
+
+const targets = [
+    "./lib/module/package.json",
+    "./lib/typescript/package.json"
+];
+
+targets.forEach(target => {
+    if (fs.existsSync(target)) {
+        const pkg = JSON.parse(fs.readFileSync(target, "utf-8"));
+
+        pkg.version = version;
+
+        fs.writeFileSync(target, JSON.stringify(pkg, null, 2));
+        console.log(`✅ ${target} güncellendi: version ${version} eklendi.`);
+    }
+});
+
+fs.writeFileSync("./lib/package.json", JSON.stringify({
+    version: version,
+    type: "module"
+}, null, 4));
+console.log(`✅ Main package.json eklendi.`);