@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/card/Card.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Card.module.css';
+import { CardMetaRow, CardMeta } from './components/CardMeta';
+import { Headline } from '../headline/Headline';
+import { Hyperlink } from '../hyperlink/Hyperlink';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
+
+function getInnerPlacementClass(imgPlacement, s) {
+  switch (imgPlacement) {
+    case "top":
+      return s.innerImgTop;
+    case "right":
+      return s.innerImgRight;
+    case "left":
+    default:
+      return s.innerImgLeft;
+  }
+}
+function getVariantClass(variant, s) {
+  switch (variant) {
+    case "subtle":
+      return s.variantSubtle;
+    case "default":
+    default:
+      return s.variantDefault;
+  }
+}
+function CardImpl({
+  title,
+  subheader,
+  loading = false,
+  variant = "default",
+  size = "md",
+  elevation = "sm",
+  headerMarker = true,
+  headerIcon,
+  headerAddition,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width,
+  headlineSize = 3,
+  truncateTitle = false
+}) {
+  var _a;
+  const outerStyle = width != null ? {
+    width: typeof width === "number" ? `${width}px` : width,
+    flex: "0 0 auto"
+  } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = getInnerPlacementClass(imgPlacement, styles);
+  const variantClass = getVariantClass(variant, styles);
+  const elevationClass = (_a = styles[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : styles.elevationSm;
+  const hasHeader = !!title || !!headerMeta;
+  const showSection = !loading && (showSectionDivider || !!sectionTitle);
+  const showBody = !loading && !!children;
+  const showActions = !loading && !!actions;
+  const inner = /* @__PURE__ */ jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [
+    image ? /* @__PURE__ */ jsx("div", { className: styles.media, style: mediaStyle, children: image }) : null,
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      hasHeader ? /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+        title ? /* @__PURE__ */ jsx(
+          Headline,
+          {
+            severity,
+            marker: Boolean(severity) && headerMarker,
+            icon: headerIcon,
+            addition: headerAddition,
+            subheader,
+            size: headlineSize,
+            weight: 500,
+            disableMargin: true,
+            allowWrap: !truncateTitle,
+            children: title
+          }
+        ) : null,
+        headerMeta ? /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta }) : null
+      ] }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
+      showSection ? /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        showSectionDivider ? /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }) : null,
+        sectionTitle ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null
+      ] }) : null,
+      showBody ? /* @__PURE__ */ jsx("div", { className: styles.body, children }) : null,
+      showActions ? /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions }) : null
+    ] })
+  ] });
+  const cardContent = link ? /* @__PURE__ */ jsx(Hyperlink, { children: link }) : inner;
+  return /* @__PURE__ */ jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${styles.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
+}
+const Card = Object.assign(CardImpl, {
+  Meta: CardMeta,
+  MetaRow: CardMetaRow
+});
+
+export { Card };

package/dist/components/card/Card.module.css

@@ -0,0 +1,191 @@
+.outerContainer {
+  flex: 0 1 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+/* Card surface */
+.container {
+  height: 100%;
+  border-radius: var(--border-radius-md);
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-subtle);
+  padding: var(--card-padding, var(--spacing-lg));
+  overflow: hidden;
+
+  /* Optional: ensure background sits under border */
+  background-clip: padding-box;
+}
+
+/* When image is present: no container padding — image bleeds to edges */
+.container:has(.media) {
+  padding: 0;
+}
+
+.container:has(.media) .content {
+  padding: var(--card-padding, var(--spacing-lg));
+}
+
+.inner:has(.media) {
+  gap: 0;
+}
+
+.elevationNone {
+  box-shadow: none;
+}
+
+/* xs = border-only, no shadow */
+.elevationXs {
+  border: 1px solid var(--color-border-default);
+}
+
+/* sm and above = shadow only, no border */
+.elevationSm {
+  box-shadow: var(--shadow-sm);
+}
+
+.elevationMd {
+  box-shadow: var(--shadow-md);
+}
+
+/* Variants */
+.variantDefault {
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
+}
+
+.variantSubtle {
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
+}
+
+/* Sizes */
+.sm {
+  --card-padding: var(--spacing-md);
+}
+
+.md {
+  --card-padding: var(--spacing-lg);
+}
+
+.lg {
+  --card-padding: var(--spacing-xl);
+}
+
+.sm .content {
+  gap: var(--spacing-xs);
+}
+
+.md .content {
+  gap: var(--spacing-sm);
+}
+
+.lg .content {
+  gap: var(--spacing-md);
+}
+
+/* Layout */
+.inner {
+  display: flex;
+  gap: var(--spacing-lg);
+  height: 100%;
+  min-width: 0;
+}
+
+.innerImgLeft {
+  flex-direction: row;
+}
+
+.innerImgRight {
+  flex-direction: row-reverse;
+}
+
+.innerImgTop {
+  flex-direction: column;
+}
+
+.media {
+  flex: 0 0 var(--card-media-width, auto);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  min-width: 0;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  min-width: 0;
+}
+
+.headerMeta {
+  flex: 0 0 auto;
+}
+
+/* Body */
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* Actions */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin-top: auto;
+}
+
+/* Section */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.sectionDivider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-subtle);
+}
+
+.sectionTitle {
+  font-weight: 500;
+}
+
+/* Loading */
+.loadingBody {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 180px;
+}
+
+/* Responsive */
+@media screen and (max-width: 767px) {
+  .outerContainer {
+    flex: 0 0 100% !important;
+    width: 100% !important;
+    max-width: 100%;
+  }
+
+  .inner,
+  .innerImgLeft,
+  .innerImgRight,
+  .innerImgTop {
+    flex-direction: column;
+  }
+
+  .header {
+    flex-direction: column;
+  }
+}

