@dbcdk/react-components 0.0.171 → 0.0.173

package/dist/components/grid/Grid.cjs

@@ -39,14 +39,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: [styles__default.default.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.d.ts

@@ -17,11 +17,11 @@ export interface GridProps {
 export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
-    /** Default span: <768px */
+    /** Default span: <768px. Supports 0.5 increments, e.g. 4.5 */
     base?: number;
-    /** Medium span: ≥768px */
+    /** Medium span: ≥768px. Supports 0.5 increments, e.g. 4.5 */
     md?: number;
-    /** Large span: ≥1200px */
+    /** Large span: ≥1200px. Supports 0.5 increments, e.g. 4.5 */
     lg?: number;
     className?: string;
     style?: CSSProperties;

package/dist/components/grid/Grid.js

@@ -33,14 +33,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: [styles.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-columns: repeat(24, minmax(0, 1fr));
   align-items: start;
   max-width: var(--max-width-base);
 }

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

@@ -42,10 +42,6 @@
   min-width: 0; /* required for truncation inside flex */
 }
 
-h2.headline {
-  min-block-size: var(--component-size-md);
-}
-
 /* CollapsibleHeadline wrapper */
 .collapsibleRoot {
   display: flex;

package/dist/components/metric-tile/MetricTile.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var client = require('../../client');
 var styles = require('./MetricTile.module.css');
 
@@ -11,23 +12,91 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function toSize(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function MetricTile({
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t.__METRIC_TILE_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const MetricTileValue = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileValue.__METRIC_TILE_SLOT__ = "Value";
+MetricTileValue.displayName = "MetricTile.Value";
+const MetricTileAdornment = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileAdornment.__METRIC_TILE_SLOT__ = "Adornment";
+MetricTileAdornment.displayName = "MetricTile.Adornment";
+const MetricTileBase = ({
   severity,
   label,
+  icon,
   value,
   tooltip,
   size = "md",
+  variant = "filled",
   minWidth,
-  maxWidth
-}) {
+  maxWidth,
+  secondaryLabel,
+  secondaryValue,
+  children
+}) => {
+  var _a, _b, _c;
   const style = minWidth != null || maxWidth != null ? {
     ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
     ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
   } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })
-  ] }) });
-}
+  const { slots } = splitSlots(children);
+  const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
+  const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
+  const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: styles__default.default.tile,
+      "data-severity": severity,
+      "data-size": size,
+      "data-variant": variant,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.labelRow, children: [
+          icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+        ] }),
+        showValueRow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.valueRow, children: [
+          resolvedValue != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: resolvedValue }) : null,
+          resolvedAdornment != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.adornment, children: resolvedAdornment }) : null
+        ] }) : null,
+        secondaryLabel != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.secondary, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryLabel, children: secondaryLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryValue, children: secondaryValue })
+        ] })
+      ]
+    }
+  ) });
+};
+const MetricTile = Object.assign(MetricTileBase, {
+  Value: MetricTileValue,
+  Adornment: MetricTileAdornment
+});
 
 exports.MetricTile = MetricTile;

package/dist/components/metric-tile/MetricTile.d.ts

