@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/card/Card.js

@@ -1,103 +0,0 @@
-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

@@ -1,191 +0,0 @@
-.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

@@ -1,62 +0,0 @@
-'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

@@ -1,16 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,55 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,63 +0,0 @@
-.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

@@ -1,65 +0,0 @@
-'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;