Continue: Context implementation to be continued.

package.json

@@ -61,8 +61,8 @@
         "@react-native/babel-preset": "0.83.0",
         "@release-it/conventional-changelog": "10.0.1",
         "@types/eslint-plugin-jsx-a11y": "6",
-        "@types/react": "19.1.12",
-        "babel-plugin-module-resolver": "^5.0.2",
+        "@types/react": "19.2.14",
+        "babel-plugin-module-resolver": "5.0.2",
         "del-cli": "6.0.0",
         "eslint": "9.37.0",
         "eslint-import-resolver-typescript": "4.4.4",
@@ -72,8 +72,8 @@
         "eslint-plugin-local-rules": "3.0.2",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.0.0",
-        "eslint-plugin-react-native": "^5.0.0",
-        "globals": "^17.4.0",
+        "eslint-plugin-react-native": "5.0.0",
+        "globals": "17.4.0",
         "jsonc-eslint-parser": "2.4.1",
         "react": "19.2.0",
         "react-native": "0.83.2",
@@ -84,6 +84,7 @@
         "typescript-eslint": "8.46.1"
     },
     "peerDependencies": {
+        "react-native-portalize": ">= 1.0.7",
         "lucide-react-native": ">= 0.577.0",
         "ncore-context": ">= 1.0.5",
         "react": "*",
@@ -140,6 +141,7 @@
     },
     "dependencies": {
         "lucide-react-native": "0.577.0",
-        "ncore-context": "1.0.5"
+        "ncore-context": "1.0.5",
+        "react-native-portalize": "1.0.7"
     }
 }

src/index.tsx

@@ -1,4 +1,96 @@
-console.log("NCORE SRC INDEX YUKLENDI");
-export function multiply(a: number, b: number): number {
-    return a * b;
-}
+import {
+    ReactNode
+} from "react";
+import useStyles from "./stylesheet";
+import CoreContext from "./context";
+import {
+    default as NCoreUIKitLocalizeClass
+} from "./context/localize";
+import {
+    default as NCoreUIKitModalClass
+} from "./context/modal";
+import {
+    default as NCoreUIKitThemeClass
+} from "./context/theme";
+import {
+    NCoreUIKitConfig,
+    LocalizeType,
+    ThemesType
+} from "./types";
+
+class NCoreUIKitBase<T extends NCoreUIKitConfig> {
+    NCoreUIKitContext: CoreContext<T>;
+
+    constructor(initialState: T) {
+        this.NCoreUIKitContext = new CoreContext(initialState);
+    }
+
+    Provider = ({
+        children
+    }: {
+        children: ReactNode;
+    }) => {
+        const NCoreUIKitContext = this.NCoreUIKitContext;
+
+        return <NCoreUIKitContext.Provider>
+            {children}
+        </NCoreUIKitContext.Provider>;
+    };
+};
+
+let NCoreUIKit!: NCoreUIKitBase<NCoreUIKitConfig>;
+
+export let NCoreUIKitLocalize: NCoreUIKitLocalizeClass<LocalizeType>;
+export let NCoreUIKitTheme: NCoreUIKitThemeClass<ThemesType>;
+export let NCoreUIKitModal: NCoreUIKitModalClass;
+
+export const setupNCoreUIKit = (initialState: NCoreUIKitConfig, isCustom: boolean = false) => {
+    if(isCustom) {
+        return new NCoreUIKitBase(initialState);
+    } else {
+        NCoreUIKit = new NCoreUIKitBase(initialState);
+
+        NCoreUIKitLocalize = NCoreUIKit.NCoreUIKitContext.NCoreUIKitLocalize;
+        NCoreUIKitModal = NCoreUIKit.NCoreUIKitContext.NCoreUIKitModal;
+        NCoreUIKitTheme = NCoreUIKit.NCoreUIKitContext.NCoreUIKitTheme;
+
+        return NCoreUIKit;
+    }
+};
+
+export {
+    TextInput,
+    Loading,
+    Dialog,
+    Button,
+    Modal,
+    Text
+} from "./components";
+
+export type {
+    IDialogRef,
+    IModalRef
+} from "./components";
+
+export {
+    ChevronRightIcon,
+    LoadingIcon,
+    CleanIcon
+} from "./assets/svg";
+
+export type {
+    PortalizedComponentProps,
+    INCoreUIKitIconProps,
+    GapPropagationType,
+    NCoreUIKitConfig,
+    RecursiveRecord,
+    NCoreUIKitIcon,
+    ModalDataType,
+    SharpnessType,
+    LocalizeType,
+    PaletteType,
+    ThemesType,
+    LocaleType,
+    ThemeType,
+    ModalType
+} from "./types";

