@dbcdk/react-components 0.0.180 → 0.0.182

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

@@ -1,12 +1,17 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X } from 'lucide-react';
+import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
 import { useState, useId, useEffect, useMemo } from 'react';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { usePersistentState } from '../../hooks/usePersistentState';
 import { JsonNode } from './JsonNode';
 import styles from './JsonViewer.module.css';
 import { useClipboardStatus } from './useClipboardStatus';
 import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
+import { Button } from '../button/Button';
 
+const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
   value,
   defaultExpandedDepth = 2,
@@ -16,13 +21,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] = useState("");
   const [query, setQuery] = useState("");
   const normalizedQuery = normalizeSearch(query);
   const inputId = useId();
   const { copiedId, setCopiedId } = useClipboardStatus();
+  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: "tree",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "tree" || stored === "raw"
+  });
+  const handleToggleAppearance = () => {
+    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
+  };
   useEffect(() => {
     const timeoutId = window.setTimeout(() => {
       setQuery(queryInput);
@@ -47,6 +67,7 @@ function JsonViewer({
     () => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
   );
   const hasResults = normalizedQuery ? matches.size > 0 : true;
+  const rawJson = useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
   const handleCopy = async (nodeId, rawValue) => {
     try {
       await navigator.clipboard.writeText(rawValue);
@@ -55,6 +76,7 @@ function JsonViewer({
       setCopiedId(null);
     }
   };
+  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
   const handleExpandAll = () => {
     setExpandedNodeIds(new Set(allExpandableNodeIds));
   };
@@ -69,90 +91,181 @@ function JsonViewer({
       return next;
     });
   };
-  return /* @__PURE__ */ jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
-          /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: inputId,
-              type: "search",
-              value: queryInput,
-              onChange: (event) => setQueryInput(event.target.value),
-              placeholder: searchPlaceholder,
-              className: styles.searchInput
-            }
-          ),
-          queryInput ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.clearButton,
-              "aria-label": "Ryd s\xF8gning",
-              onClick: () => {
-                setQueryInput("");
-                setQuery("");
-              },
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.toolbarButton,
-              onClick: handleExpandAll,
-              disabled: Boolean(normalizedQuery),
-              children: "Fold alle ud"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.toolbarButton,
-              onClick: handleCollapseAll,
-              disabled: Boolean(normalizedQuery),
-              children: "Fold alle sammen"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
-        helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
-        /* @__PURE__ */ jsx("span", { className: styles.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles.treePane,
-        role: "tree",
-        "aria-label": "JSON-visning",
-        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-        children: hasResults ? /* @__PURE__ */ jsx(
-          JsonNode,
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: [styles.viewer, className].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            keyName: void 0,
-            path: [],
-            value: safeValue,
-            depth: 0,
-            defaultExpandedDepth,
-            query: normalizedQuery,
-            matches,
-            expandedNodeIds,
-            onToggleNode: handleToggleNode,
-            copiedId,
-            onCopy: handleCopy
+            className: styles.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
+                viewMode === "tree" ? /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
+                  /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: inputId,
+                      type: "search",
+                      value: queryInput,
+                      onChange: (event) => setQueryInput(event.target.value),
+                      placeholder: searchPlaceholder,
+                      className: styles.searchInput
+                    }
+                  ),
+                  queryInput ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles.clearButton,
+                      "aria-label": "Ryd s\xF8gning",
+                      onClick: () => {
+                        setQueryInput("");
+                        setQuery("");
+                      },
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] }) : /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx("div", { className: styles.actions, 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, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleExpandAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsx("span", { children: "Fold alle ud" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleCollapseAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsx("span", { children: "Fold alle sammen" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Menu.Separator, {}),
+                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewMode((mode) => mode === "raw" ? "tree" : "raw");
+                            close();
+                          },
+                          children: [
+                            viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleToggleAppearance();
+                            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: () => {
+                            handleCopyAll();
+                            close();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
+                            /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r JSON" })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  }
+                ) })
+              ] }),
+              helperText || viewMode === "tree" && normalizedQuery ? /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+                helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx("span", { className: styles.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+              ] }) : null
+            ]
           }
-        ) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
-      }
-    )
-  ] });
+        ),
+        viewMode === "raw" ? /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: styles.rawPane,
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: rawJson
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.treePane,
+            role: "tree",
+            "aria-label": "JSON-visning",
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: hasResults ? /* @__PURE__ */ jsx(
+              JsonNode,
+              {
+                keyName: void 0,
+                path: [],
+                value: safeValue,
+                depth: 0,
+                defaultExpandedDepth,
+                query: normalizedQuery,
+                matches,
+                expandedNodeIds,
+                onToggleNode: handleToggleNode,
+                copiedId,
+                onCopy: handleCopy
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { JsonViewer };

package/dist/components/json-viewer/JsonViewer.module.css

@@ -22,16 +22,35 @@
 
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-xs);
   background: var(--json-pane-bg);
   color: var(--json-pane-text);
   border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-xl);
