@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/menu/Menu.module.css

@@ -1,3 +1,4 @@
+/* Menu.module.css */
 .container {
   list-style: none;
   margin: 0;
@@ -17,6 +18,7 @@
   display: contents;
 }
 
+/* Applied to actual interactive elements (button/a/custom that forwards className) */
 .interactive {
   display: flex;
   align-items: center;
@@ -45,29 +47,95 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
-.interactive:hover {
+/*
+  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
+  so that menu row styling still works for components that render a wrapper.
+*/
+.interactiveChild {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
+.row > .interactiveChild {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-block: calc(var(--spacing-xxs) + var(--density-comfortable));
+  padding-inline: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: let Checkbox/Radio consume full width so the hover area feels right */
+.row > .interactiveChild > * {
+  inline-size: 100%;
+}
+
+/* NEW: add consistent gap between control and label inside Checkbox/Radio
+   Both components use a root element with className={styles.container}.
+   Because they're CSS modules, we must target it with :global(.container). */
+.row :global(.container) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* Hover: support both cases (interactive element, or wrapper child) */
+.interactive:hover,
+.row:hover > .interactiveChild {
   background-color: var(--color-bg-hover-subtle);
 }
 
+/* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
+/* If wrapper contains a focusable element, show ring when any child is focused */
+.row:focus-within > .interactiveChild {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Selected/active (legacy + item variant) */
 .active,
-.interactive[aria-selected='true'] {
+.interactive[aria-selected='true'],
+.row > .interactiveChild.active,
+.row > .interactiveChild[aria-selected='true'] {
   background-color: var(--color-bg-selected);
   color: var(--color-fg-default);
 }
 
+/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
+.interactive[aria-checked='true'],
+.row > .interactiveChild[aria-checked='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Disabled: support both cases */
 .interactive[aria-disabled='true'],
-.interactive:disabled {
+.interactive:disabled,
+.row > .interactiveChild[aria-disabled='true'] {
   color: var(--color-disabled-fg);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.interactive svg {
+/* Icons inside either interactive element or wrapper */
+.interactive svg,
+.interactiveChild svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
 }
+
+/* Visual separator row (used by <Menu.Separator />) */
+.separator {
+  block-size: 1px;
+  margin-block: var(--spacing-2xs);
+  background: var(--color-border-subtle);
+  opacity: 0.8;
+  border-radius: 999px;
+}

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

@@ -1,18 +1,36 @@
 import type { ElementType, ReactNode, JSX } from 'react';
-export type NavBarItem = {
-    component?: ElementType<any>;
+export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem;
+type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    enabled?: boolean;
+    tags?: string[];
+};
+/** Simple clickable item */
+export type NavBarLinkItem = NavBarBase & {
+    type?: 'item';
+    href: string;
+    component?: ElementType<any>;
     active?: boolean;
     external?: boolean;
-    enabled?: boolean;
+};
+/** Clickable + expandable item (has href AND children) */
+export type NavBarExpandableItem = NavBarBase & {
+    type: 'expandable';
     href: string;
-    tags?: string[];
-    children?: NavBarItem[];
+    component?: ElementType<any>;
+    active?: boolean;
+    external?: boolean;
+    children: NavBarItem[];
+};
+/** Non-clickable group header */
+export type NavBarGroupItem = NavBarBase & {
+    type: 'group';
+    children: NavBarItem[];
 };
 interface NavBarProps {
     logo?: ReactNode;
-    items: NavBarItem[];
+    items: NavBarLinkItem[];
     productName?: string;
     addition?: ReactNode;
 }

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

@@ -15,13 +15,13 @@
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
   min-width: 320px;
-  max-width: 540px;
+  max-width: 700px;
   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;
+  min-width: 500px;
   color: var(--color-fg-default);
 }
 

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

@@ -1,16 +1,24 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 import { Severity } from '../../../constants/severity.types';
 interface SidePanelProps {
     children?: ReactNode;
     header: ReactNode;
     headerAddition?: ReactNode;
-    actions: ReactNode;
-    onClose: () => void;
+    actions?: ReactNode;
+    onClose: (event?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => void;
     isOpen: boolean;
     showBackdrop?: boolean;
     severity?: Severity;
     showHeaderMarker?: boolean;
     width?: number | string;
+    /**
+     * Optional details pane (separate column).
+     */
+    details?: ReactNode;
+    detailsHeader?: ReactNode;
+    detailsWidth?: number | string;
+    onCloseDetails?: () => void;
+    detailsHeaderAddition?: ReactNode;
 }
-export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
 export {};

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

@@ -1,10 +1,83 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from 'lucide-react';
+import { useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
+import { MOTION_MS } from '../../../styles/animation';
 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 })] })] }));
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
+    const [mounted, setMounted] = useState(false);
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isActive, setIsActive] = useState(false);
+    const panelRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    // OPEN: ensure rendered so animation can play
+    useEffect(() => {
+        if (isOpen)
+            setShouldRender(true);
+    }, [isOpen]);
+    // Close on ESC key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        if (!isOpen) {
+            setIsActive(false);
+            return;
+        }
+        const raf = requestAnimationFrame(() => setIsActive(true));
+        return () => cancelAnimationFrame(raf);
+    }, [isOpen, shouldRender]);
+    // When closing: wait for transform transition end to unmount.
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const onTransitionEnd = (e) => {
+            if (e.target !== el)
+                return;
+            if (e.propertyName !== 'transform')
+                return;
+            if (!isOpen)
+                setShouldRender(false);
+        };
+        el.addEventListener('transitionend', onTransitionEnd);
+        return () => el.removeEventListener('transitionend', onTransitionEnd);
+    }, [isOpen, shouldRender]);
+    if (!mounted)
+        return null;
+    if (!shouldRender)
+        return null;
+    const hasDetails = Boolean(details);
+    return createPortal(_jsxs(_Fragment, { children: [showBackdrop && (_jsx("div", { className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ''}`, onClick: e => {
+                    e.stopPropagation();
+                    onClose(e);
+                } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
+                    '--side-panel-width': width,
+                    '--details-width': detailsWidth,
+                    '--panel-dur': MOTION_MS.panelSlide + 'ms',
+                }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
+                                                    e.stopPropagation();
+                                                    onCloseDetails();
+                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", 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, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: e => {
+                                                        e.stopPropagation();
+                                                        onClose(e);
+                                                    }, "aria-label": "Close panel", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
 }

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,56 +1,177 @@
 .sidePanel {
-  padding: 0 var(--spacing-md);
+  --col-pad: var(--spacing-md);
+
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
+
+  /* Shadow + edge */
+  --shadow-opacity: 0.22;
+  --edge-opacity: 0.12;
+
+  box-sizing: border-box;
+  padding: 0;
   height: 100vh;
-  width: var(--side-panel-width, 400px);
+
   position: fixed;
   right: 0;
   top: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+
+  background-color: var(--color-bg-surface);
+  z-index: var(--z-drawer);
+
+  transform: translate3d(100%, 0, 0);
+  transition: transform var(--panel-dur) var(--panel-ease);
+  will-change: transform;
+
+  display: grid;
+  gap: var(--spacing-md);
+  align-items: stretch;
+
+  overflow: hidden;
+  pointer-events: auto;
+
+  /* Make pseudo-elements layer properly */
+  isolation: isolate;
+}
+
+/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
+.sidePanel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1; /* behind content but within isolated stacking context */
+
+  /* 1) drop-shadow = smoother than animating box-shadow
+     2) edge gradient = premium depth cue */
+  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
+  opacity: 0;
+
+  /* Edge highlight from the left edge (panel’s leading edge) */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, var(--edge-opacity)),
+    rgba(255, 255, 255, 0) 36%
+  );
+
+  transition: opacity var(--panel-dur) var(--panel-ease);
+
+  will-change: opacity;
+}
+
+/* Optional: super subtle “sheen” right as it settles (feels snappy) */
+.sidePanel.open::before {
+  opacity: 1;
+}
+
+.sidePanel.open {
+  transform: translate3d(0, 0, 0);
+}
+
+/* MAIN TRACK WIDTH = content + padding*2 */
+.sidePanel.noDetails {
+  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+}
+
+/* when details show, main track stays the same; panel grows */
+.sidePanel.withDetails {
+  grid-template-columns:
+    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
+    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
+
+  width: calc(
+    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
+      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
+  );
+}
+
+/* columns get the padding */
+.mainCol,
+.detailsCol {
+  box-sizing: border-box;
+  padding: 0 var(--col-pad);
+
+  min-width: 0;
+  min-height: 0;
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  transform: translateX(100%);
-  transition: transform 0.2s ease-in-out;
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-drawer);
-  background-color: var(--color-bg-surface);
-  max-height: 100vh;
+}
+
+.header {
+  padding: var(--spacing-md) 0;
 }
 
 .content {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
   font-size: var(--font-size-sm);
 }
 
-.header {
-  position: sticky;
-  top: 0;
-  padding: var(--spacing-md) 0;
-  background: inherit;
-}
-
 .actions {
-  position: sticky;
   padding: var(--spacing-md) 0;
-  background: inherit;
-  bottom: 0;
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-sm);
+  min-width: 0;
 }
 
-.sidePanel.open {
-  transform: translateX(0);
+/* details styling */
+.detailsCol {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-bg-surface);
+}
+
+.detailsHeader {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.detailsTitle {
+  font-weight: 600;
 }
 
+.detailsHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.detailsContent {
+  padding: var(--spacing-md) 0;
+  overflow: auto;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+/* Backdrop with a nice fade */
 .backdrop {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--overlay-scrim);
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
   z-index: var(--z-backdrop);
+
+  opacity: 0;
+  transition: opacity var(--panel-dur) var(--panel-ease);
+  will-change: opacity;
+}
+
+.backdropOpen {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel,
+  .sidePanel::before,
+  .backdrop {
+    transition: none !important;
+  }
 }

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

@@ -1,4 +1,4 @@
-export declare function useSidePanel(): {
+export declare function useSidePanel(initialOpen?: boolean): {
     isOpen: boolean;
     openSidePanel: () => void;
     closeSidePanel: () => void;

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-export function useSidePanel() {
-    const [isOpen, setIsOpen] = useState(false);
+export function useSidePanel(initialOpen = false) {
+    const [isOpen, setIsOpen] = useState(initialOpen);
     const openSidePanel = () => setIsOpen(true);
     const closeSidePanel = () => setIsOpen(false);
     return {

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
+import { MOTION_MS } from '../../../styles/animation';
 import { TooltipContext } from './TooltipProvider';
 export function useTooltipTrigger(options) {
     const ctx = useContext(TooltipContext);
@@ -45,7 +46,6 @@ export function useTooltipTrigger(options) {
         }
         show();
     }, [isOpen, show, hide]);
-    // ✅ Only call update if THIS tooltip is the active one AND something changed
     useEffect(() => {
         var _a;
         if (!isOpen)
@@ -84,7 +84,9 @@ export function useTooltipTrigger(options) {
     const onFocus = () => {
         clearTimers();
         if (!isControlled)
-            setOpen(true);
+            setTimeout(() => {
+                setOpen(true);
+            }, MOTION_MS.tooltipOpen);
     };
     const onBlur = () => {
         clearTimers();

package/dist/components/page-layout/PageLayout.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
-/** Base component */
 const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
     if (orientation === 'vertical') {
         return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
@@ -17,7 +16,6 @@ const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, o
                                     display: 'flex',
                                     flexDirection: 'column',
                                     padding: 'var(--spacing-md)',
-                                    gap: 'var(--spacing-md)',
                                     backgroundColor: 'var(--color-bg-surface)',
                                     overflow: 'auto',
                                 }, children: children })] })] }) }));

package/dist/components/popover/Popover.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { createPortal } from 'react-dom';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import styles from './Popover.module.css';
 export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
     const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { NavBarItem } from '../../../../components/nav-bar/NavBar';
-interface ExpandableSidebarItemProps {
+import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
+type ExpandableSidebarItemProps = {
     items: NavBarItem[];
     label: string;
-    component?: React.ElementType;
+    component: React.ElementType;
     icon: React.ReactNode;
-    href?: string;
-}
+    href: string;
+};
 export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};