@@ -1,15 +1,28 @@
-import type { ReactNode, JSX } from 'react';
+import type { FC, JSX, PropsWithChildren, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 type MetricTileSize = 'sm' | 'md' | 'lg';
+type MetricTileVariant = 'filled' | 'outlined';
 type SizeValue = number | string;
-interface MetricTileProps {
+interface MetricTileSlotProps {
+    children: ReactNode;
+}
+interface MetricTileProps extends PropsWithChildren {
     severity: Severity;
     label: string;
-    value: string | number;
+    icon?: JSX.Element;
+    value?: string | number;
     tooltip?: ReactNode;
     size?: MetricTileSize;
+    variant?: MetricTileVariant;
     minWidth?: SizeValue;
     maxWidth?: SizeValue;
+    /** Smaller secondary label shown below the main value, e.g. a second time period. */
+    secondaryLabel?: string;
+    /** Smaller secondary value shown alongside secondaryLabel. Ignored if secondaryLabel is omitted. */
+    secondaryValue?: string | number;
 }
-export declare function MetricTile({ severity, label, value, tooltip, size, minWidth, maxWidth, }: MetricTileProps): JSX.Element;
+export declare const MetricTile: FC<MetricTileProps> & {
+    Value: FC<MetricTileSlotProps>;
+    Adornment: FC<MetricTileSlotProps>;
+};
 export {};

package/dist/components/metric-tile/MetricTile.js

@@ -1,27 +1,96 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement } from 'react';
 import { Tooltip } from '../../client';
 import styles from './MetricTile.module.css';
 
 function toSize(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function MetricTile({
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t.__METRIC_TILE_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const MetricTileValue = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+MetricTileValue.__METRIC_TILE_SLOT__ = "Value";
+MetricTileValue.displayName = "MetricTile.Value";
+const MetricTileAdornment = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+MetricTileAdornment.__METRIC_TILE_SLOT__ = "Adornment";
+MetricTileAdornment.displayName = "MetricTile.Adornment";
+const MetricTileBase = ({
   severity,
   label,
+  icon,
   value,
   tooltip,
   size = "md",
+  variant = "filled",
   minWidth,
-  maxWidth
-}) {
+  maxWidth,
+  secondaryLabel,
+  secondaryValue,
+  children
+}) => {
+  var _a, _b, _c;
   const style = minWidth != null || maxWidth != null ? {
     ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
     ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
   } : void 0;
-  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: value })
-  ] }) });
-}
+  const { slots } = splitSlots(children);
+  const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
+  const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
+  const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: styles.tile,
+      "data-severity": severity,
+      "data-size": size,
+      "data-variant": variant,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.labelRow, children: [
+          icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+        ] }),
+        showValueRow ? /* @__PURE__ */ jsxs("span", { className: styles.valueRow, children: [
+          resolvedValue != null ? /* @__PURE__ */ jsx("span", { className: styles.value, children: resolvedValue }) : null,
+          resolvedAdornment != null ? /* @__PURE__ */ jsx("span", { className: styles.adornment, children: resolvedAdornment }) : null
+        ] }) : null,
+        secondaryLabel != null && /* @__PURE__ */ jsxs("span", { className: styles.secondary, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.secondaryLabel, children: secondaryLabel }),
+          /* @__PURE__ */ jsx("span", { className: styles.secondaryValue, children: secondaryValue })
+        ] })
+      ]
+    }
+  ) });
+};
+const MetricTile = Object.assign(MetricTileBase, {
+  Value: MetricTileValue,
+  Adornment: MetricTileAdornment
+});
 
 export { MetricTile };

package/dist/components/metric-tile/MetricTile.module.css

@@ -1,4 +1,7 @@
 .tile {
+  --metric-tile-bg: var(--color-bg-surface);
+  --metric-tile-fg: var(--color-fg-default);
+  --metric-tile-outline: var(--color-border-default);
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -9,6 +12,9 @@
   overflow: hidden;
   box-sizing: border-box;
   border-radius: var(--border-radius-md);
+  border: var(--border-width-thin) solid transparent;
+  background-color: var(--metric-tile-bg);
+  color: var(--metric-tile-fg);
   font-family: var(--font-family);
   cursor: default;
 }
@@ -20,6 +26,10 @@
   border-radius: var(--border-radius-sm);
 }
 
+.tile[data-size='md'] {
+  gap: 8px;
+}
+
 .tile[data-size='lg'] {
   gap: var(--spacing-2xs);
   padding: var(--spacing-md) var(--spacing-lg);
@@ -28,55 +38,86 @@
 }
 
 .tile[data-severity='success'] {
-  background-color: var(--color-status-success-bg-soft);
-  color: var(--color-status-success-fg-soft);
+  --metric-tile-bg: var(--color-status-success-bg-soft);
+  --metric-tile-fg: var(--color-status-success-fg-soft);
+  --metric-tile-outline: var(--color-status-success-fg-soft);
 }
 
 .tile[data-severity='error'] {
-  background-color: var(--color-status-error-bg-soft);
-  color: var(--color-status-error-fg-soft);
+  --metric-tile-bg: var(--color-status-error-bg-soft);
+  --metric-tile-fg: var(--color-status-error-fg-soft);
+  --metric-tile-outline: var(--color-status-error-fg-soft);
 }
 
 .tile[data-severity='warning'] {
-  background-color: var(--color-status-warning-bg-soft);
-  color: var(--color-status-warning-fg-soft);
+  --metric-tile-bg: var(--color-status-warning-bg-soft);
+  --metric-tile-fg: var(--color-status-warning-fg-soft);
+  --metric-tile-outline: var(--color-status-warning-fg-soft);
 }
 
 .tile[data-severity='info'] {
-  background-color: var(--color-status-info-bg-soft);
-  color: var(--color-status-info-fg-soft);
+  --metric-tile-bg: var(--color-status-info-bg-soft);
+  --metric-tile-fg: var(--color-status-info-fg-soft);
+  --metric-tile-outline: var(--color-status-info-fg-soft);
 }
 
 .tile[data-severity='neutral'] {
-  background-color: var(--color-bg-toolbar);
-  color: var(--color-fg-default);
+  --metric-tile-bg: var(--color-bg-toolbar);
+  --metric-tile-fg: var(--color-fg-default);
+  --metric-tile-outline: var(--color-border-default);
 }
 
 .tile[data-severity='brand'] {
-  background-color: var(--color-brand);
-  color: var(--color-fg-on-brand);
+  --metric-tile-bg: var(--color-brand);
+  --metric-tile-fg: var(--color-fg-on-brand);
+  --metric-tile-outline: var(--color-brand);
 }
 
 .tile[data-severity='accent'] {
-  background-color: var(--color-accent-bg-soft);
-  color: var(--color-accent-fg-soft);
+  --metric-tile-bg: var(--color-accent-bg-soft);
+  --metric-tile-fg: var(--color-accent-fg-soft);
+  --metric-tile-outline: var(--color-accent-fg-soft);
+}
+
+.tile[data-variant='outlined'] {
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+  border-color: var(--metric-tile-outline);
+}
+
+.labelRow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  max-width: 100%;
+  min-width: 0;
 }
 
 .label {
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold, 600);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wide);
+  font-weight: 400;
+  color: var(--color-fg-subtle);
   line-height: 1;