package/dist/components/card/components/CardMeta.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./CardMeta.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function getColsClass(columns) {
+  switch (columns) {
+    case 1:
+      return styles__default.default.cols1;
+    case 3:
+      return styles__default.default.cols3;
+    case 2:
+    default:
+      return styles__default.default.cols2;
+  }
+}
+function CardMeta({
+  columns = 2,
+  className,
+  children,
+  ...rest
+}) {
+  const colsClass = getColsClass(columns);
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { ...rest, className: [styles__default.default.grid, colsClass, className].filter(Boolean).join(" "), children });
+}
+function CardMetaRow({
+  label,
+  value,
+  className,
+  nowrapValue,
+  labelWidth,
+  boldValue = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [styles__default.default.row, className].filter(Boolean).join(" "),
+      style: labelWidth ? { ["--label-width"]: labelWidth } : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: styles__default.default.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "dd",
+          {
+            className: [
+              styles__default.default.value,
+              !boldValue ? styles__default.default.valueRegular : styles__default.default.valueBold,
+              nowrapValue ? styles__default.default.nowrap : ""
+            ].filter(Boolean).join(" "),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.CardMeta = CardMeta;
+exports.CardMetaRow = CardMetaRow;

package/dist/components/card/components/CardMeta.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+export type CardMetaProps = {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDListElement>, 'children'>;
+export type CardMetaRowProps = {
+    label: ReactNode;
+    value: ReactNode;
+    className?: string;
+    nowrapValue?: boolean;
+    labelWidth?: string;
+    boldValue?: boolean;
+};
+export declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
+export declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue, }: CardMetaRowProps): JSX.Element;

package/dist/components/card/components/CardMeta.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './CardMeta.module.css';
+
+function getColsClass(columns) {
+  switch (columns) {
+    case 1:
+      return styles.cols1;
+    case 3:
+      return styles.cols3;
+    case 2:
+    default:
+      return styles.cols2;
+  }
+}
+function CardMeta({
+  columns = 2,
+  className,
+  children,
+  ...rest
+}) {
+  const colsClass = getColsClass(columns);
+  return /* @__PURE__ */ jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(" "), children });
+}
+function CardMetaRow({
+  label,
+  value,
+  className,
+  nowrapValue,
+  labelWidth,
+  boldValue = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [styles.row, className].filter(Boolean).join(" "),
+      style: labelWidth ? { ["--label-width"]: labelWidth } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: [
+              styles.value,
+              !boldValue ? styles.valueRegular : styles.valueBold,
+              nowrapValue ? styles.nowrap : ""
+            ].filter(Boolean).join(" "),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CardMeta, CardMetaRow };

package/dist/components/card/components/CardMeta.module.css

@@ -0,0 +1,55 @@
+.grid {
+  margin: 0;
+  display: grid;
+  gap: var(--spacing-xs) var(--spacing-lg);
+}
+
+/* Base: single column */
+.cols1,
+.cols2,
+.cols3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .cols2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cols3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.row {
+  --label-width: 120px;
+  display: grid;
+  grid-template-columns: var(--label-width) 1fr;
+  gap: var(--spacing-xs);
+  align-items: baseline;
+  min-inline-size: 0;
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.value {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-default);
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.valueBold {
+  font-weight: var(--font-weight-medium);
+}
+
+.nowrap {
+  white-space: nowrap;
+}

package/dist/components/card-container/CardContainer.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../../components/headline/Headline');
+var styles = require('./CardContainer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CardContainer({
+  children,
+  headline,
+  subheader,
+  expand,
+  severity,
+  displayHeaderMarker
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.wrapper, children: [
+    headline && /* @__PURE__ */ jsxRuntime.jsx(
+      Headline.Headline,
+      {
+        marker: displayHeaderMarker,
+        severity,
+        disableMargin: true,
+        subheader,
+        children: headline
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+  ] });
+}
+
+exports.CardContainer = CardContainer;

package/dist/components/card-container/CardContainer.d.ts

@@ -0,0 +1,12 @@
+import type { JSX, ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface CardContainerProps {
+    headline?: string;
+    subheader?: ReactNode;
+    children?: ReactNode[];
+    expand?: boolean;
+    severity?: Severity;
+    displayHeaderMarker?: boolean;
+}
+export declare function CardContainer({ children, headline, subheader, expand, severity, displayHeaderMarker, }: CardContainerProps): JSX.Element;
+export {};

package/dist/components/card-container/CardContainer.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../../components/headline/Headline';
+import styles from './CardContainer.module.css';
+
+function CardContainer({
+  children,
+  headline,
+  subheader,
+  expand,
+  severity,
+  displayHeaderMarker
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    headline && /* @__PURE__ */ jsx(
+      Headline,
+      {
+        marker: displayHeaderMarker,
+        severity,
+        disableMargin: true,
+        subheader,
+        children: headline
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+  ] });
+}
+
+export { CardContainer };

package/dist/components/card-container/CardContainer.module.css

@@ -0,0 +1,63 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  --card-container-gap: var(--spacing-md);
+  border-radius: var(--border-radius-md);
+}
+
+.container.default {
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.container.subtle {
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.container.strong {
+  background-color: var(
+    --card-bg-strong,
+    var(--color-bg-surface-strong, var(--color-surface-strong))
+  );
+  color: var(--card-fg-on-strong, var(--color-fg-on-strong, #ffffff));
+  padding: var(--spacing-lg);
+}
+
+.container.accent1 {
+  background-color: var(
+    --card-bg-accent-1,
+    var(--color-bg-accent-1, var(--color-bg-surface-subtle))
+  );
+  padding: var(--spacing-lg);
+}
+
+.container.accent2 {
+  background-color: var(
+    --card-bg-accent-2,
+    var(--color-bg-accent-2, var(--color-bg-surface-subtle))
+  );
+  padding: var(--spacing-lg);
+}
+
+.container > * {
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+/* Mobile: stack */
+@media screen and (max-width: 767px) {
+  .container > * {
+    flex-basis: 100% !important;
+    max-width: 100%;
+  }
+}

package/dist/components/chip/Chip.cjs

@@ -0,0 +1,65 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./Chip.module.css');
+var Icon = require('../icon/Icon');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Chip({
+  children,
+  severity = "neutral",
+  loading,
+  disableIcon = true,
+  fullWidth = false,
+  size = "sm",
+  customIcon,
+  type = "rounded",
+  selected = false,
+  onClose
+}) {
+  const [chipWidth, setChipWidth] = react.useState(void 0);
+  const chipRef = react.useRef(null);
+  react.useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(`${chipRef.current.offsetWidth}px`);
+    }
+  }, [loading]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
+  }
+  const hasLeading = Boolean(customIcon) || Boolean(severity) && !disableIcon;
+  const hasClose = typeof onClose === "function";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: chipRef,
+      className: [
+        styles__default.default.container,
+        severity ? styles__default.default[severity] : "",
+        fullWidth ? styles__default.default.fullWidth : "",
+        styles__default.default[size],
+        styles__default.default[type],
+        hasLeading ? styles__default.default.hasLeading : "",
+        hasClose ? styles__default.default.hasClose : "",
+        selected ? styles__default.default.selected : ""
+      ].join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.leading, children: [
+          severity && !disableIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }),
+          customIcon
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children }),
+        hasClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, className: styles__default.default.close, "aria-label": "Luk", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+      ]
+    }
+  );
+}
+
+exports.Chip = Chip;