@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -0,0 +1,38 @@
+.countAdornment {
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-right: var(--spacing-xxs);
+}
+
+.chipRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chevronButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.selectedValues {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.inputWithoutStartPadding {
+  padding-inline-start: 0;
+}
+
+.typeaheadInput {
+  cursor: pointer;
+}

package/dist/components/grid/Grid.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Grid.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const GAP_TOKEN = {
+  none: "0",
+  xs: "var(--spacing-xs)",
+  sm: "var(--spacing-sm)",
+  md: "var(--spacing-md)",
+  lg: "var(--spacing-lg)",
+  xl: "var(--spacing-xl)"
+};
+function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.grid, equalHeight && styles__default.default.equalHeight, className].filter(Boolean).join(" "),
+      style: { gap: GAP_TOKEN[gap], ...style },
+      children
+    }
+  );
+}
+function GridItem({ children, base = 12, md, lg, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.item, className].filter(Boolean).join(" "),
+      style: {
+        "--span-base": base,
+        ...md != null ? { "--span-md": md } : {},
+        ...lg != null ? { "--span-lg": lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;

package/dist/components/grid/Grid.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './Grid.module.css';
+
+const GAP_TOKEN = {
+  none: "0",
+  xs: "var(--spacing-xs)",
+  sm: "var(--spacing-sm)",
+  md: "var(--spacing-md)",
+  lg: "var(--spacing-lg)",
+  xl: "var(--spacing-xl)"
+};
+function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.grid, equalHeight && styles.equalHeight, className].filter(Boolean).join(" "),
+      style: { gap: GAP_TOKEN[gap], ...style },
+      children
+    }
+  );
+}
+function GridItem({ children, base = 12, md, lg, className, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.item, className].filter(Boolean).join(" "),
+      style: {
+        "--span-base": base,
+        ...md != null ? { "--span-md": md } : {},
+        ...lg != null ? { "--span-lg": lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+
+export { Grid, GridItem };

package/dist/components/grid/Grid.module.css

@@ -0,0 +1,35 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+}
+
+.equalHeight {
+  align-items: stretch;
+}
+
+.item {
+  grid-column: span var(--span-base, 12);
+  min-inline-size: 0;
+}
+
+.equalHeight .item {
+  display: flex;
+}
+
+.equalHeight .item > * {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+@media (min-width: 768px) {
+  .item {
+    grid-column: span var(--span-md, var(--span-base, 12));
+  }
+}
+
+@media (min-width: 1200px) {
+  .item {
+    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
+  }
+}

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -0,0 +1,89 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Headline = require('./Headline');
+var styles = require('./Headline.module.css');
+var Button = require('../button/Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CollapsibleHeadline({
+  header,
+  expanded,
+  onToggle,
+  controls,
+  addition,
+  storageKey,
+  children,
+  size = 2,
+  variant = "muted",
+  weight = 400,
+  ...headlineProps
+}) {
+  const generatedId = react.useId();
+  const panelId = controls != null ? controls : generatedId;
+  const isControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = react.useState(false);
+  const [hasToggled, setHasToggled] = react.useState(false);
+  const persistedExpanded = react.useSyncExternalStore(
+    () => () => void 0,
+    () => {
+      if (isControlled || !storageKey) return false;
+      return localStorage.getItem(storageKey) === "true";
+    },
+    () => false
+  );
+  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
+  const handleToggle = () => {
+    const next = !isExpanded;
+    if (!isControlled) {
+      setHasToggled(true);
+      setInternalExpanded(next);
+      if (storageKey) {
+        localStorage.setItem(storageKey, String(next));
+      }
+    }
+    onToggle == null ? void 0 : onToggle();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.collapsibleRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Headline.Headline,
+      {
+        ...headlineProps,
+        variant,
+        weight,
+        size,
+        addition,
+        children: [
+          header,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              shape: "round",
+              type: "button",
+              variant: "inline",
+              "aria-expanded": isExpanded,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: [styles__default.default.toggleChevron, isExpanded ? styles__default.default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { id: panelId, className: styles__default.default.collapsiblePanel, children })
+  ] });
+}
+
+exports.CollapsibleHeadline = CollapsibleHeadline;

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

@@ -3,7 +3,7 @@ import type { HeadlineProps } from './Headline';
 export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
     /** The headline text — always visible. */
     header: React.ReactNode;
-    /** Controlled expanded state. Required when `storageKey` is not set. */
+    /** Controlled expanded state. When omitted, the component manages its own state. */
     expanded?: boolean;
     /** Called when the toggle is clicked. */
     onToggle?: () => void;
@@ -12,9 +12,9 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
     /** Extra content rendered between the headline text and the toggle button. */
     addition?: React.ReactNode;
     /**
-     * When set the component manages its own expanded state, persisted to
-     * localStorage under this key. `expanded` is used as the initial value
-     * if nothing is stored yet; `onToggle` is still called after each toggle.
+     * When set in uncontrolled mode, the component persists its expanded
+     * state to localStorage under this key. The server render still starts
+     * collapsed to stay hydration-safe.
      */
     storageKey?: string;
 }

package/dist/components/headline/CollapsibleHeadline.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+import { useId, useState, useSyncExternalStore } from 'react';
+import { Headline } from './Headline';
+import styles from './Headline.module.css';
+import { Button } from '../button/Button';
+
+function CollapsibleHeadline({
+  header,
+  expanded,
+  onToggle,
+  controls,
+  addition,
+  storageKey,
+  children,
+  size = 2,
+  variant = "muted",
+  weight = 400,
+  ...headlineProps
+}) {
+  const generatedId = useId();
+  const panelId = controls != null ? controls : generatedId;
+  const isControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  const [hasToggled, setHasToggled] = useState(false);
+  const persistedExpanded = useSyncExternalStore(
+    () => () => void 0,
+    () => {
+      if (isControlled || !storageKey) return false;
+      return localStorage.getItem(storageKey) === "true";
+    },
+    () => false
+  );
+  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
+  const handleToggle = () => {
+    const next = !isExpanded;
+    if (!isControlled) {
+      setHasToggled(true);
+      setInternalExpanded(next);
+      if (storageKey) {
+        localStorage.setItem(storageKey, String(next));
+      }
+    }
+    onToggle == null ? void 0 : onToggle();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.collapsibleRoot, children: [
+    /* @__PURE__ */ jsxs(
+      Headline,
+      {
+        ...headlineProps,
+        variant,
+        weight,
+        size,
+        addition,
+        children: [
+          header,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              shape: "round",
+              type: "button",
+              variant: "inline",
+              "aria-expanded": isExpanded,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              children: /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: styles.collapsiblePanel, children })
+  ] });
+}
+
+export { CollapsibleHeadline };

package/dist/components/headline/Headline.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Headline.module.css');
+var severity = require('../../constants/severity');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity: severity$1,
+  weight = 600,
+  subheader,
+  addition,
+  icon,
+  tone,
+  variant,
+  allowWrap = true,
+  id
+}) {
+  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 : "",
+    variant === "muted" ? styles__default.default["variant-muted"] : ""
+  ].filter(Boolean).join(" ");
+  const textClassName = [styles__default.default.text, allowWrap ? styles__default.default.wrap : styles__default.default.truncate].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineBlock, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tag,
+        {
+          id,
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
+          },
+          className: headlineClassName,
+          children: [
+            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children })
+          ]
+        }
+      ),
+      addition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.addition, children: addition }) : null
+    ] }),
+    subheader ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.subheader, children: subheader }) : null
+  ] }) });
+}
+
+exports.Headline = Headline;

