@dbcdk/react-components 0.0.182 → 0.0.184

package/dist/components/xml-viewer/XmlViewer.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import { tokenizeXml } from './tokenizeXml';
+import styles from './XmlViewer.module.css';
+import { Button } from '../button/Button';
+
+const TOKEN_CLASS = {
+  tagName: styles.tagName,
+  attrName: styles.attrName,
+  attrValue: styles.attrValue,
+  comment: styles.comment,
+  cdata: styles.cdata,
+  declaration: styles.declaration,
+  doctype: styles.doctype,
+  punctuation: styles.punctuation,
+  text: void 0
+};
+function XmlViewer({
+  xml,
+  size = "md",
+  appearance = "dark",
+  storageKey,
+  borderless = false
+}) {
+  const tokens = useMemo(() => tokenizeXml(xml), [xml]);
+  const codeRef = useRef(null);
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState({
+    initialValue: "highlighted",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "highlighted" || stored === "raw"
+  });
+  const { value: wrap, setValue: setWrap } = usePersistentState({
+    initialValue: true,
+    storageKey: storageKey ? `${storageKey}:wrap` : void 0,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const handleCopy = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
+    });
+  };
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: [styles.viewer, borderless ? styles.borderless : ""].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: /* @__PURE__ */ jsx(
+              Popover,
+              {
+                matchTriggerWidth: false,
+                minWidth: "200px",
+                trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "inline",
+                    "aria-label": "Flere handlinger",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen ? true : false,
+                    onClick: toggle,
+                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                  }
+                ),
+                children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setWrap((value) => !value);
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(TextWrap, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: wrap ? "Ombryd ikke tekst" : "Ombryd tekst" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode((mode) => mode === "raw" ? "highlighted" : "raw");
+                        close();
+                      },
+                      children: [
+                        viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Code2, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis med farver" : "Vis raw" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentAppearance((value) => value === "dark" ? "light" : "dark");
+                        close();
+                      },
+                      children: [
+                        currentAppearance === "dark" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleCopy();
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r XML" })
+                      ]
+                    }
+                  ) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: [styles.codePane, styles[size], wrap ? styles.wrap : styles.noWrap].join(" "),
+            tabIndex: 0,
+            onDoubleClick: handleDoubleClick,
+            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+              const tokenClassName = TOKEN_CLASS[token.type];
+              return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { XmlViewer };

package/dist/components/xml-viewer/XmlViewer.module.css

