@dbcdk/react-components 0.0.177 → 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/components/copy-button/CopyButton.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var styles = require('./CopyButton.module.css');
+var clipboard_utils = require('../../utils/clipboard.utils');
 var Button = require('../button/Button');
 var Input = require('../forms/input/Input');
 var Hyperlink = require('../hyperlink/Hyperlink');
@@ -48,30 +49,9 @@ function CopyButton(props) {
     }
   };
   const handleCopy = async () => {
-    try {
-      if (!window.isSecureContext || !navigator.clipboard) {
-        throw new Error("Clipboard API unavailable");
-      }
-      await navigator.clipboard.writeText(text);
+    const success = await clipboard_utils.copyToClipboard(text);
+    if (success) {
       handleCopySuccess();
-    } catch (err) {
-      console.error("Failed to copy:", err);
-      try {
-        const textarea = document.createElement("textarea");
-        textarea.value = text;
-        textarea.setAttribute("readonly", "");
-        textarea.style.position = "fixed";
-        textarea.style.left = "-9999px";
-        document.body.appendChild(textarea);
-        textarea.select();
-        const success = document.execCommand("copy");
-        document.body.removeChild(textarea);
-        if (success) {
-          handleCopySuccess();
-        }
-      } catch (fallbackErr) {
-        console.error("Fallback copy failed:", fallbackErr);
-      }
     }
   };
   if (displayStyle === "link") {

package/dist/components/copy-button/CopyButton.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
+import { copyToClipboard } from '../../utils/clipboard.utils';
 import { Button } from '../button/Button';
 import { Input } from '../forms/input/Input';
 import { Hyperlink } from '../hyperlink/Hyperlink';
@@ -42,30 +43,9 @@ function CopyButton(props) {
     }
   };
   const handleCopy = async () => {
-    try {
-      if (!window.isSecureContext || !navigator.clipboard) {
-        throw new Error("Clipboard API unavailable");
-      }
-      await navigator.clipboard.writeText(text);
+    const success = await copyToClipboard(text);
+    if (success) {
       handleCopySuccess();
-    } catch (err) {
-      console.error("Failed to copy:", err);
-      try {
-        const textarea = document.createElement("textarea");
-        textarea.value = text;
-        textarea.setAttribute("readonly", "");
-        textarea.style.position = "fixed";
-        textarea.style.left = "-9999px";
-        document.body.appendChild(textarea);
-        textarea.select();
-        const success = document.execCommand("copy");
-        document.body.removeChild(textarea);
-        if (success) {
-          handleCopySuccess();
-        }
-      } catch (fallbackErr) {
-        console.error("Fallback copy failed:", fallbackErr);
-      }
     }
   };
   if (displayStyle === "link") {

package/dist/components/headline/Headline.cjs

@@ -22,10 +22,15 @@ function Headline({
   tone,
   variant,
   allowWrap = true,
+  grow = true,
   id
 }) {
   const Tag = `h${size}`;
-  const containerClassName = [styles__default.default.headlineContainer, tone ? styles__default.default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const containerClassName = [
+    styles__default.default.headlineContainer,
+    tone ? styles__default.default[`tone-${tone}`] : "",
+    grow ? "" : styles__default.default.noGrow
+  ].filter(Boolean).join(" ");
   const headlineClassName = [
     styles__default.default.headline,
     disableMargin ? styles__default.default.noMargin : "",

package/dist/components/headline/Headline.d.ts

@@ -15,6 +15,7 @@ export interface HeadlineProps extends React.AriaAttributes {
     allowWrap?: boolean;
     tone?: HeadlineTone;
     variant?: HeadlineVariant;
+    grow?: boolean;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, id, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, grow, id, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/headline/Headline.js

@@ -16,10 +16,15 @@ function Headline({
   tone,
   variant,
   allowWrap = true,
+  grow = true,
   id
 }) {
   const Tag = `h${size}`;
-  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const containerClassName = [
+    styles.headlineContainer,
+    tone ? styles[`tone-${tone}`] : "",
+    grow ? "" : styles.noGrow
+  ].filter(Boolean).join(" ");
   const headlineClassName = [
     styles.headline,
     disableMargin ? styles.noMargin : "",

package/dist/components/headline/Headline.module.css

@@ -7,6 +7,10 @@
   min-width: 0;
 }
 
+.noGrow {
+  flex: 0 1 auto;
+}
+
 .headlineBlock {
   display: flex;
   flex-direction: column;

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/dist/index.cjs

@@ -23,6 +23,7 @@ var severity_types = require('./constants/severity.types');
 var AppHeader = require('./components/app-header/AppHeader');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var formatDate = require('./utils/date/formatDate');
+var clipboard_utils = require('./utils/clipboard.utils');
 var AttributeChip = require('./components/attribute-chip/AttributeChip');
 var MetaBar = require('./components/meta-bar/MetaBar');
 var FadeOverlay = require('./components/overlay/fade-overlay/FadeOverlay');
@@ -186,6 +187,12 @@ Object.keys(formatDate).forEach(function (k) {
 		get: function () { return formatDate[k]; }
 	});
 });
+Object.keys(clipboard_utils).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return clipboard_utils[k]; }
+	});
+});
 Object.keys(AttributeChip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
 export * from './components/overlay/fade-overlay/FadeOverlay';

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
 export * from './components/overlay/fade-overlay/FadeOverlay';

package/dist/styles/styles.css

@@ -252,6 +252,10 @@ tr.dbc-table--hover:hover td:last-child {
   font-weight: var(--font-weight-bold);
 }
 
+.dbc-center-text {
+  text-align: center;
+}
+
 /* ==========================================================================
    Layout utilities
    ========================================================================== */

package/dist/styles.css

@@ -252,6 +252,10 @@ tr.dbc-table--hover:hover td:last-child {
   font-weight: var(--font-weight-bold);
 }
 
+.dbc-center-text {
+  text-align: center;
+}
+
 /* ==========================================================================
    Layout utilities
    ========================================================================== */

package/dist/utils/clipboard.utils.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+async function copyToClipboard(text) {
+  if (!isBrowser()) return false;
+  try {
+    if (!window.isSecureContext || !navigator.clipboard) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return success;
+    } catch {
+      return false;
+    }
+  }
+}
+
+exports.copyToClipboard = copyToClipboard;

package/dist/utils/clipboard.utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copy text to the clipboard.
+ * - Uses the async Clipboard API when available (requires a secure context)
+ * - Falls back to `document.execCommand('copy')` otherwise, so copying still
+ *   works over plain HTTP (e.g. internal test environments)
+ * - Never throws; resolves to whether the copy succeeded
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/dist/utils/clipboard.utils.js

@@ -0,0 +1,30 @@
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+async function copyToClipboard(text) {
+  if (!isBrowser()) return false;
+  try {
+    if (!window.isSecureContext || !navigator.clipboard) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return success;
+    } catch {
+      return false;
+    }
+  }
+}
+
+export { copyToClipboard };

package/package.json

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