@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/button/Button.module.css

@@ -1,20 +1,6 @@
-.link {
-  text-decoration: none;
-  font-size: var(--font-size-sm);
-  color: var(--color-link);
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    text-decoration-color var(--transition-fast) var(--ease-standard);
-  text-underline-offset: 0.15em;
-}
-.link:hover {
-  color: var(--color-link-hover);
-  text-decoration: underline;
-}
-.link:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
+/* ==========================================================================
+ * BASE BUTTON
+ * ======================================================================= */
 
 .button {
   display: inline-flex;
@@ -26,24 +12,29 @@
   font-size: var(--font-size-sm);
   line-height: 1;
 
-  border: var(--border-width-thin) solid transparent;
-  border-radius: var(--border-radius-default);
+  height: var(--component-size-md);
+  min-block-size: calc(var(--component-size-md) + var(--density));
 
   padding-inline: var(--control-padding-x);
   padding-block: calc(var(--control-padding-y) + var(--density));
-  min-block-size: calc(var(--component-size-md) + var(--density));
 
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: transparent;
+
+  border-radius: var(--border-radius-default);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
+}
 
+.button:hover {
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard),
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard);
 }
-
 .button:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -53,104 +44,176 @@
 .button[aria-disabled='true'] {
   cursor: not-allowed;
   pointer-events: none;
-  color: var(--color-disabled-text);
   background-color: var(--color-disabled-bg);
   border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+}
+
+/* ==========================================================================
+ * LINK STYLE
+ * ======================================================================= */
+
+.link {
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  color: var(--color-link);
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    text-decoration-color var(--transition-fast) var(--ease-standard);
+  text-underline-offset: 0.15em;
 }
 
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Icons */
 .button svg,
 .icon svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
+
 .icon {
   display: inline-flex;
 }
 
