@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/accordion/components/AccordionRow.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './AccordionRow.module.css';
+
+function useCollapsibleHeight(isOpen, shouldAnimate) {
+  const innerRef = useRef(null);
+  const [height, setHeight] = useState("0px");
+  const prevIsOpenRef = useRef(isOpen);
+  useLayoutEffect(() => {
+    var _a, _b;
+    const el = innerRef.current;
+    if (!el) return;
+    const prevIsOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    const isOpenChanged = prevIsOpen !== isOpen;
+    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
+    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
+      setHeight(isOpen ? "auto" : "0px");
+      return;
+    }
+    if (isOpen) {
+      setHeight("0px");
+      requestAnimationFrame(() => {
+        setHeight(`${el.scrollHeight}px`);
+      });
+    } else {
+      setHeight(`${el.scrollHeight}px`);
+      requestAnimationFrame(() => {
+        setHeight("0px");
+      });
+    }
+  }, [isOpen, shouldAnimate]);
+  function onTransitionEnd(e) {
+    if (e.propertyName !== "height") return;
+    if (!innerRef.current) return;
+    if (isOpen) setHeight("auto");
+  }
+  return { innerRef, height, onTransitionEnd };
+}
+function AccordionRow({
+  uid,
+  index,
+  item,
+  isOpen,
+  onToggle,
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default",
+  renderMode = "lazy"
+}) {
+  const isDisabled = !!item.disabled;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const buttonId = `${uid}-acc-btn-${index}`;
+  const panelId = `${uid}-acc-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  const [hasBeenOpened, setHasBeenOpened] = useState(isOpen);
+  const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `${styles.item} ${isOpen ? styles.open : ""} ${isDisabled ? styles.disabled : ""}`,
+      "data-state": isOpen ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: buttonId,
+              className: styles.trigger,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
+                  item.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.headerIcon }) : null,
+                  /* @__PURE__ */ jsx(
+                    Headline,
+                    {
+                      disableMargin: true,
+                      size: headlineSize,
+                      weight: headlineWeight,
+                      severity: item.severity,
+                      subheader: item.subheader,
+                      allowWrap: isOpen,
+                      children: item.header
+                    }
+                  ),
+                  item.headerAddition ? /* @__PURE__ */ jsx("div", { className: styles.headerAddition, children: item.headerAddition }) : null
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+              ]
+            }
+          ),
+          item.headerActions ? /* @__PURE__ */ jsx("div", { className: styles.headerActions, onClick: (event) => event.stopPropagation(), children: item.headerActions }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": buttonId,
+            className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
+            style: { height },
+            onTransitionEnd,
+            children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: shouldRenderChildren ? item.children : null })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AccordionRow };

package/dist/components/accordion/components/AccordionRow.module.css

@@ -0,0 +1,129 @@
+.headerRow {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
+}
+
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  flex: 1 1 auto;
+
+  cursor: pointer;
+  user-select: none;
+
+  font-size: var(--acc-font-size);
+  padding: var(--acc-trigger-py) var(--acc-trigger-px);
+  background: transparent;
+
+  min-width: 0;
+}
+
+.headerActions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding-block: var(--acc-trigger-py);
+  padding-inline: 0 var(--acc-trigger-px);
+}
+
+.headerActions > * {
+  flex: 0 0 auto;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.headerAddition {
+  display: flex;
+  align-items: baseline;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+}
+
+.icon svg {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.chevron svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.open .chevron {
+  transform: rotate(180deg);
+}
+
+.panel {
+  overflow: hidden;
+  height: 0px;
+}
+
+/* Default: animate only when class is present */
+.animate {
+  transition: height var(--transition-slow) var(--ease-decelerate);
+}
+
+/* No animation (initial render default-open) */
+.noAnimate {
+  transition: none;
+}
+
+.content {
+  padding: var(--acc-content-py) var(--acc-content-px, 0);
+}
+
+.item {
+  border-bottom: var(--acc-item-separator, none);
+}
+
+:global(.outlined) .item[data-state='open'] .headerRow {
+  box-shadow: inset 3px 0 0 var(--color-border-selected);
+}
+
+.item:last-child {
+  border-bottom: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    transition: none;
+  }
+}

package/dist/components/alert/Alert.cjs

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Alert.module.css');
+var Headline = require('../headline/Headline');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Alert({
+  children,
+  title,
+  headlineSize = 3,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  maxWidth = "72ch",
+  role = "status"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        styles__default.default.container,
+        styles__default.default[severity],
+        fullWidth ? styles__default.default.fullWidth : "",
+        hasLeading ? styles__default.default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      style: {
+        "--alert-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
+      role,
+      children: [
+        hasLeading && !title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.titleRow, children: [
+            hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.title, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.Alert = Alert;

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface AlertProps {
+    children: ReactNode;
+    title?: ReactNode;
+    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    severity?: Severity;
+    customIcon?: ReactNode;
+    disableIcon?: boolean;
+    fullWidth?: boolean;
+    maxWidth?: string | number;
+    role?: 'status' | 'alert';
+}
+export declare function Alert({ children, title, headlineSize, severity, customIcon, disableIcon, fullWidth, maxWidth, role, }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Alert.module.css';
+import { Headline } from '../headline/Headline';
+import { Icon } from '../icon/Icon';
+
+function Alert({
+  children,
+  title,
+  headlineSize = 3,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  maxWidth = "72ch",
+  role = "status"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        styles.container,
+        styles[severity],
+        fullWidth ? styles.fullWidth : "",
+        hasLeading ? styles.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      style: {
+        "--alert-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
+      role,
+      children: [
+        hasLeading && !title ? /* @__PURE__ */ jsx("div", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          title ? /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
+            hasLeading ? /* @__PURE__ */ jsx("div", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+            /* @__PURE__ */ jsx("div", { className: styles.title, children: /* @__PURE__ */ jsx(Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
+          ] }) : null,
+          /* @__PURE__ */ jsx("div", { className: styles.body, children })
+        ] })
+      ]
+    }
+  );
+}
+
+export { Alert };

package/dist/components/alert/Alert.module.css

@@ -0,0 +1,102 @@
+.container {
+  --alert-bg: var(--color-bg-toolbar);
+  --alert-fg: var(--color-fg-default);
+  --alert-border: var(--color-border-subtle);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  inline-size: min(100%, var(--alert-max-width, 72ch));
+  max-inline-size: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--alert-border);
+  border-radius: var(--border-radius-default);
+  background: var(--alert-bg);
+  color: var(--alert-fg);
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  inline-size: 100%;
+}
+
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.leading svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+  color: currentColor;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.title,
+.body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.body {
+  font-size: var(--font-size-sm);
+}
+
+.neutral {
+  --alert-bg: var(--color-bg-toolbar);
+  --alert-fg: var(--color-fg-default);
+  --alert-border: var(--color-border-subtle);
+}
+
+.success {
+  --alert-bg: var(--color-status-success-bg);
+  --alert-fg: var(--color-status-success-fg);
+  --alert-border: var(--color-status-success-border);
+}
+
+.warning {
+  --alert-bg: var(--color-status-warning-bg);
+  --alert-fg: var(--color-status-warning-fg);
+  --alert-border: var(--color-status-warning-border);
+}
+
+.error {
+  --alert-bg: var(--color-status-error-bg);
+  --alert-fg: var(--color-status-error-fg);
+  --alert-border: var(--color-status-error-border);
+}
+
+.info {
+  --alert-bg: var(--color-status-info-bg);
+  --alert-fg: var(--color-status-info-fg);
+  --alert-border: var(--color-status-info-border);
+}
+
+.brand {
+  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --alert-fg: var(--color-brand);
+  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
+.accent {
+  --alert-bg: var(--color-accent-bg);
+  --alert-fg: var(--color-accent-fg);
+  --alert-border: var(--color-accent-border);
+}

package/dist/components/app-header/AppHeader.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./AppHeader.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function AppHeader({ children, size = "md" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "data-size": size, children }) });
+}
+
+exports.AppHeader = AppHeader;

package/dist/components/app-header/AppHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, JSX } from 'react';
+export type AppHeaderSize = 'md' | 'lg';
+interface AppHeaderProps {
+    children: ReactNode;
+    size?: AppHeaderSize;
+}
+export declare function AppHeader({ children, size }: AppHeaderProps): JSX.Element;
+export {};

package/dist/components/app-header/AppHeader.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './AppHeader.module.css';
+
+function AppHeader({ children, size = "md" }) {
+  return /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("div", { className: styles.container, "data-size": size, children }) });
+}
+
+export { AppHeader };

package/dist/components/app-header/AppHeader.module.css

@@ -0,0 +1,74 @@
+.header {
+  inline-size: 100%;
+  background-color: var(--color-bg-surface);
+}
+
+.container {
+  /* layout */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+
+  /* sizing */
+  inline-size: 100%;
+  min-block-size: 60px;
+  box-sizing: border-box;
+
+  /* chrome */
+  color: var(--color-fg-default);
+
+  /* density-aware vertical rhythm */
+  padding-block: calc(var(--control-padding-y) + var(--density));
+}
+
+.container[data-size='lg'] {
+  min-block-size: 80px;
+}
+
+/* Optional content wrapper */
+.inner {
+  inline-size: min(100%, var(--container-xl));
+  margin-inline: auto;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+}
+
+/* Slots */
+.start,
+.center,
+.end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.center {
+  margin-inline: auto;
+}
+
+/* Interactive elements inside the header share focus visuals */
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Elevated header */
+.elevated {
+  border-block-end: 0;
+  box-shadow: var(--shadow-sm);
+}
+
+/* Transparent header */
+.transparent {
+  background-color: transparent;
+  border-block-end: 0;
+}
+
+/* Condensed density option */
+:root[data-density='compact'] .container {
+  padding-inline: var(--spacing-md);
+}

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var severity = require('../../constants/severity');
+var styles = require('./AttributeChip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function AttributeChip({
+  label,
+  value,
+  size = "md",
+  loading,
+  severity: severity$1
+}) {
+  const markerSeverity = severity$1 && severity$1 !== "neutral" ? severity$1 : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+      !markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" }) : null
+    ] }) : null,
+    markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: styles__default.default.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": severity.SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+  ] });
+}
+
+exports.AttributeChip = AttributeChip;

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface AttributeChipProps {
+    label?: string;
+    value: string | number | boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    severity?: Severity;
+}
+export declare function AttributeChip({ label, value, size, loading, severity, }: AttributeChipProps): JSX.Element;
+export {};

package/dist/components/attribute-chip/AttributeChip.js

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { SeverityBgColor } from '../../constants/severity';
+import styles from './AttributeChip.module.css';
+
+function AttributeChip({
+  label,
+  value,
+  size = "md",
+  loading,
+  severity
+}) {
+  const markerSeverity = severity && severity !== "neutral" ? severity : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
+    label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+      !markerSeverity ? /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" }) : null
+    ] }) : null,
+    markerSeverity ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+  ] });
+}
+
+export { AttributeChip };