+  border-radius: var(--border-radius-default);
   box-shadow: var(--shadow-md);
-  padding: var(--spacing-sm);
+  padding: var(--spacing-xs);
   font-family: var(--font-family-mono);
 }
 
+.viewer[data-appearance='light'] {
+  --json-pane-bg: var(--color-bg-surface);
+  --json-pane-border: var(--color-border-default);
+  --json-pane-border-strong: var(--color-border-strong);
+  --json-pane-text: var(--color-fg-default);
+  --json-pane-muted: var(--color-fg-muted);
+  --json-pane-subtle: var(--color-fg-subtle);
+  --json-pane-hover: var(--color-bg-hover-subtle);
+  --json-pane-selected: color-mix(in oklab, var(--color-brand) 16%, transparent);
+  --color-highlight-bg: color-mix(in oklab, var(--json-pane-highlight) 32%, transparent);
+  --color-highlight-fg: var(--color-fg-default);
+  --json-pane-key: color-mix(in oklab, var(--color-fg-default) 88%, var(--color-syntax-accent) 12%);
+  --json-pane-string: color-mix(in oklab, var(--color-syntax-string) 70%, black 30%);
+  --json-pane-number: color-mix(in oklab, var(--color-syntax-number) 65%, black 35%);
+  --json-pane-boolean: color-mix(in oklab, var(--color-syntax-boolean) 70%, black 30%);
+  --json-pane-null: var(--color-fg-subtle);
+  box-shadow: none;
+}
+
 .toolbar {
   display: grid;
   gap: var(--spacing-xs);
@@ -52,7 +71,7 @@
   min-height: var(--component-size-md);
   padding-inline: var(--spacing-sm);
   border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-sm);
   background: transparent;
 }
 
@@ -114,31 +133,6 @@
   gap: var(--spacing-xs);
 }
 
