@dbcdk/react-components 0.0.180 → 0.0.182

package/dist/components/clear-button/ClearButton.cjs

@@ -8,23 +8,46 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function ClearButton({ onClick, ariaLabel = "Ryd" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.clearButton, children: /* @__PURE__ */ jsxRuntime.jsx(
+function ClearButton({
+  onClick,
+  ariaLabel = "Ryd",
+  variant = "default",
+  as = "button"
+}) {
+  const wrapperClassName = [styles__default.default.clearButton, variant === "header" ? styles__default.default.header : ""].filter(Boolean).join(" ");
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: styles__default.default.button,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick(e);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: styles__default.default.button,
       type: "button",
       "aria-label": ariaLabel,
       "data-input-role": "clear",
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(e);
-      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
     }
   ) });

package/dist/components/clear-button/ClearButton.d.ts

@@ -3,6 +3,17 @@ import * as React from 'react';
 interface ClearButtonProps {
     onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     ariaLabel?: string;
+    /** 'header' uses --color-navbar-fg tokens — only meaningful inside/near AppHeader */
+    variant?: 'default' | 'header';
+    /**
+     * 'button' (default) renders a native <button>. Pass 'span' when this is
+     * nested inside another interactive <button> (e.g. a Select/MultiSelect/
+     * IntervalSelect trigger) - a <button> descendant of a <button> is invalid
+     * HTML and breaks hydration. The span variant keeps the same class,
+     * click/mousedown handling, and adds role="button" + Enter/Space
+     * activation so it stays keyboard-operable without the invalid nesting.
+     */
+    as?: 'button' | 'span';
 }
-export declare function ClearButton({ onClick, ariaLabel }: ClearButtonProps): ReactNode;
+export declare function ClearButton({ onClick, ariaLabel, variant, as, }: ClearButtonProps): ReactNode;
 export {};

package/dist/components/clear-button/ClearButton.js

@@ -2,23 +2,46 @@ import { jsx } from 'react/jsx-runtime';
 import { X } from 'lucide-react';
 import styles from './ClearButton.module.css';
 
-function ClearButton({ onClick, ariaLabel = "Ryd" }) {
-  return /* @__PURE__ */ jsx("span", { className: styles.clearButton, children: /* @__PURE__ */ jsx(
+function ClearButton({
+  onClick,
+  ariaLabel = "Ryd",
+  variant = "default",
+  as = "button"
+}) {
+  const wrapperClassName = [styles.clearButton, variant === "header" ? styles.header : ""].filter(Boolean).join(" ");
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(e);
+  };
+  return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.button,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick(e);
+      },
+      children: /* @__PURE__ */ jsx(X, { size: 16 })
+    }
+  ) : /* @__PURE__ */ jsx(
     "button",
     {
       className: styles.button,
       type: "button",
       "aria-label": ariaLabel,
       "data-input-role": "clear",
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(e);
-      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
       children: /* @__PURE__ */ jsx(X, { size: 16 })
     }
   ) });

package/dist/components/clear-button/ClearButton.module.css

@@ -24,3 +24,12 @@
 .clearButton .button:hover {
   background-color: var(--color-bg-contextual);
 }
+
+.clearButton.header .button {
+  color: var(--color-navbar-fg-muted);
+}
+
+.clearButton.header .button:hover {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
+  color: var(--color-navbar-fg);
+}

package/dist/components/forms/input/Input.cjs

@@ -148,7 +148,14 @@ const Input = react.forwardRef(function Input2({
                       {
                         className: styles__default.default.clearSlot,
                         "aria-hidden": hasVisibleClear ? void 0 : "true",
-                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel }) : null
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsxRuntime.jsx(
+                          ClearButton.ClearButton,
+                          {
+                            onClick: onClear,
+                            ariaLabel: clearAriaLabel,
+                            variant: variant === "header" ? "header" : "default"
+                          }
+                        ) : null
                       }
                     ) : null,
                     endAdornment

package/dist/components/forms/input/Input.js