-.button.sm {
+/* ==========================================================================
+ * SIZES
+ * ======================================================================= */
+
+.button.xs {
+  height: var(--component-size-xs);
+  min-block-size: calc(var(--component-size-sm) + var(--density));
   padding-inline: var(--spacing-sm);
+}
+
+.button.sm {
+  height: var(--component-size-sm);
   min-block-size: calc(var(--component-size-sm) + var(--density));
+  padding-inline: var(--spacing-sm);
 }
+
+.button.xs {
+  height: var(--component-size-xs);
+  min-block-size: calc(var(--component-size-xs) + var(--density));
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.button.sm svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 .button.lg {
-  padding-inline: var(--spacing-lg);
+  height: var(--component-size-lg);
   min-block-size: calc(var(--component-size-lg) + var(--density));
+  padding-inline: var(--spacing-lg);
+}
+
+.button.fullWidth {
+  width: 100%;
 }
 
+/* ==========================================================================
+ * VARIANTS (semantic token-based)
+ * ======================================================================= */
+
 .primary {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
   border-color: transparent;
 }
+
 .primary:hover {
-  background-color: var(--color-primary-hover);
+  background-color: var(--button-bg-primary-hover);
 }
 
 .secondary {
-  background-color: var(--color-secondary);
-  color: var(--color-text-on-secondary);
-  border-color: transparent;
+  background-color: var(--button-bg-secondary);
+  color: var(--button-fg-secondary);
+  border-color: var(--button-border-secondary);
 }
+
 .secondary:hover {
-  background-color: var(--color-secondary-hover);
+  background-color: var(--button-bg-secondary-hover);
+  border-color: var(--color-border-strong);
 }
 
 .default {
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  border-color: var(--color-border);
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+  border-color: var(--color-border-subtle);
 }
+
 .default:hover {
-  background-color: var(--color-surface-hover);
-  border-color: var(--color-border-strong);
+  background-color: var(--color-bg-hover-subtle);
+  border-color: var(--color-border-default);
 }
 
 .outlined {
   background-color: transparent;
-  color: var(--color-text);
-  border-color: var(--color-border);
+  color: var(--color-fg-default);
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: var(--color-border-default);
 }
-.outlined:hover {
+
+.outlined:not(.active):hover {
+  background-color: var(--color-bg-hover-subtle);
   border-color: var(--color-border-strong);
 }
 
 .success {
   background-color: transparent;
-  color: var(--color-text-success);
-  border-color: var(--color-border-success);
+  color: var(--color-status-success-fg);
+  border-color: var(--color-status-success-border);
 }
+
 .success .icon {
-  color: var(--color-success);
+  color: var(--color-status-success);
 }
+
 .success:hover {
-  border-color: var(--color-text);
+  border-color: var(--color-fg-default);
 }
 
 .danger {
   background-color: transparent;
-  color: var(--color-text-error);
-  border-color: var(--color-border-error);
+  color: var(--color-status-error-fg);
+  border-color: var(--color-status-error-border);
 }
+
 .danger .icon {
-  color: var(--color-error);
+  color: var(--color-status-error);
 }
+
 .danger:hover {
-  border-color: var(--color-text);
+  border-color: var(--color-fg-default);
 }
 
 .button.inline {
-  padding: var(--spacing-xxs);
-  min-block-size: unset;
   background-color: transparent;
-  color: var(--color-text);
   border-color: transparent;
+  padding: var(--spacing-xxs);
+  min-block-size: unset;
+  block-size: unset;
+  height: unset;
+  color: var(--color-fg-default);
 }
 
 .button.inline:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 
 .active {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
   border-color: var(--color-border-selected);
 }
+
+.active:hover {
+  background-color: var(--button-bg-primary-hover);
+}

package/dist/components/card/Card.cjs

@@ -3,27 +3,67 @@
 var jsxRuntime = require('react/jsx-runtime');
 var Headline = require('../headline/Headline');
 var styles = require('./Card.module.css');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var Link = require('../link/Link');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function Card({ header, content, image, link: Link, width }) {
-  const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.imageContainer, children: image }),
+function Card({
+  title,
+  loading,
+  variant = "default",
+  size = "md",
+  headerMarker = true,
+  headerIcon,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width
+}) {
+  const outerContainerStyle = width ? { ["--width"]: `${width}%` } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = imgPlacement === "top" ? styles__default.default.innerImgTop : imgPlacement === "right" ? styles__default.default.innerImgRight : styles__default.default.innerImgLeft;
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.inner} ${innerPlacementClass}`, children: [
+    image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.media, style: mediaStyle, children: image }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity: "brand", size: 2, weight: 500, children: header }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: content })
+      (title || headerMeta) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: styles__default.default.header, children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          Headline.Headline,
+          {
+            severity,
+            marker: headerMarker,
+            icon: headerIcon,
+            size: 4,
+            weight: 500,
+            disableMargin: true,
+            children: title
+          }
+        ),
+        headerMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta })
+      ] }),
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
+      ] }, index)) }),
+      !loading && (showSectionDivider || sectionTitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
+        showSectionDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }),
+        sectionTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle })
+      ] }),
+      !loading && children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children }),
+      !loading && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: actions })
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: styles__default.default.container,
-      style: width ? { ["--width"]: `${width}%` } : void 0,
-      children: Link ? /* @__PURE__ */ jsxRuntime.jsx(Link, { children: cardContent }) : cardContent
-    }
-  );
+  const cardWithLink = link ? /* @__PURE__ */ jsxRuntime.jsx(Link.Link, { component: link }) : inner;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.outerContainer} ${styles__default.default[size]}`, style: outerContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.container, styles__default.default[variant]].filter(Boolean).join(" "), children: cardWithLink }) });
 }
 
 exports.Card = Card;

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

