Feature: Code Editor completed.

.agents/AGENTS.md

@@ -42,3 +42,8 @@ Always follow these rules by default. Pay "extreme attention" (aşırı dikkat)
 ## Line Endings (CRLF)
 - Always use Windows-style CRLF line endings (`\r\n`) for all text and code files, unless a specific file or environment strictly requires LF (`\n`).
 
+
+## No Inline Comments
+- Never leave inline comments in the code explaining what the style or line does.
+- Remove all inline comments unless they are strictly necessary (e.g., leaving something broken intentionally to fix later).
+- Keep the codebase clean and free of conversational or explanatory comments.

eslint-local-rules/index.js

@@ -896,6 +896,37 @@ module.exports = {
                             checkStyleValue(node.value.expression);
                         }
                     }
+                },
+                VariableDeclarator(node) {
+                    if (node.id && node.id.name === "styles" && node.init && node.init.type === "ObjectExpression") {
+                        let parent = node.parent;
+                        let isInsideUseStyles = false;
+                        while (parent) {
+                            if (parent.type === "VariableDeclarator" && parent.id && parent.id.name === "useStyles") {
+                                isInsideUseStyles = true;
+                                break;
+                            }
+                            if (parent.type === "FunctionDeclaration" && parent.id && parent.id.name === "useStyles") {
+                                isInsideUseStyles = true;
+                                break;
+                            }
+                            parent = parent.parent;
+                        }
+
+                        if (isInsideUseStyles) {
+                            node.init.properties.forEach(styleClass => {
+                                let styleObj = styleClass.value;
+                                if (styleObj && styleObj.type === "TSAsExpression") {
+                                    styleObj = styleObj.expression;
+                                }
+                                if (styleObj && styleObj.type === "ObjectExpression") {
+                                    styleObj.properties.forEach(prop => {
+                                        checkProperty(prop);
+                                    });
+                                }
+                            });
+                        }
+                    }
                 }
             };
         }
@@ -1610,7 +1641,8 @@ module.exports = {
                     }
                 }
             };
