@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/button/Button.js

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

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

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

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

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

@@ -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.cjs

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

@@ -1,37 +0,0 @@
-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 {};