@codebit-programando-solucoes/codebit-web-antd 1.1.32 → 1.1.33

package/dist/components/CssTokenBridge.d.ts

@@ -139,4 +139,10 @@ import { FC } from 'react';
  *     }
  *     ```;
  */
-export const CssTokenBridge: FC;
+export interface CssTokenBridgeProps {
+    /** Optional ID of the container element to receive the CSS variables. */
+    containerId?: string;
+}
+
+/** CssTokenBridge component definition. */
+export const CssTokenBridge: FC<CssTokenBridgeProps>;

package/dist/contexts/CodebitThemeContext.d.ts

@@ -23,4 +23,8 @@ type CodebitThemeProviderProps = {
     children: React.ReactNode;
     /** Whether to persist theme preference in localStorage (default: `true`) */
     storeThemeInLocalStorage?: boolean;
+    /** ID of the root container element where theme classes are applied (default: `'root'`) */
+    containerId?: string;
+    /** Optional explicit theme override. When set, the provider uses this value instead of internal detection. */
+    forcedTheme?: 'dark' | 'light' | null;
 } & ConfigProviderProps;

package/dist/index.cjs

@@ -797,10 +797,10 @@ var __webpack_exports__ = {};
         tableContainer: null,
         actions: null
     };
-    const CssTokenBridge = ()=>{
+    const CssTokenBridge = ({ containerId })=>{
         const { token } = external_antd_namespaceObject.theme.useToken();
         (0, external_react_.useLayoutEffect)(()=>{
-            const root = document.documentElement;
+            const root = containerId ? document.getElementById(containerId) ?? document.documentElement : document.documentElement;
             root.style.setProperty('--antd-color-bg-base', token['colorBgBase']);
             root.style.setProperty('--antd-color-bg-container', token['colorBgContainer']);
             root.style.setProperty('--antd-color-bg-elevated', token['colorBgElevated']);
@@ -888,10 +888,14 @@ var __webpack_exports__ = {};
             root.style.setProperty('--antd-border-radius', `${token['borderRadius']}px`);
             root.style.setProperty('--antd-border-radius-lg', `${token['borderRadiusLG']}px`);
         }, [
+            containerId,
             token
         ]);
         return null;
     };
+    CssTokenBridge.propTypes = {
+        containerId: external_prop_types_default().string
+    };
     const TableContainer_module = {
         tableContainer: "tableContainer-EhNwOm"
     };
@@ -980,9 +984,10 @@ var __webpack_exports__ = {};
         ...external_antd_namespaceObject.Card.propTypes
     };
     const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, ...props })=>{
+    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
         const hasLoaded = (0, external_react_.useRef)(false);
         const [isDarkMode, setIsDarkMode] = (0, external_react_.useState)(()=>{
+            if (forcedTheme) return 'dark' === forcedTheme;
             try {
                 if (storeThemeInLocalStorage) {
                     const savedTheme = localStorage?.getItem('theme');
@@ -993,27 +998,39 @@ var __webpack_exports__ = {};
                 hasLoaded.current = true;
             }
         });
+        (0, external_react_.useEffect)(()=>{
+            if (forcedTheme) {
+                const mode = 'dark' === forcedTheme;
+                setIsDarkMode(mode);
+            }
+        }, [
+            forcedTheme
+        ]);
         const toggleTheme = ()=>{
             setIsDarkMode((prev)=>!prev);
         };
         (0, external_react_.useEffect)(()=>{
-            const rootElement = document.getElementById('root');
+            const target = document.getElementById(containerId);
+            if (!target) return;
             if (isDarkMode) {
                 document.documentElement.classList.add('dark-theme');
-                rootElement.classList.add('dark-theme');
+                target.classList.add('dark-theme');
             } else {
                 document.documentElement.classList.remove('dark-theme');
-                rootElement.classList.remove('dark-theme');
+                target.classList.remove('dark-theme');
             }
             document.documentElement.style.setProperty('--color-primary', isDarkMode ? '#589C75' : '#29D266');
         }, [
-            isDarkMode
+            isDarkMode,
+            containerId
         ]);
         (0, external_react_.useEffect)(()=>{
             if (hasLoaded.current && storeThemeInLocalStorage) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            if (hasLoaded.current && storeThemeInLocalStorage && !forcedTheme) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
         }, [
             isDarkMode,
-            storeThemeInLocalStorage
+            storeThemeInLocalStorage,
+            forcedTheme
         ]);
         const themeContextValue = (0, external_react_.useMemo)(()=>({
                 isDarkMode,
@@ -1056,7 +1073,9 @@ var __webpack_exports__ = {};
                 },
                 ...props,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {}),
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {
+                        containerId: containerId
+                    }),
                     children
                 ]
             })
@@ -1064,7 +1083,13 @@ var __webpack_exports__ = {};
     };
     CodebitThemeProvider.propTypes = {
         children: external_prop_types_default().node.isRequired,
-        storeThemeInLocalStorage: external_prop_types_default().bool
+        storeThemeInLocalStorage: external_prop_types_default().bool,
+        containerId: external_prop_types_default().string,
+        forcedTheme: external_prop_types_default().oneOf([
+            'dark',
+            'light',
+            null
+        ])
     };
     const LoggedMainContainer_module = {
         layout: "layout-mL5o6I",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",