@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/nav-bar/NavBar.module.css

@@ -1,243 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  inline-size: 100%;
-  box-sizing: border-box;
-  flex-grow: 1;
-}
-
-.logoRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-shrink: 0;
-}
-
-.logoRow a {
-  color: unset;
-}
-
-.navContent {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  min-inline-size: 0;
-  flex: 1 1 auto;
-}
-
-/* Burger: hidden on desktop, visible on mobile */
-.burger {
-  display: none;
-  margin-inline-start: auto;
-}
-
-.burgerButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--component-size-md);
-  block-size: var(--component-size-md);
-  border: none;
-  background: transparent;
-  color: var(--color-fg-default);
-  border-radius: var(--border-radius-default);
-  cursor: pointer;
-  padding: 0;
-  transition: background-color var(--transition-fast) var(--ease-standard);
-}
-
-.burgerButton:hover {
-  background-color: var(--color-bg-hover-subtle);
-}
-
-.burgerButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Mobile dropdown content */
-.mobileMenu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
-}
-
-.mobileNavItems {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.mobileAddition {
-  border-top: var(--border-width-thin) solid var(--color-border-subtle);
-  padding-top: var(--spacing-xs);
-}
-
-@media (max-width: 1024px) {
-  .container {
-    flex-wrap: nowrap;
-    overflow: hidden;
-  }
-
-  .logoRow {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    overflow: hidden;
-  }
-
-  .navContent {
-    display: none;
-  }
-
-  .addition {
-    display: none;
-  }
-
-  .burger {
-    display: flex;
-    flex-shrink: 0;
-    margin-inline-start: 0;
-  }
-}
-
-.productName {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: inherit;
-  text-decoration: none;
-}
-
-.productNameLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-fg-default);
-}
-
-.productNameSquare {
-  inline-size: 5px;
-  block-size: 5px;
-  flex: 0 0 auto;
-  background-color: var(--color-logo);
-}
-
-.productNameLabel h1 {
-  font-size: var(--font-size-sm);
-}
-.productName svg {
-  inline-size: auto;
-  block-size: var(--icon-size-md);
-}
-
-.navItems {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  min-inline-size: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.addition {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  margin-inline-start: auto;
-}
-
-.mobileAddition {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--spacing-xs);
-}
-
-.navItem {
-  list-style: none;
-  min-inline-size: 0;
-}
-
-.link {
-  text-transform: var(--nav-link-transform);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-fg-muted);
-  font-family: var(--font-family);
-  font-size: var(--font-size-md);
-  text-decoration: none;
-  border-radius: var(--border-radius-default);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-/* Hover + focus */
-.link:hover {
-  color: var(--color-fg-default);
-}
-.link:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Active underline */
-.link.active,
-.link[aria-current='page'] {
-  color: var(--color-brand);
-  box-shadow: none;
-}
-
-.link::after {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-end: 0;
-  inline-size: 0;
-  block-size: 2px;
-  background-color: var(--color-border-strong);
-  transition: inline-size var(--transition-fast) var(--ease-standard);
-}
-
-.link:hover::after {
-  inline-size: 100%;
-}
-
-.link.active::after,
-.link[aria-current='page']::after {
-  inline-size: 100%;
-  background-color: var(--color-brand);
-}
-
-/* Icons/images inside links */
-.link svg,
-.link img {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  flex: 0 0 auto;
-}
-
-@media (max-width: 767px) {
-  .addition,
-  .mobileAddition {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-  }
-
-  .addition > *,
-  .mobileAddition > * {
-    width: 100%;
-  }
-}

package/dist/components/overlay/fade-overlay/FadeOverlay.cjs

@@ -1,30 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./FadeOverlay.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function FadeOverlay({
-  edge = "bottom",
-  size = "md",
-  className,
-  "aria-hidden": ariaHidden = true,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "aria-hidden": ariaHidden,
-      className: cx(styles__default.default.overlay, styles__default.default[edge], styles__default.default[size], className),
-      ...rest
-    }
-  );
-}
-
-exports.FadeOverlay = FadeOverlay;