-  opacity: 0.85;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.icon :global(svg) {
+  width: 0.9em;
+  height: 0.9em;
+}
+
 .value {
   font-size: var(--font-size-md);
+  font-weight: 500;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   max-width: 100%;
@@ -85,15 +126,51 @@
   text-overflow: ellipsis;
 }
 
+.valueRow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xxs);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.adornment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex: 0 0 auto;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  opacity: 0.9;
+}
+
+.adornment :global(svg) {
+  width: 0.9em;
+  height: 0.9em;
+}
+
 .tile[data-size='sm'] .label {
   font-size: var(--font-size-xs);
-  letter-spacing: normal;
+}
+
+.tile[data-size='sm'] .labelRow {
+  gap: 2px;
 }
 
 .tile[data-size='sm'] .value {
   font-size: var(--font-size-xs);
 }
 
+.tile[data-size='sm'] .valueRow {
+  gap: 2px;
+}
+
+.tile[data-size='sm'] .adornment {
+  gap: 2px;
+  font-size: 10px;
+}
+
 .tile[data-size='lg'] .label {
   font-size: var(--font-size-sm);
 }
@@ -101,3 +178,29 @@
 .tile[data-size='lg'] .value {
   font-size: var(--font-size-xl);
 }
+
+.secondary {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-2xs, 4px);
+  font-size: var(--font-size-xs);
+  opacity: 0.75;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.secondaryLabel {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.secondaryValue {
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tile[data-size='sm'] .secondary {
+  font-size: 10px;
+}

package/dist/components/theme-script/ThemeScript.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var theme_constants = require('../../utils/theme.constants');
+
+function buildThemeInitScript(defaultTheme) {
+  return `(function(){try{
+  var KEY=${JSON.stringify(theme_constants.THEME_STORAGE_KEY)};
+  var VARIANTS=${JSON.stringify(theme_constants.THEME_VARIANTS)};
+  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+  function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
+  var resolved=${JSON.stringify(defaultTheme)};
+  var fromCookie=getCookie(KEY);
+  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolved;
+}catch(e){}})();`;
+}
+function ThemeScript({ defaultTheme = "system" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+}
+
+exports.ThemeScript = ThemeScript;

package/dist/components/theme-script/ThemeScript.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeVariant } from '../../utils/theme.constants';
+export interface ThemeScriptProps {
+    /** Theme applied when nothing is stored yet. Defaults to 'system'. */
+    defaultTheme?: ThemeVariant;
+}
+/**
+ * Renders a blocking inline <script> that reads the persisted theme (cookie,
+ * falling back to localStorage) and sets `data-theme` on <html> synchronously
+ * — before the page paints and before React hydrates.
+ *
+ * `useTheme()` alone cannot prevent a flash of the wrong theme on load: its
+ * resolution runs inside a `useEffect`, which by definition only fires after
+ * the first render has already been committed (and, server-side, there is no
+ * `document` to read a cookie from at all). Closing that gap requires code
+ * that runs outside React's render lifecycle — this component is that code.
+ *
+ * Place it as early as possible in <head>, e.g. in Next.js's `_document.js`:
+ *
+ * ```tsx
+ * <Head>
+ *   <ThemeScript />
+ * </Head>
+ * ```
+ */
+export declare function ThemeScript({ defaultTheme }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-script/ThemeScript.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { THEME_STORAGE_KEY, THEME_VARIANTS } from '../../utils/theme.constants';
+
+function buildThemeInitScript(defaultTheme) {
+  return `(function(){try{
+  var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
+  var VARIANTS=${JSON.stringify(THEME_VARIANTS)};
+  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+  function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
+  var resolved=${JSON.stringify(defaultTheme)};
+  var fromCookie=getCookie(KEY);
+  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolved;
+}catch(e){}})();`;
+}
+function ThemeScript({ defaultTheme = "system" }) {
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+}
+
+export { ThemeScript };

package/dist/hooks/useTheme.cjs

@@ -2,62 +2,88 @@
 'use strict';
 
 var react = require('react');
+var theme_constants = require('../utils/theme.constants');
 
-const THEME_VARIANTS = ["light", "dark", "system"];
-const STORAGE_KEY = "dbc_theme";
-function isThemeVariant(x) {
-  return !!x && THEME_VARIANTS.includes(x);
-}
 function getCookie(name) {
   const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
   return match ? decodeURIComponent(match[1]) : null;
 }
 function persistTheme(id) {
   try {
-    localStorage.setItem(STORAGE_KEY, id);
+    localStorage.setItem(theme_constants.THEME_STORAGE_KEY, id);
   } catch {
     console.error("Failed to access localStorage");
   }
   try {
-    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
+    document.cookie = `${theme_constants.THEME_STORAGE_KEY}=${encodeURIComponent(
       id
     )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
   } catch {
     console.error("Failed to set theme cookie");
   }
 }
-function getTheme() {
+function getDomTheme() {
   return document.documentElement.dataset.theme;
 }
 function applyTheme(id) {
   document.documentElement.dataset.theme = id;
 }
+let currentTheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentTheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialTheme(initialTheme) {
+  const themeFromDataAttributes = getDomTheme();
+  let resolvedTheme = theme_constants.isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+  const fromCookie = getCookie(theme_constants.THEME_STORAGE_KEY);
+  if (theme_constants.isThemeVariant(fromCookie)) {
+    resolvedTheme = fromCookie;
+  } else {
+    try {
+      const fromStorage = localStorage.getItem(theme_constants.THEME_STORAGE_KEY);
+      if (theme_constants.isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
+    } catch {
+      console.error("Failed to access localStorage");
+    }
+  }
+  return resolvedTheme;
+}
+function ensureResolved(initialTheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialTheme(initialTheme);
+  applyTheme(value);
+  persistTheme(value);
+  currentTheme = value;
+  notify();
+}
+function switchTheme(id) {
+  applyTheme(id);
+  persistTheme(id);
+  currentTheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
 function useTheme(initialTheme = "system") {
-  const [theme, setTheme] = react.useState(null);
   react.useEffect(() => {
-    const themeFromDataAttributes = getTheme();
-    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-    const fromCookie = getCookie(STORAGE_KEY);
-    if (isThemeVariant(fromCookie)) {
-      resolved = fromCookie;
-    } else {
-      try {
-        const fromStorage = localStorage.getItem(STORAGE_KEY);
-        if (isThemeVariant(fromStorage)) resolved = fromStorage;
-      } catch {
-        console.error("Failed to access localStorage");
-      }
-    }
-    applyTheme(resolved);
-    setTheme(resolved);
-    persistTheme(resolved);
+    ensureResolved(initialTheme);
   }, [initialTheme]);
-  const switchTheme = react.useCallback((id) => {
-    applyTheme(id);
-    setTheme(id);
-    persistTheme(id);
-    return id;
-  }, []);
+  const theme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return { theme, switchTheme };
 }
 

package/dist/hooks/useTheme.d.ts

@@ -1,7 +1,6 @@
-declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
-export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+import type { ThemeVariant } from '../utils/theme.constants';
+export type { ThemeVariant };
 export declare function useTheme(initialTheme?: ThemeVariant): {
     theme: ThemeVariant | null;
     switchTheme: (id: ThemeVariant) => ThemeVariant;
 };
-export {};

package/dist/hooks/useTheme.js

@@ -1,61 +1,87 @@
 'use client';
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
+import { isThemeVariant, THEME_STORAGE_KEY } from '../utils/theme.constants';
 
-const THEME_VARIANTS = ["light", "dark", "system"];
-const STORAGE_KEY = "dbc_theme";
-function isThemeVariant(x) {
-  return !!x && THEME_VARIANTS.includes(x);
-}
 function getCookie(name) {
   const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
   return match ? decodeURIComponent(match[1]) : null;
 }
 function persistTheme(id) {
   try {
-    localStorage.setItem(STORAGE_KEY, id);
+    localStorage.setItem(THEME_STORAGE_KEY, id);
   } catch {
     console.error("Failed to access localStorage");
   }
   try {
-    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
+    document.cookie = `${THEME_STORAGE_KEY}=${encodeURIComponent(
       id
     )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
   } catch {
     console.error("Failed to set theme cookie");
   }
 }
-function getTheme() {
+function getDomTheme() {
   return document.documentElement.dataset.theme;
 }
 function applyTheme(id) {
   document.documentElement.dataset.theme = id;
 }
+let currentTheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentTheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialTheme(initialTheme) {
+  const themeFromDataAttributes = getDomTheme();
+  let resolvedTheme = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+  const fromCookie = getCookie(THEME_STORAGE_KEY);
+  if (isThemeVariant(fromCookie)) {
+    resolvedTheme = fromCookie;
+  } else {
+    try {
+      const fromStorage = localStorage.getItem(THEME_STORAGE_KEY);
+      if (isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
+    } catch {
+      console.error("Failed to access localStorage");
+    }
+  }
+  return resolvedTheme;
+}
+function ensureResolved(initialTheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialTheme(initialTheme);
+  applyTheme(value);
+  persistTheme(value);
+  currentTheme = value;
+  notify();
+}
+function switchTheme(id) {
+  applyTheme(id);
+  persistTheme(id);
+  currentTheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
 function useTheme(initialTheme = "system") {
-  const [theme, setTheme] = useState(null);
   useEffect(() => {
-    const themeFromDataAttributes = getTheme();
-    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-    const fromCookie = getCookie(STORAGE_KEY);
-    if (isThemeVariant(fromCookie)) {
-      resolved = fromCookie;
-    } else {
-      try {
-        const fromStorage = localStorage.getItem(STORAGE_KEY);
-        if (isThemeVariant(fromStorage)) resolved = fromStorage;
-      } catch {
-        console.error("Failed to access localStorage");
-      }
-    }
-    applyTheme(resolved);
-    setTheme(resolved);
-    persistTheme(resolved);
+    ensureResolved(initialTheme);
   }, [initialTheme]);
-  const switchTheme = useCallback((id) => {
-    applyTheme(id);
-    setTheme(id);
-    persistTheme(id);
-    return id;
-  }, []);
+  const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return { theme, switchTheme };
 }
 

package/dist/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+var ThemeScript = require('./components/theme-script/ThemeScript');
+var theme_constants = require('./utils/theme.constants');
 var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Headline = require('./components/headline/Headline');
@@ -44,6 +46,18 @@ var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
 
 
 
+Object.keys(ThemeScript).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ThemeScript[k]; }
+	});
+});
+Object.keys(theme_constants).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return theme_constants[k]; }
+	});
+});
 Object.keys(Icon).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export * from './components/theme-script/ThemeScript';
+export * from './utils/theme.constants';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

package/dist/index.js

@@ -1,3 +1,5 @@
+export * from './components/theme-script/ThemeScript';
+export * from './utils/theme.constants';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

package/dist/utils/theme.constants.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const THEME_VARIANTS = ["light", "dark", "system"];
+const THEME_STORAGE_KEY = "dbc_theme";
+function isThemeVariant(x) {
+  return !!x && THEME_VARIANTS.includes(x);
+}
+
+exports.THEME_STORAGE_KEY = THEME_STORAGE_KEY;
+exports.THEME_VARIANTS = THEME_VARIANTS;
+exports.isThemeVariant = isThemeVariant;

package/dist/utils/theme.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+export declare const THEME_STORAGE_KEY = "dbc_theme";
+export declare function isThemeVariant(x: string | null | undefined): x is ThemeVariant;

package/dist/utils/theme.constants.js

@@ -0,0 +1,7 @@
+const THEME_VARIANTS = ["light", "dark", "system"];
+const THEME_STORAGE_KEY = "dbc_theme";
+function isThemeVariant(x) {
+  return !!x && THEME_VARIANTS.includes(x);
+}
+
+export { THEME_STORAGE_KEY, THEME_VARIANTS, isThemeVariant };

package/package.json

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