@dbcdk/react-components 0.0.5 → 0.0.6

package/dist/components/headline/Headline.js

@@ -1,47 +1,22 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-
-function Headline({
-  size = 2,
-  marker,
-  disableMargin,
-  children,
-  severity,
-  weight = 600,
-  subHeadline,
-  addition,
-  icon,
-  tone
-}) {
-  const Tag = `h${size}`;
-  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
-  const headlineClassName = [
-    styles.headline,
-    disableMargin ? styles.noMargin : "",
-    marker ? styles.marker : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-      /* @__PURE__ */ jsxs(
-        Tag,
-        {
-          style: {
-            "--font-weight": weight,
-            "--marker-color": severity ? SeverityBgColor[severity] : void 0
-          },
-          className: headlineClassName,
-          children: [
-            icon || severity && !marker ? /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) : null,
-            children
-          ]
-        }
-      ),
-      addition
-    ] }),
-    subHeadline && /* @__PURE__ */ jsx("div", { className: styles.subHeadline, children: subHeadline })
-  ] });
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+    const Tag = `h${size}`;
+    const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
+        .filter(Boolean)
+        .join(' ');
+    const headlineClassName = [
+        styles.headline,
+        disableMargin ? styles.noMargin : '',
+        marker ? styles.marker : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
+                            '--font-weight': weight,
+                            '--marker-color': severity ? SeverityBgColor[severity] : undefined,
+                        }, className: headlineClassName, children: [icon || (severity && !marker) ? _jsx(Icon, { customIcon: icon, severity: severity }) : null, children] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
 }
-
-export { Headline };

package/dist/components/{link/Link.d.ts → hyperlink/Hyperlink.d.ts}

@@ -1,9 +1,9 @@
 import * as React from 'react';
-interface LinkProps {
+interface HyperlinkProps {
     component: React.ReactElement;
     className?: string;
     icon?: React.ReactNode;
     disableIcon?: boolean;
 }
-export declare function Link({ component, icon, disableIcon }: LinkProps): React.ReactElement;
+export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styles from './Hyperlink.module.css';
+export function Hyperlink({ component, icon }) {
+    const originalProps = component.props;
+    return React.cloneElement(component, {
+        ...originalProps,
+        className: styles.link,
+        onClick: (e) => e.stopPropagation(),
+    }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+}

package/dist/components/{link/Link.module.css → hyperlink/Hyperlink.module.css}

@@ -3,11 +3,14 @@
   gap: var(--spacing-xs);
   position: relative;
   text-decoration: none;
-  font-weight: bold;
-  color: inherit;
+  color: var(--color-brand);
   font-size: inherit;
 }
 
+.link:hover {
+  text-decoration: underline;
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -18,15 +21,3 @@
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
 }
-
-.link::after {
-  content: '';
-  display: block;
-  height: var(--border-width-medium);
-  background-color: var(--color-brand);
-  width: 100%;
-  align-self: flex-end;
-  position: absolute;
-  left: 0;
-  bottom: calc(var(--spacing-xxs) * -1);
-}

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

@@ -1,8 +1,9 @@
-import { Severity } from '@/constants/severity.types';
-export declare const SeverityIcon: Record<Severity, React.ReactNode>;
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export declare const SeverityIcon: Record<Severity, ReactNode>;
 interface IconProps {
     severity?: Severity;
-    customIcon?: React.ReactNode;
+    customIcon?: ReactNode;
     label?: string;
 }
 export declare function Icon({ severity, label, customIcon }: IconProps): JSX.Element;

package/dist/components/icon/Icon.js

@@ -1,20 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Building2, CircleAlert, CircleCheck, CircleX, Info } 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, {})
+export const SeverityIcon = {
+    neutral: _jsx(CircleCheck, {}),
+    success: _jsx(CircleCheck, {}),
+    error: _jsx(CircleX, {}),
+    info: _jsx(Info, {}),
+    warning: _jsx(CircleAlert, {}),
+    brand: _jsx(Building2, {}),
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+export function Icon({ severity, label, customIcon }) {
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ''} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }), label && _jsx("span", { children: label })] }));
 }
-
-export { Icon, SeverityIcon };

package/dist/components/menu/Menu.js