src/types/icon.ts

@@ -0,0 +1,12 @@
+import type {
+    FC
+} from "react";
+
+export interface INCoreUIKitIconProps {
+    color?: keyof NCoreUIKit.IconContentColors;
+    customColor?: string;
+    className?: string;
+    size?: number;
+}
+
+export type NCoreUIKitIcon = FC<INCoreUIKitIconProps>;

src/types/index.ts

@@ -0,0 +1,181 @@
+import {
+    ForwardRefRenderFunction
+} from "react";
+import {
+    LocalizeType,
+    LocaleType
+} from "./locale";
+import {
+    ModalDataType,
+    ModalType
+} from "./modal";
+import {
+    GapPropagationType,
+    SharpnessType,
+    PaletteType,
+    ThemesType,
+    ThemeType
+} from "./theme";
+import defaultLocaleJSON from "../variants/locales/default.json";
+import defaultThemeJSON from "../variants/themes/default.json";
+
+export type {
+    PortalizedComponentProps
+} from "./portalize";
+
+export type {
+    INCoreUIKitIconProps,
+    NCoreUIKitIcon
+} from "./icon";
+
+export type {
+    ThemeContextStateType,
+    ThemeContextType
+} from "./theme";
+
+export type {
+    LocalizeContextStateType,
+    LocalizeContextType
+} from "./locale";
+
+export type {
+    GapPropagationType,
+    NCoreUIKitConfig,
+    SharpnessType,
+    ModalDataType,
+    LocalizeType,
+    PaletteType,
+    ThemesType,
+    LocaleType,
+    ModalType,
+    ThemeType
+};
+
+export type RecursiveRecord = {
+  [key: string]: string | RecursiveRecord;
+};
+
+export interface RefForwardingComponent<T, P = object> extends ForwardRefRenderFunction<T, P> {};
+
+type NCoreUIKitConfig = ThemesType & LocalizeType & ModalType;
+
+declare global {
+    namespace NCoreUIKit {
+        type PaletteKey = PaletteType;
+        type LocaleKey = LocaleType;
+        type ThemeKey = ThemeType;
+
+        interface ActivePalette {
+            inlineSpaces: InlineSpaces;
+            typography: Typography;
+            colors: ThemeTokens;
+            radiuses: Radiuses;
+            borders: Borders;
+            spaces: Spaces;
+        }
+
+        interface Palette {
+            typography: TypographyWithVariants;
+            palettes: ThemePalettes;
+            shapes: Shapes;
+        }
+
+        type SpacesWithVariants = Record<GapPropagationType, Spaces>;
+
+        type RadiusesWithVariants = Record<SharpnessType, Radiuses>;
+
+        type Shapes = {
+            radiuses: RadiusesWithVariants;
+            inlineSpaces: InlineSpaces;
+            spaces: SpacesWithVariants;
+            borders: Borders;
+        };
+
+        type DefaultSpaces = Record<keyof typeof defaultThemeJSON.shapes.spaces.compact, number>;
+
+        interface Spaces extends DefaultSpaces {}
+
+        type DefaultBorders = Record<keyof typeof defaultThemeJSON.shapes.borders, number>;
+
+        interface Borders extends DefaultBorders {
+        }
+
+        type DefaultInlineSpaces = Record<keyof typeof defaultThemeJSON.shapes.inlineSpaces, number>;
+
+        interface InlineSpaces extends DefaultInlineSpaces {
+        }
+
+        type DefaultRadiuses = Record<keyof typeof defaultThemeJSON.shapes.radiuses.rounded, number>;
+
+        interface Radiuses extends DefaultRadiuses {}
+
+        type TypographyWithVariants = Record<GapPropagationType, Typography>;
+
+        type DefaultTypography = Record<keyof typeof defaultThemeJSON.typography.compact, TypographyToken>;
+
+        interface Typography extends DefaultTypography {}
+
+        interface TypographyToken {
+            letterSpacing: string | number;
+            lineHeight: string | number;
+            fontWeight: string | number;
+            fontSize: string | number;
+            fontFamily: string;
+        }
+
+        type ThemePalettes = Array<ThemePalette>;
+
+        interface ThemePalette {
+            themes: Theme;
+            name: string;
+        }
+
+        type Theme = Record<ThemeKey, ThemeTokens>;
+
+        type ColorsMerged = DefaultSystemColors & DefaultContentColors;
+
+        type ThemeTokens = {
+            content: ContentColorPalette;
+            system: SystemColorPalette;
+        };
+
+        type DefaultPalette = typeof defaultThemeJSON.palettes[0];
+
+        type SystemData = DefaultPalette["themes"]["dark"]["system"];
+        type DefaultSystemColors = SystemData;
+
+        interface SystemColorPalette extends DefaultSystemColors {
+        }
+
+        type ContentData = DefaultPalette["themes"]["dark"]["content"];
+        type DefaultContentColors = ContentData;
+
+        interface ContentColorPalette extends DefaultContentColors {
+        }
+
+        type ContainerContentColors = DefaultContentColors["container"];
+        type BorderContentColors = DefaultContentColors["border"];
+        type IconContentColors = DefaultContentColors["icon"];
+        type TextContentColors = DefaultContentColors["text"];
+
+        type DisabledSystemColors = DefaultSystemColors["disabled"];
+        type StateSystemColors = DefaultSystemColors["state"];
+
+        type Locales = Array<Locale>;
+
+        interface Locale {
+            translations: Translation;
+            locale: string;
+            isRTL: boolean;
+        }
+
+        type DefaultLocalization = typeof defaultLocaleJSON[0];
+
+        type GeneratedTranslations = {
+            [K in keyof DefaultLocalization["translations"]]: DefaultLocalization["translations"][K];
+        };
+
+        interface Translation extends GeneratedTranslations {
+        }
+    }
+}

