@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1,187 @@
+.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);
+}
+
+.md .content,
+.lg .content {
+  gap: var(--spacing-lg);
+}
+
+/* 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 {
+  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 */
+.loadingList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.loadingRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+/* 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.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.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;

package/dist/components/chip/Chip.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+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';
+
+function Chip({
+  children,
+  severity = "neutral",
+  loading,
+  disableIcon = true,
+  fullWidth = false,
+  size = "sm",
+  customIcon,
+  type = "rounded",
+  selected = false,
+  onClose
+}) {
+  const [chipWidth, setChipWidth] = useState(void 0);
+  const chipRef = useRef(null);
+  useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(`${chipRef.current.offsetWidth}px`);
+    }
+  }, [loading]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
+  }
+  const hasLeading = Boolean(customIcon) || Boolean(severity) && !disableIcon;
+  const hasClose = typeof onClose === "function";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chipRef,
+      className: [
+        styles.container,
+        severity ? styles[severity] : "",
+        fullWidth ? styles.fullWidth : "",
+        styles[size],
+        styles[type],
+        hasLeading ? styles.hasLeading : "",
+        hasClose ? styles.hasClose : "",
+        selected ? styles.selected : ""
+      ].join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsxs("span", { className: styles.leading, children: [
+          severity && !disableIcon && /* @__PURE__ */ jsx(Icon, { severity }),
+          customIcon
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: styles.label, children }),
+        hasClose && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: /* @__PURE__ */ jsx(X, {}) })
+      ]
+    }
+  );
+}
+
+export { Chip };