@alveole/theme 0.27.0 → 0.29.0

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,eAAO,MAAM,aAAa,GAAI,OAAO,iBAAiB,CAAC,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,4CAuB3F,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAyB,MAAM,QAAQ,CAAC;AAkB3D,eAAO,MAAM,aAAa,GAAI,OAAO,iBAAiB,CAAC,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,4CA4C3F,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}

package/dist/ThemeProvider.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as SystemUI from 'expo-system-ui';
 import React, { createContext, useContext } from 'react';
 import { Platform, StatusBar } from 'react-native';
@@ -7,22 +7,54 @@ import { useThemeBuilder } from './helpers/useThemeBuilder';
 import { ThemeProviderLoader } from './ThemeProviderLoader';
 const ThemeContext = createContext(null);
 const MIN_LOADING_DELAY = 0;
+const DEFAULT_STATUS_BAR = {
+    barStyle: 'dark-content',
+    backgroundColor: 'white',
+};
+const applyStatusBar = (options) => {
+    if (Platform.OS !== 'web') {
+        StatusBar.setBarStyle(options.barStyle);
+        if (Platform.OS === 'android')
+            StatusBar.setBackgroundColor(options.backgroundColor);
+    }
+    void SystemUI.setBackgroundColorAsync(options.backgroundColor);
+};
 export const ThemeProvider = (props) => {
     const { loader = true, ...builder } = props;
     const theme = useThemeBuilder(builder);
     const [showLoader, setShowLoader] = React.useState(true);
+    const currentStatusBarRef = React.useRef(DEFAULT_STATUS_BAR);
+    const statusBarStackRef = React.useRef([]);
+    const setStatusBar = React.useCallback((options) => {
+        const nextStatusBar = { ...currentStatusBarRef.current, ...options };
+        statusBarStackRef.current.push(currentStatusBarRef.current);
+        currentStatusBarRef.current = nextStatusBar;
+        applyStatusBar(nextStatusBar);
+    }, []);
+    const resetStatusBar = React.useCallback(() => {
+        const nextStatusBar = statusBarStackRef.current.pop() ?? DEFAULT_STATUS_BAR;
+        currentStatusBarRef.current = nextStatusBar;
+        applyStatusBar(nextStatusBar);
+    }, []);
     React.useEffect(() => {
         const timeout = setTimeout(() => setShowLoader(false), MIN_LOADING_DELAY);
         return () => clearTimeout(timeout);
     }, []);
     React.useEffect(() => {
-        void SystemUI.setBackgroundColorAsync('white');
         if (Platform.OS === 'web')
             injectVariableCSS(theme);
     }, []);
+    React.useEffect(() => {
+        applyStatusBar(DEFAULT_STATUS_BAR);
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        ...theme,
+        setStatusBar,
+        resetStatusBar,
+    }), [resetStatusBar, setStatusBar, theme]);
     if ((!theme.isReady || showLoader) && loader !== false)
         return _jsx(ThemeProviderLoader, {});