src/types/locale.ts

@@ -0,0 +1,29 @@
+import {
+    ReactElement,
+    ReactNode
+} from "react";
+import ITextProps from "../components/text/text.types";
+
+export type LocalizeType = {
+    initialSelectedLocale?: NCoreUIKit.LocaleKey;
+    projectLocales?: NCoreUIKit.Locales;
+};
+
+export type LocaleType = "en-US" | "tr-TR";
+
+export type LocalizeContextStateType = Partial<LocalizeContextType>;
+
+export type LocalizeContextType = {
+    translations: NCoreUIKit.Translation;
+    localizeWithObject: (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | ReactNode | ReactElement>,
+        props?: Array<ITextProps>
+    ) => string;
+    activeLocale: NCoreUIKit.LocaleKey;
+    localize: (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | number>
+    ) => string;
+    isRTL: boolean;
+};

src/types/modal.ts

@@ -0,0 +1,24 @@
+import {
+    ModalInternalProps
+} from "../components/modal/modal.types";
+
+export type ModalType = {
+    data?: Array<ModalDataType>;
+};
+
+export type ModalDataType = ModalInternalProps & {
+    id: string;
+};
+
+export type ModalContextType = {
+    open: (modalData: ModalDataType) => void;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<ModalDataType>;
+};
+
+export type ModalStateContextType = {
+    data: Array<ModalDataType>;
+};

src/types/portalize.ts

@@ -0,0 +1,3 @@
+export type PortalizedComponentProps = {
+    isVisible: boolean;
+};

src/types/theme.ts