@@ -142,7 +142,14 @@ const Input = forwardRef(function Input2({
                       {
                         className: styles.clearSlot,
                         "aria-hidden": hasVisibleClear ? void 0 : "true",
-                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel }) : null
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsx(
+                          ClearButton,
+                          {
+                            onClick: onClear,
+                            ariaLabel: clearAriaLabel,
+                            variant: variant === "header" ? "header" : "default"
+                          }
+                        ) : null
                       }
                     ) : null,
                     endAdornment

package/dist/components/forms/multi-select/MultiSelect.cjs

@@ -152,7 +152,14 @@ function MultiSelect({
                   selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: selectedValues.length }) : null
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }) : null,
+                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ClearButton.ClearButton,
+                    {
+                      onClick: onClear,
+                      variant: variant === "header" ? "header" : "default",
+                      as: "span"
+                    }
+                  ) : null,
                   /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
                 ] })
               ]

package/dist/components/forms/multi-select/MultiSelect.js

@@ -150,7 +150,14 @@ function MultiSelect({
                   selectedValues.length > 0 ? /* @__PURE__ */ jsx(Chip, { size: "sm", children: selectedValues.length }) : null
                 ] }),
                 /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) : null,
+                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsx(
+                    ClearButton,
+                    {
+                      onClick: onClear,
+                      variant: variant === "header" ? "header" : "default",
+                      as: "span"
+                    }
+                  ) : null,
                   /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
                 ] })
               ]

package/dist/components/forms/select/Select.cjs

@@ -230,7 +230,14 @@ function Select({
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+                        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
+                          ClearButton.ClearButton,
+                          {
+                            onClick: onClear,
+                            variant: variant === "header" ? "header" : "default",
+                            as: "span"
+                          }
+                        ),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
                       ] })
                     ]

package/dist/components/forms/select/Select.js

@@ -224,7 +224,14 @@ function Select({
                     children: [
                       /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
                       /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
-                        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                        onClear && selected && /* @__PURE__ */ jsx(
+                          ClearButton,
+                          {
+                            onClick: onClear,
+                            variant: variant === "header" ? "header" : "default",
+                            as: "span"
+                          }
+                        ),
                         /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
                       ] })
                     ]

package/dist/components/interval-select/IntervalSelect.cjs

@@ -154,7 +154,14 @@ function IntervalSelect({
                     style: { width: "100%" },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }),
-                      onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+                      onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
+                        ClearButton.ClearButton,
+                        {
+                          onClick: onClear,
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span"
+                        }
+                      ),
                       icon
                     ]
                   }

package/dist/components/interval-select/IntervalSelect.js

@@ -152,7 +152,14 @@ function IntervalSelect({
                     style: { width: "100%" },
                     children: [
                       /* @__PURE__ */ jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }),
-                      onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                      onClear && selected && /* @__PURE__ */ jsx(
+                        ClearButton,
+                        {
+                          onClick: onClear,
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span"
+                        }
+                      ),
                       icon
                     ]
                   }

package/dist/components/json-viewer/JsonViewer.cjs

@@ -4,15 +4,20 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var usePersistentState = require('../../hooks/usePersistentState');
 var JsonNode = require('./JsonNode');
 var styles = require('./JsonViewer.module.css');
 var useClipboardStatus = require('./useClipboardStatus');
 var utils = require('./utils');
