@dbcdk/react-components 0.0.148 → 0.0.150

package/dist/client.cjs

@@ -89,6 +89,7 @@ var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var Lightbox = require('./components/lightbox/Lightbox');
 var FileUpload = require('./components/forms/file-upload/FileUpload');
+var HighlightedText = require('./components/highlighted-text/HighlightedText');
 
 
 
@@ -620,3 +621,9 @@ Object.keys(FileUpload).forEach(function (k) {
 		get: function () { return FileUpload[k]; }
 	});
 });
+Object.keys(HighlightedText).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return HighlightedText[k]; }
+	});
+});

package/dist/client.d.ts

@@ -86,3 +86,4 @@ export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/lightbox/Lightbox';
 export * from './components/forms/file-upload/FileUpload';
+export * from './components/highlighted-text/HighlightedText';

package/dist/client.js

@@ -87,3 +87,4 @@ export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/lightbox/Lightbox';
 export * from './components/forms/file-upload/FileUpload';
+export * from './components/highlighted-text/HighlightedText';

package/dist/components/highlighted-text/HighlightedText.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function HighlightedText({ text, query, className }) {
+  const trimmedQuery = query == null ? void 0 : query.trim();
+  if (!trimmedQuery) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
+  }
+  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+  const parts = text.split(pattern);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: parts.map(
+    (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: part }, index)
+  ) });
+}
+
+exports.HighlightedText = HighlightedText;

package/dist/components/highlighted-text/HighlightedText.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface HighlightedTextProps {
+    text: string;
+    query?: string;
+    className?: string;
+}
+export declare function HighlightedText({ text, query, className }: HighlightedTextProps): JSX.Element;

package/dist/components/highlighted-text/HighlightedText.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function HighlightedText({ text, query, className }) {
+  const trimmedQuery = query == null ? void 0 : query.trim();
+  if (!trimmedQuery) {
+    return /* @__PURE__ */ jsx("span", { className, children: text });
+  }
+  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+  const parts = text.split(pattern);
+  return /* @__PURE__ */ jsx("span", { className, children: parts.map(
+    (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)
+  ) });
+}
+
+export { HighlightedText };

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

@@ -3,9 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
-var utils = require('./utils');
-var HighlightedText = require('./HighlightedText');
+var HighlightedText = require('../../components/highlighted-text/HighlightedText');
 var styles = require('./JsonViewer.module.css');
+var utils = require('./utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -1,9 +1,9 @@
 '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 { HighlightedText } from '../../components/highlighted-text/HighlightedText';
 import styles from './JsonViewer.module.css';
+import { getNodeId, getValueType, formatPrimitive, getPrimitiveRawValue, capitalize, getPathLabel, isJsonArray, isJsonObject, getSummary } from './utils';
 
 function JsonNode({
   keyName,

package/dist/components/overlay/modal/Modal.cjs

@@ -18,6 +18,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -143,6 +144,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/components/overlay/modal/Modal.d.ts

@@ -14,6 +14,7 @@ export type ModalProps = {
     onRequestClose: () => void;
     header?: ReactNode;
     subheader?: ReactNode;
+    headerAddition?: ReactNode;
     content?: ReactNode;
     children?: ReactNode;
     primaryAction?: ModalActionConfig;
@@ -25,4 +26,4 @@ export type ModalProps = {
     width?: number | string;
     ariaLabel?: string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, subheader, headerAddition, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -12,6 +12,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -137,6 +138,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/index.cjs

@@ -35,6 +35,7 @@ var StatePage = require('./components/state-page/StatePage');
 var Alert = require('./components/alert/Alert');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
+var HighlightedText = require('./components/highlighted-text/HighlightedText');
 
 
 
@@ -248,3 +249,9 @@ Object.keys(MediaCard).forEach(function (k) {
 		get: function () { return MediaCard[k]; }
 	});
 });
+Object.keys(HighlightedText).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return HighlightedText[k]; }
+	});
+});

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
+export * from './components/highlighted-text/HighlightedText';

package/dist/index.js

@@ -33,3 +33,4 @@ export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
+export * from './components/highlighted-text/HighlightedText';

package/dist/styles/css-helper-classes/spacing.css

@@ -162,6 +162,10 @@
 }
 
 /* Padding - all axes */
+.dbc-p-0 {
+  padding: 0;
+}
+
 .dbc-p-xxs {
   padding: var(--spacing-xxs);
 }

package/dist/styles/styles.css

@@ -229,7 +229,6 @@ body.dbc-app {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }
@@ -238,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

package/dist/styles/themes/dbc/colors.css