@@ -1,71 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
-
-const MenuBase = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref,
-      role: "menu",
-      className: [styles.container, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  )
-);
-MenuBase.displayName = "Menu";
-const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
-const MenuItem = React.forwardRef(
-  ({ children, active, disabled, className, ...liProps }, ref) => {
+const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
+MenuBase.displayName = 'Menu';
+const isInteractiveEl = (el) => React.isValidElement(el) &&
+    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true); // allow custom/Next Link components
+const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
+    // If child is interactive (a/button/NextLink), clone it and style it.
     if (isInteractiveEl(children)) {
-      const child = children;
-      const childClass = [styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx(
-        "li",
-        {
-          ref,
-          role: "none",
-          className: [styles.row, className].filter(Boolean).join(" "),
-          ...liProps,
-          children: React.cloneElement(child, {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [child.props.className, styles.interactive, childClass].filter(Boolean).join(" ")
-          })
-        }
-      );
+        const child = children;
+        const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: React.cloneElement(child, {
+                role: 'menuitem',
+                tabIndex: -1,
+                'aria-selected': active || undefined,
+                'aria-disabled': disabled || undefined,
+                className: [child.props.className, styles.interactive, childClass]
+                    .filter(Boolean)
+                    .join(' '),
+            }) }));
     }
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        ref,
-        role: "none",
-        className: [styles.row, className].filter(Boolean).join(" "),
-        ...liProps,
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [styles.interactive, styles.item, active ? styles.active : ""].filter(Boolean).join(" "),
-            type: "button",
-            disabled,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-MenuItem.displayName = "Menu.Item";
-const Menu = Object.assign(
-  MenuBase,
-  { Item: MenuItem }
-);
-
-export { Menu };
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
+                .filter(Boolean)
+                .join(' '), type: "button", disabled: disabled, children: children }) }));
+});
+MenuItem.displayName = 'Menu.Item';
+export const Menu = Object.assign(MenuBase, { Item: MenuItem });

package/dist/components/meta-bar/MetaBar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import { type ReactNode, type JSX } from 'react';
 export interface MetaItem {
-    label?: React.ReactNode;
-    value: React.ReactNode;
+    label?: ReactNode;
+    value: ReactNode;
 }
 interface MetaBarProps {
     items: MetaItem[];
-    separator?: React.ReactNode;
+    separator?: ReactNode;
 }
 export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
 export {};

package/dist/components/meta-bar/MetaBar.js

@@ -1,22 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import styles from './MetaBar.module.css';
-
-function MetaBar({ items, separator = "\u2022" }) {
-  const visibleItems = items.filter(
-    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
-  );
-  if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      item.label && /* @__PURE__ */ jsxs("span", { children: [
-        item.label,
-        ": "
-      ] }),
-      /* @__PURE__ */ jsx("span", { children: item.value })
-    ] }),
-    index < visibleItems.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator })
-  ] }, index)) });
+export function MetaBar({ items, separator = '•' }) {
+    const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
+    if (visibleItems.length === 0)
+        return null;
+    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
 }
-
-export { MetaBar };

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type { ElementType, ReactNode, JSX } from 'react';
 export type NavBarItem = {
-    component?: React.ElementType<any>;
+    component?: ElementType<any>;
     label: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     active?: boolean;
     external?: boolean;
     enabled?: boolean;
@@ -11,10 +11,10 @@ export type NavBarItem = {
     children?: NavBarItem[];
 };
 interface NavBarProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     items: NavBarItem[];
     productName?: string;
-    addition?: React.ReactNode;
+    addition?: ReactNode;
 }
 export declare function NavBar({ logo, items, productName, addition }: NavBarProps): JSX.Element;
 export {};

package/dist/components/nav-bar/NavBar.js

@@ -1,49 +1,19 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './NavBar.module.css';
 import { Logo } from '../../assets/logo';
-import { Headline } from '../headline/Headline';
 import { AppHeader } from '../app-header/AppHeader';
-
-function NavBar({ logo, items, productName, addition }) {
-  return /* @__PURE__ */ jsx(AppHeader, { children: /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: styles.container,
-      "aria-label": productName ? `${productName} navigation` : "Main navigation",
-      children: [
-        logo,
-        productName && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: styles.productName,
-            style: { display: "flex", alignItems: "center", gap: 16 },
-            children: [
-              /* @__PURE__ */ jsx(Logo, {}),
-              /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
-          const { component: Component, label, icon, href, active, external } = item;
-          const linkClass = [styles.link, active ? styles.active : ""].filter(Boolean).join(" ");
-          const commonProps = {
-            className: linkClass,
-            href,
-            ...active ? { "aria-current": "page" } : {},
-            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
-          };
-          return /* @__PURE__ */ jsx("li", { className: styles.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxs(Component, { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) : /* @__PURE__ */ jsxs("a", { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) }, id);
-        }) }),
-        addition
-      ]
-    }
-  ) });
+import { Headline } from '../headline/Headline';
+export function NavBar({ logo, items, productName, addition }) {
+    return (_jsx(AppHeader, { children: _jsxs("nav", { className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [logo, productName && (_jsxs("span", { className: styles.productName, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] })), _jsx("ul", { className: styles.navItems, role: "list", children: items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
+                        const { component: Component, label, icon, href, active, external } = item;
+                        const linkClass = [styles.link, active ? styles.active : ''].filter(Boolean).join(' ');
+                        const commonProps = {
+                            className: linkClass,
+                            href,
+                            ...(active ? { 'aria-current': 'page' } : {}),
+                            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+                        };
+                        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
+                    }) }), addition] }) }));
 }
