@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1,203 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Button = require('../../components/button/Button');
+var ClearButton = require('../../components/clear-button/ClearButton');
+var InputContainer = require('../../components/forms/input-container/InputContainer');
+var Menu = require('../../components/menu/Menu');
+var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
+var Popover = require('../../components/popover/Popover');
+var dateTimeHelpers = require('../datetime-picker/dateTimeHelpers');
+
+function IntervalSelect({
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  // tooltip
+  tooltip,
+  tooltipPlacement = "right",
+  // IntervalSelect props
+  id,
+  options,
+  selectedValue,
+  onChange,
+  baseDate,
+  placeholder = "V\xE6lg interval",
+  size,
+  variant = "outlined",
+  onClear,
+  dataCy,
+  disabled
+}) {
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `interval-select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = react.useRef(null);
+  const optionRefs = react.useRef([]);
+  const selectedIndex = react.useMemo(
+    () => options.findIndex((o) => o.minutesAgo === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = react.useState(selectedIndex >= 0 ? selectedIndex : 0);
+  react.useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const selected = react.useMemo(
+    () => {
+      var _a;
+      return (_a = options.find((o) => o.minutesAgo === selectedValue)) != null ? _a : null;
+    },
+    [options, selectedValue]
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const handleCommit = (opt) => {
+    var _a;
+    const base = baseDate != null ? baseDate : /* @__PURE__ */ new Date();
+    const dateLocal = new Date(base.getTime() - opt.minutesAgo * 6e4);
+    const isoUtc = dateTimeHelpers.isoFromLocalDate(dateLocal);
+    onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (options[activeIndex]) handleCommit(options[activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        (_a = popoverRef.current) == null ? void 0 : _a.close();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Popover.Popover,
+          {
+            ref: popoverRef,
+            contentId: listboxId,
+            trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "interval-select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                  onClick(e);
+                },
+                size,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    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 }),
+                      icon
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+              const isSelected = opt.minutesAgo === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Menu.Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-selected": isSelected,
+                      onClick: () => handleCommit(opt),
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+                        opt.label
+                      ]
+                    }
+                  )
+                },
+                opt.minutesAgo
+              );
+            }) })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+exports.IntervalSelect = IntervalSelect;

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

@@ -0,0 +1,201 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { Button } from '../../components/button/Button';
+import { ClearButton } from '../../components/clear-button/ClearButton';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { Menu } from '../../components/menu/Menu';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import { Popover } from '../../components/popover/Popover';
+import { isoFromLocalDate } from '../datetime-picker/dateTimeHelpers';
+
+function IntervalSelect({
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  // tooltip
+  tooltip,
+  tooltipPlacement = "right",
+  // IntervalSelect props
+  id,
+  options,
+  selectedValue,
+  onChange,
+  baseDate,
+  placeholder = "V\xE6lg interval",
+  size,
+  variant = "outlined",
+  onClear,
+  dataCy,
+  disabled
+}) {
+  const generatedId = useId();
+  const controlId = id != null ? id : `interval-select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = useRef(null);
+  const optionRefs = useRef([]);
+  const selectedIndex = useMemo(
+    () => options.findIndex((o) => o.minutesAgo === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+  useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const selected = useMemo(
+    () => {
+      var _a;
+      return (_a = options.find((o) => o.minutesAgo === selectedValue)) != null ? _a : null;
+    },
+    [options, selectedValue]
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const handleCommit = (opt) => {
+    var _a;
+    const base = baseDate != null ? baseDate : /* @__PURE__ */ new Date();
+    const dateLocal = new Date(base.getTime() - opt.minutesAgo * 6e4);
+    const isoUtc = isoFromLocalDate(dateLocal);
+    onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (options[activeIndex]) handleCommit(options[activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        (_a = popoverRef.current) == null ? void 0 : _a.close();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            ref: popoverRef,
+            contentId: listboxId,
+            trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "interval-select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                  onClick(e);
+                },
+                size,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    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 }),
+                      icon
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+              const isSelected = opt.minutesAgo === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsx(
+                Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-selected": isSelected,
+                      onClick: () => handleCommit(opt),
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                        opt.label
+                      ]
+                    }
+                  )
+                },
+                opt.minutesAgo
+              );
+            }) })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+export { IntervalSelect };

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var getHighlightedSegments = require('../../utils/text/get-highlighted-segments');
+
+function HighlightedText({ text, query }) {
+  return getHighlightedSegments.getHighlightedSegments(text, query).map(
+    (segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: segment.text }, `${segment.text}-${index}`)
+  );
+}
+
+exports.HighlightedText = HighlightedText;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { getHighlightedSegments } from '../../utils/text/get-highlighted-segments';
+
+function HighlightedText({ text, query }) {
+  return getHighlightedSegments(text, query).map(
+    (segment, index) => segment.matched ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)
+  );
+}
+
+export { HighlightedText };

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

