@dbcdk/react-components 0.0.95 → 0.0.97

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

@@ -1,249 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: 1;
-
-  height: var(--component-size-md);
-  min-block-size: var(--component-size-md);
-
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-
-  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;
-}
-
-.buttonLink {
-  color: inherit;
-  text-decoration: none;
-  user-select: default;
-}
-
-.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;
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.round {
-  border-radius: 100%;
-}
-
-.rounded {
-  border-radius: var(--border-radius-rounded);
-}
-
-.button:disabled,
-.button[aria-disabled='true'] {
-  cursor: not-allowed;
-  pointer-events: none;
-  background-color: var(--color-disabled-bg);
-  border-color: transparent;
-  color: var(--color-disabled-fg);
-  opacity: 0.5;
-}
-
-/* ==========================================================================
- * 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;
-  text-decoration: underline;
-  text-decoration-color: currentColor;
-}
-
-/* Icons */
-.button svg,
-.icon svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-.icon {
-  display: inline-flex;
-}
-
-/* ==========================================================================
- * SIZES
- * ======================================================================= */
-
-.button.xs {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
-
-.button.sm {
-  height: var(--component-size-sm);
-  min-block-size: var(--component-size-sm);
-  padding-inline: var(--spacing-xs);
-}
-
-.button.sm svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}
-
-.button.lg {
-  height: var(--component-size-lg);
-  font-size: var(--font-size-md);
-  min-block-size: var(--component-size-lg);
-  padding-inline: var(--spacing-lg);
-}
-
-.button.fullWidth {
-  width: 100%;
-}
-
-/* ==========================================================================
- * VARIANTS (semantic token-based)
- * ======================================================================= */
-
-.primary {
-  background-color: var(--button-bg-primary);
-  color: var(--button-fg-primary);
-  border-color: transparent;
-}
-
-.primary:hover {
-  background-color: var(--button-bg-primary-hover);
-}
-
-.secondary {
-  background-color: var(--button-bg-secondary);
-  color: var(--button-fg-secondary);
-  border-color: var(--button-border-secondary);
-}
-
-.secondary:hover {
-  background-color: var(--button-bg-secondary-hover);
-  border-color: var(--color-border-strong);
-}
-
-.default {
-  background-color: var(--color-bg-toolbar);
-  color: var(--color-fg-default);
-  border-color: transparent;
-}
-
-.default:hover {
-  background-color: var(--color-bg-toolbar-hover);
-  border-color: transparent;
-}
-
-.default:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.outlined {
-  background-color: transparent;
-  color: var(--color-fg-default);
-  border-width: var(--border-width-thin, 1px);
-  border-style: solid;
-  border-color: var(--color-border-default);
-}
-
-.outlined:not(.active):hover {
-  background-color: var(--color-bg-hover-subtle);
-  border-color: var(--color-border-strong);
-}
-
-.success {
-  background-color: transparent;
-  color: var(--color-status-success-fg);
-  border-color: var(--color-status-success-border);
-}
-
-.success .icon {
-  color: var(--color-status-success);
-}
-
-.success:hover {
-  border-color: var(--color-fg-default);
-}
-
-.danger {
-  background-color: transparent;
-  color: var(--color-status-error-fg);
-  border-color: var(--color-status-error-border);
-}
-
-.danger .icon {
-  color: var(--color-status-error);
-}
-
-.danger:hover {
-  border-color: var(--color-fg-default);
-}
-
-.button.inline {
-  background-color: transparent;
-  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(--opac-bg-light);
-}
-
-.button.inline:focus-visible {
-  outline: none;
-  background-color: var(--opac-bg-light);
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.active {
-  background-color: var(--button-bg-primary);
-  color: var(--button-fg-primary);
-  border-color: var(--color-border-selected);
-}
-
-.inline.active {
-  color: var(--button-bg-primary);
-}
-
-.active:hover {
-  background-color: var(--button-bg-primary-hover);
-}
-
-.inline.active:hover {
-  color: var(--button-bg-primary-hover);
-}

package/dist/components/button-select/ButtonSelect.js

@@ -1,7 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../../components/button/Button';
-import styles from './ButtonSelect.module.css';
-export function ButtonSelect({ options, value, onChange, size = 'md', disabled, }) {
-    return (_jsx("div", { className: styles.group, role: "group", children: options.map(option => (_jsx(Button, { className: option.value === value ? `${styles.btn} ${styles.btnSelected}` : styles.btn, variant: "outlined", shape: "default", size: size, active: option.value === value, disabled: disabled || option.disabled, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
-}

package/dist/components/button-select/ButtonSelect.module.css

@@ -1,40 +0,0 @@
-.group {
-  display: inline-flex;
-  flex-wrap: nowrap;
-}
-
-/* Collapse the doubled border between adjacent buttons */
-.group .btn:not(:first-child) {
-  margin-left: -1px;
-}
-
-/* Flatten interior corners */
-.group .btn:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.group .btn:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* Raise hovered / focused / selected button so its full border is visible above siblings */
-.group .btn:hover,
-.group .btn:focus-visible,
-.group .btn:active,
-.group .btnSelected {
-  position: relative;
-  z-index: 1;
-}
-
-/* Selected state follows the system's selection language (same as Chip) */
-.group .btnSelected {
-  background-color: var(--color-bg-selected);
-  color: var(--color-brand);
-  border-color: var(--color-border-selected);
-}
-
-.group .btnSelected:hover {
-  background-color: var(--color-bg-selected);
-}

package/dist/components/card/Card.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Card.module.css';
-import { CardMeta, CardMetaRow } from './components/CardMeta';
-import { Headline } from '../headline/Headline';
-import { Hyperlink } from '../hyperlink/Hyperlink';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-/**
- * Fix for flex gap issue:
- * Distributes gap proportionally across cards
- */
-function getGapShare(width) {
-    switch (width) {
-        case 25:
-            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
-        case 33:
-            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
-        case 50:
-            return 'calc(var(--card-container-gap, var(--spacing-md)) / 2)';
-        case 66:
-            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
-        case 75:
-            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
-        case 100:
-        default:
-            return '0px';
-    }
-}
-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', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
-    const outerStyle = width
-        ? {
-            ['--width']: `${width}%`,
-            ['--gap-share']: getGapShare(width),
-        }
-        : undefined;
-    const mediaStyle = mediaWidth
-        ? { ['--card-media-width']: `${mediaWidth}px` }
-        : undefined;
-    const innerPlacementClass = getInnerPlacementClass(imgPlacement, styles);
-    const variantClass = getVariantClass(variant, styles);
-    const hasHeader = !!title || !!headerMeta;
-    const showSection = !loading && (showSectionDivider || !!sectionTitle);
-    const showBody = !loading && !!children;
-    const showActions = !loading && !!actions;
-    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, subheader: subheader, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
-    const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
-    return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));
-}
-export const Card = Object.assign(CardImpl, {
-    Meta: CardMeta,
-    MetaRow: CardMetaRow,
-});

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

@@ -1,160 +0,0 @@
-.outerContainer {
-  --width: 100%;
-  --gap-share: 0px;
-
-  flex: 0 1 calc(var(--width) - var(--gap-share));
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-/* Card surface */
-.container {
-  height: 100%;
-  border-radius: var(--border-radius-sm);
-  box-sizing: border-box;
-
-  /* ✅ Restore border */
-  border: 1px solid var(--color-border-subtle);
-
-  /* Optional: ensure background sits under border */
-  background-clip: padding-box;
-}
-
-/* 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 .container {
-  padding: var(--spacing-md);
-}
-
-.md .container {
-  padding: var(--spacing-lg);
-}
-
-.md .content,
-.lg .content {
-  gap: var(--spacing-lg);
-}
-
-.lg .container {
-  padding: var(--spacing-xl);
-}
-
-/* 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;
-}
-
-.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 {
-    --width: 100%;
-    --gap-share: 0px;
-
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  .inner,
-  .innerImgLeft,
-  .innerImgRight,
-  .innerImgTop {
-    flex-direction: column;
-  }
-
-  .header {
-    flex-direction: column;
-  }
-}

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _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;
-    }
-}
-export function CardMeta({ columns = 2, className, children, ...rest }) {
-    const colsClass = getColsClass(columns);
-    return (_jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(' '), children: children }));
-}
-export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue = false, }) {
-    return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [
-                    styles.value,
-                    !boldValue ? styles.valueRegular : styles.valueBold,
-                    nowrapValue ? styles.nowrap : '',
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: value })] }));
-}

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.js

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

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

@@ -1,61 +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-sm);
-}
-
-.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);
-}
-
-.container > * {
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-/* Mobile: stack */
-@media screen and (max-width: 767px) {
-  .container > * {
-    flex-basis: 100% !important;
-    max-width: 100%;
-  }
-}