@dbcdk/react-components 0.0.19 → 0.0.21

package/dist/components/button/Button.module.css

@@ -1,12 +1,8 @@
-/* ==========================================================================
- * BASE BUTTON
- * ======================================================================= */
-
 .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-inline-sm);
+  gap: var(--spacing-xxs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -155,14 +151,21 @@
 }
 
 .default {
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-bg-toolbar);
   color: var(--color-fg-default);
-  border-color: var(--color-border-subtle);
+  border-color: transparent;
 }
 
 .default:hover {
-  background-color: var(--color-bg-hover-subtle);
-  border-color: var(--color-border-default);
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+}
+
+.default:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-selected),
+    var(--focus-ring);
 }
 
 .outlined {
@@ -217,7 +220,7 @@
 }
 
 .button.inline:hover {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--opac-bg-light);
 }
 
 .active {
@@ -226,6 +229,14 @@
   border-color: var(--color-border-selected);
 }
 
+.inline.active {
+  color: var(--button-bg-primary);
+}
+
 .active:hover {
   background-color: var(--button-bg-primary-hover);
 }
+
+.inline.active:hover {
+  color: var(--button-bg-primary-hover);
+}

package/dist/components/chip/Chip.d.ts

@@ -9,7 +9,8 @@ interface ChipProps {
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
-    type?: 'default' | 'rounded' | 'outlined';
+    type?: 'default' | 'rounded' | 'outlined' | 'subtle';
+    selected?: boolean;
 }
-export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, onClose, }: ChipProps): JSX.Element;
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, selected, onClose, }: ChipProps): JSX.Element;
 export {};

package/dist/components/chip/Chip.js

@@ -5,7 +5,7 @@ import { useState, useRef, useEffect } from 'react';
 import styles from './Chip.module.css';
 import { Icon } from '../icon/Icon';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', onClose, }) {
+export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', selected = false, onClose, }) {
     const [chipWidth, setChipWidth] = useState(undefined);
     const chipRef = useRef(null);
     useEffect(() => {
@@ -26,5 +26,6 @@ export function Chip({ children, severity = 'neutral', loading, disableIcon = tr
             styles[type],
             hasLeading ? styles.hasLeading : '',
             hasClose ? styles.hasClose : '',
+            selected ? styles.selected : '',
         ].join(' '), children: [hasLeading ? (_jsxs("span", { className: styles.leading, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon] })) : null, _jsx("span", { className: styles.label, children: children }), hasClose && (_jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: _jsx(X, {}) }))] }));
 }

package/dist/components/chip/Chip.module.css

@@ -1,23 +1,16 @@
 .container {
-  /* local layout tokens */
-  --chip-gap: var(--spacing-xxs);
-  --chip-pad-y: var(--spacing-xxs);
-  --chip-pad-x: var(--spacing-md);
-
-  /* when no icon, compensate by half the gap on each side */
-  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
-
   display: inline-flex;
   align-items: center;
-  gap: var(--chip-gap);
+  gap: var(--spacing-xs);
   white-space: nowrap;
 
   color: var(--chip-fg-default, var(--color-fg-default));
-  border: var(--border-width-thin) solid transparent;
-  border-radius: var(--border-radius-default);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-rounded);
 
-  padding-block: var(--chip-pad-y);
-  padding-inline: var(--chip-pad-x-noicon);
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-2xs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -27,32 +20,69 @@
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard),
     border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    transform var(--transition-fast) var(--ease-standard);
 }
 