@@ -0,0 +1,109 @@
+.viewer {
+  --xml-pane-bg: var(--color-bg-inverse);
+  --xml-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
+  --xml-pane-text: var(--color-fg-inverse);
+
+  --xml-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
+  --xml-attr-name: color-mix(in oklab, var(--color-fg-inverse) 50%, var(--color-syntax-accent) 50%);
+  --xml-attr-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
+  --xml-comment: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+  --xml-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
+
+  position: relative;
+  background: var(--xml-pane-bg);
+  border: var(--border-width-thin) solid var(--xml-pane-border);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-mono);
+}
+
+.viewer[data-appearance='light'] {
+  --xml-pane-bg: var(--color-bg-surface);
+  --xml-pane-border: var(--color-border-subtle);
+  --xml-pane-text: var(--color-fg-default);
+
+  --xml-tag: var(--color-link);
+  --xml-attr-name: color-mix(in oklab, var(--color-fg-default) 55%, var(--color-link) 45%);
+  --xml-attr-value: var(--color-status-success-fg);
+  --xml-comment: var(--color-fg-muted);
+  --xml-punctuation: var(--color-fg-subtle);
+
+  box-shadow: var(--shadow-xs);
+}
+
+.viewer.borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.toolbar {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 1;
+}
+
+.codePane {
+  margin: 0;
+  padding: var(--spacing-sm);
+  overflow: auto;
+  color: var(--xml-pane-text);
+  font-family: inherit;
+  line-height: 1.35;
+}
+
+.wrap {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.noWrap {
+  white-space: pre;
+}
+
+.xs,
+.sm {
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  font-size: var(--font-size-base);
+}
+
+.tagName {
+  color: var(--xml-tag);
+  font-weight: var(--font-weight-medium);
+}
+
+.attrName {
+  color: var(--xml-attr-name);
+}
+
+.attrValue {
+  color: var(--xml-attr-value);
+}
+
+.comment {
+  color: var(--xml-comment);
+  font-style: italic;
+}
+
+.cdata {
+  color: var(--xml-attr-value);
+  opacity: 0.85;
+}
+
+.declaration,
+.doctype {
+  color: var(--xml-comment);
+  font-style: italic;
+}
+
+.punctuation {
+  color: var(--xml-punctuation);
+}

package/dist/components/xml-viewer/tokenizeXml.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const CHUNK_PATTERN = /(<!--[\s\S]*?-->)|(<!\[CDATA\[[\s\S]*?\]\]>)|(<!DOCTYPE[\s\S]*?>)|(<\?[\s\S]*?\?>)|(<\/?[a-zA-Z_:][\s\S]*?>)|([^<]+)/g;
+const ATTR_PATTERN = /([^\s=/>]+)(\s*=\s*)("[^"]*"|'[^']*')/g;
+function tokenizeTag(raw) {
+  var _a;
+  const isClosing = raw.startsWith("</");
+  const isSelfClosing = raw.endsWith("/>");
+  const openLength = isClosing ? 2 : 1;
+  const closeLength = isSelfClosing ? 2 : 1;
+  const inner = raw.slice(openLength, raw.length - closeLength);
+  const tokens = [{ type: "punctuation", value: raw.slice(0, openLength) }];
+  const nameMatch = /^[^\s/>]+/.exec(inner);
+  const name = (_a = nameMatch == null ? void 0 : nameMatch[0]) != null ? _a : "";
+  if (name) tokens.push({ type: "tagName", value: name });
+  let lastIndex = name.length;
+  ATTR_PATTERN.lastIndex = lastIndex;
+  let match;
+  while (match = ATTR_PATTERN.exec(inner)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "punctuation", value: inner.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "attrName", value: match[1] });
+    tokens.push({ type: "punctuation", value: match[2] });
+    tokens.push({ type: "attrValue", value: match[3] });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < inner.length) {
+    tokens.push({ type: "punctuation", value: inner.slice(lastIndex) });
+  }
+  tokens.push({ type: "punctuation", value: raw.slice(raw.length - closeLength) });
+  return tokens;
+}
+function tokenizeXml(source) {
+  const tokens = [];
+  CHUNK_PATTERN.lastIndex = 0;
+  let match;
+  while (match = CHUNK_PATTERN.exec(source)) {
+    const [, comment, cdata, doctype, declaration, tag, text] = match;
+    if (comment) tokens.push({ type: "comment", value: comment });
+    else if (cdata) tokens.push({ type: "cdata", value: cdata });
+    else if (doctype) tokens.push({ type: "doctype", value: doctype });
+    else if (declaration) tokens.push({ type: "declaration", value: declaration });
+    else if (tag) tokens.push(...tokenizeTag(tag));
+    else if (text) tokens.push({ type: "text", value: text });
+  }
+  return tokens;
+}
+
+exports.tokenizeXml = tokenizeXml;

package/dist/components/xml-viewer/tokenizeXml.d.ts

@@ -0,0 +1,12 @@
+export type XmlTokenType = 'tagName' | 'attrName' | 'attrValue' | 'text' | 'comment' | 'cdata' | 'declaration' | 'doctype' | 'punctuation';
+export interface XmlToken {
+    type: XmlTokenType;
+    value: string;
+}
+/**
+ * Tokenizes an XML string for syntax highlighting without parsing it into a
+ * DOM. Preserves the source exactly - concatenating every token's `value`
+ * reproduces the input - so malformed or partial XML still highlights
+ * whatever it recognizes instead of failing outright.
+ */
+export declare function tokenizeXml(source: string): XmlToken[];

package/dist/components/xml-viewer/tokenizeXml.js

