@dbcdk/react-components 0.0.178 → 0.0.179

package/README.md

@@ -72,7 +72,7 @@ export default function RootLayout({ children }: Readonly<{ children: ReactNode
 
 ### 4) Switching theme in your application
 
-Example using `useTheme()`:
+Example using `useTheme()` when you want to control the theme:
 
 ```tsx
 'use client'
@@ -99,6 +99,25 @@ export default function Header() {
 The hook updates `data-product-theme`, applies the selected product theme's
 token overrides, and persists the selection.
 
+If you only need to read the active theme state, use `useGetActiveTheme()`
+instead of `useTheme()`:
+
+```tsx
+'use client'
+
+import { useGetActiveTheme } from '@dbcdk/react-components/client'
+
+export function ThemeBadge() {
+  const { theme, colorScheme } = useGetActiveTheme()
+
+  return <span>{theme} / {colorScheme}</span>
+}
+```
+
+`useGetActiveTheme()` is intentionally read-only and takes no options. It
+reports the current active theme state as established by `ThemeScript`,
+persisted storage, or another mounted theme control.
+
 ---
 
 ## Using Storybook

package/dist/client.cjs

@@ -19,6 +19,7 @@ var Footer = require('./components/page-layout/components/footer/Footer');
 var Input = require('./components/forms/input/Input');
 var SearchBox = require('./components/search-box/SearchBox');
 var useColorScheme = require('./hooks/useColorScheme');
+var useGetActiveTheme = require('./hooks/useGetActiveTheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
 var Chip = require('./components/chip/Chip');
@@ -203,6 +204,12 @@ Object.keys(useColorScheme).forEach(function (k) {
 		get: function () { return useColorScheme[k]; }
 	});
 });
+Object.keys(useGetActiveTheme).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useGetActiveTheme[k]; }
+	});
+});
 Object.keys(useTheme).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -16,6 +16,7 @@ export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useColorScheme';
+export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';

package/dist/client.js

@@ -17,6 +17,7 @@ export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useColorScheme';
+export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';

package/dist/hooks/useGetActiveTheme.cjs

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var useColorScheme = require('../hooks/useColorScheme');
+var useTheme = require('./useTheme');
+
+function useGetActiveTheme() {
+  const { theme } = useTheme.useTheme();
+  const { colorScheme } = useColorScheme.useColorScheme();
+  return { theme, colorScheme };
+}
+
+exports.useGetActiveTheme = useGetActiveTheme;

package/dist/hooks/useGetActiveTheme.d.ts

@@ -0,0 +1,8 @@
+import type { ColorScheme } from '../utils/color-scheme.constants';
+import type { ThemeId } from './useTheme';
+export type { ColorScheme, ThemeId };
+export interface UseGetActiveThemeResult {
+    theme: ThemeId | null;
+    colorScheme: ColorScheme | null;
+}
+export declare function useGetActiveTheme(): UseGetActiveThemeResult;

package/dist/hooks/useGetActiveTheme.js

@@ -0,0 +1,11 @@
+'use client';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { useTheme } from './useTheme';
+
+function useGetActiveTheme() {
+  const { theme } = useTheme();
+  const { colorScheme } = useColorScheme();
+  return { theme, colorScheme };
+}
+
+export { useGetActiveTheme };

package/dist/hooks/useTheme.cjs

@@ -47,15 +47,17 @@ function resolveInitialTheme(storageKey, defaultTheme) {
   if (fromCookie) return fromCookie;
   const fromStorage = localStorage_utils.readLocalStorage(storageKey);
   if (fromStorage) return fromStorage;
-  return defaultTheme;
+  return defaultTheme != null ? defaultTheme : null;
 }
 function ensureResolved(defaultTheme, storageKey) {
   if (resolved) return;
   resolved = true;
   const value = resolveInitialTheme(storageKey, defaultTheme);
-  applyTheme(value);
-  persistTheme(storageKey, value);
   currentTheme = value;
+  if (value) {
+    applyTheme(value);
+    persistTheme(storageKey, value);
+  }
   notify();
 }
 function ensureColorSchemeObserver() {
@@ -77,7 +79,7 @@ function switchThemeInternal(storageKey, id) {
   resolved = true;
   notify();
 }
-function useTheme(options) {
+function useTheme(options = {}) {
   const { defaultTheme, storageKey = theme_constants.THEME_STORAGE_KEY } = options;
   react.useEffect(() => {
     ensureColorSchemeObserver();

package/dist/hooks/useTheme.d.ts

@@ -2,10 +2,10 @@ import type { ThemeId } from '../styles/themes/types';
 export type { ThemeId };
 export interface UseThemeOptions {
     /** The theme the app should fall back to when nothing is stored yet. */
-    defaultTheme: ThemeId;
+    defaultTheme?: ThemeId;
     storageKey?: string;
 }
-export declare function useTheme(options: UseThemeOptions): {
+export declare function useTheme(options?: UseThemeOptions): {
     theme: ThemeId | null;
     switchTheme: (id: ThemeId) => void;
 };

package/dist/hooks/useTheme.js

@@ -45,15 +45,17 @@ function resolveInitialTheme(storageKey, defaultTheme) {
   if (fromCookie) return fromCookie;
   const fromStorage = readLocalStorage(storageKey);
   if (fromStorage) return fromStorage;
-  return defaultTheme;
+  return defaultTheme != null ? defaultTheme : null;
 }
 function ensureResolved(defaultTheme, storageKey) {
   if (resolved) return;
   resolved = true;
   const value = resolveInitialTheme(storageKey, defaultTheme);
-  applyTheme(value);
-  persistTheme(storageKey, value);
   currentTheme = value;
+  if (value) {
+    applyTheme(value);
+    persistTheme(storageKey, value);
+  }
   notify();
 }
 function ensureColorSchemeObserver() {
@@ -75,7 +77,7 @@ function switchThemeInternal(storageKey, id) {
   resolved = true;
   notify();
 }
-function useTheme(options) {
+function useTheme(options = {}) {
   const { defaultTheme, storageKey = THEME_STORAGE_KEY } = options;
   useEffect(() => {
     ensureColorSchemeObserver();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.178",
+  "version": "0.0.179",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",