-/* Keep your preferred pill look */
-.rounded {
-  border-radius: var(--border-radius-rounded);
+.container:focus-visible {
+  outline: none;
 }
 
-.outlined {
+.rounded {
   border-radius: var(--border-radius-rounded);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  background-color: transparent;
 }
 
 .default {
   border-radius: var(--border-radius-default);
 }
 
-/* ---- Leading icon logic ---- */
-.hasLeading {
-  /* symmetric tighter padding when icon exists */
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
+/* Types */
+
+.outlined {
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  color: var(--color-fg-muted);
+}
+
+.outlined:hover {
+  background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  color: var(--color-fg-default);
 }
 
-/* Leading slot */
+.outlined:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.03),
+    inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+.subtle {
+  background-color: var(--color-bg-toolbar);
+  border: 1px solid transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+  color: var(--color-fg-muted);
+}
+
+.subtle:hover {
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+  color: var(--color-fg-default);
+}
+
+.subtle:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+/* Content */
+
 .leading {
   display: inline-flex;
   align-items: center;
@@ -66,7 +96,6 @@
   min-width: 0;
 }
 
-/* ---- Icon sizing ---- */
 .leading svg,
 .close svg {
   inline-size: var(--icon-size-sm);
@@ -74,38 +103,11 @@
   color: currentColor;
 }
 
-.sm .leading svg,
-.sm .close svg {
-  inline-size: 14px;
-  block-size: 14px;
-}
-
-.lg .leading svg,
-.lg .close svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
+/* Sizes */
 
-/* ---- Sizes ---- */
 .sm {
-  --chip-pad-y: var(--spacing-2xs);
-  --chip-pad-x: var(--spacing-xs);
-  /* keep same gap unless you explicitly want tighter; if you do, change only here */
-  /* --chip-gap: var(--spacing-2xs); */
-
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);
-
-  /* recompute derived value */
-  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
-
-  padding-block: var(--chip-pad-y);
-  padding-inline: var(--chip-pad-x-noicon);
-}
-
-.sm.hasLeading {
-  padding-left: var(--spacing-xxs);
-  padding-right: var(--spacing-xxs);
 }
 
 .md {
@@ -113,55 +115,87 @@
 }
 
 .lg {
-  --chip-pad-y: var(--spacing-xs);
-
   height: var(--component-size-md);
-  padding-block: var(--chip-pad-y);
+  padding-block: var(--spacing-xs);
 }
 
-/* ---- Variants / severities ---- */
+/* Status variants */
+
 .neutral {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
   border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
 }
 
 .success {
   background-color: var(--color-status-success-bg);
   color: var(--color-status-success-fg);
-  border-color: var(--color-status-success-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-success-border);
 }
 
 .warning {
   background-color: var(--color-status-warning-bg);
   color: var(--color-status-warning-fg);
-  border-color: var(--color-status-warning-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-warning-border);
 }
 
 .error {
   background-color: var(--color-status-error-bg);
   color: var(--color-status-error-fg);
-  border-color: var(--color-status-error-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-error-border);
 }
 
 .info {
   background-color: var(--color-status-info-bg);
   color: var(--color-status-info-fg);
-  border-color: var(--color-status-info-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-info-border);
 }
 
 .brand {
   background-color: var(--color-brand);
   color: var(--color-fg-on-brand);
   border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
 }
 
-/* Full width */
+/* Selected */
+
+.selected {
+  background: var(--color-bg-selected);
+  color: var(--color-brand);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.selected:hover {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+.selected:focus-visible {
+  outline: none;
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+/* Layout */
+
 .fullWidth {
   inline-size: 100%;
   justify-content: center;
 }
 
 /* Close button */
+
 .close {
   all: unset;
   display: inline-flex;
@@ -173,8 +207,13 @@
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
   border-radius: var(--border-radius-round);
+  border: 1px solid transparent;
+  box-sizing: border-box;
 
-  transition: background-color var(--transition-fast) var(--ease-standard);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
 }
 
 .close:hover {
@@ -182,6 +221,7 @@
 }
 
 .close:focus-visible {
-  box-shadow: var(--focus-ring);
   outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }

package/dist/components/code-block/CodeBlock.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextWrap } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import styles from './CodeBlock.module.css';
+import { Button } from '../button/Button';
 import { CopyButton } from '../copy-button/CopyButton';
 const looksLikeStackFrame = (line) => {
     const t = line.trim();
@@ -16,24 +19,30 @@ export function CodeBlock({ code, children, copyButton, copyText, size = 'md', s
     var _a;
     const text = typeof code === 'string' ? code : undefined;
     const copy = (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : '';
-    // If children are provided, render them as-is (no line processing).
     const hasChildren = children !== undefined && children !== null;
-    // Smart rendering only when we have plain text + no children.
-    const lines = smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null;
-    return (_jsxs("pre", { className: [styles.container, styles[size], wrap ? styles.wrap : styles.noWrap].join(' '), tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { shape: "round", variant: "inline", text: copy }) })), _jsx("code", { className: styles.code, children: hasChildren
-                    ? children
-                    : lines
-                        ? lines.map((line, i) => {
-                            const isFirst = i === 0;
-                            const isFrame = looksLikeStackFrame(line);
-                            const cls = [
-                                styles.line,
-                                isFirst ? styles.lineFirst : '',
-                                isFrame ? styles.lineFrame : '',
-                            ]
-                                .filter(Boolean)
-                                .join(' ');
-                            return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
-                        })
-                        : text })] }));
+    const [isWrapped, setIsWrapped] = useState(wrap);
+    const lines = useMemo(() => (smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null), [smart, hasChildren, text]);
+    return (_jsxs("div", { className: [
+            styles.wrapper,
+            styles[size],
+            isWrapped ? styles.wrap : styles.noWrap,
+            copyButton ? styles.hasActions : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [copyButton && (_jsxs("span", { className: styles.actions, "aria-hidden": false, children: [_jsx(Button, { type: "button", variant: "inline", size: "sm", shape: "round", onClick: () => setIsWrapped(v => !v), "aria-pressed": isWrapped, active: isWrapped, title: isWrapped ? 'Ombryd ikke tekst' : 'Ombryd tekst', children: _jsx(TextWrap, { size: 16 }) }), _jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })] })), _jsx("pre", { className: styles.container, tabIndex: 0, children: _jsx("code", { className: styles.code, children: hasChildren
+                        ? children
+                        : lines
+                            ? lines.map((line, i) => {
+                                const isFirst = i === 0;
+                                const isFrame = looksLikeStackFrame(line);
+                                const cls = [
+                                    styles.line,
+                                    isFirst ? styles.lineFirst : '',
+                                    isFrame ? styles.lineFrame : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ');
+                                return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
+                            })
+                            : text }) })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,79 +1,80 @@
+.wrapper {
+  position: relative;
+  --code-actions-h: var(--component-size-sm);
+  --code-actions-inset: var(--spacing-xs);
+}
+
+/* <pre> */
 .container {
   position: relative;
   margin-block: 0;
-
-  background: var(--color-bg-contextual-subtle);
-  border: var(--border-width-thin) solid var(--color-border-default);
+  background: var(--color-bg-surface-strong);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xs);
-
   padding: var(--spacing-sm);
-  padding-inline-end: calc(var(--spacing-sm) + 40px);
-
   font-family: var(--font-family-mono);
-  line-height: var(--line-height-relaxed);
-
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  line-height: 1.35;
+  overflow: auto;
   scrollbar-gutter: stable;
-}
 
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
+  display: flex;
+  align-items: center;
 }
 
-.container.sm {
+/* Sizes */
+.sm .container {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
-.container.sm .code {
+.sm .code {
   font-size: var(--font-size-xs);
 }
 
-.container.md .code {
+.md .code {
   font-size: var(--font-size-sm);
 }
 
-.container.lg .code {
+.lg .code {
   font-size: var(--font-size-base);
 }
 
-.code {
-  display: block;
-  margin: 0;
-  font-family: var(--font-family-mono);
-  color: var(--color-fg-default);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: normal; /* <- not break-all */
+.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* Copy button stays overlayed; does not affect layout */
-.copyButton {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--spacing-xs);
-  z-index: 2;
+.sm.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
+}
 
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast) var(--ease-standard);
+.md.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-.container:hover .copyButton,
-.container:focus-within .copyButton {
-  opacity: 1;
-  pointer-events: auto;
+.lg.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* --- New: wrap control --- */
+/* Focus ring */
+.wrapper:focus-within .container {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
+}
+
+/* <code> */
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  color: var(--color-fg-default);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Wrapping modes */
 .wrap .code {
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   word-break: normal;
 }
 
@@ -83,9 +84,31 @@
   word-break: normal;
 }
 
-/* --- New: per-line styling (for smart mode) --- */
+.actions {
+  position: absolute;
+  top: var(--code-actions-inset);
+  right: var(--code-actions-inset);
+  z-index: 3;
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-surface) 70%, transparent);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.wrapper:hover .actions,
+.wrapper:focus-within .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .line {
-  display: inline; /* keep selection/copy behavior natural */
+  display: inline;
 }
 
 .lineFirst {
@@ -94,27 +117,6 @@
   color: var(--color-fg-default);
 }
 
-/* Common stack frames are “noise”; deemphasize without hiding */
 .lineFrame {
   color: var(--color-fg-subtle);
 }
-
-/* Optional: make the container a bit denser for logs */
-.container {
-  /* keep your existing properties ... */
-
-  /* Easy win: stacktraces feel less tall */
-  line-height: 1.35; /* instead of relaxed */
-}
-
-/* Optional: differentiate the code area slightly from surrounding UI */
-.container {
-  background: var(--color-bg-surface-strong); /* a touch more neutral than contextual */
-  border-color: var(--color-border-subtle);
-}
-
-/* Keep focus ring behavior */
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
-}

package/dist/components/filter-field/FilterField.d.ts

@@ -20,13 +20,14 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     options?: MultiselectOption[];
     single?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'surface' | 'outlined' | 'subtle';
     label?: string;
     placeholder?: string;
     disabled?: boolean;
     width?: string;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};