@korsolutions/ui 0.0.77 → 0.0.79

package/dist/module/hooks/use-color-scheme.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { useEffect, useState } from "react";
+import { useColorScheme as useSystemColorScheme } from "react-native";
+const getColorScheme = (storageGetCallback, systemColorScheme) => {
+  if (storageGetCallback) {
+    const storedScheme = storageGetCallback();
+    if (storedScheme) return storedScheme;
+  }
+  if (systemColorScheme) {
+    return systemColorScheme === "dark" ? "dark" : "light";
+  }
+  return "light";
+};
+export function useColorScheme({
+  colorSchemeStorage
+}) {
+  const systemColorScheme = useSystemColorScheme();
+  const [_colorScheme, _setColorScheme] = useState(getColorScheme(colorSchemeStorage?.get, systemColorScheme));
+  const setColorScheme = scheme => {
+    _setColorScheme(scheme);
+    colorSchemeStorage?.set(scheme);
+  };
+  useEffect(() => {
+    const newScheme = getColorScheme(colorSchemeStorage?.get, systemColorScheme);
+    if (newScheme === _colorScheme) return;
+    setColorScheme(newScheme);
+  }, [systemColorScheme]);
+  return {
+    colorScheme: _colorScheme,
+    setColorScheme
+  };
+}
+//# sourceMappingURL=use-color-scheme.js.map

package/dist/module/hooks/use-color-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useColorScheme","useSystemColorScheme","getColorScheme","storageGetCallback","systemColorScheme","storedScheme","colorSchemeStorage","_colorScheme","_setColorScheme","get","setColorScheme","scheme","set","newScheme","colorScheme"],"sourceRoot":"../../../src","sources":["hooks/use-color-scheme.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,cAAc,IAAIC,oBAAoB,QAAQ,cAAc;AAGrE,MAAMC,cAAc,GAAGA,CACrBC,kBAA6C,EAC7CC,iBAA2D,KAC3C;EAChB,IAAID,kBAAkB,EAAE;IACtB,MAAME,YAAY,GAAGF,kBAAkB,CAAC,CAAC;IACzC,IAAIE,YAAY,EAAE,OAAOA,YAAY;EACvC;EACA,IAAID,iBAAiB,EAAE;IACrB,OAAOA,iBAAiB,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO;EACxD;EACA,OAAO,OAAO;AAChB,CAAC;AAMD,OAAO,SAASJ,cAAcA,CAAC;EAAEM;AAAwC,CAAC,EAAE;EAC1E,MAAMF,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChD,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGT,QAAQ,CAC9CG,cAAc,CAACI,kBAAkB,EAAEG,GAAG,EAAEL,iBAAiB,CAC3D,CAAC;EAED,MAAMM,cAAc,GAAIC,MAAmB,IAAK;IAC9CH,eAAe,CAACG,MAAM,CAAC;IACvBL,kBAAkB,EAAEM,GAAG,CAACD,MAAM,CAAC;EACjC,CAAC;EAEDb,SAAS,CAAC,MAAM;IACd,MAAMe,SAAS,GAAGX,cAAc,CAC9BI,kBAAkB,EAAEG,GAAG,EACvBL,iBACF,CAAC;IACD,IAAIS,SAAS,KAAKN,YAAY,EAAE;IAChCG,cAAc,CAACG,SAAS,CAAC;EAC3B,CAAC,EAAE,CAACT,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IAAEU,WAAW,EAAEP,YAAY;IAAEG;EAAe,CAAC;AACtD","ignoreList":[]}

package/dist/module/themes/provider.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { createContext, useContext, useEffect, useState } from "react";
-import { useColorScheme } from "react-native";
+import { createContext, useContext } from "react";
+import { useColorScheme } from "../hooks/use-color-scheme.js";
 import { defaultThemeAssets } from "./default/index.js";
 import { mergeThemeAssets } from "./utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,15 +12,14 @@ export const ThemeProvider = props => {
     theme,
     components
   } = props;