@@ -1,11 +1,26 @@
+import React, { JSXElementConstructor, ReactElement } from 'react';
+import { Severity } from '@/constants/severity.types';
+type CardVariant = 'default' | 'subtle' | 'strong';
+type CardSize = 'sm' | 'md' | 'lg';
+type CardImagePlacement = 'left' | 'right' | 'top';
 interface CardProps {
-    header: string;
-    content: React.ReactNode | string;
+    title?: string;
+    loading?: boolean;
+    variant?: CardVariant;
+    size?: CardSize;
+    headerMarker?: boolean;
+    headerIcon?: React.ReactNode;
+    severity?: Severity;
     image?: React.ReactNode;
-    link?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
+    imgPlacement?: CardImagePlacement;
+    mediaWidth?: number;
+    actions?: React.ReactNode;
+    headerMeta?: React.ReactNode;
+    sectionTitle?: string;
+    showSectionDivider?: boolean;
+    children?: React.ReactNode;
+    link?: ReactElement<any, string | JSXElementConstructor<any>>;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
 }
-export declare function Card({ header, content, image, link: Link, width }: CardProps): JSX.Element;
+export declare function Card({ title, loading, variant, size, headerMarker, headerIcon, severity, image, imgPlacement, mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider, children, link, width, }: CardProps): JSX.Element;
 export {};

package/dist/components/card/Card.js

@@ -1,23 +1,63 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Headline } from '../headline/Headline';
 import styles from './Card.module.css';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { Link } from '../link/Link';
 
-function Card({ header, content, image, link: Link, width }) {
-  const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles.imageContainer, children: image }),
+function Card({
+  title,
+  loading,
+  variant = "default",
+  size = "md",
+  headerMarker = true,
+  headerIcon,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width
+}) {
+  const outerContainerStyle = width ? { ["--width"]: `${width}%` } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = imgPlacement === "top" ? styles.innerImgTop : imgPlacement === "right" ? styles.innerImgRight : styles.innerImgLeft;
+  const inner = /* @__PURE__ */ jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [
+    image && /* @__PURE__ */ jsx("div", { className: styles.media, style: mediaStyle, children: image }),
     /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsx(Headline, { marker: true, severity: "brand", size: 2, weight: 500, children: header }),
-      /* @__PURE__ */ jsx("div", { children: content })
+      (title || headerMeta) && /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+        title && /* @__PURE__ */ jsx(
+          Headline,
+          {
+            severity,
+            marker: headerMarker,
+            icon: headerIcon,
+            size: 4,
+            weight: 500,
+            disableMargin: true,
+            children: title
+          }
+        ),
+        headerMeta && /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta })
+      ] }),
+      loading && /* @__PURE__ */ jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
+      ] }, index)) }),
+      !loading && (showSectionDivider || sectionTitle) && /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        showSectionDivider && /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }),
+        sectionTitle && /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle })
+      ] }),
+      !loading && children && /* @__PURE__ */ jsx("div", { className: styles.body, children }),
+      !loading && actions && /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions })
     ] })
   ] });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles.container,
-      style: width ? { ["--width"]: `${width}%` } : void 0,
-      children: Link ? /* @__PURE__ */ jsx(Link, { children: cardContent }) : cardContent
-    }
-  );
+  const cardWithLink = link ? /* @__PURE__ */ jsx(Link, { component: link }) : inner;
+  return /* @__PURE__ */ jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: /* @__PURE__ */ jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(" "), children: cardWithLink }) });
 }
 
 export { Card };

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

