@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/components/accordion/components/AccordionRow.js

@@ -1,123 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronDown } from 'lucide-react';
-import { useState, useRef, useLayoutEffect } from 'react';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './AccordionRow.module.css';
-
-function useCollapsibleHeight(isOpen, shouldAnimate) {
-  const innerRef = useRef(null);
-  const [height, setHeight] = useState("0px");
-  const prevIsOpenRef = useRef(isOpen);
-  useLayoutEffect(() => {
-    var _a, _b;
-    const el = innerRef.current;
-    if (!el) return;
-    const prevIsOpen = prevIsOpenRef.current;
-    prevIsOpenRef.current = isOpen;
-    const isOpenChanged = prevIsOpen !== isOpen;
-    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
-    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
-      setHeight(isOpen ? "auto" : "0px");
-      return;
-    }
-    if (isOpen) {
-      setHeight("0px");
-      requestAnimationFrame(() => {
-        setHeight(`${el.scrollHeight}px`);
-      });
-    } else {
-      setHeight(`${el.scrollHeight}px`);
-      requestAnimationFrame(() => {
-        setHeight("0px");
-      });
-    }
-  }, [isOpen, shouldAnimate]);
-  function onTransitionEnd(e) {
-    if (e.propertyName !== "height") return;
-    if (!innerRef.current) return;
-    if (isOpen) setHeight("auto");
-  }
-  return { innerRef, height, onTransitionEnd };
-}
-function AccordionRow({
-  uid,
-  index,
-  item,
-  isOpen,
-  onToggle,
-  shouldAnimate = true,
-  headlineSize = 4,
-  variant = "default",
-  renderMode = "lazy"
-}) {
-  const isDisabled = !!item.disabled;
-  const headlineWeight = variant === "outlined" ? 400 : 500;
-  const buttonId = `${uid}-acc-btn-${index}`;
-  const panelId = `${uid}-acc-panel-${index}`;
-  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
-  const [hasBeenOpened, setHasBeenOpened] = useState(isOpen);
-  const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
-  function handleToggle() {
-    if (!isOpen) {
-      setHasBeenOpened(true);
-    }
-    onToggle(index);
-  }
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: `${styles.item} ${isOpen ? styles.open : ""} ${isDisabled ? styles.disabled : ""}`,
-      "data-state": isOpen ? "open" : "closed",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              id: buttonId,
-              className: styles.trigger,
-              "aria-expanded": isOpen,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              disabled: isDisabled,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
-                  item.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.headerIcon }) : null,
-                  /* @__PURE__ */ jsx(
-                    Headline,
-                    {
-                      disableMargin: true,
-                      size: headlineSize,
-                      weight: headlineWeight,
-                      severity: item.severity,
-                      subheader: item.subheader,
-                      allowWrap: isOpen,
-                      children: item.header
-                    }
-                  ),
-                  item.headerAddition ? /* @__PURE__ */ jsx("div", { className: styles.headerAddition, children: item.headerAddition }) : null
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-              ]
-            }
-          ),
-          item.headerActions ? /* @__PURE__ */ jsx("div", { className: styles.headerActions, onClick: (event) => event.stopPropagation(), children: item.headerActions }) : null
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: panelId,
-            role: "region",
-            "aria-labelledby": buttonId,
-            className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
-            style: { height },
-            onTransitionEnd,
-            children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: shouldRenderChildren ? item.children : null })
-          }
-        )
-      ]
-    }
-  );
-}
-
-export { AccordionRow };

package/dist/components/accordion/components/AccordionRow.module.css