@@ -0,0 +1,48 @@
+const CHUNK_PATTERN = /(<!--[\s\S]*?-->)|(<!\[CDATA\[[\s\S]*?\]\]>)|(<!DOCTYPE[\s\S]*?>)|(<\?[\s\S]*?\?>)|(<\/?[a-zA-Z_:][\s\S]*?>)|([^<]+)/g;
+const ATTR_PATTERN = /([^\s=/>]+)(\s*=\s*)("[^"]*"|'[^']*')/g;
+function tokenizeTag(raw) {
+  var _a;
+  const isClosing = raw.startsWith("</");
+  const isSelfClosing = raw.endsWith("/>");
+  const openLength = isClosing ? 2 : 1;
+  const closeLength = isSelfClosing ? 2 : 1;
+  const inner = raw.slice(openLength, raw.length - closeLength);
+  const tokens = [{ type: "punctuation", value: raw.slice(0, openLength) }];
+  const nameMatch = /^[^\s/>]+/.exec(inner);
+  const name = (_a = nameMatch == null ? void 0 : nameMatch[0]) != null ? _a : "";
+  if (name) tokens.push({ type: "tagName", value: name });
+  let lastIndex = name.length;
+  ATTR_PATTERN.lastIndex = lastIndex;
+  let match;
+  while (match = ATTR_PATTERN.exec(inner)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "punctuation", value: inner.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "attrName", value: match[1] });
+    tokens.push({ type: "punctuation", value: match[2] });
+    tokens.push({ type: "attrValue", value: match[3] });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < inner.length) {
+    tokens.push({ type: "punctuation", value: inner.slice(lastIndex) });
+  }
+  tokens.push({ type: "punctuation", value: raw.slice(raw.length - closeLength) });
+  return tokens;
+}
+function tokenizeXml(source) {
+  const tokens = [];
+  CHUNK_PATTERN.lastIndex = 0;
+  let match;
+  while (match = CHUNK_PATTERN.exec(source)) {
+    const [, comment, cdata, doctype, declaration, tag, text] = match;
+    if (comment) tokens.push({ type: "comment", value: comment });
+    else if (cdata) tokens.push({ type: "cdata", value: cdata });
+    else if (doctype) tokens.push({ type: "doctype", value: doctype });
+    else if (declaration) tokens.push({ type: "declaration", value: declaration });
+    else if (tag) tokens.push(...tokenizeTag(tag));
+    else if (text) tokens.push({ type: "text", value: text });
+  }
+  return tokens;
+}
+
+export { tokenizeXml };

package/dist/index.cjs

@@ -43,6 +43,7 @@ var MediaCard = require('./components/media-card/MediaCard');
 var HighlightedText = require('./components/highlighted-text/HighlightedText');
 var ButtonSelect = require('./components/button-select/ButtonSelect');
 var Sidebar = require('./components/sidebar/Sidebar');
+var TreeView = require('./components/tree-view/TreeView');
 var SplitButton = require('./components/split-button/SplitButton');
 var ChipMultiToggle = require('./components/filtering/chip-multi-toggle/ChipMultiToggle');
 var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
@@ -307,6 +308,12 @@ Object.keys(Sidebar).forEach(function (k) {
 		get: function () { return Sidebar[k]; }
 	});
 });
+Object.keys(TreeView).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TreeView[k]; }
+	});
+});
 Object.keys(SplitButton).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -39,6 +39,7 @@
 @import './components/inline-status/InlineStatus.module.css';
 @import './components/json-viewer/JsonViewer.module.css';
 @import './components/lightbox/Lightbox.module.css';
+@import './components/line-viewer/LineViewer.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
@@ -72,4 +73,6 @@
 @import './components/table/components/empty-state/EmptyState.module.css';
 @import './components/tabs/Tabs.module.css';
 @import './components/toast/Toast.module.css';
+@import './components/tree-view/TreeView.module.css';
 @import './components/user-display/UserDisplay.module.css';
+@import './components/xml-viewer/XmlViewer.module.css';

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
 export * from './components/button-select/ButtonSelect';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
 export * from './components/button-select/ButtonSelect';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/utils/date/formatDate.cjs