package/dist/components/overlay/fade-overlay/FadeOverlay.d.ts

@@ -1,13 +0,0 @@
-import type { HTMLAttributes, ReactElement } from 'react';
-export interface FadeOverlayProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Which edge should have the solid background color.
-     * Defaults to bottom, which fits preview/paywall-style fades.
-     */
-    edge?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * How far the fade reaches into the container.
-     */
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function FadeOverlay({ edge, size, className, 'aria-hidden': ariaHidden, ...rest }: FadeOverlayProps): ReactElement;

package/dist/components/overlay/fade-overlay/FadeOverlay.js

@@ -1,24 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styles from './FadeOverlay.module.css';
-
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function FadeOverlay({
-  edge = "bottom",
-  size = "md",
-  className,
-  "aria-hidden": ariaHidden = true,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": ariaHidden,
-      className: cx(styles.overlay, styles[edge], styles[size], className),
-      ...rest
-    }
-  );
-}
-
-export { FadeOverlay };

package/dist/components/overlay/fade-overlay/FadeOverlay.module.css

@@ -1,54 +0,0 @@
-.overlay {
-  --fade-overlay-color: var(--color-bg-surface);
-  --fade-overlay-size: 65%;
-
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-radius: inherit;
-}
-
-.bottom {
-  background: linear-gradient(
-    to top,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.top {
-  background: linear-gradient(
-    to bottom,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.left {
-  background: linear-gradient(
-    to right,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.right {
-  background: linear-gradient(
-    to left,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.sm {
-  --fade-overlay-size: 40%;
-}
-
-.md {
-  --fade-overlay-size: 65%;
-}
-
-.lg {
-  --fade-overlay-size: 85%;
-}

package/dist/components/overlay/modal/Modal.cjs

@@ -1,191 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var react = require('react');
-var reactDom = require('react-dom');
-var Button = require('../../../components/button/Button');
-var Headline = require('../../../components/headline/Headline');
-var styles = require('./Modal.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Modal({
-  isOpen,
-  onRequestClose,
-  header,
-  subheader,
-  headerAddition,
-  content,
-  children,
-  primaryAction,
-  secondaryAction,
-  closeOnOverlayClick = true,
-  severity,
-  disableContentSpacing = false,
-  isLoading,
-  dataCy,
-  width,
-  ariaLabel
-}) {
-  const titleId = react.useId();
-  const dialogRef = react.useRef(null);
-  const lastActiveElementRef = react.useRef(null);
-  const [mounted, setMounted] = react.useState(false);
-  const onRequestCloseRef = react.useRef(onRequestClose);
-  react.useEffect(() => {
-    onRequestCloseRef.current = onRequestClose;
-  }, [onRequestClose]);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const wasOpenRef = react.useRef(false);
-  react.useEffect(() => {
-    var _a;
-    const wasOpen = wasOpenRef.current;
-    wasOpenRef.current = isOpen;
-    if (!isOpen) return;
-    if (!wasOpen) {
-      lastActiveElementRef.current = document.activeElement;
-      const dialog = dialogRef.current;
-      if (dialog) {
-        const focusableSelectors2 = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-        const focusable = dialog.querySelectorAll(focusableSelectors2);
-        if (focusable.length > 0) {
-          const preferred = (_a = dialog.querySelector("input, select, textarea")) != null ? _a : focusable[0];
-          preferred.focus();
-        } else {
-          dialog.focus();
-        }
-      }
-    }
-    const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    const getFocusable = () => {
-      var _a2, _b;
-      return (_b = (_a2 = dialogRef.current) == null ? void 0 : _a2.querySelectorAll(focusableSelectors)) != null ? _b : [];
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onRequestCloseRef.current();
-        return;
-      }
-      if (event.key === "Tab" && dialogRef.current) {
-        const focusable = getFocusable();
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (event.shiftKey) {
-          if (document.activeElement === first || !dialogRef.current.contains(document.activeElement)) {
-            event.preventDefault();
-            last.focus();
-          }
-        } else {
-          if (document.activeElement === last || !dialogRef.current.contains(document.activeElement)) {
-            event.preventDefault();
-            first.focus();
-          }
-        }
-      }
-    };
-    const handleFocusIn = (event) => {
-      const dialog = dialogRef.current;
-      if (!dialog || dialog.contains(event.target)) return;
-      const focusable = getFocusable();
-      if (focusable.length > 0) focusable[0].focus();
-      else dialog.focus();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("focusin", handleFocusIn);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("focusin", handleFocusIn);
-      if (lastActiveElementRef.current) {
-        lastActiveElementRef.current.focus();
-      }
-    };
-  }, [isOpen]);
-  if (!isOpen || !mounted) return null;
-  const handleOverlayClick = () => {
-    if (closeOnOverlayClick) {
-      onRequestCloseRef.current();
-    }
-  };
-  const stopPropagation = (e) => {
-    e.stopPropagation();
-  };
-  const resolvedSecondaryAction = primaryAction || secondaryAction ? { label: "Luk", onClick: onRequestClose, ...secondaryAction } : void 0;
-  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
-  const body = children != null ? children : content;
-  const resolvedWidth = typeof width === "number" ? `${width}px` : typeof width === "string" ? width : void 0;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-cy": dataCy,
-        ref: dialogRef,
-        className: `${styles__default.default.modal} ${disableContentSpacing ? "" : styles__default.default.contentSpacing}`,
-        style: resolvedWidth ? { ["--modal-width"]: resolvedWidth } : void 0,
-        onClick: stopPropagation,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": header ? titleId : void 0,
-        "aria-label": !header ? ariaLabel : void 0,
-        tabIndex: -1,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
-            header && /* @__PURE__ */ jsxRuntime.jsx(
-              Headline.Headline,
-              {
-                id: titleId,
-                severity,
-                size: 2,
-                disableMargin: true,
-                subheader,
-                addition: headerAddition,
-                children: header
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button.Button,
-              {
-                type: "button",
-                variant: "inline",
-                onClick: () => onRequestCloseRef.current(),
-                "aria-label": "Luk",
-                shape: "round",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children: body }),
-          shouldRenderFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
-            resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [
-              resolvedSecondaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: resolvedSecondaryAction.icon }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedSecondaryAction.label })
-            ] }),
-            primaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
-              Button.Button,
-              {
-                type: "button",
-                variant: primaryAction.severity || "primary",
-                onClick: primaryAction.onClick,
-                disabled: primaryAction.disabled || isLoading,
-                loading: isLoading,
-                children: [
-                  primaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: primaryAction.icon }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: primaryAction.label })
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
-    document.body
-  );
-}
-
-exports.Modal = Modal;

package/dist/components/overlay/modal/Modal.d.ts

@@ -1,29 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ButtonVariant } from '../../../components/button/Button';
-import { Severity } from '../../../constants/severity.types';
-export type ModalActionConfig = {
-    label: string;
-    severity?: ButtonVariant;
-    onClick?: () => void;
-    icon?: ReactNode;
-    disabled?: boolean;
-};
-export type ModalProps = {
-    isLoading?: boolean;
-    isOpen: boolean;
-    onRequestClose: () => void;
-    header?: ReactNode;
-    subheader?: ReactNode;
-    headerAddition?: ReactNode;
-    content?: ReactNode;
-    children?: ReactNode;
-    primaryAction?: ModalActionConfig;
-    secondaryAction?: ModalActionConfig;
-    closeOnOverlayClick?: boolean;
-    severity?: Severity;
-    disableContentSpacing?: boolean;
-    dataCy?: string;
-    width?: number | string;
-    ariaLabel?: string;
-};
-export declare function Modal({ isOpen, onRequestClose, header, subheader, headerAddition, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;