@@ -1,129 +0,0 @@
-.headerRow {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
-}
-
-.trigger {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  flex: 1 1 auto;
-
-  cursor: pointer;
-  user-select: none;
-
-  font-size: var(--acc-font-size);
-  padding: var(--acc-trigger-py) var(--acc-trigger-px);
-  background: transparent;
-
-  min-width: 0;
-}
-
-.headerActions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  padding-block: var(--acc-trigger-py);
-  padding-inline: 0 var(--acc-trigger-px);
-}
-
-.headerActions > * {
-  flex: 0 0 auto;
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.disabled .trigger {
-  cursor: not-allowed;
-  color: var(--color-disabled-fg);
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-.headerAddition {
-  display: flex;
-  align-items: baseline;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.icon {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  align-self: center;
-}
-
-.icon svg {
-  height: var(--icon-size-sm);
-  width: var(--icon-size-sm);
-}
-
-.chevron {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-  flex: 0 0 auto;
-  transition: transform var(--transition-normal) var(--ease-standard);
-}
-
-.chevron svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.open .chevron {
-  transform: rotate(180deg);
-}
-
-.panel {
-  overflow: hidden;
-  height: 0px;
-}
-
-/* Default: animate only when class is present */
-.animate {
-  transition: height var(--transition-slow) var(--ease-decelerate);
-}
-
-/* No animation (initial render default-open) */
-.noAnimate {
-  transition: none;
-}
-
-.content {
-  padding: var(--acc-content-py) var(--acc-content-px, 0);
-}
-
-.item {
-  border-bottom: var(--acc-item-separator, none);
-}
-
-:global(.outlined) .item[data-state='open'] .headerRow {
-  box-shadow: inset 3px 0 0 var(--color-border-selected);
-}
-
-.item:last-child {
-  border-bottom: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .panel {
-    transition: none;
-  }
-}

package/dist/components/alert/Alert.cjs

@@ -1,52 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Alert.module.css');
-var Headline = require('../headline/Headline');
-var Icon = require('../icon/Icon');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Alert({
-  children,
-  title,
-  headlineSize = 3,
-  severity = "neutral",
-  customIcon,
-  disableIcon = false,
-  fullWidth = false,
-  maxWidth = "72ch",
-  role = "status"
-}) {
-  const hasLeading = Boolean(customIcon) || !disableIcon;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: [
-        styles__default.default.container,
-        styles__default.default[severity],
-        fullWidth ? styles__default.default.fullWidth : "",
-        hasLeading ? styles__default.default.hasLeading : ""
-      ].filter(Boolean).join(" "),
-      style: {
-        "--alert-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
-      },
-      role,
-      children: [
-        hasLeading && !title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.titleRow, children: [
-            hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.title, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
-          ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children })
-        ] })
-      ]
-    }
-  );
-}
-
-exports.Alert = Alert;

package/dist/components/alert/Alert.d.ts

@@ -1,14 +0,0 @@
-import type { JSX, ReactNode } from 'react';
-import type { Severity } from '../../constants/severity.types';
-export interface AlertProps {
-    children: ReactNode;
-    title?: ReactNode;
-    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
-    severity?: Severity;
-    customIcon?: ReactNode;
-    disableIcon?: boolean;
-    fullWidth?: boolean;
-    maxWidth?: string | number;
-    role?: 'status' | 'alert';
-}
-export declare function Alert({ children, title, headlineSize, severity, customIcon, disableIcon, fullWidth, maxWidth, role, }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -1,46 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Alert.module.css';
-import { Headline } from '../headline/Headline';
-import { Icon } from '../icon/Icon';
-
-function Alert({
-  children,
-  title,
-  headlineSize = 3,
-  severity = "neutral",
-  customIcon,
-  disableIcon = false,
-  fullWidth = false,
-  maxWidth = "72ch",
-  role = "status"
-}) {
-  const hasLeading = Boolean(customIcon) || !disableIcon;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [
-        styles.container,
-        styles[severity],
-        fullWidth ? styles.fullWidth : "",
-        hasLeading ? styles.hasLeading : ""
-      ].filter(Boolean).join(" "),
-      style: {
-        "--alert-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
-      },
-      role,
-      children: [
-        hasLeading && !title ? /* @__PURE__ */ jsx("div", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-          title ? /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
-            hasLeading ? /* @__PURE__ */ jsx("div", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
-            /* @__PURE__ */ jsx("div", { className: styles.title, children: /* @__PURE__ */ jsx(Headline, { size: headlineSize, weight: 600, disableMargin: true, children: title }) })
-          ] }) : null,
-          /* @__PURE__ */ jsx("div", { className: styles.body, children })
-        ] })
-      ]
-    }
-  );
-}
-
-export { Alert };

package/dist/components/alert/Alert.module.css