@@ -0,0 +1,30 @@
+export type ThemesType = {
+    initialSelectedGapPropagation?: GapPropagationType;
+    initialSelectedActiveSharpness?: SharpnessType;
+    initialSelectedPalette?: NCoreUIKit.PaletteKey;
+    initialSelectedTheme?: NCoreUIKit.ThemeKey;
+    projectThemes?: NCoreUIKit.Palette;
+};
+
+export type PaletteType = "nibgat" | "nibgat-community" | "caycore";
+
+export type GapPropagationType = "spacious" | "compact";
+
+export type SharpnessType = "soft" | "sharp" | "rounded";
+
+export type ThemeType = "light" | "dark";
+
+export type ThemeContextStateType = Partial<ThemeContextType>;
+
+export type ThemeContextType = {
+    activeGapPropagation: GapPropagationType;
+    inlineSpaces: NCoreUIKit.InlineSpaces;
+    activePalette: NCoreUIKit.PaletteKey;
+    typography: NCoreUIKit.Typography;
+    activeTheme: NCoreUIKit.ThemeKey;
+    activeSharpness: SharpnessType;
+    colors: NCoreUIKit.ThemeTokens;
+    radiuses: NCoreUIKit.Radiuses;
+    borders: NCoreUIKit.Borders;
+    spaces: NCoreUIKit.Spaces;
+};

src/utils/index.ts

@@ -0,0 +1,6 @@
+export const uuid = () => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0, v = c == "x" ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+};

src/variants/locales/default.json

@@ -0,0 +1,20 @@
+[
+    {
+        "locale": "tr-TR",
+        "isRTL": false,
+        "translations": {
+            "is-optional": "Opsiyonel",
+            "cancel": "İptal",
+            "ok": "Tamam"
+        }
+    },
+    {
+        "locale": "en-US",
+        "isRTL": false,
+        "translations": {
+            "is-optional": "Optional",
+            "cancel": "Cancel",
+            "ok": "Okey"
+        }
+    }
+]

src/variants/themes/default.json

