@dbcdk/react-components 0.0.172 → 0.0.174

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/nav-bar/NavBar.cjs

@@ -82,6 +82,7 @@ function NavBar({
             fullWidth: false,
             autoFocusContent: true,
             anchorRef: navRef,
+            variant: "header",
             trigger: (toggle, _icon, open) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {

package/dist/components/nav-bar/NavBar.js

@@ -76,6 +76,7 @@ function NavBar({
             fullWidth: false,
             autoFocusContent: true,
             anchorRef: navRef,
+            variant: "header",
             trigger: (toggle, _icon, open) => /* @__PURE__ */ jsx(
               "button",
               {

package/dist/components/nav-bar/NavBar.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-2xl);
   inline-size: 100%;
   box-sizing: border-box;
   flex-grow: 1;
@@ -40,7 +40,7 @@
   block-size: var(--component-size-md);
   border: none;
   background: transparent;
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
   border-radius: var(--border-radius-default);
   cursor: pointer;
   padding: 0;
@@ -48,12 +48,12 @@
 }
 
 .burgerButton:hover {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
 }
 
 .burgerButton:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
 }
 
 /* Mobile dropdown content */
@@ -170,7 +170,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  color: var(--color-fg-muted);
+  color: var(--color-navbar-fg-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   text-decoration: none;
@@ -185,17 +185,17 @@
 
 /* Hover + focus */
 .link:hover {
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
 }
 .link:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
 }
 
 /* Active underline */
 .link.active,
 .link[aria-current='page'] {
-  color: var(--color-brand);
+  color: var(--color-navbar-brand);
   box-shadow: none;
 }
 
@@ -206,7 +206,7 @@
   inset-block-end: 0;
   inline-size: 0;
   block-size: 2px;
-  background-color: var(--color-border-strong);
+  background-color: var(--color-navbar-fg);
   transition: inline-size var(--transition-fast) var(--ease-standard);
 }
 
@@ -217,7 +217,7 @@
 .link.active::after,
 .link[aria-current='page']::after {
   inline-size: 100%;
-  background-color: var(--color-brand);
+  background-color: var(--color-navbar-brand);
 }
 
 /* Icons/images inside links */

package/dist/components/page-layout/PageLayout.module.css

@@ -161,7 +161,7 @@
 /* Regions */
 .header {
   min-width: 0;
-  background: var(--color-bg-surface);
+  background: var(--color-navbar-bg);
   border-bottom: var(--border-width-thin) solid var(--color-border-default);
   flex: 0 0 auto;
 }

package/dist/components/popover/Popover.cjs

@@ -96,7 +96,8 @@ const Popover = React.forwardRef(function Popover2({
   autoFocusContent = false,
   returnFocus = true,
   anchorRef,
-  overlayRef
+  overlayRef,
+  variant = "default"
 }, ref) {
   const internalId = React.useId();
   const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
@@ -266,7 +267,8 @@ const Popover = React.forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : "dbc-muted-text";
+  const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React__namespace.useCallback(
     (node) => {
       assignRef(overlayRef, node);

package/dist/components/popover/Popover.d.ts

@@ -18,6 +18,8 @@ export interface PopoverProps {
     returnFocus?: boolean;
     anchorRef?: React.RefObject<HTMLElement | null>;
     overlayRef?: React.Ref<HTMLDivElement>;
+    /** 'header' colors the built-in chevron icon with --color-navbar-fg tokens — only meaningful inside/near AppHeader */
+    variant?: 'default' | 'header';
 }
 export interface PopoverHandle {
     close: () => void;

package/dist/components/popover/Popover.js

@@ -72,7 +72,8 @@ const Popover = forwardRef(function Popover2({
   autoFocusContent = false,
   returnFocus = true,
   anchorRef,
-  overlayRef
+  overlayRef,
+  variant = "default"
 }, ref) {
   const internalId = useId();
   const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
@@ -242,7 +243,8 @@ const Popover = forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const chevronClassName = variant === "header" ? styles.chevronHeader : "dbc-muted-text";
+  const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React.useCallback(
     (node) => {
       assignRef(overlayRef, node);

package/dist/components/popover/Popover.module.css

@@ -40,6 +40,7 @@
   position: fixed;
   border: 1px solid var(--color-border-subtle);
   background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
@@ -50,3 +51,7 @@
 .content[hidden] {
   display: none;
 }
+
+.chevronHeader {
+  color: var(--color-navbar-fg-muted);
+}

package/dist/components/theme-button/ThemeButton.cjs

@@ -7,36 +7,43 @@ var Button = require('../../components/button/Button');
 var Menu = require('../../components/menu/Menu');
 var Popover = require('../../components/popover/Popover');
 var useTheme = require('../../hooks/useTheme');
+var types = require('../../styles/themes/types');
 
-const THEME_OPTIONS = [
-  { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { size: 16 }) },
-  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 16 }) },
-  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { size: 16 }) }
-];
-function ThemeMenuSection() {
-  const { theme, switchTheme } = useTheme.useTheme();
+function ThemeMenuSection({ themes, hrefs }) {
+  const { theme, switchTheme } = useTheme.useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
-    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Tema" }),
+    themes.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
       Menu.Menu.RadioItem,
       {
         name: "theme",
-        value: option.value,
-        checked: theme === option.value,
-        label: option.label,
-        onValueChange: (value) => switchTheme(value)
+        value: id,
+        checked: theme === id,
+        label: types.THEME_LABELS[id],
+        onValueChange: () => switchTheme(id)
       },
-      option.value
+      id
     ))
   ] });
 }
-function ThemeButton({ size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme.useTheme();
+function ThemeButton({
+  themes,
+  hrefs,
+  size,
+  variant = "outlined"
+}) {
+  const { theme, switchTheme } = useTheme.useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
       matchTriggerWidth: false,
-      minWidth: "140px",
+      minWidth: "160px",
       trigger: (handleClick, chevron) => /* @__PURE__ */ jsxRuntime.jsxs(
         Button.Button,
         {
@@ -52,20 +59,20 @@ function ThemeButton({ size, variant = "outlined" }) {
         }
       ),
       children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
-        THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: theme === option.value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Tema" }),
+        themes.map((id) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: theme === id, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: () => {
-              switchTheme(option.value);
+              switchTheme(id);
               close();
             },
             children: [
-              option.icon,
-              option.label
+              types.THEME_LABELS[id],
+              theme === id && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 })
             ]
           }
-        ) }, option.value))
+        ) }, id))
       ] })
     }
   );

package/dist/components/theme-button/ThemeButton.d.ts

@@ -1,8 +1,14 @@
 import type { JSX } from 'react';
 import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
-export interface ThemeButtonProps {
+import type { ThemeHrefs, ThemeId } from '../../hooks/useTheme';
+export interface ThemeMenuSectionProps {
+    /** Every theme to offer as an option. The first entry is treated as the default. */
+    themes: readonly ThemeId[];
+    hrefs?: ThemeHrefs;
+}
+export interface ThemeButtonProps extends ThemeMenuSectionProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
-export declare function ThemeMenuSection(): JSX.Element;
-export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;
+export declare function ThemeMenuSection({ themes, hrefs }: ThemeMenuSectionProps): JSX.Element;
+export declare function ThemeButton({ themes, hrefs, size, variant, }: ThemeButtonProps): JSX.Element;