-.toolbarButton {
-  min-block-size: var(--component-size-sm);
-  padding-inline: var(--spacing-sm);
-  border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-md);
-  background: transparent;
-  color: var(--json-pane-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.toolbarButton:hover:not(:disabled) {
-  background: var(--json-pane-hover);
-}
-
-.toolbarButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.toolbarButton:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
 .helperText,
 .statusText {
   min-inline-size: 0;
@@ -153,6 +147,17 @@
   overflow: auto;
 }
 
+.rawPane {
+  margin: 0;
+  padding: var(--spacing-xs);
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--json-pane-text);
+  font-family: inherit;
+  font-size: inherit;
+}
+
 .node {
   display: flex;
   flex-direction: column;
@@ -168,7 +173,7 @@
   display: flex;
   align-items: flex-start;
   min-inline-size: 0;
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
 }
 
 .row[data-match='true'] {
@@ -186,7 +191,7 @@
   padding-inline: var(--spacing-xs);
   background: transparent;
   border: 0;
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -256,18 +261,6 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  position: relative;
-}
-
-.children::before {
-  content: '';
-  position: absolute;
-  left: calc(var(--spacing-md) - 2px);
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
-  pointer-events: none;
 }
 
 .value {
@@ -317,7 +310,7 @@
 .valueButton[title='Kopieret'] .copyState {
   opacity: 1;
   transform: translateX(0);
-  color: color-mix(in oklab, var(--color-syntax-string) 78%, white 22%);
+  color: var(--json-pane-string);
 }
 
 .emptyState {

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

@@ -7,6 +7,7 @@ export type SearchMatch = {
     self: boolean;
     descendant: boolean;
 };
+export type JsonViewerAppearance = 'dark' | 'light';
 export interface JsonViewerProps {
     value: unknown;
     defaultExpandedDepth?: number;
@@ -17,6 +18,13 @@ export interface JsonViewerProps {
     emptySearchText?: string;
     className?: string;
     maxHeight?: number | string;
+    /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
+    appearance?: JsonViewerAppearance;
+    /**
+     * When set, the user's appearance choice is persisted to localStorage
+     * under `${storageKey}:appearance`.
+     */
+    storageKey?: string;
 }
 export type JsonNodeProps = {
     keyName?: string;

package/dist/components/search-box/SearchBox.cjs

@@ -49,6 +49,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   const popoverRef = react.useRef(null);
   const internalInputRef = react.useRef(null);
   const onSearchRef = react.useRef(onSearch);
+  const skipNextSearch = react.useRef(false);
   react.useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -59,13 +60,20 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   react.useEffect(() => {
     if (!isControlled) return;
     const next = String(value != null ? value : "");
-    if (next !== draft) setDraft(next);
+    if (next !== draft) {
+      skipNextSearch.current = true;
+      setDraft(next);
+    }
   }, [value]);
   react.useEffect(() => {
     onSearchRef.current = onSearch;
   }, [onSearch]);
   react.useEffect(() => {
     if (!onSearchRef.current) return;
+    if (skipNextSearch.current) {
+      skipNextSearch.current = false;
+      return;
+    }
     if (!debounce) {
       onSearchRef.current(draft);
       return;

package/dist/components/search-box/SearchBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { InputVariant } from '../../components/forms/input/Input';
+import { type InputProps, InputVariant } from '../../components/forms/input/Input';
 import { Size } from '../../types/sizes.types';
-export type SearchBoxProps<T extends Record<string, unknown>> = {
+export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps, 'icon' | 'inputSize' | 'minWidth' | 'maxWidth' | 'width' | 'variant' | 'onClear' | 'onButtonClick' | 'buttonLabel' | 'buttonIcon' | 'buttonAriaLabel'> & {
     inputWidth?: string | number;
     maxWidth?: string | number;
     inputSize?: Exclude<Size, 'xl'>;
@@ -24,7 +24,7 @@ export type SearchBoxProps<T extends Record<string, unknown>> = {
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
     buttonAriaLabel?: string;
-} & React.InputHTMLAttributes<HTMLInputElement>;
+};
 type SearchBoxComponent = <T extends Record<string, unknown>>(props: SearchBoxProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
 export declare const SearchBox: SearchBoxComponent;
 export {};

package/dist/components/search-box/SearchBox.js

@@ -43,6 +43,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   const popoverRef = useRef(null);
   const internalInputRef = useRef(null);
   const onSearchRef = useRef(onSearch);
+  const skipNextSearch = useRef(false);
   useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -53,13 +54,20 @@ const SearchBox = forwardRef(function SearchBoxInner({
   useEffect(() => {
     if (!isControlled) return;
     const next = String(value != null ? value : "");
-    if (next !== draft) setDraft(next);
+    if (next !== draft) {
+      skipNextSearch.current = true;
+      setDraft(next);
+    }
   }, [value]);
   useEffect(() => {
     onSearchRef.current = onSearch;
   }, [onSearch]);
   useEffect(() => {
     if (!onSearchRef.current) return;
+    if (skipNextSearch.current) {
+      skipNextSearch.current = false;
+      return;
+    }
     if (!debounce) {
       onSearchRef.current(draft);
       return;

package/dist/components/tabs/Tabs.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var react = require('react');
 var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./Tabs.module.css');
@@ -37,6 +38,7 @@ function normalizeFromChildren(children) {
       disabled: props.disabled,
       hidden: props.hidden,
       badge: props.badge,
+      removable: props.removable,
       content: props.children
     });
   });
@@ -52,6 +54,8 @@ function Tabs({
   defaultValue,
   storageKey,
   onValueChange,
+  onRemoveTab,
+  onAddTab,
   addition,
   loading = false,
   children
@@ -144,31 +148,56 @@ function Tabs({
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabList, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
-        const selected = index === activeIndex;
-        const tabDomId = `${uid}-tab-${String(tab.id)}`;
-        const panelDomId = `${uid}-panel-${String(tab.id)}`;
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabButtons, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
+          const selected = index === activeIndex;
+          const tabDomId = `${uid}-tab-${String(tab.id)}`;
+          const panelDomId = `${uid}-panel-${String(tab.id)}`;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                id: tabDomId,
+                type: "button",
+                className: styles__default.default.tabButton,
+                role: "tab",
+                "aria-selected": selected,
+                "aria-controls": panelDomId,
+                tabIndex: selected ? 0 : -1,
+                disabled: tab.disabled,
+                onClick: () => setValue(tab.id),
+                onKeyDown: (e) => onKeyDownTab(e, index),
+                children: [
+                  tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+                  tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                ]
+              }
+            ),
+            tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: styles__default.default.removeTabButton,
+                "aria-label": `Fjern fane ${tab.header}`,
+                disabled: tab.disabled,
+                onClick: () => onRemoveTab(tab.id, tab, index),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+              }
+            ) : null
+          ] }, tab.id);
+        }) }),
+        onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            id: tabDomId,
             type: "button",
-            className: styles__default.default.tabButton,
-            role: "tab",
-            "aria-selected": selected,
-            "aria-controls": panelDomId,
-            tabIndex: selected ? 0 : -1,
-            disabled: tab.disabled,
-            onClick: () => setValue(tab.id),
-            onKeyDown: (e) => onKeyDownTab(e, index),
-            children: [
-              tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
-              tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-            ]
+            className: styles__default.default.addTabButton,
+            onClick: onAddTab,
+            "aria-label": "Tilf\xF8j fane",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
           }
-        ) }, tab.id);
-      }) }),
+        ) : null
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {