@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/filter-field/FilterField.cjs

@@ -59,6 +59,9 @@ function OperatorDropdown({
 }) {
   const popRef = react.useRef(null);
   const [activeIndex, setActiveIndex] = react.useState(() => Math.max(0, operators.indexOf(value)));
+  react.useEffect(() => {
+    setActiveIndex(Math.max(0, operators.indexOf(value)));
+  }, [operators, value]);
   const handleSelect = (op) => {
     var _a;
     onChange(op);
@@ -98,31 +101,42 @@ function FilterField({
   field,
   control,
   operator,
+  value,
   onChange,
   operators,
   options = [],
   single = true,
-  value = control === "select" ? single ? null : [] : "",
-  size = "sm",
+  size = "md",
   label,
   placeholder = "Type value\u2026",
   disabled,
   ...inputProps
 }) {
+  const [selectedOperator, setSelectedOperator] = react.useState(operator);
   const ops = react.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  const [op, setOp] = react.useState(operator);
-  const [val, setVal] = react.useState(value);
   react.useEffect(() => {
-    onChange({ field, operator: op, value: val });
-  }, [field, op, val, onChange]);
-  const emitValue = react.useCallback((next) => setVal(next), []);
+  }, [operator]);
+  react.useEffect(() => {
+    if (ops.includes(operator)) {
+      setSelectedOperator(operator);
+    }
+  }, [operator]);
+  const emit = (next) => {
+    var _a, _b, _c;
+    setSelectedOperator((_a = next.operator) != null ? _a : selectedOperator);
+    onChange({
+      field,
+      operator: (_b = next.operator) != null ? _b : selectedOperator,
+      value: (_c = next.value) != null ? _c : value
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ` ${styles__default.default.filterField} ${styles__default.default[size]}`, children: [
     label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.label} ${styles__default.default[size]}`, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       OperatorDropdown,
       {
-        value: op,
-        onChange: setOp,
+        value: selectedOperator,
+        onChange: (op) => emit({ operator: op }),
         operators: ops,
         size,
         disabled
@@ -132,24 +146,25 @@ function FilterField({
       Input.Input,
       {
         ...inputProps,
-        value: val != null ? val : "",
-        onChange: (e) => emitValue(e.currentTarget.value),
+        value: value != null ? value : "",
+        onChange: (e) => emit({ value: e.currentTarget.value }),
         inputSize: size,
         placeholder,
+        fullWidth: true,
         minWidth: "120px",
         disabled,
-        onClear: () => emitValue("")
+        onClear: () => emit({ value: "" })
       }
     ) : single ? /* @__PURE__ */ jsxRuntime.jsx(
       Select.Select,
       {
         options,
-        selectedValue: val != null ? val : null,
-        onChange: (v) => emitValue(v),
+        selectedValue: value != null ? value : null,
+        onChange: (v) => emit({ value: v }),
         placeholder,
         size,
         variant: "inline",
-        onClear: () => emitValue("")
+        onClear: () => emit({ value: "" })
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       MultiSelect.MultiSelect,
@@ -157,13 +172,13 @@ function FilterField({
         options,
         size,
         variant: "inline",
-        selectedValues: Array.isArray(val) ? val : [],
+        selectedValues: Array.isArray(value) ? value : [],
         onChange: (v) => {
-          const current = new Set(Array.isArray(val) ? val : []);
+          const current = new Set(Array.isArray(value) ? value : []);
           current.has(v) ? current.delete(v) : current.add(v);
-          emitValue(Array.from(current));
+          emit({ value: Array.from(current) });
         },
-        onClear: () => emitValue([]),
+        onClear: () => emit({ value: [] }),
         children: placeholder
       }
     ) })

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

@@ -14,15 +14,15 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     field: string;
     control: 'input' | 'select';
     operator: Operator;
+    value: string | string[] | null;
     onChange: (e: FilterEvent) => void;
     operators?: Operator[];
     options?: MultiselectOption[];
     single?: boolean;
-    value?: string | string[] | null;
     size?: 'sm' | 'md' | 'lg';
     label?: string;
     placeholder?: string;
     disabled?: boolean;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, onChange, operators, options, single, value, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;

package/dist/components/filter-field/FilterField.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { Check } from 'lucide-react';
 import { Popover } from '../popover/Popover';
 import { Input } from '../input/Input';
@@ -53,6 +53,9 @@ function OperatorDropdown({
 }) {
   const popRef = useRef(null);
   const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
+  useEffect(() => {
+    setActiveIndex(Math.max(0, operators.indexOf(value)));
+  }, [operators, value]);
   const handleSelect = (op) => {
     var _a;
     onChange(op);
@@ -92,31 +95,42 @@ function FilterField({
   field,
   control,
   operator,
+  value,
   onChange,
   operators,
   options = [],
   single = true,
-  value = control === "select" ? single ? null : [] : "",
-  size = "sm",
+  size = "md",
   label,
   placeholder = "Type value\u2026",
   disabled,
   ...inputProps
 }) {
+  const [selectedOperator, setSelectedOperator] = useState(operator);
   const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  const [op, setOp] = useState(operator);
-  const [val, setVal] = useState(value);
   useEffect(() => {
-    onChange({ field, operator: op, value: val });
-  }, [field, op, val, onChange]);
-  const emitValue = useCallback((next) => setVal(next), []);
+  }, [operator]);
+  useEffect(() => {
+    if (ops.includes(operator)) {
+      setSelectedOperator(operator);
+    }
+  }, [operator]);
+  const emit = (next) => {
+    var _a, _b, _c;
+    setSelectedOperator((_a = next.operator) != null ? _a : selectedOperator);
+    onChange({
+      field,
+      operator: (_b = next.operator) != null ? _b : selectedOperator,
+      value: (_c = next.value) != null ? _c : value
+    });
+  };
   return /* @__PURE__ */ jsxs("div", { className: ` ${styles.filterField} ${styles[size]}`, children: [
     label ? /* @__PURE__ */ jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null,
     /* @__PURE__ */ jsx(
       OperatorDropdown,
       {
-        value: op,
-        onChange: setOp,
+        value: selectedOperator,
+        onChange: (op) => emit({ operator: op }),
         operators: ops,
         size,
         disabled
@@ -126,24 +140,25 @@ function FilterField({
       Input,
       {
         ...inputProps,
-        value: val != null ? val : "",
-        onChange: (e) => emitValue(e.currentTarget.value),
+        value: value != null ? value : "",
+        onChange: (e) => emit({ value: e.currentTarget.value }),
         inputSize: size,
         placeholder,
+        fullWidth: true,
         minWidth: "120px",
         disabled,
-        onClear: () => emitValue("")
+        onClear: () => emit({ value: "" })
       }
     ) : single ? /* @__PURE__ */ jsx(
       Select,
       {
         options,
-        selectedValue: val != null ? val : null,
-        onChange: (v) => emitValue(v),
+        selectedValue: value != null ? value : null,
+        onChange: (v) => emit({ value: v }),
         placeholder,
         size,
         variant: "inline",
-        onClear: () => emitValue("")
+        onClear: () => emit({ value: "" })
       }
     ) : /* @__PURE__ */ jsx(
       MultiSelect,
@@ -151,13 +166,13 @@ function FilterField({
         options,
         size,
         variant: "inline",
-        selectedValues: Array.isArray(val) ? val : [],
+        selectedValues: Array.isArray(value) ? value : [],
         onChange: (v) => {
-          const current = new Set(Array.isArray(val) ? val : []);
+          const current = new Set(Array.isArray(value) ? value : []);
           current.has(v) ? current.delete(v) : current.add(v);
-          emitValue(Array.from(current));
+          emit({ value: Array.from(current) });
         },
-        onClear: () => emitValue([]),
+        onClear: () => emit({ value: [] }),
         children: placeholder
       }
     ) })

package/dist/components/filter-field/FilterField.module.css

@@ -4,10 +4,10 @@
   gap: 0;
   font-size: var(--font-size-sm);
   font-family: var(--font-family);
-  background: var(--color-surface);
-  color: var(--color-text);
+  background: var(--color-bg-surface);
+  color: var(--color-fg-default);
 
-  border: var(--border-width-thin) solid var(--color-border);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
   transition:
@@ -22,21 +22,19 @@
 }
 
 .filterField.sm {
-  min-block-size: calc(var(--component-size-sm) + var(--density));
+  block-size: calc(var(--component-size-sm) + var(--density));
 }
 .filterField.md {
-  min-block-size: calc(var(--component-size-md) + var(--density));
+  block-size: calc(var(--component-size-md) + var(--density));
 }
 
 .filterField .label {
   display: inline-flex;
   align-items: center;
-
-  padding-block: calc(var(--spacing-2xs) + var(--density)); /* ~2px + density */
-  padding-inline: var(--spacing-sm); /* 12px */
-
+  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-inline: var(--spacing-sm);
   font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   white-space: nowrap;
   user-select: none;
 }
@@ -45,16 +43,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
+  height: 100%;
   padding-block: calc(var(--spacing-2xs) + var(--density));
   padding-inline: var(--spacing-sm);
-
   background: var(--opac-bg-default);
-  color: var(--color-text);
+  color: var(--color-fg-default);
   border: 0;
   border-radius: 0;
   cursor: pointer;
-
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
@@ -69,7 +65,7 @@
 .filterField .operatorTrigger:disabled,
 .filterField .operatorTrigger[aria-disabled='true'] {
   cursor: not-allowed;
-  color: var(--color-disabled-text);
+  color: var(--color-disabled-fg);
   background: var(--color-disabled-bg);
 }
 
@@ -90,20 +86,18 @@
   border: 0;
   outline: none;
   background: transparent;
-  color: var(--color-text);
+  color: var(--color-fg-default);
   font: inherit;
-
   inline-size: auto;
   min-inline-size: 10ch;
-
   block-size: 100%;
 }
 
 .filterField input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
 }
 
 .filterField input:disabled {
-  color: var(--color-disabled-text);
+  color: var(--color-disabled-fg);
   cursor: not-allowed;
 }

package/dist/components/headline/Headline.cjs

@@ -18,12 +18,18 @@ function Headline({
   weight = 600,
   subHeadline,
   addition,
-  icon
+  icon,
+  tone
 }) {
   const Tag = `h${size}`;
+  const containerClassName = [styles__default.default.headlineContainer, tone ? styles__default.default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const headlineClassName = [
+    styles__default.default.headline,
+    disableMargin ? styles__default.default.noMargin : "",
+    marker ? styles__default.default.marker : ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Tag,
         {
@@ -31,7 +37,7 @@ function Headline({
             "--font-weight": weight,
             "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
           },
-          className: ` ${styles__default.default.headline} ${disableMargin ? styles__default.default.noMargin : void 0} ${marker ? `${styles__default.default.marker} ` : void 0}`,
+          className: headlineClassName,
           children: [
             icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) : null,
             children

package/dist/components/headline/Headline.d.ts

@@ -1,5 +1,6 @@
 import React, { JSX, PropsWithChildren } from 'react';
 import { Severity } from '../../constants/severity.types';
+type HeadlineTone = 'dark' | 'light';
 interface HeadlineProps extends React.AriaAttributes {
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     marker?: boolean;
@@ -9,6 +10,13 @@ interface HeadlineProps extends React.AriaAttributes {
     subHeadline?: string | JSX.Element;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
+    /**
+     * Optional visual tone override:
+     * - dark: force normal foreground colours
+     * - light: force on-strong/light text
+     * If omitted, the headline simply inherits its colour from its parent.
+     */
+    tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
 export {};

package/dist/components/headline/Headline.js

@@ -12,12 +12,18 @@ function Headline({
   weight = 600,
   subHeadline,
   addition,
-  icon
+  icon,
+  tone
 }) {
   const Tag = `h${size}`;
+  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const headlineClassName = [
+    styles.headline,
+    disableMargin ? styles.noMargin : "",
+    marker ? styles.marker : ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    " ",
-    /* @__PURE__ */ jsxs("div", { className: styles.headlineContainer, children: [
+    /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
       /* @__PURE__ */ jsxs(
         Tag,
         {
@@ -25,7 +31,7 @@ function Headline({
             "--font-weight": weight,
             "--marker-color": severity ? SeverityBgColor[severity] : void 0
           },
-          className: ` ${styles.headline} ${disableMargin ? styles.noMargin : void 0} ${marker ? `${styles.marker} ` : void 0}`,
+          className: headlineClassName,
           children: [
             icon || severity && !marker ? /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) : null,
             children

package/dist/components/headline/Headline.module.css

@@ -5,30 +5,55 @@
   flex-wrap: wrap;
 }
 
+/* Base headline: inherit colour from parent surface */
 .headline {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-sm);
-  font-weight: var(--font-weight-bold);
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
   letter-spacing: var(--letter-spacing-tight);
-  color: var(--color-text);
+  color: inherit;
   line-height: var(--line-height-tight);
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
+/* Optional tone overrides for special cases (hero sections, etc.) */
+
+.tone-dark .headline {
+  color: var(--color-fg-default);
+}
+
+.tone-light .headline {
+  color: var(--color-fg-on-strong);
+}
+
 .noMargin {
   margin: 0;
 }
 
-.marker {
-  border-inline-start: var(--border-width-thick) solid var(--marker-color);
-  padding-inline-start: var(--spacing-sm);
+.headline.marker {
+  padding-inline-start: calc(var(--border-width-thick) + var(--spacing-sm));
+}
+
+.headline.marker::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--border-width-thick);
+  background-color: var(--marker-color, var(--color-brand));
   border-start-start-radius: var(--border-radius-default);
   border-end-start-radius: var(--border-radius-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+  pointer-events: none;
 }
 
+/* Subheadline inherits colour but is slightly softened,
+   so it works on both light and dark text surfaces. */
 .subHeadline {
-  color: var(--color-text-muted);
+  color: inherit;
+  opacity: 0.85;
   font-size: var(--font-size-md);
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);

package/dist/components/icon/Icon.module.css

@@ -1,8 +1,9 @@
 .container {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-secondary);
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
 }
 
 .icon {
@@ -10,25 +11,25 @@
 }
 
 .icon svg {
-  height: var(--icon-size);
+  height: var(--icon-size-md);
 }
 
 .success {
-  color: var(--color-success);
+  color: var(--color-status-success);
 }
 
 .error {
-  color: var(--color-error);
+  color: var(--color-status-error);
 }
 
 .warning {
-  color: var(--color-warning);
+  color: var(--color-status-warning);
 }
 
 .info {
-  color: var(--color-info);
+  color: var(--color-status-info);
 }
 
 .brand {
-  color: var(--color-text-on-primary);
+  color: var(--color-fg-on-brand);
 }

package/dist/components/input/Input.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var styles = require('../input/Input.module.css');
 var ClearButton = require('../clear-button/ClearButton');
+var Button = require('../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,30 +19,70 @@ function mergeRefs(...refs) {
     }
   };
 }
-const Input = react.forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
+const Input = react.forwardRef(function Input2({
+  label,
+  icon,
+  minWidth,
+  width,
+  fullWidth,
+  inputSize = "md",
+  variant = "outlined",
+  autoFocus,
+  onClear,
+  onButtonClick,
+  buttonLabel,
+  buttonIcon,
+  style,
+  ...rest
+}, ref) {
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     var _a;
     if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, [autoFocus]);
-  console.log(rest);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.inputWrapper, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: label,
-          ...rest,
-          ref: mergeRefs(inputRef, ref),
-          style: { minWidth: minWidth || "200px" },
-          className: `${styles__default.default.input} ${icon ? styles__default.default.inputWithIcon : ""} ${inputSize ? styles__default.default[inputSize] : ""} ${styles__default.default[variant]}`
-        }
-      ),
-      onClear && rest.value && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, absolute: true })
-    ] })
-  ] });
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: rootStyle,
+      className: [
+        styles__default.default.container,
+        fullWidth ? styles__default.default.fullWidth : "",
+        onClear ? styles__default.default.withClear : "",
+        hasButton ? styles__default.default.withButton : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: label,
+              ...rest,
+              ref: mergeRefs(inputRef, ref),
+              className: [
+                styles__default.default.input,
+                icon ? styles__default.default.inputWithIcon : "",
+                inputSize ? styles__default.default[inputSize] : "",
+                styles__default.default[variant]
+              ].filter(Boolean).join(" ")
+            }
+          ),
+          onClear && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, absolute: true })
+        ] }),
+        hasButton && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick: onButtonClick, className: styles__default.default.trailingButton, children: [
+          buttonIcon != null ? buttonIcon : null,
+          buttonLabel != null ? buttonLabel : null
+        ] })
+      ]
+    }
+  );
 });
 Input.displayName = "Input";
 

package/dist/components/input/Input.d.ts

@@ -5,9 +5,14 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     label?: string;
     icon?: React.ReactNode;
     autoFocus?: boolean;
-    minWidth?: string;
+    minWidth?: string | number;
+    width?: string | number;
+    fullWidth?: boolean;
     inputSize?: Size;
     variant?: InputVariant;
     onClear?: () => void;
+    onButtonClick?: () => void;
+    buttonLabel?: string;
+    buttonIcon?: React.ReactNode;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;