@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/headline/Headline.module.css

@@ -0,0 +1,167 @@
+.headlineContainer {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.headlineBlock {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--spacing-xxs);
+}
+
+.headlineRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  min-width: 0;
+}
+
+/* Base headline */
+.headline {
+  position: relative;
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block: var(--spacing-xs);
+
+  /* Typography */
+  font-weight: var(--font-weight, 600);
+  letter-spacing: var(--letter-spacing-tight);
+  line-height: var(--line-height-tight);
+  color: inherit;
+
+  /* Behaviour */
+  transition: color var(--transition-fast) var(--ease-standard);
+  min-width: 0; /* required for truncation inside flex */
+}
+
+h2.headline {
+  min-block-size: var(--component-size-md);
+}
+
+/* CollapsibleHeadline wrapper */
+.collapsibleRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsiblePanel {
+  display: contents;
+}
+
+.toggleChevron {
+  display: block;
+  width: 0.85em;
+  height: 0.85em;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.toggleChevronExpanded {
+  transform: rotate(180deg);
+}
+
+/* Variant overrides */
+.variant-muted {
+  color: var(--color-fg-subtle);
+}
+
+/* Tone overrides */
+.tone-dark .headline {
+  color: var(--color-fg-default);
+}
+
+.tone-light .headline {
+  color: var(--color-fg-on-strong);
+}
+
+.noMargin {
+  margin: 0;
+}
+
+/* Marker variant */
+.headline.marker {
+  padding-inline-start: calc(var(--border-width-medium) + var(--spacing-sm));
+}
+
+.headline.marker::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: 0.75em;
+  inset-inline-start: 0;
+  inline-size: var(--border-width-medium);
+  background-color: var(--marker-color, var(--color-brand));
+  border-radius: var(--border-radius-sm);
+  pointer-events: none;
+}
+
+/* Subheader */
+.subheader {
+  font-size: var(--font-size-sm);
+  margin-block-start: calc(var(--spacing-2xs) * -1);
+  color: var(--color-fg-subtle);
+  line-height: var(--line-height-normal);
+}
+
+.addition {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+}
+
+/* Icon */
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Text wrapper (allows shrinking inside flex layouts) */
+.text {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Text behaviour */
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap {
+  white-space: normal;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+}
+
+@media (max-width: 767px) {
+  .headlineRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+
+  .headlineContainer h1.headline {
+    font-size: var(--font-size-xl);
+  }
+
+  .headlineContainer h2.headline {
+    font-size: var(--font-size-lg);
+  }
+
+  .addition {
+    inline-size: 100%;
+  }
+}

package/dist/components/highlighted-text/HighlightedText.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function HighlightedText({ text, query, className }) {
+  const trimmedQuery = query == null ? void 0 : query.trim();
+  if (!trimmedQuery) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
+  }
+  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+  const parts = text.split(pattern);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: parts.map(
+    (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: part }, index)
+  ) });
+}
+
+exports.HighlightedText = HighlightedText;

package/dist/components/highlighted-text/HighlightedText.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface HighlightedTextProps {
+    text: string;
+    query?: string;
+    className?: string;
+}
+export declare function HighlightedText({ text, query, className }: HighlightedTextProps): JSX.Element;

package/dist/components/highlighted-text/HighlightedText.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function HighlightedText({ text, query, className }) {
+  const trimmedQuery = query == null ? void 0 : query.trim();
+  if (!trimmedQuery) {
+    return /* @__PURE__ */ jsx("span", { className, children: text });
+  }
+  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+  const parts = text.split(pattern);
+  return /* @__PURE__ */ jsx("span", { className, children: parts.map(
+    (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)
+  ) });
+}
+
+export { HighlightedText };

package/dist/components/hyperlink/Hyperlink.cjs