-  const systemColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState(systemColorScheme === "dark" ? "dark" : "light");
+  const {
+    colorScheme,
+    setColorScheme
+  } = useColorScheme({
+    colorSchemeStorage: components?.colorScheme?.storage
+  });
   const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
   const colors = themeAssets.colors[colorScheme];
-  useEffect(() => {
-    if (systemColorScheme) {
-      setColorScheme(systemColorScheme === "dark" ? "dark" : "light");
-    }
-  }, [systemColorScheme]);
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {
     value: {
       colorScheme,

package/dist/module/themes/provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","useEffect","useState","useColorScheme","defaultThemeAssets","mergeThemeAssets","jsx","_jsx","ThemeContext","ThemeProvider","props","children","theme","components","systemColorScheme","colorScheme","setColorScheme","themeAssets","colors","Provider","value","radius","fontFamily","letterSpacing","fontSize","useTheme","context","Error","useComponentsConfig"],"sourceRoot":"../../../src","sources":["themes/provider.tsx"],"mappings":";;AAAA,SACEA,aAAa,EAEbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,OAAO;AACd,SAASC,cAAc,QAAQ,cAAc;AAI7C,SAASC,kBAAkB,QAAQ,oBAAW;AAU9C,SAASC,gBAAgB,QAAQ,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA4B3C,MAAMC,YAAY,gBAAGT,aAAa,CAAsB,IAAI,CAAC;AAO7D,OAAO,MAAMU,aAAa,GAAIC,KAAyB,IAAK;EAC1D,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGH,KAAK;EAE7C,MAAMI,iBAAiB,GAAGX,cAAc,CAAC,CAAC;EAC1C,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGd,QAAQ,CAC5CY,iBAAiB,KAAK,MAAM,GAAG,MAAM,GAAG,OAC1C,CAAC;EAED,MAAMG,WAAW,GAAGL,KAAK,GACrBP,gBAAgB,CAACD,kBAAkB,EAAEQ,KAAK,CAAC,GAC3CR,kBAAkB;EAEtB,MAAMc,MAAM,GAAGD,WAAW,CAACC,MAAM,CAACH,WAAW,CAAC;EAE9Cd,SAAS,CAAC,MAAM;IACd,IAAIa,iBAAiB,EAAE;MACrBE,cAAc,CAACF,iBAAiB,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjE;EACF,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,oBACEP,IAAA,CAACC,YAAY,CAACW,QAAQ;IACpBC,KAAK,EAAE;MACLL,WAAW;MACXC,cAAc;MACdE,MAAM;MACNG,MAAM,EAAEJ,WAAW,CAACI,MAAM;MAC1BC,UAAU,EAAEL,WAAW,CAACK,UAAU;MAClCC,aAAa,EAAEN,WAAW,CAACM,aAAa;MACxCC,QAAQ,EAAEP,WAAW,CAACO,QAAQ;MAC9BX;IACF,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACY,CAAC;AAE5B,CAAC;AAED,OAAO,MAAMc,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAG1B,UAAU,CAACQ,YAAY,CAAC;EACxC,IAAI,CAACkB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMF,OAAO,GAAG1B,UAAU,CAACQ,YAAY,CAAC;EACxC,IAAI,CAACkB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC;EAC5E;EACA,OAAOD,OAAO,CAACb,UAAU;AAC3B,CAAC","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useColorScheme","defaultThemeAssets","mergeThemeAssets","jsx","_jsx","ThemeContext","ThemeProvider","props","children","theme","components","colorScheme","setColorScheme","colorSchemeStorage","storage","themeAssets","colors","Provider","value","radius","fontFamily","letterSpacing","fontSize","useTheme","context","Error","useComponentsConfig"],"sourceRoot":"../../../src","sources":["themes/provider.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAA0BC,UAAU,QAAQ,OAAO;AAEzE,SAASC,cAAc,QAAQ,8BAA2B;AAG1D,SAASC,kBAAkB,QAAQ,oBAAW;AAW9C,SAASC,gBAAgB,QAAQ,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA+B3C,MAAMC,YAAY,gBAAGP,aAAa,CAAsB,IAAI,CAAC;AAO7D,OAAO,MAAMQ,aAAa,GAAIC,KAAyB,IAAK;EAC1D,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGH,KAAK;EAC7C,MAAM;IAAEI,WAAW;IAAEC;EAAe,CAAC,GAAGZ,cAAc,CAAC;IACrDa,kBAAkB,EAAEH,UAAU,EAAEC,WAAW,EAAEG;EAC/C,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGN,KAAK,GACrBP,gBAAgB,CAACD,kBAAkB,EAAEQ,KAAK,CAAC,GAC3CR,kBAAkB;EAEtB,MAAMe,MAAM,GAAGD,WAAW,CAACC,MAAM,CAACL,WAAW,CAAC;EAE9C,oBACEP,IAAA,CAACC,YAAY,CAACY,QAAQ;IACpBC,KAAK,EAAE;MACLP,WAAW;MACXC,cAAc;MACdI,MAAM;MACNG,MAAM,EAAEJ,WAAW,CAACI,MAAM;MAC1BC,UAAU,EAAEL,WAAW,CAACK,UAAU;MAClCC,aAAa,EAAEN,WAAW,CAACM,aAAa;MACxCC,QAAQ,EAAEP,WAAW,CAACO,QAAQ;MAC9BZ;IACF,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACY,CAAC;AAE5B,CAAC;AAED,OAAO,MAAMe,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAGzB,UAAU,CAACM,YAAY,CAAC;EACxC,IAAI,CAACmB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMF,OAAO,GAAGzB,UAAU,CAACM,YAAY,CAAC;EACxC,IAAI,CAACmB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC;EAC5E;EACA,OAAOD,OAAO,CAACd,UAAU;AAC3B,CAAC","ignoreList":[]}

package/dist/typescript/src/hooks/use-color-scheme.d.ts

@@ -0,0 +1,10 @@
+import type { ColorScheme, StorageClient } from "../themes/types";
+interface UseColorSchemeProps {
+    colorSchemeStorage?: StorageClient<ColorScheme>;
+}
+export declare function useColorScheme({ colorSchemeStorage }: UseColorSchemeProps): {
+    colorScheme: ColorScheme;
+    setColorScheme: (scheme: ColorScheme) => void;
+};
+export {};
+//# sourceMappingURL=use-color-scheme.d.ts.map

package/dist/typescript/src/hooks/use-color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-scheme.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-color-scheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAgBlE,UAAU,mBAAmB;IAC3B,kBAAkB,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACjD;AAED,wBAAgB,cAAc,CAAC,EAAE,kBAAkB,EAAE,EAAE,mBAAmB;;6BAMxC,WAAW;EAe5C"}

package/dist/typescript/src/themes/provider.d.ts

@@ -2,7 +2,7 @@ import { type PropsWithChildren } from "react";
 import type { ToastVariants } from "../components/toast/variants";
 import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
+import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, StorageClient, ThemeAssets } from "./types";
 interface ThemeContext {
     colors: Colors;
     radius: Radius;
@@ -14,6 +14,9 @@ interface ThemeContext {
     components?: ComponentsConfig;
 }
 export interface ComponentsConfig {
+    colorScheme?: {
+        storage?: StorageClient<ColorScheme>;
+    };
     toast?: {
         icons?: Partial<Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>>;
     };

package/dist/typescript/src/themes/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,MAAM,EACN,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,OAAO,CACb,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAClE,CAAC;KACH,CAAC;IACF,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAC/C,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAC1C,CAAC;CACH;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAoCtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oCAM/B,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;KACtC,CAAC;IACF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,OAAO,CACb,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAClE,CAAC;KACH,CAAC;IACF,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAC/C,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAC1C,CAAC;CACH;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA4BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oCAM/B,CAAC"}

package/dist/typescript/src/themes/types.d.ts

@@ -27,5 +27,9 @@ export interface ThemeAssets {
     letterSpacing: LetterSpacing;
     fontSize: FontSize;
 }
+export type StorageClient<T> = {
+    set: (value: T) => void;
+    get: () => T | null;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/themes/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAC;AAEtD,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAC;AAEtD,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/hooks/use-color-scheme.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { useColorScheme as useSystemColorScheme } from "react-native";
+import type { ColorScheme, StorageClient } from "../themes/types";
+
+const getColorScheme = (
+  storageGetCallback?: () => ColorScheme | null,
+  systemColorScheme?: ReturnType<typeof useSystemColorScheme>,
+): ColorScheme => {
+  if (storageGetCallback) {
+    const storedScheme = storageGetCallback();
+    if (storedScheme) return storedScheme;
+  }
+  if (systemColorScheme) {
+    return systemColorScheme === "dark" ? "dark" : "light";
+  }
+  return "light";
+};
+
+interface UseColorSchemeProps {
+  colorSchemeStorage?: StorageClient<ColorScheme>;
+}
+
+export function useColorScheme({ colorSchemeStorage }: UseColorSchemeProps) {
+  const systemColorScheme = useSystemColorScheme();
+  const [_colorScheme, _setColorScheme] = useState<ColorScheme>(
+    getColorScheme(colorSchemeStorage?.get, systemColorScheme),
+  );
+
+  const setColorScheme = (scheme: ColorScheme) => {
+    _setColorScheme(scheme);
+    colorSchemeStorage?.set(scheme);
+  };
+
+  useEffect(() => {
+    const newScheme = getColorScheme(
+      colorSchemeStorage?.get,
+      systemColorScheme,
+    );
+    if (newScheme === _colorScheme) return;
+    setColorScheme(newScheme);
+  }, [systemColorScheme]);
+
+  return { colorScheme: _colorScheme, setColorScheme };
+}

package/src/themes/provider.tsx

@@ -1,12 +1,6 @@
-import {
-  createContext,
-  type PropsWithChildren,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { useColorScheme } from "react-native";
+import { createContext, type PropsWithChildren, useContext } from "react";
 import type { ToastVariants } from "../components/toast/variants";
+import { useColorScheme } from "../hooks/use-color-scheme";
 import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
@@ -17,6 +11,7 @@ import type {
   FontSize,
   LetterSpacing,
   Radius,
+  StorageClient,
   ThemeAssets,
 } from "./types";
 import { mergeThemeAssets } from "./utils";
@@ -33,6 +28,9 @@ interface ThemeContext {
 }
 
 export interface ComponentsConfig {
+  colorScheme?: {
+    storage?: StorageClient<ColorScheme>;
+  };
   toast?: {
     icons?: Partial<
       Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>
@@ -56,11 +54,9 @@ export interface ThemeProviderProps extends PropsWithChildren {
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, theme, components } = props;
-
-  const systemColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(
-    systemColorScheme === "dark" ? "dark" : "light",
-  );
+  const { colorScheme, setColorScheme } = useColorScheme({
+    colorSchemeStorage: components?.colorScheme?.storage,
+  });
 
   const themeAssets = theme
     ? mergeThemeAssets(defaultThemeAssets, theme)
@@ -68,12 +64,6 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 
   const colors = themeAssets.colors[colorScheme];
 
-  useEffect(() => {
-    if (systemColorScheme) {
-      setColorScheme(systemColorScheme === "dark" ? "dark" : "light");
-    }
-  }, [systemColorScheme]);
-
   return (
     <ThemeContext.Provider
       value={{

package/src/themes/types.ts

@@ -31,3 +31,8 @@ export interface ThemeAssets {
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
 }
+
+export type StorageClient<T> = {
+  set: (value: T) => void;
+  get: () => T | null;
+};