@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/modal/Modal.cjs

@@ -0,0 +1,134 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Modal.module.css');
+var Headline = require('../headline/Headline');
+var Button = require('../button/Button');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Modal({
+  isOpen,
+  onRequestClose,
+  header,
+  content,
+  primaryAction,
+  secondaryAction,
+  closeOnOverlayClick = true,
+  severity,
+  disableContentSpacing = false,
+  isLoading
+}) {
+  const titleId = react.useId();
+  const dialogRef = react.useRef(null);
+  const lastActiveElementRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    lastActiveElementRef.current = document.activeElement;
+    const dialog = dialogRef.current;
+    if (dialog) {
+      const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+      const focusable = dialog.querySelectorAll(focusableSelectors);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      } else {
+        dialog.focus();
+      }
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+        return;
+      }
+      if (event.key === "Tab" && dialogRef.current) {
+        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey) {
+          if (document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (lastActiveElementRef.current) {
+        lastActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen, onRequestClose]);
+  if (!isOpen) return null;
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onRequestClose();
+    }
+  };
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  const resolvedSecondaryAction = secondaryAction != null ? secondaryAction : primaryAction ? { label: "Luk", onClick: onRequestClose } : void 0;
+  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: `${styles__default.default.modal} ${disableContentSpacing ? "" : styles__default.default.contentSpacing}`,
+      onClick: stopPropagation,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": header ? titleId : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+          header && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { severity, size: 3, disableMargin: true, children: header }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "inline", onClick: onRequestClose, "aria-label": "Luk", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children: content }),
+        shouldRenderFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+          resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button.Button,
+            {
+              type: "button",
+              variant: "outlined",
+              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: "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 })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+exports.Modal = Modal;

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

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Severity } from '@/constants/severity.types';
+export type ModalActionConfig = {
+    label: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export type ModalProps = {
+    isLoading?: boolean;
+    isOpen: boolean;
+    onRequestClose: () => void;
+    header?: ReactNode;
+    content?: ReactNode;
+    primaryAction?: ModalActionConfig;
+    secondaryAction?: ModalActionConfig;
+    closeOnOverlayClick?: boolean;
+    severity?: Severity;
+    disableContentSpacing?: boolean;
+};
+export declare function Modal({ isOpen, onRequestClose, header, content, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, }: ModalProps): React.ReactNode;

package/dist/components/modal/Modal.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useEffect } from 'react';
+import styles from './Modal.module.css';
+import { Headline } from '../headline/Headline';
+import { Button } from '../button/Button';
+import { X } from 'lucide-react';
+
+function Modal({
+  isOpen,
+  onRequestClose,
+  header,
+  content,
+  primaryAction,
+  secondaryAction,
+  closeOnOverlayClick = true,
+  severity,
+  disableContentSpacing = false,
+  isLoading
+}) {
+  const titleId = useId();
+  const dialogRef = useRef(null);
+  const lastActiveElementRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    lastActiveElementRef.current = document.activeElement;
+    const dialog = dialogRef.current;
+    if (dialog) {
+      const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+      const focusable = dialog.querySelectorAll(focusableSelectors);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      } else {
+        dialog.focus();
+      }
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+        return;
+      }
+      if (event.key === "Tab" && dialogRef.current) {
+        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey) {
+          if (document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (lastActiveElementRef.current) {
+        lastActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen, onRequestClose]);
+  if (!isOpen) return null;
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onRequestClose();
+    }
+  };
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  const resolvedSecondaryAction = secondaryAction != null ? secondaryAction : primaryAction ? { label: "Luk", onClick: onRequestClose } : void 0;
+  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+  return /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: `${styles.modal} ${disableContentSpacing ? "" : styles.contentSpacing}`,
+      onClick: stopPropagation,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": header ? titleId : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+          header && /* @__PURE__ */ jsx(Headline, { severity, size: 3, disableMargin: true, children: header }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "inline", onClick: onRequestClose, "aria-label": "Luk", children: /* @__PURE__ */ jsx(X, {}) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.body, children: content }),
+        shouldRenderFooter && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+          resolvedSecondaryAction && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outlined",
+              onClick: resolvedSecondaryAction.onClick,
+              disabled: isLoading,
+              children: [
+                resolvedSecondaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon }),
+                /* @__PURE__ */ jsx("span", { children: resolvedSecondaryAction.label })
+              ]
+            }
+          ),
+          primaryAction && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "primary",
+              onClick: primaryAction.onClick,
+              disabled: primaryAction.disabled || isLoading,
+              loading: isLoading,
+              children: [
+                primaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: primaryAction.icon }),
+                /* @__PURE__ */ jsx("span", { children: primaryAction.label })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { Modal };