@@ -1,102 +0,0 @@
-.container {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
-
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-sm);
-  inline-size: min(100%, var(--alert-max-width, 72ch));
-  max-inline-size: 100%;
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--alert-border);
-  border-radius: var(--border-radius-default);
-  background: var(--alert-bg);
-  color: var(--alert-fg);
-  box-sizing: border-box;
-}
-
-.fullWidth {
-  inline-size: 100%;
-}
-
-.leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
-.titleRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.leading svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  color: currentColor;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.title,
-.body {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-
-.body {
-  font-size: var(--font-size-sm);
-}
-
-.neutral {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
-}
-
-.success {
-  --alert-bg: var(--color-status-success-bg);
-  --alert-fg: var(--color-status-success-fg);
-  --alert-border: var(--color-status-success-border);
-}
-
-.warning {
-  --alert-bg: var(--color-status-warning-bg);
-  --alert-fg: var(--color-status-warning-fg);
-  --alert-border: var(--color-status-warning-border);
-}
-
-.error {
-  --alert-bg: var(--color-status-error-bg);
-  --alert-fg: var(--color-status-error-fg);
-  --alert-border: var(--color-status-error-border);
-}
-
-.info {
-  --alert-bg: var(--color-status-info-bg);
-  --alert-fg: var(--color-status-info-fg);
-  --alert-border: var(--color-status-info-border);
-}
-
-.brand {
-  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --alert-fg: var(--color-brand);
-  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
-}
-
-.accent {
-  --alert-bg: var(--color-accent-bg);
-  --alert-fg: var(--color-accent-fg);
-  --alert-border: var(--color-accent-border);
-}

package/dist/components/app-header/AppHeader.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./AppHeader.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function AppHeader({ children, size = "md" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "data-size": size, children }) });
-}
-
-exports.AppHeader = AppHeader;

package/dist/components/app-header/AppHeader.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode, JSX } from 'react';
-export type AppHeaderSize = 'md' | 'lg';
-interface AppHeaderProps {
-    children: ReactNode;
-    size?: AppHeaderSize;
-}
-export declare function AppHeader({ children, size }: AppHeaderProps): JSX.Element;
-export {};

package/dist/components/app-header/AppHeader.js

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styles from './AppHeader.module.css';
-
-function AppHeader({ children, size = "md" }) {
-  return /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("div", { className: styles.container, "data-size": size, children }) });
-}
-
-export { AppHeader };

package/dist/components/app-header/AppHeader.module.css

@@ -1,74 +0,0 @@
-.header {
-  inline-size: 100%;
-  background-color: var(--color-bg-surface);
-}
-
-.container {
-  /* layout */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-
-  /* sizing */
-  inline-size: 100%;
-  min-block-size: 60px;
-  box-sizing: border-box;
-
-  /* chrome */
-  color: var(--color-fg-default);
-
-  /* density-aware vertical rhythm */
-  padding-block: calc(var(--control-padding-y) + var(--density));
-}
-
-.container[data-size='lg'] {
-  min-block-size: 80px;
-}
-
-/* Optional content wrapper */
-.inner {
-  inline-size: min(100%, var(--container-xl));
-  margin-inline: auto;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-}
-
-/* Slots */
-.start,
-.center,
-.end {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.center {
-  margin-inline: auto;
-}
-
-/* Interactive elements inside the header share focus visuals */
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Elevated header */
-.elevated {
-  border-block-end: 0;
-  box-shadow: var(--shadow-sm);
-}
-
-/* Transparent header */
-.transparent {
-  background-color: transparent;
-  border-block-end: 0;
-}
-
-/* Condensed density option */
-:root[data-density='compact'] .container {
-  padding-inline: var(--spacing-md);
-}

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -1,36 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var severity = require('../../constants/severity');
-var styles = require('./AttributeChip.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function AttributeChip({
-  label,
-  value,
-  size = "md",
-  loading,
-  severity: severity$1
-}) {
-  const markerSeverity = severity$1 && severity$1 !== "neutral" ? severity$1 : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-      !markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" }) : null
-    ] }) : null,
-    markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: styles__default.default.marker,
-        "aria-hidden": "true",
-        style: { "--attribute-chip-marker-color": severity.SeverityBgColor[markerSeverity] }
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
-  ] });
-}
-
-exports.AttributeChip = AttributeChip;

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -1,11 +0,0 @@
-import type { JSX } from 'react';
-import { Severity } from '../../constants/severity.types';
-interface AttributeChipProps {
-    label?: string;
-    value: string | number | boolean;
-    loading?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    severity?: Severity;
-}
-export declare function AttributeChip({ label, value, size, loading, severity, }: AttributeChipProps): JSX.Element;
-export {};

package/dist/components/attribute-chip/AttributeChip.js

@@ -1,30 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { SeverityBgColor } from '../../constants/severity';
-import styles from './AttributeChip.module.css';
-
-function AttributeChip({
-  label,
-  value,
-  size = "md",
-  loading,
-  severity
-}) {
-  const markerSeverity = severity && severity !== "neutral" ? severity : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
-    label ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-      !markerSeverity ? /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" }) : null
-    ] }) : null,
-    markerSeverity ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: styles.marker,
-        "aria-hidden": "true",
-        style: { "--attribute-chip-marker-color": SeverityBgColor[markerSeverity] }
-      }
-    ) : null,
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
-  ] });
-}
-
-export { AttributeChip };