@dbcdk/react-components 0.0.168 → 0.0.169

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-.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);
-}