package/dist/components/modal/Modal.module.css

@@ -0,0 +1,66 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-scrim);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: clamp(var(--spacing-md), 12vh, 24vh);
+  padding-bottom: var(--spacing-md);
+  z-index: var(--z-modal);
+  overflow-y: auto;
+}
+
+.modal {
+  background: var(--color-bg-surface);
+  border-radius: var(--border-radius-lg);
+  min-width: 320px;
+  max-width: 540px;
+  max-height: calc(100vh - (2 * var(--spacing-md)));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family);
+  min-width: 400px;
+  color: var(--color-fg-default);
+}
+
+/* Slightly more relaxed on small screens */
+@media (max-width: var(--bp-sm)) {
+  .modal {
+    width: calc(100% - 2 * var(--spacing-md));
+    max-width: 100%;
+  }
+}
+
+.header {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md);
+  padding-bottom: 0;
+}
+
+.body {
+  overflow-y: auto;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-muted);
+  padding: var(--spacing-md);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  padding-top: 0;
+  padding: var(--spacing-md);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/components/modal/provider/ModalProvider.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Modal = require('../Modal');
+
+const ModalContext = react.createContext(void 0);
+function ModalProvider({ children }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [config, setConfig] = react.useState(null);
+  const pendingResolverRef = react.useRef(null);
+  const resolvePending = react.useCallback((value) => {
+    if (pendingResolverRef.current) {
+      pendingResolverRef.current(value);
+      pendingResolverRef.current = null;
+    }
+  }, []);
+  const closeModal = react.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const openModal = react.useCallback(
+    (newConfig) => {
+      resolvePending(false);
+      setConfig(newConfig);
+      setIsOpen(true);
+    },
+    [resolvePending]
+  );
+  const handleRequestClose = react.useCallback(() => {
+    if (config == null ? void 0 : config.onRequestClose) {
+      config.onRequestClose();
+    }
+    resolvePending(false);
+    closeModal();
+  }, [config, closeModal, resolvePending]);
+  const confirm = react.useCallback(
+    (confirmConfig) => {
+      return new Promise((resolve) => {
+        resolvePending(false);
+        pendingResolverRef.current = resolve;
+        const { confirmLabel = "OK", cancelLabel = "Annuller", ...rest } = confirmConfig;
+        const primaryAction = {
+          label: confirmLabel,
+          onClick: () => {
+            resolvePending(true);
+            closeModal();
+          }
+        };
+        const secondaryAction = {
+          label: cancelLabel,
+          onClick: () => {
+            resolvePending(false);
+            closeModal();
+          }
+        };
+        setConfig({
+          ...rest,
+          primaryAction,
+          secondaryAction
+        });
+        setIsOpen(true);
+      });
+    },
+    [closeModal, resolvePending]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { ...config != null ? config : {}, isOpen, onRequestClose: handleRequestClose })
+  ] });
+}
+function useModal() {
+  const ctx = react.useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return ctx;
+}
+
+exports.ModalProvider = ModalProvider;
+exports.useModal = useModal;

package/dist/components/modal/provider/ModalProvider.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '../Modal';
+type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
+    onRequestClose?: () => void;
+};
+type ConfirmModalConfig = Omit<ModalConfig, 'primaryAction' | 'secondaryAction' | 'onRequestClose'> & {
+    /** Optional labels for confirm/cancel buttons */
+    confirmLabel?: string;
+    cancelLabel?: string;
+};
+type ModalContextValue = {
+    openModal: (config: ModalConfig) => void;
+    closeModal: () => void;
+    confirm: (config: ConfirmModalConfig) => Promise<boolean>;
+};
+type ModalProviderProps = {
+    children: ReactNode;
+};
+export declare function ModalProvider({ children }: ModalProviderProps): React.ReactNode;
+export declare function useModal(): ModalContextValue;
+export {};

