@dbcdk/react-components 0.0.4 → 0.0.6

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);
+  border-color: transparent;
+  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.d.ts

@@ -1,11 +1,27 @@
+import { JSXElementConstructor, ReactElement } from 'react';
+import type { ReactNode, JSX } 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;
-    image?: React.ReactNode;
-    link?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
+    title?: string;
+    loading?: boolean;
+    variant?: CardVariant;
+    size?: CardSize;
+    headerMarker?: boolean;
+    headerIcon?: ReactNode;
+    severity?: Severity;
+    image?: ReactNode;
+    imgPlacement?: CardImagePlacement;
+    mediaWidth?: number;
+    actions?: ReactNode;
+    headerMeta?: ReactNode;
+    sectionTitle?: string;
+    showSectionDivider?: boolean;
+    children?: 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,22 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Card.module.css';
-
-function Card({ header, content, image, link: Link, width }) {
-  const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles.imageContainer, 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 })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles.container,
-      style: width ? { ["--width"]: `${width}%` } : void 0,
-      children: Link ? /* @__PURE__ */ jsx(Link, { children: cardContent }) : cardContent
-    }
-  );
+import { Headline } from '../headline/Headline';
+import { Hyperlink } from '../hyperlink/Hyperlink';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+export 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}%` }
+        : undefined;
+    const mediaStyle = mediaWidth
+        ? { ['--card-media-width']: `${mediaWidth}px` }
+        : undefined;
+    const innerPlacementClass = imgPlacement === 'top'
+        ? styles.innerImgTop
+        : imgPlacement === 'right'
+            ? styles.innerImgRight
+            : styles.innerImgLeft;
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image && (_jsx("div", { className: styles.media, style: mediaStyle, children: image })), _jsxs("div", { className: styles.content, children: [(title || headerMeta) && (_jsxs("header", { className: styles.header, children: [title && (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })), headerMeta && _jsx("div", { className: styles.headerMeta, children: headerMeta })] })), loading && (_jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })), !loading && (showSectionDivider || sectionTitle) && (_jsxs("div", { className: styles.section, children: [showSectionDivider && _jsx("div", { className: styles.sectionDivider }), sectionTitle && _jsx("div", { className: styles.sectionTitle, children: sectionTitle })] })), !loading && children && _jsx("div", { className: styles.body, children: children }), !loading && actions && _jsx("div", { className: styles.actions, children: actions })] })] }));
+    const cardWithLink = link ? _jsx(Hyperlink, { component: link }) : inner;
+    return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: _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);
 }
-*/

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

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

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

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

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

@@ -1,10 +1,50 @@
+.wrapper {
+  display: block;
+}
+
 .container {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
   --width: 100%;
 }
 
+.container.default {
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
+  padding: var(--spacing-lg);
+}
+
+.container.subtle {
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
+  padding: var(--spacing-lg);
+}
+
+.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);
+}
+
 @media screen and (min-width: 768px) {
   .container {
     --width: 33.333%;

package/dist/components/chip/Chip.d.ts

@@ -1,13 +1,15 @@
-import { Severity } from '@/constants/severity.types';
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface ChipProps {
-    children: React.ReactNode;
-    severity?: Severity;
+    children: ReactNode;
+    severity?: Severity | null;
     disableIcon?: boolean;
-    customIcon?: React.ReactNode;
+    customIcon?: ReactNode;
     loading?: boolean;
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
+    type?: 'default' | 'rounded' | 'outlined';
 }
-export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, onClose, }: ChipProps): JSX.Element;
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, onClose, }: ChipProps): JSX.Element;
 export {};