@@ -0,0 +1,667 @@
+{
+    "shapes": {
+        "radiuses": {
+            "soft": {
+                "form": 8,
+                "surface": 12,
+                "actions": 8,
+                "chip": 8,
+                "full": 9999,
+                "xs": 4,
+                "none": 0,
+                "sm": 8,
+                "md": 12,
+                "lg": 16,
+                "xl": 28
+            },
+            "sharp": {
+                "form": 4,
+                "surface": 8,
+                "actions": 4,
+                "chip": 4,
+                "full": 9999,
+                "xs": 2,
+                "none": 0,
+                "sm": 4,
+                "md": 8,
+                "lg": 12,
+                "xl": 16
+            },
+            "rounded": {
+                "form": 12,
+                "surface": 28,
+                "actions": 9999,
+                "chip": 9999,
+                "full": 9999,
+                "xs": 8,
+                "none": 0,
+                "sm": 12,
+                "md": 16,
+                "lg": 28,
+                "xl": 28
+            }
+        },
+        "inlineSpaces": {
+            "subTitle": 2,
+            "required": 2
+        },
+        "borders": {
+            "line": 2
+        },
+        "spaces": {
+            "spacious": {
+                "spacingXs": 4,
+                "spacingSm": 8,
+                "spacingMd": 16,
+                "spacingLg": 24,
+                "spacingXl": 32
+            },
+            "compact": {
+                "spacingXs": 2,
+                "spacingSm": 4,
+                "spacingMd": 12,
+                "spacingLg": 16,
+                "spacingXl": 24
+            }
+        }
+    },
+    "typography": {
+        "spacious": {
+            "displayLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 57,
+                "lineHeight": "64px",
+                "letterSpacing": -0.25
+            },
+            "displayMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 45,
+                "lineHeight": "52px",
+                "letterSpacing": 0
+            },
+            "displaySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 36,
+                "lineHeight": "44px",
+                "letterSpacing": 0
+            },
+            "headlineLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 32,
+                "lineHeight": "40px",
+                "letterSpacing": 0
+            },
+            "headlineMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 28,
+                "lineHeight": "36px",
+                "letterSpacing": 0
+            },
+            "headlineSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 24,
+                "lineHeight": "32px",
+                "letterSpacing": 0
+            },
+            "titleLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 22,
+                "lineHeight": "28px",
+                "letterSpacing": 0
+            },
+            "titleMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 16,
+                "lineHeight": "24px",
+                "letterSpacing": 0.15
+            },
+            "titleSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 14,
+                "lineHeight": "20px",
+                "letterSpacing": 0.1
+            },
+            "bodyLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 16,
+                "lineHeight": "24px",
+                "letterSpacing": 0.5
+            },
+            "bodyMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 14,
+                "lineHeight": "20px",
+                "letterSpacing": 0.25
+            },
+            "bodySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 12,
+                "lineHeight": "16px",
+                "letterSpacing": 0.4
+            },
+            "labelLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 14,
+                "lineHeight": "20px",
+                "letterSpacing": 0.1
+            },
+            "labelMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 12,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            },
+            "labelSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 11,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            }
+        },
+        "compact": {
+            "displayLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 45,
+                "lineHeight": "52px",
+                "letterSpacing": 0
+            },
+            "displayMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 36,
+                "lineHeight": "44px",
+                "letterSpacing": 0
+            },
+            "displaySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Light",
+                "fontSize": 32,
+                "lineHeight": "40px",
+                "letterSpacing": 0
+            },
+            "headlineLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 28,
+                "lineHeight": "36px",
+                "letterSpacing": 0
+            },
+            "headlineMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 24,
+                "lineHeight": "32px",
+                "letterSpacing": 0
+            },
+            "headlineSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 22,
+                "lineHeight": "28px",
+                "letterSpacing": 0
+            },
+            "titleLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 16,
+                "lineHeight": "24px",
+                "letterSpacing": 0.15
+            },
+            "titleMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 14,
+                "lineHeight": "20px",
+                "letterSpacing": 0.1
+            },
+            "titleSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Medium",
+                "fontSize": 12,
+                "lineHeight": "16px",
+                "letterSpacing": 0.4
+            },
+            "bodyLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 14,
+                "lineHeight": "20px",
+                "letterSpacing": 0.25
+            },
+            "bodyMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 12,
+                "lineHeight": "16px",
+                "letterSpacing": 0.4
+            },
+            "bodySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 11,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            },
+            "labelLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 12,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            },
+            "labelMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 11,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            },
+            "labelSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "Regular",
+                "fontSize": 11,
+                "lineHeight": "16px",
+                "letterSpacing": 0.5
+            }
+        }
+    },
+    "palettes": [
+        {
+            "name": "nibgat",
+            "themes": {
+                "dark": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(64,220,195,1)",
+                            "secondary": "rgba(187,204,196,1)",
+                            "tertiary": "rgba(171,203,228,1)",
+                            "error": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "background": "rgba(25,28,27,1)",
+                            "surface": "rgba(25,28,27,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(0,63,54,1)",
+                            "secondary": "rgba(28,53,47,1)",
+                            "tertiary": "rgba(18,52,72,1)",
+                            "error": "rgba(105,0,5,1)",
+                            "success": "rgba(22,66,33,1)",
+                            "warning": "rgba(97,54,0,1)",
+                            "info": "rgba(0,62,90,1)",
+                            "background": "rgba(224,226,225,1)",
+                            "surface": "rgba(224,226,225,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(0,85,69,1)",
+                            "secondary": "rgba(51,74,68,1)",
+                            "tertiary": "rgba(43,74,95,1)",
+                            "error": "rgba(147,0,8,1)",
+                            "success": "rgba(50,97,58,1)",
+                            "warning": "rgba(136,81,0,1)",
+                            "info": "rgba(0,93,128,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(101,250,222,1)",
+                            "secondary": "rgba(206,232,224,1)",
+                            "tertiary": "rgba(201,236,254,1)",
+                            "error": "rgba(255,187,177,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)"
+                        },
+                        "variant": {
+                            "surface": "rgba(41,50,48,1)"
+                        },
+                        "onVariant": {
+                            "surface": "rgba(191,201,199,1)"
+                        },
+                        "outline": "rgba(137,147,145,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": {
+                            "surface": "rgba(255,255,255,0.64)"
+                        },
+                        "onLow": {
+                            "surface": "rgba(255,255,255,0.32)"
+                        },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(64,220,195,0.08)",
+                                    "error": "rgba(255,187,177,0.24)",
+                                    "warning": "rgba(255,223,102,0.24)",
+                                    "success": "rgba(179,250,188,0.24)",
+                                    "neutral": "rgba(196,199,198,0.24)",
+                                    "info": "rgba(167,230,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(255,255,255,0.64)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.24)",
+                                    "error": "rgba(255,187,177,0.24)",
+                                    "warning": "rgba(255,223,102,0.24)",
+                                    "success": "rgba(179,250,188,0.24)",
+                                    "neutral": "rgba(196,199,198,0.08)",
+                                    "info": "rgba(167,230,255,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.64)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.64)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "mid": {
+                                    "error": "rgba(255,255,255,1)"
+                                }
+                            }
+                        },
+                        "disabled": {
+                            "content": "rgba(255,255,255,0.24)"
+                        },
+                        "low": {
+                            "error": "rgba(255,187,177,0.32)",
+                            "warning": "rgba(255,223,102,0.32)",
+                            "success": "rgba(179,250,188,0.32)",
+                            "info": "rgba(167,230,255,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(224,226,225,1)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "link": "rgba(64,220,195,1)",
+                            "onPrimary": "rgba(0,63,54,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(255,187,177,0.32)",
+                            "warningLow": "rgba(255,223,102,0.32)",
+                            "successLow": "rgba(179,250,188,0.32)",
+                            "infoLow": "rgba(167,230,255,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(191,201,199,1)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "onPrimary": "rgba(0,63,54,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "high": "rgba(224,226,225,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(25,28,27,1)",
+                            "subtle": "rgba(41,50,48,1)",
+                            "emphasized": "rgba(0,85,69,1)",
+                            "selected": "rgba(0,85,69,1)",
+                            "mid": "rgba(37, 35, 34, 1)",
+                            "inverse": "rgba(0,63,54,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(147,0,8,1)",
+                            "success": "rgba(50,97,58,1)",
+                            "warning": "rgba(136,81,0,1)",
+                            "info": "rgba(0,93,128,1)",
+                            "primary": "rgba(64,220,195,1)"
+                        },
+                        "border": {
+                            "default": "rgba(137,147,145,1)",
+                            "subtle": "rgba(41,50,48,1)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)"
+                        }
+                    }
+                },
+                "light": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(0,107,92,1)",
+                            "secondary": "rgba(74,101,95,1)",
+                            "tertiary": "rgba(67,101,127,1)",
+                            "error": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "background": "rgba(250,252,251,1)",
+                            "surface": "rgba(250,252,251,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(182,254,238,1)",
+                            "secondary": "rgba(255,255,255,1)",
+                            "tertiary": "rgba(255,255,255,1)",
+                            "error": "rgba(255,255,255,1)",
+                            "success": "rgba(255,255,255,1)",
+                            "warning": "rgba(255,255,255,1)",
+                            "info": "rgba(255,255,255,1)",
+                            "background": "rgba(25,28,27,1)",
+                            "surface": "rgba(25,28,27,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(101,250,222,1)",
+                            "secondary": "rgba(206,232,224,1)",
+                            "tertiary": "rgba(201,236,254,1)",
+                            "error": "rgba(255,218,214,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(0,32,27,1)",
+                            "secondary": "rgba(6,33,27,1)",
+                            "tertiary": "rgba(0,30,47,1)",
+                            "error": "rgba(65,0,2,1)",
+                            "success": "rgba(2,34,10,1)",
+                            "warning": "rgba(60,28,0,1)",
+                            "info": "rgba(0,31,54,1)"
+                        },
+                        "variant": {
+                            "surface": "rgba(233,240,238,1)"
+                        },
+                        "onVariant": {
+                            "surface": "rgba(63,73,71,1)"
+                        },
+                        "outline": "rgba(111,121,119,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": {
+                            "surface": "rgba(0,0,0,0.64)"
+                        },
+                        "onLow": {
+                            "surface": "rgba(0,0,0,0.32)"
+                        },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(64,220,195,0.24)",
+                                    "error": "rgba(186,16,16,0.24)",
+                                    "warning": "rgba(176,108,0,0.24)",
+                                    "success": "rgba(74,128,82,0.24)",
+                                    "neutral": "rgba(91,95,94,0.24)",
+                                    "info": "rgba(37,123,167,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(0,0,0,0.64)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.24)",
+                                    "error": "rgba(186,16,16,0.24)",
+                                    "warning": "rgba(176,108,0,0.24)",
+                                    "success": "rgba(74,128,82,0.24)",
+                                    "neutral": "rgba(91,95,94,0.08)",
+                                    "info": "rgba(37,123,167,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "mid": {
+                                    "error": "rgba(255,255,255,1)"
+                                }
+                            }
+                        },
+                        "disabled": {
+                            "content": "rgba(0,0,0,0.24)"
+                        },
+                        "low": {
+                            "error": "rgba(186,16,16,0.32)",
+                            "warning": "rgba(176,108,0,0.32)",
+                            "success": "rgba(74,128,82,0.32)",
+                            "info": "rgba(37,123,167,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(25,28,27,1)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "link": "rgba(0,107,92,1)",
+                            "onPrimary": "rgba(182,254,238,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(186,16,16,0.32)",
+                            "warningLow": "rgba(176,108,0,0.32)",
+                            "successLow": "rgba(74,128,82,0.32)",
+                            "infoLow": "rgba(37,123,167,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(63,73,71,1)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "onPrimary": "rgba(182,254,238,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "high": "rgba(25,28,27,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(250,252,251,1)",
+                            "subtle": "rgba(233,240,238,1)",
+                            "emphasized": "rgba(101,250,222,1)",
+                            "selected": "rgba(101,250,222,1)",
+                            "inverse": "rgba(182,254,238,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "mid": "rgba(239, 240, 239, 1)",
+                            "danger": "rgba(255,218,214,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)",
+                            "primary": "rgba(0,107,92,1)"
+                        },
+                        "border": {
+                            "default": "rgba(111,121,119,1)",
+                            "subtle": "rgba(233,240,238,1)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)"
+                        }
+                    }
+                }
+            }
+        }
+    ]
+}