-
-export { NavBar };

package/dist/components/{modal → overlay/modal}/Modal.d.ts

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

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

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useEffect, useId, useRef } from 'react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Modal.module.css';
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+    const titleId = useId();
+    const dialogRef = useRef(null);
+    const lastActiveElementRef = useRef(null);
+    // Always call the latest onRequestClose without re-running effects
+    const onRequestCloseRef = useRef(onRequestClose);
+    useEffect(() => {
+        onRequestCloseRef.current = onRequestClose;
+    }, [onRequestClose]);
+    // Track open transition so we only autofocus once per open
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        var _a;
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = isOpen;
+        if (!isOpen)
+            return;
+        // Only do focus setup when opening (false -> true)
+        if (!wasOpen) {
+            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) {
+                    // Prefer focusing the first input/select/textarea if present
+                    const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
+                    preferred.focus();
+                }
+                else {
+                    dialog.focus();
+                }
+            }
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onRequestCloseRef.current();
+                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);
+            // Restore focus only when closing (true -> false) happens elsewhere
+            // so we do it when modal unmounts while open.
+            if (lastActiveElementRef.current) {
+                lastActiveElementRef.current.focus();
+            }
+        };
+    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = () => {
+        if (closeOnOverlayClick) {
+            onRequestCloseRef.current();
+        }
+    };
+    const stopPropagation = e => {
+        e.stopPropagation();
+    };
+    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
+    const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+    const body = children !== null && children !== void 0 ? children : content;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", children: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+}

package/dist/components/{modal → overlay/modal}/provider/ModalProvider.d.ts

@@ -4,7 +4,6 @@ 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;
 };

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

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState, useRef } from 'react';
+import { Modal } from '../Modal';
+const ModalContext = createContext(undefined);
+export function ModalProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [config, setConfig] = useState(null);
+    // Holds the resolver for the current "confirm" call, if any
+    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) => {
+        // if a confirm was in progress, resolve it as "false" (cancelled/overridden)
+        resolvePending(false);
+        setConfig(newConfig);
+        setIsOpen(true);
+    }, [resolvePending]);
+    const handleRequestClose = useCallback(() => {
+        if (config === null || config === void 0 ? void 0 : config.onRequestClose) {
+            config.onRequestClose();
+        }
+        // Any non-explicit confirm click counts as "false"
+        resolvePending(false);
+        closeModal();
+    }, [config, closeModal, resolvePending]);
+    const confirm = useCallback((confirmConfig) => {
+        return new Promise(resolve => {
+            // cancel any previous pending confirm
+            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 (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, _jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children })] }));
+}
+export function useModal() {
+    const ctx = useContext(ModalContext);
+    if (!ctx) {
+        throw new Error('useModal must be used within a ModalProvider');
+    }
+    return ctx;
+}

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
+interface SidePanelProps {
+    children?: ReactNode;
+    header: ReactNode;
+    headerAddition?: ReactNode;
+    actions: ReactNode;
+    onClose: () => void;
+    isOpen: boolean;
+    showBackdrop?: boolean;
+    severity?: Severity;
+    showHeaderMarker?: boolean;
+    width?: number | string;
+}
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export {};

package/dist/components/overlay/side-panel/SidePanel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './SidePanel.module.css';
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '300px', ...props }) {
+    return (_jsxs(_Fragment, { children: [isOpen && showBackdrop && (_jsx("div", { className: styles.backdrop, onClick: () => {
+                    onClose();
+                } })), _jsxs("div", { ...props, className: `${styles.sidePanel} ${isOpen ? styles.open : ''}`, style: { '--side-panel-width': width }, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, addition: headerAddition, children: header }), _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: onClose, children: _jsx(X, {}) })] }) }), _jsx("div", { className: styles.content, children: children }), _jsx("div", { className: styles.actions, children: actions })] })] }));
+}