@@ -0,0 +1,113 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./Hyperlink.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function renderInner(children, icon, iconPosition = "after") {
+  const iconEl = icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon });
+  const contentEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.content, children });
+  return iconPosition === "before" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconEl,
+    contentEl
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    contentEl,
+    iconEl
+  ] });
+}
+function Hyperlink(props) {
+  var _a;
+  const {
+    children,
+    icon,
+    iconPosition = "after",
+    className,
+    asChild,
+    as = "a",
+    variant = "primary",
+    inline = true,
+    disabled = false,
+    ...rest
+  } = props;
+  const linkClassName = cx(
+    styles__default.default.link,
+    className,
+    variant === "secondary" ? styles__default.default.secondary : styles__default.default.primary,
+    inline ? "" : styles__default.default.block,
+    disabled ? styles__default.default.disabled : ""
+  );
+  if (asChild) {
+    const child = React__namespace.Children.only(children);
+    if (!React__namespace.isValidElement(child)) {
+      throw new Error("Hyperlink with asChild expects a single valid React element as its child.");
+    }
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React__namespace.cloneElement(child, {
+      ...childProps,
+      ...rest,
+      className: cx(childProps.className, linkClassName),
+      children: renderInner(childProps.children, icon, iconPosition),
+      "aria-disabled": disabled || void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (childProps.onClick) {
+          childProps.onClick(e);
+        }
+      }
+    });
+  }
+  if (as === "button") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: linkClassName,
+        disabled,
+        ...rest,
+        children: renderInner(children, icon, iconPosition)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        if (disabled) e.preventDefault();
+      },
+      className: linkClassName,
+      "aria-disabled": disabled || void 0,
+      ...rest,
+      children: renderInner(children, icon, iconPosition)
+    }
+  );
+}
+
+exports.Hyperlink = Hyperlink;

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type BaseProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    iconPosition?: 'before' | 'after';
+    className?: string;
+    /**
+     * If true, Hyperlink will NOT render <a>.
+     * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
+     */
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary';
+    inline?: boolean;
+    disabled?: boolean;
+};
+type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as?: 'a';
+};
+type ButtonProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as: 'button';
+};
+type HyperlinkProps = AnchorProps | ButtonProps;
+export declare function Hyperlink(props: HyperlinkProps): React.ReactElement;
+export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import styles from './Hyperlink.module.css';
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function renderInner(children, icon, iconPosition = "after") {
+  const iconEl = icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon });
+  const contentEl = /* @__PURE__ */ jsx("span", { className: styles.content, children });
+  return iconPosition === "before" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconEl,
+    contentEl
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    contentEl,
+    iconEl
+  ] });
+}
+function Hyperlink(props) {
+  var _a;
+  const {
+    children,
+    icon,
+    iconPosition = "after",
+    className,
+    asChild,
+    as = "a",
+    variant = "primary",
+    inline = true,
+    disabled = false,
+    ...rest
+  } = props;
+  const linkClassName = cx(
+    styles.link,
+    className,
+    variant === "secondary" ? styles.secondary : styles.primary,
+    inline ? "" : styles.block,
+    disabled ? styles.disabled : ""
+  );
+  if (asChild) {
+    const child = React.Children.only(children);
+    if (!React.isValidElement(child)) {
+      throw new Error("Hyperlink with asChild expects a single valid React element as its child.");
+    }
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React.cloneElement(child, {
+      ...childProps,
+      ...rest,
+      className: cx(childProps.className, linkClassName),
+      children: renderInner(childProps.children, icon, iconPosition),
+      "aria-disabled": disabled || void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (childProps.onClick) {
+          childProps.onClick(e);
+        }
+      }
+    });
+  }
+  if (as === "button") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: linkClassName,
+        disabled,
+        ...rest,
+        children: renderInner(children, icon, iconPosition)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        if (disabled) e.preventDefault();
+      },
+      className: linkClassName,
+      "aria-disabled": disabled || void 0,
+      ...rest,
+      children: renderInner(children, icon, iconPosition)
+    }
+  );
+}
+
+export { Hyperlink };

package/dist/components/hyperlink/Hyperlink.module.css

@@ -0,0 +1,121 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  position: relative;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: var(--color-brand);
+  line-height: inherit;
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    transform 60ms ease,
+    opacity 60ms ease,
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.link.secondary {
+  color: var(--color-fg-default);
+}
+
+.link:hover {
+  color: var(--color-brand);
+}
+
+.link.primary {
+  position: relative;
+  color: var(--color-brand);
+  text-decoration: none;
+}
+
+.link.block {
+  background: var(--color-bg-contextual-subtle);
+  display: inline-block;
+  padding: var(--spacing-xs);
+  &:hover {
+    background-color: var(--color-bg-contextual);
+  }
+}
+
+.link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1px;
+  height: 1px;
+  background-color: currentColor;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 100ms ease;
+}
+
+.link:hover::after {
+  transform: scaleX(1);
+}
+
+.link:active {
+  color: var(--color-link-hover);
+}
+
+.link:active::after {
+  transform: scaleX(1);
+}
+
+.link.block:active {
+  background-color: var(--color-bg-contextual);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
+}
+
+.link:is(.disabled, :disabled, [aria-disabled='true']) {
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.link:is(.disabled, :disabled, [aria-disabled='true']):hover {
+  color: var(--color-disabled-fg);
+}
+
+.link:is(.disabled, :disabled, [aria-disabled='true'])::after {
+  display: none;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-brand);
+}
+
+.link svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var styles = require('./Icon.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SeverityIcon = {
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
+  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
+  accent: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {})
+};
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
+}
+
+exports.Icon = Icon;
+exports.SeverityIcon = SeverityIcon;

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export declare const SeverityIcon: Record<Severity, ReactNode>;
+type IconSize = 'xs' | 'md';
+type IconPosition = 'start' | 'end';
+interface IconProps {
+    severity?: Severity;
+    customIcon?: ReactNode;
+    label?: string;
+    size?: IconSize;
+    iconPosition?: IconPosition;
+}
+export declare function Icon({ severity, label, customIcon, size, iconPosition, }: IconProps): JSX.Element;
+export {};

package/dist/components/icon/Icon.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Sparkles, Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import styles from './Icon.module.css';
+
+const SeverityIcon = {
+  neutral: /* @__PURE__ */ jsx(CircleCheck, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  error: /* @__PURE__ */ jsx(CircleX, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
+  brand: /* @__PURE__ */ jsx(Building2, {}),
+  accent: /* @__PURE__ */ jsx(Sparkles, {})
+};
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsx("span", { children: label });
+  return /* @__PURE__ */ jsx("div", { className: styles.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
+}
+
+export { Icon, SeverityIcon };

package/dist/components/icon/Icon.module.css

@@ -0,0 +1,50 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+}
+
+.container[data-size='xs'] {
+  gap: var(--spacing-2xs);
+  font-size: var(--font-size-xs);
+}
+
+.icon {
+  display: flex;
+}
+
+.icon svg {
+  height: var(--icon-size-md);
+  width: auto;
+}
+
+.container[data-size='xs'] .icon svg {
+  height: var(--icon-size-sm);
+}
+
+.success {
+  color: var(--color-status-success);
+}
+
+.error {
+  color: var(--color-status-error);
+}
+
+.warning {
+  color: var(--color-status-warning);
+}
+
+.info {
+  color: var(--color-status-info);
+}
+
+.brand {
+  color: var(--color-fg-on-brand);
+}
+
+.accent {
+  color: var(--color-accent);
+}