@@ -9,41 +9,53 @@ function formatDate(date, options = {}) {
     userFriendlyLabel = false,
     timeOnly = false,
     ignoreDate = false,
-    ignoreDateIfSame = false
+    ignoreDateIfSame = false,
+    ignoreTimezone = false
   } = options;
   const useTimeOnly = timeOnly || ignoreDate;
   const pad = (n) => n.toString().padStart(2, "0");
-  const formatTime = () => {
-    const hours = pad(d.getHours());
-    const minutes = pad(d.getMinutes());
+  const parts = (dt, useUTC) => ({
+    date: useUTC ? dt.getUTCDate() : dt.getDate(),
+    month: useUTC ? dt.getUTCMonth() : dt.getMonth(),
+    year: useUTC ? dt.getUTCFullYear() : dt.getFullYear(),
+    hours: useUTC ? dt.getUTCHours() : dt.getHours(),
+    minutes: useUTC ? dt.getUTCMinutes() : dt.getMinutes(),
+    seconds: useUTC ? dt.getUTCSeconds() : dt.getSeconds()
+  });
+  const dParts = parts(d, ignoreTimezone);
+  const formatTime = (p) => {
+    const hours = pad(p.hours);
+    const minutes = pad(p.minutes);
     if (!showSeconds) return `${hours}:${minutes}`;
-    const seconds = pad(d.getSeconds());
+    const seconds = pad(p.seconds);
     return `${hours}:${minutes}:${seconds}`;
   };
-  const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+  const isSameCalendarDay = (a, b) => a.date === b.date && a.month === b.month && a.year === b.year;
   if (useTimeOnly) {
-    return formatTime();
+    return formatTime(dParts);
   }
-  if (ignoreDateIfSame && isSameCalendarDay(d, /* @__PURE__ */ new Date())) {
-    return formatTime();
+  const nowParts = parts(/* @__PURE__ */ new Date(), false);
+  if (ignoreDateIfSame && isSameCalendarDay(dParts, nowParts)) {
+    return formatTime(dParts);
   }
   if (userFriendlyLabel) {
     const now = /* @__PURE__ */ new Date();
     const yesterday = new Date(now);
     yesterday.setDate(now.getDate() - 1);
-    if (isSameCalendarDay(d, now)) {
-      return showTime ? `I dag, kl. ${formatTime()}` : "I dag";
+    const yesterdayParts = parts(yesterday, false);
+    if (isSameCalendarDay(dParts, nowParts)) {
+      return showTime ? `I dag, kl. ${formatTime(dParts)}` : "I dag";
     }
-    if (isSameCalendarDay(d, yesterday)) {
-      return showTime ? `I g\xE5r, kl. ${formatTime()}` : "I g\xE5r";
+    if (isSameCalendarDay(dParts, yesterdayParts)) {
+      return showTime ? `I g\xE5r, kl. ${formatTime(dParts)}` : "I g\xE5r";
     }
   }
-  const day = pad(d.getDate());
-  const month = pad(d.getMonth() + 1);
-  const year = d.getFullYear();
+  const day = pad(dParts.date);
+  const month = pad(dParts.month + 1);
+  const year = dParts.year;
   const base = `${day}.${month}.${year}`;
   if (!showTime) return base;
-  return `${base} ${formatTime()}`;
+  return `${base} ${formatTime(dParts)}`;
 }
 
 exports.formatDate = formatDate;

package/dist/utils/date/formatDate.d.ts

@@ -8,6 +8,7 @@
  * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
  * - formatDate(date, { timeOnly: true }) => "14:30"
  * - formatDate(date, { showTime: true, ignoreDateIfSame: true }) => "14:30" for today, otherwise "10.03.2026 14:30"
+ * - formatDate('2026-03-10T14:30:00.000Z', { showTime: true, ignoreTimezone: true }) => "10.03.2026 14:30" regardless of the viewer's timezone
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
@@ -16,6 +17,11 @@
  * @param options.timeOnly - If true, return only the time portion
  * @param options.ignoreDate - Alias for timeOnly
  * @param options.ignoreDateIfSame - If true, return only the time when the date is today
+ * @param options.ignoreTimezone - If true, read the date's UTC field values verbatim instead of converting
+ *   to the viewer's local timezone. Use this when `date` already carries the intended wall-clock values in
+ *   its UTC fields (e.g. a "timestamp without time zone" DB column serialized with a trailing "Z") and any
+ *   further timezone conversion would be wrong. "I dag"/"I går" comparisons still use the viewer's real
+ *   local "today", since that part is genuinely about the viewer's current day.
  * @returns A formatted string
  */
 export declare function formatDate(date: Date | string | number, options?: {
@@ -25,4 +31,5 @@ export declare function formatDate(date: Date | string | number, options?: {
     timeOnly?: boolean;
     ignoreDate?: boolean;
     ignoreDateIfSame?: boolean;
+    ignoreTimezone?: boolean;
 }): string;

package/dist/utils/date/formatDate.js

@@ -7,41 +7,53 @@ function formatDate(date, options = {}) {
     userFriendlyLabel = false,
     timeOnly = false,
     ignoreDate = false,
-    ignoreDateIfSame = false
+    ignoreDateIfSame = false,
+    ignoreTimezone = false
   } = options;
   const useTimeOnly = timeOnly || ignoreDate;
   const pad = (n) => n.toString().padStart(2, "0");
-  const formatTime = () => {
-    const hours = pad(d.getHours());
-    const minutes = pad(d.getMinutes());
+  const parts = (dt, useUTC) => ({
+    date: useUTC ? dt.getUTCDate() : dt.getDate(),
+    month: useUTC ? dt.getUTCMonth() : dt.getMonth(),
+    year: useUTC ? dt.getUTCFullYear() : dt.getFullYear(),
+    hours: useUTC ? dt.getUTCHours() : dt.getHours(),
+    minutes: useUTC ? dt.getUTCMinutes() : dt.getMinutes(),
+    seconds: useUTC ? dt.getUTCSeconds() : dt.getSeconds()
+  });
+  const dParts = parts(d, ignoreTimezone);
+  const formatTime = (p) => {
+    const hours = pad(p.hours);
+    const minutes = pad(p.minutes);
     if (!showSeconds) return `${hours}:${minutes}`;
-    const seconds = pad(d.getSeconds());
+    const seconds = pad(p.seconds);
     return `${hours}:${minutes}:${seconds}`;
   };
-  const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+  const isSameCalendarDay = (a, b) => a.date === b.date && a.month === b.month && a.year === b.year;
   if (useTimeOnly) {
-    return formatTime();
+    return formatTime(dParts);
   }
-  if (ignoreDateIfSame && isSameCalendarDay(d, /* @__PURE__ */ new Date())) {
-    return formatTime();
+  const nowParts = parts(/* @__PURE__ */ new Date(), false);
+  if (ignoreDateIfSame && isSameCalendarDay(dParts, nowParts)) {
+    return formatTime(dParts);
   }
   if (userFriendlyLabel) {
     const now = /* @__PURE__ */ new Date();
     const yesterday = new Date(now);
     yesterday.setDate(now.getDate() - 1);
-    if (isSameCalendarDay(d, now)) {
-      return showTime ? `I dag, kl. ${formatTime()}` : "I dag";
+    const yesterdayParts = parts(yesterday, false);
+    if (isSameCalendarDay(dParts, nowParts)) {
+      return showTime ? `I dag, kl. ${formatTime(dParts)}` : "I dag";
     }
-    if (isSameCalendarDay(d, yesterday)) {
-      return showTime ? `I g\xE5r, kl. ${formatTime()}` : "I g\xE5r";
+    if (isSameCalendarDay(dParts, yesterdayParts)) {
+      return showTime ? `I g\xE5r, kl. ${formatTime(dParts)}` : "I g\xE5r";
     }
   }
-  const day = pad(d.getDate());
-  const month = pad(d.getMonth() + 1);
-  const year = d.getFullYear();
+  const day = pad(dParts.date);
+  const month = pad(dParts.month + 1);
+  const year = dParts.year;
   const base = `${day}.${month}.${year}`;
   if (!showTime) return base;
-  return `${base} ${formatTime()}`;
+  return `${base} ${formatTime(dParts)}`;
 }
 
 export { formatDate };

package/package.json

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