-        }    },
+        }
+    },
     "ncore-sort-types": {
         meta: {
             type: "layout",
@@ -1619,10 +1651,10 @@ module.exports = {
         },
         create(context) {
             const sourceCode = context.getSourceCode();
-            
+
             function sortMembers(node, members) {
                 if (!members || members.length <= 1) return;
-                
+
                 const getLen = (n) => {
                     const text = sourceCode.getText(n);
                     const lines = text.split(/\r?\n/);
@@ -1635,7 +1667,7 @@ module.exports = {
                     }
                     return maxLen;
                 };
-                
+
                 const initialSorted = members.map((member, i) => ({
                     node: member,
                     originalIndex: i,
@@ -1644,7 +1676,7 @@ module.exports = {
                     if (a.length !== b.length) return b.length - a.length;
                     return a.originalIndex - b.originalIndex;
                 });
-                
+
                 let changed = false;
                 for (let i = 0; i < members.length; i++) {
                     if (members[i] !== initialSorted[i].node) {
@@ -1652,7 +1684,7 @@ module.exports = {
                         break;
                     }
                 }
-                
+
                 if (changed) {
                     context.report({
                         node: node,
@@ -1667,7 +1699,7 @@ module.exports = {
                     });
                 }
             }
-            
+
             return {
                 TSInterfaceBody(node) {
                     sortMembers(node, node.body);

example/src/pages/components/codeEditor/index.tsx

@@ -8,7 +8,9 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     CodeEditor,
     Header,
     Text
@@ -22,6 +24,11 @@ import type {
 } from "@react-navigation/native-stack";
 
 const CodeEditorPage = () => {
+    const {
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
     const {
         localize
     } = NCoreUIKitLocalize.useContext();
@@ -67,10 +74,77 @@ const CodeEditorPage = () => {
             >
                 {localize("codeEditor-desc") || "This is a CodeEditor component from NCore UI Kit."}
             </Text>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                    variant="headlineSmallSize"
+                >
+                    {localize("usage") || "Usage"}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    CodeEditor\n} from \"ncore-ui-kit\";\n\n<CodeEditor\n    language=\"javascript\"\n    onChangeText={setCode}\n    value={code}\n    isScrollable={true}\n    isToolbarVisible={true}\n    toolbarActions={[\n        {\n            title: \"Save\",\n            onPress: () => alert(\"Saved!\")\n        }\n    ]}\n/>"}
+                    language="tsx"
+                />
+            </View>
             <CodeEditor
-                style={stylesheet.editor}
+                toolbarActions={[
+                    {
+                        style: {
+                            backgroundColor: colors.content.container.default,
+                            paddingHorizontal: spaces.spacingLg,
+                            paddingVertical: 2,
+                            borderRadius: 4
+                        },
+                        onPress: () => console.log("File"),
+                        spreadBehaviour: "baseline",
+                        isCustomPadding: true,
+                        variant: "ghost",
+                        type: "neutral",
+                        size: "small",
+                        title: "File"
+                    },
+                    {
+                        style: {
+                            backgroundColor: colors.content.container.default,
+                            paddingHorizontal: spaces.spacingLg,
+                            paddingVertical: 2,
+                            borderRadius: 4
+                        },
+                        onPress: () => console.log("Edit"),
+                        spreadBehaviour: "baseline",
+                        isCustomPadding: true,
+                        variant: "ghost",
+                        type: "neutral",
+                        size: "small",
+                        title: "Edit"
+                    },
+                    {
+                        style: {
+                            backgroundColor: colors.content.container.default,
+                            paddingHorizontal: spaces.spacingLg,
+                            paddingVertical: 2,
+                            borderRadius: 4
+                        },
+                        onPress: () => console.log("View"),
+                        spreadBehaviour: "baseline",
+                        isCustomPadding: true,
+                        variant: "ghost",
+                        type: "neutral",
+                        size: "small",
+                        title: "View"
+                    }
+                ]}
+                style={stylesheet.editorScrollable}
+                isToolbarVisible={true}
                 onChangeText={setCode}
                 language="javascript"
+                isScrollable={true}
                 value={code}
             />
         </View>

example/src/pages/components/codeEditor/stylesheet.ts

@@ -3,23 +3,28 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    contentContainer: {
-        maxWidth: 850,
-        width: "100%"
+    editorScrollable: {
+        minHeight: 350,
+        width: "100%",
+        height: 200
     },
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
     },
-    marginContainer: {
-        marginBottom: 20
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
     },
     editor: {
         minHeight: 350,
         width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

example/src/pages/components/markdownEditor/index.tsx

@@ -7,8 +7,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     MarkdownEditor,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -21,6 +23,10 @@ import type {
 } from "@react-navigation/native-stack";
 
 const MarkdownEditorPage = () => {
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const {
         localize
     } = NCoreUIKitLocalize.useContext();
@@ -57,6 +63,24 @@ const MarkdownEditorPage = () => {
             >
                 {localize("markdownEditor-desc")}
             </Text>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage") || "Usage"}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    MarkdownEditor\n} from \"ncore-ui-kit\";\n\n<MarkdownEditor\n    initialValue=\"# Hello\"\n/>"}
+                    language="tsx"
+                />
+            </View>
             <MarkdownEditor
                 initialValue="# Markdown Editor\n\nThis is a **MarkdownEditor** component from *NCore UI Kit*.\n\n- Write your markdown here."
                 style={stylesheet.editor}
@@ -64,5 +88,4 @@ const MarkdownEditorPage = () => {
         </View>
     </PageContainer>;
 };
-
 export default MarkdownEditorPage;

src/components/codeEditor/index.tsx

@@ -27,6 +27,7 @@ import {
     splitTokensIntoLines,
     parseCode
 } from "../codeViewer/parser";
+import Button from "../button";
 
 const CodeEditor = ({
     isLineNumberVisible = true,
@@ -35,10 +36,14 @@ const CodeEditor = ({
     language,
     value,
     style,
+    isToolbarVisible = false,
+    toolbarActions = [],
     ...props
 }: ICodeEditorProps) => {
     const {
         typography,
+        radiuses,
+        borders,
         colors,
         spaces
     } = NCoreUIKitTheme.useContext();
@@ -48,7 +53,7 @@ const CodeEditor = ({
     const [
         selection,
         setSelection
-    ] = useState<{ end: number; start: number }>({
+    ] = useState<{ start: number; end: number; }>({
         end: 0,
         start: 0
     });
@@ -64,15 +69,20 @@ const CodeEditor = ({
 
     const {
         languageText: languageTextDynamicStyle,
+        editorContainer: editorContainerDynamicStyle,
         editorInput: editorInputDynamicStyle,
+        toolbarContainer: toolbarContainerDynamicStyle,
         container: containerDynamicStyle,
         lineRow: lineRowDynamicStyle,
         gutter: gutterDynamicStyle,
         text: textDynamicStyle
     } = useStyles({
         isLineNumberVisible,
+        isToolbarVisible,
         hasLanguage: !!language,
         typography,
+        radiuses,
+        borders,
         colors,
         spaces
     });
@@ -261,7 +271,6 @@ const CodeEditor = ({
                                     style={[
                                         stylesheet.lineNumber,
                                         {
-                                            fontFamily: Platform.OS === "web" ? "monospace" : "System",
                                             color: colors.content.text.low
                                         }
                                     ]}
@@ -318,7 +327,6 @@ const CodeEditor = ({
                                         style={[
                                             stylesheet.lineNumber,
                                             {
-                                                fontFamily: Platform.OS === "web" ? "monospace" : "System",
                                                 color: colors.content.text.low
                                             }
                                         ]}
@@ -363,44 +371,63 @@ const CodeEditor = ({
             containerStyle
         ]}
     >
-        <ScrollView
-            contentContainerStyle={[
-                stylesheet.scrollContent
-            ]}
-            showsHorizontalScrollIndicator={true}
-            style={[
-                stylesheet.scrollView
-            ]}
-            horizontal={true}
-        >
+        {isToolbarVisible && (
             <View
                 style={[
+                    stylesheet.toolbarContainer,
+                    toolbarContainerDynamicStyle
+                ]}
+            >
+                {toolbarActions.map((action, index) => <Button
+                    key={`toolbar-action-${index}`}
+                    onPress={action.onPress}
+                    title={action.title}
+                    variant="outline"
+                    size="small"
+                />)}
+            </View>)}
+        <View
+            style={[editorContainerDynamicStyle]}
+        >
+            <ScrollView
+                contentContainerStyle={[
                     stylesheet.scrollContent
                 ]}
+                showsHorizontalScrollIndicator={true}
+                style={[
+                    stylesheet.scrollView
+                ]}
+                horizontal={true}
             >
-                {renderBackground()}
-                <TextInput
-                    {...props}
-                    onSelectionChange={(e) => {
-                        setSelection(e.nativeEvent.selection);
-                        props.onSelectionChange?.(e);
-                    }}
+                <View
                     style={[
-                        stylesheet.editorInput,
-                        editorInputDynamicStyle,
-                        style
+                        stylesheet.scrollContent
                     ]}
-                    onChangeText={onChangeText}
-                    onKeyPress={handleKeyPress}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    spellCheck={false}
-                    multiline={true}
-                    ref={inputRef}
-                    value={value}
-                />
-            </View>
-        </ScrollView>
+                >
+                    {renderBackground()}
+                    <TextInput
+                        {...props}
+                        onSelectionChange={(e) => {
+                            setSelection(e.nativeEvent.selection);
+                            props.onSelectionChange?.(e);
+                        }}
+                        style={[
+                            stylesheet.editorInput,
+                            editorInputDynamicStyle,
+                            style
+                        ]}
+                        onChangeText={onChangeText}
+                        onKeyPress={handleKeyPress}
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                        spellCheck={false}
+                        multiline={true}
+                        ref={inputRef}
+                        value={value}
+                    />
+                </View>
+            </ScrollView>
+        </View>
     </View>;
 };
 export default CodeEditor;

src/components/codeEditor/stylesheet.ts

@@ -13,37 +13,49 @@ import {
 
 const stylesheet = StyleSheet.create({
     editorInput: {
-        fontFamily: Platform.OS === "web" ? "monospace" : "System",
+        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
         backgroundColor: "transparent",
         textAlignVertical: "top",
         position: "absolute",
         color: "transparent",
+        fontWeight: "400",
+        letterSpacing: 0,
+        borderWidth: 0,
+        lineHeight: 24,
+        fontSize: 14,
+        padding: 0,
+        margin: 0,
         bottom: 0,
         right: 0,
         left: 0,
         top: 0,
         ...webStyle({
+            fontVariantLigatures: "none",
             caretColor: "inherit",
             outline: "none",
             resize: "none"
         })
     },
-    gutter: {
-        justifyContent: "flex-end",
-        alignItems: "flex-start",
-        flexDirection: "row",
-        borderRightWidth: 1,
+    content: {
+        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
+        fontWeight: "400",
+        letterSpacing: 0,
         ...webStyle({
-            userSelect: "none"
+            fontVariantLigatures: "none",
+            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap"
         })
     },
-    content: {
-        fontFamily: Platform.OS === "web" ? "monospace" : "System",
+    codeText: {
+        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
+        fontWeight: "400",
+        letterSpacing: 0,
+        fontSize: 14,
         ...webStyle({
-            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap"
+            fontVariantLigatures: "none"
         })
     },
     lineNumber: {
+        fontFamily: Platform.OS === "web" ? "monospace" : "System",
         textAlign: "right",
         marginRight: 4,
         lineHeight: 24,
@@ -52,12 +64,27 @@ const stylesheet = StyleSheet.create({
             userSelect: "none"
         })
     },
-    container: {
+    gutter: {
+        justifyContent: "flex-end",
         alignItems: "flex-start",
         flexDirection: "row",
+        borderRightWidth: 1,
+        ...webStyle({
+            userSelect: "none"
+        })
+    },
+    toolbarContainer: {
+        justifyContent: "flex-start",
+        borderBottomWidth: 0,
+        alignItems: "center",
+        flexDirection: "row",
+        paddingVertical: 4,
+        flexWrap: "wrap"
+    },
+    container: {
+        flexDirection: "column",
         position: "relative",
-        borderRadius: 10,
-        borderWidth: 1
+        width: "100%"
     },
     lineRow: {
         alignItems: "flex-start",
@@ -68,15 +95,22 @@ const stylesheet = StyleSheet.create({
         minWidth: "100%",
         flexGrow: 1
     },
+    text: {
+        lineHeight: 24
+    },
     scrollView: {
         flex: 1
     }
 });
 
 export const useStyles = ({
+    isToolbarVisible = false,
     isLineNumberVisible = true,
     hasLanguage = false,
+    spreadBehaviour,
     typography,
+    radiuses,
+    borders,
     colors,
     spaces
 }: ICodeEditorDynamicStyleProps) => {
@@ -91,44 +125,72 @@ export const useStyles = ({
     }
 
     const languageMarginLeft = spaces.spacingSm;
+    const lineHeight = (typography.bodyMediumSize?.lineHeight as number) || 24;
 
     const styles = {
+        editorContainer: {
+            paddingTop: isToolbarVisible ? spaces.spacingXs : spaces.spacingMd,
+            borderTopRightRadius: isToolbarVisible ? 0 : radiuses.form,
+            borderTopLeftRadius: isToolbarVisible ? 0 : radiuses.form,
+            backgroundColor: colors.content.container.subtle,
+            borderColor: colors.content.border.subtle,
+            borderBottomRightRadius: radiuses.form,
+            borderBottomLeftRadius: radiuses.form,
+            paddingHorizontal: spaces.spacingMd,
+            paddingBottom: spaces.spacingMd,
+            borderWidth: borders.line,
+            borderTopWidth: isToolbarVisible ? 0 : borders.line
+        } as ViewStyle,
+        toolbarContainer: {
+            backgroundColor: colors.content.container.subtle,
+            borderColor: colors.content.border.subtle,
+            borderTopRightRadius: radiuses.form,
+            paddingHorizontal: spaces.spacingMd,
+            borderTopLeftRadius: radiuses.form,
+            paddingBottom: spaces.spacingXs,
+            borderRightWidth: borders.line,
+            borderLeftWidth: borders.line,
+            borderTopWidth: borders.line,
+            paddingTop: spaces.spacingMd,
+            gap: spaces.spacingXs
+        } as ViewStyle,
         editorInput: {
             ...typography.bodyMediumSize,
-            lineHeight: 24,
-            padding: 0,
-            paddingLeft: isLineNumberVisible ? (gutterWidth + gutterMarginRight) : spaces.spacingSm,
-            paddingTop: hasLanguage ? 32 : 0,
+            paddingLeft: (isLineNumberVisible ? (gutterWidth + gutterMarginRight) : spaces.spacingSm),
+            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
+            paddingTop: hasLanguage ? (lineHeight + spaces.spacingSm) : 0,
+            paddingRight: spaces.spacingMd,
             ...webStyle({
                 caretColor: colors.content.text.high
             })
         } as TextStyle,
+        container: {
+            alignSelf: spreadBehaviour === "stretch" ? "stretch" : (spreadBehaviour === "baseline" ? "baseline" : "auto"),
+            width: spreadBehaviour === "baseline" ? "auto" : "100%",
+            marginVertical: spaces.spacingSm
+        } as ViewStyle,
         languageText: {
-            color: colors.content.text.low,
             marginBottom: spaces.spacingSm,
+            color: colors.content.text.low,
             marginLeft: languageMarginLeft,
             ...webStyle({
                 userSelect: "none"
             })
         } as TextStyle,
-        container: {
-            backgroundColor: colors.content.container.subtle,
-            borderColor: colors.content.border.subtle,
-            marginVertical: spaces.spacingSm,
-            padding: spaces.spacingMd
+        text: {
+            ...typography.bodyMediumSize,
+            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace"
+        } as TextStyle,
+        lineRow: {
+            marginLeft: !isLineNumberVisible ? spaces.spacingSm : 0,
+            minHeight: lineHeight,
+            height: lineHeight
         } as ViewStyle,
         gutter: {
             paddingRight: gutterPaddingRight,
             marginRight: gutterMarginRight,
             width: gutterWidth
-        } as ViewStyle,
-        lineRow: {
-            marginLeft: !isLineNumberVisible ? spaces.spacingSm : 0
-        } as ViewStyle,
-        text: {
-            ...typography.bodyMediumSize,
-            lineHeight: 24
-        } as TextStyle
+        } as ViewStyle
     };
 
     return styles;

src/components/codeEditor/type.ts

@@ -1,20 +1,33 @@
 import {
     type TextInputProps,
+    type StyleProp,
     type ViewStyle
 } from "react-native";
+import type IButtonProps from "../button/type";
+
+export type CodeEditorSpreadBehaviour = "baseline" | "stretch" | "free";
 
 export interface ICodeEditorDynamicStyleProps {
     typography: NCoreUIKit.ActivePalette["typography"];
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    borders: NCoreUIKit.ActivePalette["borders"];
+    spreadBehaviour?: CodeEditorSpreadBehaviour;
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
     isLineNumberVisible?: boolean;
+    isToolbarVisible?: boolean;
     hasLanguage?: boolean;
 }
 
 interface ICodeEditorProps extends Omit<TextInputProps, "style" | "value" | "onChangeText"> {
+    toolbarContainerStyle?: StyleProp<ViewStyle>;
+    spreadBehaviour?: CodeEditorSpreadBehaviour;
     onChangeText?: (text: string) => void;
+    toolbarActions?: Array<IButtonProps>;
     isLineNumberVisible?: boolean;
+    isToolbarVisible?: boolean;
     containerStyle?: ViewStyle;
+    isScrollable?: boolean;
     style?: ViewStyle;
     language?: string;
     value: string;

src/components/codeViewer/stylesheet.ts

@@ -12,21 +12,14 @@ import {
 } from "../../utils";
 
 const stylesheet = StyleSheet.create({
-    container: {
+    gutter: {
+        justifyContent: "flex-end",
         alignItems: "flex-start",
         flexDirection: "row",
-        borderRadius: 10,
-        borderWidth: 1
-    },
-    scrollContent: {
-        flexGrow: 1
-    },
-    scrollView: {
-        flex: 1
-    },
-    stickyActionContainer: {
-        alignSelf: "flex-start",
-        zIndex: 1
+        borderRightWidth: 1,
+        ...webStyle({
+            userSelect: "none"
+        })
     },
     content: {
         fontFamily: Platform.OS === "web" ? "monospace" : "System",
@@ -34,23 +27,10 @@ const stylesheet = StyleSheet.create({
             whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap"
         })
     },
-    lineRow: {
-        alignItems: "flex-start",
-        flexDirection: "row",
-        minHeight: 24
-    },
-    gutter: {
-        justifyContent: "flex-end",
-        flexDirection: "row",
-        alignItems: "center",
-        borderRightWidth: 1,
-        ...webStyle({
-            userSelect: "none"
-        })
-    },
     lineNumber: {
         textAlign: "right",
         marginRight: 4,
+        lineHeight: 24,
         fontSize: 12,
         ...webStyle({
             userSelect: "none"
@@ -59,12 +39,35 @@ const stylesheet = StyleSheet.create({
     foldIcon: {
         justifyContent: "center",
         alignItems: "center",
+        marginTop: 5,
         height: 14,
         width: 14
     },
+    container: {
+        alignItems: "flex-start",
+        flexDirection: "row",
+        borderRadius: 10,
+        borderWidth: 1
+    },
+    lineRow: {
+        alignItems: "flex-start",
+        flexDirection: "row",
+        minHeight: 24
+    },
     foldIconPlaceholder: {
+        marginTop: 5,
         height: 14,
         width: 14
+    },
+    stickyActionContainer: {
+        alignSelf: "flex-start",
+        zIndex: 1
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    scrollView: {
+        flex: 1
     }
 });
 
@@ -99,16 +102,6 @@ export const useStyles = ({
     const languageMarginLeft = spaces.spacingSm;
 
     const styles = {
-        container: {
-            backgroundColor: colors.content.container.subtle,
-            borderColor: colors.content.border.subtle,
-            marginVertical: spaces.spacingSm,
-            padding: spaces.spacingMd
-        } as ViewStyle,
-        text: {
-            ...typography.bodyMediumSize,
-            lineHeight: 24
-        } as TextStyle,
         languageText: {
             color: colors.content.text.low,
             marginBottom: spaces.spacingSm,
@@ -117,11 +110,21 @@ export const useStyles = ({
                 userSelect: "none"
             })
         } as TextStyle,
+        container: {
+            backgroundColor: colors.content.container.subtle,
+            borderColor: colors.content.border.subtle,
+            marginVertical: spaces.spacingSm,
+            padding: spaces.spacingMd
+        } as ViewStyle,
         gutter: {
             paddingRight: gutterPaddingRight,
             marginRight: gutterMarginRight,
             width: gutterWidth
         } as ViewStyle,
+        text: {
+            ...typography.bodyMediumSize,
+            lineHeight: 24
+        } as TextStyle,
         lineRow: {
             marginLeft: !isGutterVisible ? spaces.spacingSm : 0
         } as ViewStyle

src/components/textInput/type.ts

@@ -62,10 +62,10 @@ interface ITextInputProps extends TextInputProps {
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    spreadBehaviour?: TextInputSpreadBehaviour;
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
-    spreadBehaviour?: TextInputSpreadBehaviour;
     onChangeText?: (value: string) => void;
     validation?: (text: string) => boolean;
     isAutoKeyboardDismissOnBlur?: boolean;

src/components/yearSelector/stylesheet.ts

@@ -10,32 +10,21 @@ import type {
 } from "../../types";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    contentContainer: {
-        justifyContent: "space-between",
-        flexDirection: "column",
-        alignItems: "center"
-    },
-    columnContainer: {
-        justifyContent: "center",
-        flexDirection: "column",
-        alignItems: "center",
-        flexShrink: 1,
-        flex: 1
-    },
     day: {
+        borderColor: "transparent",
         justifyContent: "center",
         alignItems: "center",
         position: "relative",
-        flexShrink: 1,
         width: "100%",
-        flex: 1
+        flex: 1,
+        flexShrink: 1
     },
-    todayIndicator: {
-        position: "absolute",
-        zIndex: 999
+    columnContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        flex: 1,
+        flexShrink: 1
     },
     nextPrevToolContainer: {
         justifyContent: "space-between",
@@ -43,8 +32,20 @@ const stylesheet = StyleSheet.create({
         alignItems: "center",
         flex: 1
     },
+    contentContainer: {
+        justifyContent: "space-between",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    todayIndicator: {
+        position: "absolute",
+        zIndex: 999
+    },
     rowContainer: {
         flexDirection: "row"
+    },
+    container: {
+        flex: 1
     }
 });
 
@@ -55,15 +56,6 @@ export const useStyles = ({
     colors
 }: YearSelectorDynamicStyle) => {
     const styles = {
-        day: {
-            borderBottomRightRadius: radiuses.full,
-            borderBottomLeftRadius: radiuses.full,
-            borderTopRightRadius: radiuses.full,
-            borderTopLeftRadius: radiuses.full,
-            borderColor: "transparent",
-            borderWidth: borders.line,
-            padding: spaces.spacingSm
-        } as Mutable<ViewStyle>,
         todayIndicator: {
             borderColor: colors.content.border.default,
             borderBottomRightRadius: radiuses.full,
@@ -76,6 +68,14 @@ export const useStyles = ({
             left: spaces.spacingXs,
             top: spaces.spacingXs
         } as Mutable<ViewStyle>,
+        day: {
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderWidth: borders.line,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
         nextPrevToolContainer: {
             marginBottom: spaces.spacingMd
         } as Mutable<ViewStyle>,