@@ -1,15 +1,18 @@
-/* Card container */
+/* OUTER WRAPPER (optional width control) */
+.outerContainer {
+  inline-size: var(--width, 100%);
+}
+
+/* CARD CONTAINER */
 .container {
   inline-size: 100%;
-  color: var(--color-text);
-  background: var(--color-surface);
-  border: var(--border-width-thin) solid var(--color-border);
-  border-radius: var(--border-radius-lg);
-
-  /* elevation */
-  box-shadow: var(--shadow-sm);
-  padding: var(--spacing-md);
-
+  position: relative;
+  color: var(--card-fg-default, var(--color-fg-default));
+  background-color: var(--card-bg-default, var(--color-bg-surface));
+  border-radius: var(--border-radius-md);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  box-shadow: var(--shadow-xs);
+  padding-block: 0;
   transition:
     color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
@@ -17,53 +20,154 @@
 }
 
 .container:hover {
-  color: var(--color-highlight);
-  cursor: pointer;
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+}
+
+/* BACKGROUND VARIANTS */
+.container.default {
+  background-color: var(--card-bg-default, var(--color-bg-surface));
+}
+
+.container.subtle {
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle));
+}
+
+.container.strong {
+  background-color: var(--card-bg-strong, var(--color-bg-surface-strong));
+  color: var(--card-fg-on-strong, var(--color-fg-on-strong));
+}
+
+/* SIZE VARIANTS */
+.sm .inner {
+  padding: var(--spacing-md);
+  gap: var(--spacing-md);
+}
+
+.md .inner {
+  padding: var(--spacing-lg);
+  gap: var(--spacing-lg);
 }
 
-/* Responsive width (uses your width var if provided) */
-@media screen and (min-width: 768px) {
-  .container {
-    inline-size: calc(var(--width, 100%) - var(--spacing-md));
-  }
+.lg .inner {
+  padding: var(--spacing-xl);
+  gap: var(--spacing-xl);
 }
 
-/* Media note: if you use custom media, define:
-   @custom-media --dbc-bp-md (min-width: 768px);
-   then swap the query above to: @media (--dbc-bp-md) { ... } */
+/* INNER LAYOUT */
+.inner {
+  margin-inline: auto;
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Media placement */
+.innerImgTop {
+  flex-direction: column;
+}
 
-/* Image wrapper */
-.imageContainer {
-  overflow: hidden;
-  border-start-start-radius: var(--border-radius-lg);
-  border-start-end-radius: var(--border-radius-lg);
+.innerImgLeft {
+  flex-direction: row;
 }
 
-/* Media */
-.container img {
+.innerImgRight {
+  flex-direction: row-reverse;
+}
+
+/* MEDIA */
+.media {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.innerImgLeft .media,
+.innerImgRight .media {
+  inline-size: var(--card-media-width, 56px);
+  max-inline-size: 25%;
+}
+
+.innerImgTop .media {
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.media img,
+.media picture,
+.media video,
+.media svg {
+  display: block;
   inline-size: 100%;
   block-size: auto;
-  border-block-end: var(--border-width-thin) solid var(--color-border);
-  transform: scale(1);
 }
 
-/* Headings & text */
-.container h3 {
-  margin: var(--spacing-sm) 0;
-  color: inherit;
+/* CONTENT */
+.content {
+  flex: 1 1 auto; /* important: allow content column to grow */
+  min-inline-size: 0; /* prevents overflow in flex layouts */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+/* HEADER */
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.value {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.headerMeta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/* LOADING */
+.loadingList {
+  display: grid;
+  gap: var(--spacing-sm);
+}
+
+.loadingRow {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+/* SECTION */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.sectionDivider {
+  inline-size: 100%;
+  block-size: var(--border-width-thin);
+  background: var(--color-border-subtle);
+}
+
+.sectionTitle {
+  font-weight: 600;
 }
 
-.container p {
-  margin: var(--spacing-sm) 0;
-  line-height: var(--line-height-tight);
+/* BODY */
+.body {
+  /* leave this as a neutral container; consumers render their own layout */
 }
 
-/* Optional: image hover zoom (tokenized) */
-/*
-.container:hover img {
-  transition: transform var(--transition-normal) var(--ease-standard);
-  transform: scale(1.02);
+/* ACTIONS (bottom-right) */
+.actions {
+  margin-top: auto; /* pushes actions to bottom of the content column */
+  display: flex;
+  justify-content: flex-end; /* right-align buttons */
+  gap: var(--spacing-sm);
 }
-*/