package/dist/components/modal/provider/ModalProvider.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useContext } from 'react';
+import { Modal } from '../Modal';
+
+const ModalContext = createContext(void 0);
+function ModalProvider({ children }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [config, setConfig] = useState(null);
+  const pendingResolverRef = useRef(null);
+  const resolvePending = useCallback((value) => {
+    if (pendingResolverRef.current) {
+      pendingResolverRef.current(value);
+      pendingResolverRef.current = null;
+    }
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const openModal = useCallback(
+    (newConfig) => {
+      resolvePending(false);
+      setConfig(newConfig);
+      setIsOpen(true);
+    },
+    [resolvePending]
+  );
+  const handleRequestClose = useCallback(() => {
+    if (config == null ? void 0 : config.onRequestClose) {
+      config.onRequestClose();
+    }
+    resolvePending(false);
+    closeModal();
+  }, [config, closeModal, resolvePending]);
+  const confirm = useCallback(
+    (confirmConfig) => {
+      return new Promise((resolve) => {
+        resolvePending(false);
+        pendingResolverRef.current = resolve;
+        const { confirmLabel = "OK", cancelLabel = "Annuller", ...rest } = confirmConfig;
+        const primaryAction = {
+          label: confirmLabel,
+          onClick: () => {
+            resolvePending(true);
+            closeModal();
+          }
+        };
+        const secondaryAction = {
+          label: cancelLabel,
+          onClick: () => {
+            resolvePending(false);
+            closeModal();
+          }
+        };
+        setConfig({
+          ...rest,
+          primaryAction,
+          secondaryAction
+        });
+        setIsOpen(true);
+      });
+    },
+    [closeModal, resolvePending]
+  );
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [
+    children,
+    /* @__PURE__ */ jsx(Modal, { ...config != null ? config : {}, isOpen, onRequestClose: handleRequestClose })
+  ] });
+}
+function useModal() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return ctx;
+}
+
+export { ModalProvider, useModal };

package/dist/components/multi-select/MultiSelect.cjs

@@ -36,7 +36,18 @@ function MultiSelect({
             onChange(option.value);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  pointerEvents: "none",
+                  display: "flex",
+                  alignItems: "center",
+                  color: !(selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? "var(--color-border-strong)" : "inherit"
+                },
+                children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {})
+              }
+            ),
             option.label
           ]
         }

package/dist/components/multi-select/MultiSelect.js

@@ -34,7 +34,18 @@ function MultiSelect({
             onChange(option.value);
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {}) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  pointerEvents: "none",
+                  display: "flex",
+                  alignItems: "center",
+                  color: !(selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? "var(--color-border-strong)" : "inherit"
+                },
+                children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {})
+              }
+            ),
             option.label
           ]
         }

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

@@ -15,8 +15,8 @@
   text-decoration: none;
 }
 .productName svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
 .navItems {
@@ -41,11 +41,10 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   text-decoration: none;
-  text-transform: var(--nav-link-transform);
   border-radius: var(--border-radius-default);
   padding-block: calc(var(--spacing-xs) + var(--density));
   padding-inline: var(--spacing-sm);
@@ -57,23 +56,18 @@
 
 /* Hover + focus */
 .link:hover {
-  background-color: var(--color-surface-hover);
-  color: var(--color-text);
+  background-color: var(--color-bg-hover-subtle);
+  color: var(--color-fg-default);
 }
 .link:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-/* Active underline (no radius warp) */
-.link {
-  position: relative; /* establish positioning context for ::after */
-}
-
-/* Base: reset any previous inset shadows */
+/* Active underline */
 .link.active,
 .link[aria-current='page'] {
-  color: var(--color-text);
+  color: var(--color-fg-default);
   box-shadow: none;
 }
 
@@ -84,7 +78,7 @@
   inset-block-end: 0;
   inline-size: 0;
   block-size: 2px;
-  background-color: var(--color-primary);
+  background-color: var(--color-brand);
   transition: inline-size var(--transition-fast) var(--ease-standard);
 }
 
@@ -92,10 +86,11 @@
 .link[aria-current='page']::after {
   inline-size: 100%;
 }
+
 /* Icons/images inside links */
 .link svg,
 .link img {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
   flex: 0 0 auto;
 }

package/dist/components/page/Page.module.css

@@ -21,6 +21,6 @@
 
 .content:not(.disableContentBox) {
   padding: var(--spacing-lg);
-  border: 1px solid var(--opac-bg-dark);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-default);
-}
+}