+var Button = require('../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
   value,
   defaultExpandedDepth = 2,
@@ -22,13 +27,28 @@ function JsonViewer({
   searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
   emptySearchText = "Ingen matchende noder fundet.",
   className,
-  maxHeight
+  maxHeight,
+  appearance = "dark",
+  storageKey
 }) {
   const [queryInput, setQueryInput] = react.useState("");
   const [query, setQuery] = react.useState("");
   const normalizedQuery = utils.normalizeSearch(query);
   const inputId = react.useId();
   const { copiedId, setCopiedId } = useClipboardStatus.useClipboardStatus();
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
+    initialValue: "tree",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "tree" || stored === "raw"
+  });
+  const handleToggleAppearance = () => {
+    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
+  };
   react.useEffect(() => {
     const timeoutId = window.setTimeout(() => {
       setQuery(queryInput);
@@ -53,6 +73,7 @@ function JsonViewer({
     () => new Set(utils.collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
   );
   const hasResults = normalizedQuery ? matches.size > 0 : true;
+  const rawJson = react.useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
   const handleCopy = async (nodeId, rawValue) => {
     try {
       await navigator.clipboard.writeText(rawValue);
@@ -61,6 +82,7 @@ function JsonViewer({
       setCopiedId(null);
     }
   };
+  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
   const handleExpandAll = () => {
     setExpandedNodeIds(new Set(allExpandableNodeIds));
   };
@@ -75,90 +97,181 @@ function JsonViewer({
       return next;
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: [styles__default.default.viewer, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles__default.default.searchField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: styles__default.default.searchIcon, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: inputId,
-              type: "search",
-              value: queryInput,
-              onChange: (event) => setQueryInput(event.target.value),
-              placeholder: searchPlaceholder,
-              className: styles__default.default.searchInput
-            }
-          ),
-          queryInput ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.clearButton,
-              "aria-label": "Ryd s\xF8gning",
-              onClick: () => {
-                setQueryInput("");
-                setQuery("");
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.actions, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.toolbarButton,
-              onClick: handleExpandAll,
-              disabled: Boolean(normalizedQuery),
-              children: "Fold alle ud"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.toolbarButton,
-              onClick: handleCollapseAll,
-              disabled: Boolean(normalizedQuery),
-              children: "Fold alle sammen"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.metaRow, children: [
-        helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helperText, children: helperText }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: styles__default.default.treePane,
-        role: "tree",
-        "aria-label": "JSON-visning",
-        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-        children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
-          JsonNode.JsonNode,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: [styles__default.default.viewer, className].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            keyName: void 0,
-            path: [],
-            value: safeValue,
-            depth: 0,
-            defaultExpandedDepth,
-            query: normalizedQuery,
-            matches,
-            expandedNodeIds,
-            onToggleNode: handleToggleNode,
-            copiedId,
-            onCopy: handleCopy
+            className: styles__default.default.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
+                viewMode === "tree" ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles__default.default.searchField, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: styles__default.default.searchIcon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      id: inputId,
+                      type: "search",
+                      value: queryInput,
+                      onChange: (event) => setQueryInput(event.target.value),
+                      placeholder: searchPlaceholder,
+                      className: styles__default.default.searchInput
+                    }
+                  ),
+                  queryInput ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles__default.default.clearButton,
+                      "aria-label": "Ryd s\xF8gning",
+                      onClick: () => {
+                        setQueryInput("");
+                        setQuery("");
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Popover.Popover,
+                  {
+                    matchTriggerWidth: false,
+                    minWidth: "200px",
+                    trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
+                      {
+                        variant: "inline",
+                        "aria-label": "Flere handlinger",
+                        "aria-haspopup": "menu",
+                        "aria-expanded": isOpen ? true : false,
+                        onClick: toggle,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                      }
+                    ),
+                    children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleExpandAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fold alle ud" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleCollapseAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fold alle sammen" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewMode((mode) => mode === "raw" ? "tree" : "raw");
+                            close();
+                          },
+                          children: [
+                            viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleToggleAppearance();
+                            close();
+                          },
+                          children: [
+                            currentAppearance === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleCopyAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardCopy, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Kopi\xE9r JSON" })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  }
+                ) })
+              ] }),
+              helperText || viewMode === "tree" && normalizedQuery ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.metaRow, children: [
+                helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helperText, children: helperText }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+              ] }) : null
+            ]
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
-      }
-    )
-  ] });
+        ),
+        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            className: styles__default.default.rawPane,
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: rawJson
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.treePane,
+            role: "tree",
+            "aria-label": "JSON-visning",
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
+              JsonNode.JsonNode,
+              {
+                keyName: void 0,
+                path: [],
+                value: safeValue,
+                depth: 0,
+                defaultExpandedDepth,
+                query: normalizedQuery,
+                matches,
+                expandedNodeIds,
+                onToggleNode: handleToggleNode,
+                copiedId,
+                onCopy: handleCopy
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
+          }
+        )
+      ]
+    }
+  );
 }
 
 exports.JsonViewer = JsonViewer;

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { JsonViewerProps } from './types';
 export type { JsonViewerProps } from './types';
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, }: JsonViewerProps): JSX.Element;
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, }: JsonViewerProps): JSX.Element;