@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/button/Button.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Button.module.css';
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Button = React.forwardRef(function Button2({
+  variant = "outlined",
+  shape = "default",
+  size = "md",
+  fullWidth,
+  icon,
+  children,
+  loading,
+  active,
+  spinIcon,
+  tooltip,
+  tooltipPlacement = "top",
+  isLink,
+  type = "button",
+  ...rest
+}, ref) {
+  var _a;
+  const { className: userClassName, ...buttonProps } = rest;
+  const computedClassName = cx(
+    styles.button,
+    styles[variant],
+    styles[size],
+    fullWidth ? styles.fullWidth : "",
+    active ? styles.active : "",
+    loading ? styles.loading : "",
+    shape !== "default" ? styles[shape] : "",
+    userClassName
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const childRef = isLink && React.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
+  const mergedRef = React.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
+  const describedBy = (() => {
+    const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
+    const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: cx(styles.icon, spinIcon ? "spin" : ""), children: icon }),
+    children,
+    loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+  ] });
+  let buttonEl;
+  if (isLink && React.isValidElement(children)) {
+    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
+    const { disabled, onClick, ...linkButtonProps } = buttonProps;
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    };
+    buttonEl = React.cloneElement(children, {
+      ...linkButtonProps,
+      ref: mergedRef,
+      className: cx(childClassName, computedClassName, styles.buttonLink),
+      ...tooltipEnabled ? triggerProps : {},
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled ? "true" : void 0,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cx(styles.icon, spinIcon ? "spin" : ""), children: icon }),
+        children.props.children,
+        loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+      ] })
+    });
+  } else {
+    const isDisabled = Boolean(buttonProps.disabled);
+    buttonEl = /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: computedClassName,
+        type,
+        ...buttonProps,
+        ...tooltipEnabled && !isDisabled ? triggerProps : {},
+        "aria-describedby": describedBy,
+        children: content
+      }
+    );
+    if (tooltipEnabled && isDisabled) {
+      buttonEl = /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: hoverRef,
+          onPointerEnter: hoverEnter,
+          onPointerLeave: hoverLeave,
+          style: {
+            display: fullWidth ? "flex" : "inline-flex",
+            cursor: "not-allowed"
+          },
+          children: buttonEl
+        }
+      );
+    }
+  }
+  return buttonEl;
+});
+Button.displayName = "Button";
+
+export { Button };

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

@@ -0,0 +1,266 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xxs);
+
+  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;
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+}
+
+.button:is(:disabled, [aria-disabled='true']):hover {
+  background-color: var(--color-disabled-bg);
+  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;
+  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.sm {
+  height: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
+}
+
+.button.sm {
+  gap: var(--spacing-xxs);
+}
+.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(--opac-bg-default);
+  color: var(--color-fg-default);
+  border-color: transparent;
+}
+
+.default:hover {
+  background-color: var(--opac-bg-dark);
+  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);
+  color: var(--color-fg-default);
+}
+
+.button.inline:not(.sm):not(.lg):not(.xs) {
+  min-block-size: unset;
+  block-size: unset;
+  height: unset;
+}
+
+.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);
+}
+
+.button.xs {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.button.xs svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../components/button/Button');
+var styles = require('./ButtonSelect.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ButtonSelect({
+  options,
+  value,
+  onChange,
+  size = "md",
+  disabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      className: option.value === value ? `${styles__default.default.btn} ${styles__default.default.btnSelected}` : styles__default.default.btn,
+      variant: "outlined",
+      shape: "default",
+      size,
+      active: option.value === value,
+      disabled: disabled || option.disabled,
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+exports.ButtonSelect = ButtonSelect;

package/dist/components/button-select/ButtonSelect.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+import React from 'react';
+import type { ButtonSize } from '../../components/button/Button';
+export interface ButtonSelectOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface ButtonSelectProps<T extends string = string> {
+    options: ButtonSelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export declare function ButtonSelect<T extends string>({ options, value, onChange, size, disabled, }: ButtonSelectProps<T>): JSX.Element;

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

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

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

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Card.module.css');
+var CardMeta = require('./components/CardMeta');
+var Headline = require('../headline/Headline');
+var Hyperlink = require('../hyperlink/Hyperlink');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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__default.default);
+  const variantClass = getVariantClass(variant, styles__default.default);
+  const elevationClass = (_a = styles__default.default[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : styles__default.default.elevationSm;
+  const hasHeader = !!title || !!headerMeta;
+  const showSection = !loading && (showSectionDivider || !!sectionTitle);
+  const showBody = !loading && !!children;
+  const showActions = !loading && !!actions;
+  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 }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs("header", { className: styles__default.default.header, children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(
+          Headline.Headline,
+          {
+            severity,
+            marker: Boolean(severity) && headerMarker,
+            icon: headerIcon,
+            addition: headerAddition,
+            subheader,
+            size: headlineSize,
+            weight: 500,
+            disableMargin: true,
+            allowWrap: !truncateTitle,
+            children: title
+          }
+        ) : null,
+        headerMeta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta }) : null
+      ] }) : null,
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
+      showSection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
+        showSectionDivider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }) : null,
+        sectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle }) : null
+      ] }) : null,
+      showBody ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children }) : null,
+      showActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: actions }) : null
+    ] })
+  ] });
+  const cardContent = link ? /* @__PURE__ */ jsxRuntime.jsx(Hyperlink.Hyperlink, { children: link }) : inner;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.outerContainer} ${styles__default.default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
+}
+const Card = Object.assign(CardImpl, {
+  Meta: CardMeta.CardMeta,
+  MetaRow: CardMeta.CardMetaRow
+});
+
+exports.Card = Card;

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

@@ -0,0 +1,37 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+import { CardMeta, CardMetaRow } from './components/CardMeta';
+type CardVariant = 'default' | 'subtle';
+type CardSize = 'sm' | 'md' | 'lg';
+type CardImagePlacement = 'left' | 'right' | 'top';
+type CardElevation = 'none' | 'xs' | 'sm' | 'md';
+export interface CardProps {
+    title?: string;
+    subheader?: ReactNode;
+    loading?: boolean;
+    variant?: CardVariant;
+    size?: CardSize;
+    elevation?: CardElevation;
+    headerMarker?: boolean;
+    headerIcon?: ReactNode;
+    headerAddition?: ReactNode;
+    severity?: Severity;
+    image?: ReactNode;
+    imgPlacement?: CardImagePlacement;
+    mediaWidth?: number;
+    actions?: ReactNode;
+    headerMeta?: ReactNode;
+    sectionTitle?: string;
+    showSectionDivider?: boolean;
+    children?: ReactNode;
+    link?: ReactNode;
+    width?: number | string;
+    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    truncateTitle?: boolean;
+}
+type CardComponent = ((props: CardProps) => JSX.Element) & {
+    Meta: typeof CardMeta;
+    MetaRow: typeof CardMetaRow;
+};
+export declare const Card: CardComponent;
+export {};