-    return (_jsxs(ThemeContext.Provider, { value: theme, children: [_jsx(StatusBar, { barStyle: "dark-content", backgroundColor: "white" }), props.children] }));
+    return _jsx(ThemeContext.Provider, { value: contextValue, children: props.children });
 };
 export const useTheme = () => {
     const ctx = useContext(ThemeContext);

package/dist/helpers/injectVariableCSS.d.ts

@@ -1,3 +1,3 @@
-import { Theme } from '../type';
-export declare const injectVariableCSS: (theme: Theme) => void;
+import type { ThemeBase } from '../type';
+export declare const injectVariableCSS: (theme: ThemeBase) => void;
 //# sourceMappingURL=injectVariableCSS.d.ts.map

package/dist/helpers/injectVariableCSS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAoBhC,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC"}
+{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoBzC,eAAO,MAAM,iBAAiB,GAAI,OAAO,SAAS,SAYjD,CAAC"}

package/dist/helpers/useThemeBuilder.d.ts

@@ -1,9 +1,9 @@
-import type { Theme } from '../type';
+import type { ThemeBase } from '../type';
 import { DeepPartial, Palette } from '../constants';
 export type CustomBuilder = {
     color?: DeepPartial<Palette>;
 };
-export declare function useThemeBuilder(params: CustomBuilder): Theme & {
+export declare function useThemeBuilder(params: CustomBuilder): ThemeBase & {
     isReady: boolean;
 };
 //# sourceMappingURL=useThemeBuilder.d.ts.map

package/dist/helpers/useThemeBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,OAAO,EAKL,WAAW,EAKX,OAAO,EAGR,MAAM,cAAc,CAAC;AAMtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,GAAG,KAAK,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAkDnF"}
+{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,OAAO,EAKL,WAAW,EAKX,OAAO,EAGR,MAAM,cAAc,CAAC;AAMtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAkDvF"}

package/dist/type/Theme.d.ts

@@ -1,9 +1,18 @@
+import type { StatusBarStyle } from 'react-native';
 import type { Colors, CustomPalette, CustomTypography, Fonts, Grilles, Spacing, SpacingKey, Variant } from '../constants';
 import { Radius, RadiusKey } from '../constants/Radius';
 import { alpha } from '../helpers/alphaColor';
 import { elevationStyle } from '../helpers/elevationStyle';
 import type { Typography } from './Typography';
-export interface Theme {
+export type ThemeStatusBarOptions = {
+    barStyle: StatusBarStyle;
+    backgroundColor: string;
+};
+export type ThemeStatusBarApi = {
+    setStatusBar: (options: Partial<ThemeStatusBarOptions>) => void;
+    resetStatusBar: () => void;
+};
+export interface ThemeBase {
     spacing: (key: SpacingKey) => Spacing;
     /** Padding externe responsive : 100 sur mobile, 150 sur desktop */
     externalPadding: () => Spacing;
@@ -21,4 +30,5 @@ export interface Theme {
         alpha: typeof alpha;
     };
 }
+export type Theme = ThemeBase & ThemeStatusBarApi;
 //# sourceMappingURL=Theme.d.ts.map

package/dist/type/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,KAAK;IAEpB,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IACtC,mEAAmE;IACnE,eAAe,EAAE,MAAM,OAAO,CAAC;IAG/B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAGzC,OAAO,EAAE,OAAO,cAAc,CAAC;IAG/B,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,MAAM,CAAC;IAGnC,OAAO,EAAE,OAAO,OAAO,CAAC;IAGxB,IAAI,EAAE,UAAU,GAAG,OAAO,gBAAgB,CAAC;IAG3C,IAAI,EAAE,OAAO,KAAK,CAAC;IAGnB,KAAK,EAAE;QACL,sCAAsC;QACtC,UAAU,EAAE,OAAO,MAAM,CAAC;KAC3B,GAAG,OAAO,aAAa,GAAG;QACvB,KAAK,EAAE,OAAO,KAAK,CAAC;KACrB,CAAC;CACL"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAChE,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,SAAS;IAExB,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IACtC,mEAAmE;IACnE,eAAe,EAAE,MAAM,OAAO,CAAC;IAG/B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAGzC,OAAO,EAAE,OAAO,cAAc,CAAC;IAG/B,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,MAAM,CAAC;IAGnC,OAAO,EAAE,OAAO,OAAO,CAAC;IAGxB,IAAI,EAAE,UAAU,GAAG,OAAO,gBAAgB,CAAC;IAG3C,IAAI,EAAE,OAAO,KAAK,CAAC;IAGnB,KAAK,EAAE;QACL,sCAAsC;QACtC,UAAU,EAAE,OAAO,MAAM,CAAC;KAC3B,GAAG,OAAO,aAAa,GAAG;QACvB,KAAK,EAAE,OAAO,KAAK,CAAC;KACrB,CAAC;CACL;AAED,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/theme",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Shared theme tokens and utilities.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",