yarn.lock

@@ -4304,12 +4304,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:19.1.12":
-  version: 19.1.12
-  resolution: "@types/react@npm:19.1.12"
+"@types/react@npm:^19.2.14":
+  version: 19.2.14
+  resolution: "@types/react@npm:19.2.14"
   dependencies:
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/e35912b43da0caaab5252444bab87a31ca22950cde2822b3b3dc32e39c2d42dad1a4cf7b5dde9783aa2d007f0b2cba6ab9563fc6d2dbcaaa833b35178118767c
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/7d25bf41b57719452d86d2ac0570b659210402707313a36ee612666bf11275a1c69824f8c3ee1fdca077ccfe15452f6da8f1224529b917050eb2d861e52b59b7
   languageName: node
   linkType: hard
 
@@ -7150,7 +7150,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
+"csstype@npm:^3.2.2":
   version: 3.2.3
   resolution: "csstype@npm:3.2.3"
   checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
@@ -12934,7 +12934,7 @@ __metadata:
     "@react-native/babel-preset": "npm:0.83.0"
     "@release-it/conventional-changelog": "npm:10.0.1"
     "@types/eslint-plugin-jsx-a11y": "npm:6"
-    "@types/react": "npm:19.1.12"
+    "@types/react": "npm:^19.2.14"
     babel-plugin-module-resolver: "npm:^5.0.2"
     del-cli: "npm:6.0.0"
     eslint: "npm:9.37.0"
@@ -12953,6 +12953,7 @@ __metadata:
     react: "npm:19.2.0"
     react-native: "npm:0.83.2"
     react-native-builder-bob: "npm:0.40.13"
+    react-native-portalize: "npm:^1.0.7"
     release-it: "npm:19.0.4"
     turbo: "npm:2.5.6"
     typescript: "npm:5.9.3"
@@ -14463,6 +14464,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-portalize@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "react-native-portalize@npm:1.0.7"
+  peerDependencies:
+    react: "> 15.0.0"
+    react-native: "> 0.50.0"
+  checksum: 10c0/17ba66a92e5d73b9341a5a748219801ae1ebe110003fc640bb44df8661f579a292b8d5521b0b481ee1281ed66d9d554398d42bb4e84827137455ab980d143aec
+  languageName: node
+  linkType: hard
+
 "react-native-web@npm:~0.21.0":
   version: 0.21.2
   resolution: "react-native-web@npm:0.21.2"