package/dist/components/headline/Headline.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Headline.module.css';
+import { SeverityBgColor } from '../../constants/severity';
+import { Icon } from '../icon/Icon';
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity,
+  weight = 600,
+  subheader,
+  addition,
+  icon,
+  tone,
+  variant,
+  allowWrap = true,
+  id
+}) {
+  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 : "",
+    variant === "muted" ? styles["variant-muted"] : ""
+  ].filter(Boolean).join(" ");
+  const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxs("div", { className: styles.headlineBlock, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.headlineRow, children: [
+      /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          id,
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity ? SeverityBgColor[severity] : void 0
+          },
+          className: headlineClassName,
+          children: [
+            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) }) : null,
+            /* @__PURE__ */ jsx("span", { className: textClassName, children })
+          ]
+        }
+      ),
+      addition ? /* @__PURE__ */ jsx("div", { className: styles.addition, children: addition }) : null
+    ] }),
+    subheader ? /* @__PURE__ */ jsx("div", { className: styles.subheader, children: subheader }) : null
+  ] }) });
+}
+
+export { Headline };

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

@@ -0,0 +1,185 @@
+.headlineContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-lg);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.headlineBlock {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--spacing-xxs);
+}
+
+.headlineRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  min-width: 0;
+}
+
+/* Base headline */
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block: var(--spacing-xs);
+
+  /* Typography */
+  font-weight: var(--font-weight, 600);
+  letter-spacing: var(--letter-spacing-tight);
+  line-height: var(--line-height-tight);
+  color: inherit;
+
+  /* Behaviour */
+  transition: color var(--transition-fast) var(--ease-standard);
+  min-width: 0; /* required for truncation inside flex */
+}
+
+/* CollapsibleHeadline wrapper */
+.collapsibleRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsiblePanel {
+  display: contents;
+}
+
+/* CollapsibleHeadline toggle button */
+.toggleButton {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  color: var(--color-fg-subtle);
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.toggleButton:hover {
+  color: var(--color-fg-default);
+}
+
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toggleChevron {
+  display: block;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.toggleChevronExpanded {
+  transform: rotate(180deg);
+}
+
+/* Variant overrides */
+.variant-muted {
+  color: var(--color-fg-subtle);
+}
+
+/* Tone overrides */
+.tone-dark .headline {
+  color: var(--color-fg-default);
+}
+
+.tone-light .headline {
+  color: var(--color-fg-on-strong);
+}
+
+.noMargin {
+  margin: 0;
+}
+
+/* Marker variant */
+.headline.marker {
+  padding-inline-start: calc(var(--border-width-medium) + var(--spacing-sm));
+}
+
+.headline.marker::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: 0.75em;
+  inset-inline-start: 0;
+  inline-size: var(--border-width-medium);
+  background-color: var(--marker-color, var(--color-brand));
+  border-radius: var(--border-radius-sm);
+  pointer-events: none;
+}
+
+/* Subheader */
+.subheader {
+  font-size: var(--font-size-sm);
+  margin-block-start: calc(var(--spacing-2xs) * -1);
+  color: var(--color-fg-subtle);
+  line-height: var(--line-height-normal);
+}
+
+.addition {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+}
+
+/* Icon */
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Text wrapper (allows shrinking inside flex layouts) */
+.text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Text behaviour */
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap {
+  white-space: normal;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+}
+
+@media (max-width: 767px) {
+  .headlineRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+
+  .headlineContainer h1.headline {
+    font-size: var(--font-size-xl);
+  }
+
+  .headlineContainer h2.headline {
+    font-size: var(--font-size-lg);
+  }
+
+  .addition {
+    inline-size: 100%;
+  }
+}