@@ -55,6 +55,8 @@ html {
 
   --dbc-amber-700: light-dark(#b45309, #f59e0b);
   --dbc-amber-100: light-dark(#fff7ed, #2b1b00);
+  /* Fixed (not light-dark): needs to stay a legible pale gold behind dark ink in both schemes */
+  --dbc-amber-200: #fde68a;
   --dbc-amber-800: light-dark(#92400e, #fcd34d);
   --dbc-amber-400: light-dark(#f59e0b, #fbbf24);
 
@@ -99,8 +101,8 @@ html {
   --color-bg-selected-hover: var(--dbc-blue-150);
 
   /* Highlight */
-  --color-highlight-bg: var(--color-bg-selected-hover);
-  --color-highlight-fg: var(--color-fg-default);
+  --color-highlight-bg: var(--dbc-amber-200);
+  --color-highlight-fg: #1a1a1a;
 
   --color-neutral: var(--dbc-neutral-200);
 

package/dist/styles.css

@@ -229,7 +229,6 @@ body.dbc-app {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }
@@ -238,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

package/package.json

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

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

@@ -1,13 +0,0 @@
-'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.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react';
-export declare function HighlightedText({ text, query }: {
-    text: string;
-    query: string;
-}): ReactNode;

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

@@ -1,11 +0,0 @@
-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/styles/themes/forfatterweb/light.css

@@ -1,121 +0,0 @@
-:root {
-  /* Colors */
-  --color-primary: #1e88e5;
-  --color-primary-hover: #007bb0;
-  --color-highlight: #3b99e0;
-  --focus-ring: 0 0 0 2px #3b99e0;
-  --color-primary-hover: #0932b6;
-  --color-secondary: #6b7280;
-  --color-secondary-hover: #4b5563;
-  --color-accent: #ec4899;
-  --color-accent-hover: #be185d;
-
-  --color-highlight: #0932b6;
-  --color-hover: var(--opac-bg-light);
-
-  --color-background: #ffffff;
-
-  --color-text: #111827;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-muted: #6b7280;
-  --color-text-inverse: #ffffff;
-
-  --color-border: #e5e7eb;
-  --color-border-strong: #d1d5db;
-
-  --color-success: #16a34a;
-  --color-warning: #f59e0b;
-  --color-error: #dc2626;
-  --color-info: #0ea5e9;
-
-  --color-chart-empty: color-mix(in srgb, var(--color-text-muted) 15%, rgb(255 255 255 / 0));
-  --color-chart-neutral: color-mix(in srgb, var(--color-text-muted) 25%, rgb(255 255 255 / 0));
-  --color-chart-primary: color-mix(in srgb, var(--color-primary) 75%, rgb(255 255 255 / 0));
-  --color-chart-success: color-mix(in srgb, var(--color-success) 75%, rgb(255 255 255 / 0));
-  --color-chart-warning: color-mix(in srgb, var(--color-warning) 75%, rgb(255 255 255 / 0));
-  --color-chart-brand: color-mix(in srgb, var(--color-accent) 75%, rgb(255 255 255 / 0));
-  --color-chart-info: color-mix(in srgb, var(--color-info) 75%, rgb(255 255 255 / 0));
-  --color-chart-error: color-mix(in srgb, var(--color-error) 75%, rgb(255 255 255 / 0));
-
-  /* Legacy aliases */
-  --color-chart-blue: var(--color-chart-primary);
-  --color-chart-green: var(--color-chart-success);
-  --color-chart-amber: var(--color-chart-warning);
-  --color-chart-pink: var(--color-chart-brand);
-  --color-chart-sky: var(--color-chart-info);
-  --color-chart-red: var(--color-chart-error);
-
-  --opac-bg-light: rgba(0, 0, 0, 0.025);
-  --opac-bg-default: rgba(0, 0, 0, 0.05);
-  --opac-bg-dark: rgba(0, 0, 0, 0.1);
-  --opac-bg-dark-inverse: rgba(255, 255, 255, 0.1);
-
-  /* Spacing */
-  --spacing-xxs: 0.25rem;
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-
-  --icon-size: 20px;
-
-  --component-size-xs: 1.5rem;
-  --component-size-sm: 2rem;
-  --component-size-md: 2.5rem;
-  --component-size-lg: 3rem;
-  --component-size-xl: 4rem;
-
-  /* Borders */
-
-  --border-width-thin: 1px;
-  --border-width-thick: 2px;
-
-  --border-radius-none: 0;
-  --border-radius-default: 0.25rem;
-  --border-radius-rounded: 2rem;
-  --border-radius-round: 50%;
-
-  /* Typography */
-  --font-family: Roboto, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, monospace;
-
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 2rem;
-  --font-size-2xl: 3rem;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* Overlay */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 250ms ease-in-out;
-  --transition-slow: 400ms ease-in-out;
-
-  --focus-ring: 0 0 0 2px var(--color-primary);
-
-  /* Layers */
-  --z-dropdown: 1000;
-  --z-sticky: 1100;
-  --z-modal: 1200;
-  --z-popover: 1300;
-  --z-tooltip: 1400;
-}

package/dist/themes/forfatterweb.css

@@ -1,2 +0,0 @@
-@import '../styles/themes/forfatterweb/light.css';
-@import '../index.css';