@@ -0,0 +1,124 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var utils = require('./utils');
+var HighlightedText = require('./HighlightedText');
+var styles = require('./JsonViewer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonNode({
+  keyName,
+  path,
+  value,
+  depth,
+  defaultExpandedDepth,
+  query,
+  matches,
+  expandedNodeIds,
+  onToggleNode,
+  copiedId,
+  onCopy
+}) {
+  const nodeId = utils.getNodeId(path);
+  const nodeType = utils.getValueType(value);
+  const match = matches.get(nodeId);
+  const shouldRender = query ? Boolean(match) : true;
+  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  if (!shouldRender) return null;
+  if (nodeType !== "array" && nodeType !== "object") {
+    const primitive = value;
+    const valueLabel = utils.formatPrimitive(primitive);
+    const rawValue = utils.getPrimitiveRawValue(primitive);
+    const copied = copiedId === nodeId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: styles__default.default.node,
+        style: { ["--json-indent"]: depth },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.valueButton,
+              onClick: () => onCopy(nodeId, rawValue),
+              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+                  keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: [styles__default.default.value, styles__default.default[`value${utils.capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: valueLabel, query }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.copyState, "aria-live": "polite", children: [
+                  copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+                ] })
+              ]
+            }
+          ) }),
+          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null
+        ]
+      }
+    );
+  }
+  const entries = utils.isJsonArray(value) ? value.map((item, index) => [String(index), item]) : utils.isJsonObject(value) ? Object.entries(value) : [];
+  const summary = utils.getSummary(value);
+  const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles__default.default.node,
+      style: { ["--json-indent"]: depth },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.toggle,
+            onClick: () => onToggleNode(nodeId),
+            "aria-expanded": expanded,
+            children: [
+              expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+                keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "[" : "{" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.summary, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: summary, query }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "]" : "}" })
+              ] })
+            ]
+          }
+        ) }),
+        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null,
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsxRuntime.jsx(
+          JsonNode,
+          {
+            keyName: utils.isJsonArray(value) ? `[${childKey}]` : childKey,
+            path: [...path, childKey],
+            value: childValue,
+            depth: depth + 1,
+            defaultExpandedDepth,
+            query,
+            matches,
+            expandedNodeIds,
+            onToggleNode,
+            copiedId,
+            onCopy
+          },
+          `${nodeId}-${childKey}`
+        )) }) : null
+      ]
+    }
+  );
+}
+
+exports.JsonNode = JsonNode;

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

@@ -0,0 +1,118 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check, Copy, ChevronDown, ChevronRight } from 'lucide-react';
+import { getNodeId, getValueType, formatPrimitive, getPrimitiveRawValue, capitalize, getPathLabel, isJsonArray, isJsonObject, getSummary } from './utils';
+import { HighlightedText } from './HighlightedText';
+import styles from './JsonViewer.module.css';
+
+function JsonNode({
+  keyName,
+  path,
+  value,
+  depth,
+  defaultExpandedDepth,
+  query,
+  matches,
+  expandedNodeIds,
+  onToggleNode,
+  copiedId,
+  onCopy
+}) {
+  const nodeId = getNodeId(path);
+  const nodeType = getValueType(value);
+  const match = matches.get(nodeId);
+  const shouldRender = query ? Boolean(match) : true;
+  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  if (!shouldRender) return null;
+  if (nodeType !== "array" && nodeType !== "object") {
+    const primitive = value;
+    const valueLabel = formatPrimitive(primitive);
+    const rawValue = getPrimitiveRawValue(primitive);
+    const copied = copiedId === nodeId;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.node,
+        style: { ["--json-indent"]: depth },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles.valueButton,
+              onClick: () => onCopy(nodeId, rawValue),
+              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+                  keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+                    /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+                    /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+                  /* @__PURE__ */ jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsx(HighlightedText, { text: valueLabel, query }) })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [
+                  copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+                ] })
+              ]
+            }
+          ) }),
+          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), query }) }) : null
+        ]
+      }
+    );
+  }
+  const entries = isJsonArray(value) ? value.map((item, index) => [String(index), item]) : isJsonObject(value) ? Object.entries(value) : [];
+  const summary = getSummary(value);
+  const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.node,
+      style: { ["--json-indent"]: depth },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles.toggle,
+            onClick: () => onToggleNode(nodeId),
+            "aria-expanded": expanded,
+            children: [
+              expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+                keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+                  /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+                ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "[" : "{" }),
+                /* @__PURE__ */ jsx("span", { className: styles.summary, children: /* @__PURE__ */ jsx(HighlightedText, { text: summary, query }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "]" : "}" })
+              ] })
+            ]
+          }
+        ) }),
+        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), query }) }) : null,
+        expanded ? /* @__PURE__ */ jsx("div", { className: styles.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            keyName: isJsonArray(value) ? `[${childKey}]` : childKey,
+            path: [...path, childKey],
+            value: childValue,
+            depth: depth + 1,
+            defaultExpandedDepth,
+            query,
+            matches,
+            expandedNodeIds,
+            onToggleNode,
+            copiedId,
+            onCopy
+          },
+          `${nodeId}-${childKey}`
+        )) }) : null
+      ]
+    }
+  );
+}
+
+export { JsonNode };