@dbcdk/react-components 0.0.65 → 0.0.67

package/dist/components/button-select/ButtonSelect.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+import React from 'react';
+import type { ButtonSize } from '../../components/button/Button';
+export interface ButtonSelectOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface ButtonSelectProps<T extends string = string> {
+    options: ButtonSelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export declare function ButtonSelect<T extends string>({ options, value, onChange, size, disabled, }: ButtonSelectProps<T>): JSX.Element;

package/dist/components/button-select/ButtonSelect.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../components/button/Button';
+import styles from './ButtonSelect.module.css';
+export function ButtonSelect({ options, value, onChange, size = 'md', disabled, }) {
+    return (_jsx("div", { className: styles.group, role: "group", children: options.map(option => (_jsx(Button, { className: option.value === value ? `${styles.btn} ${styles.btnSelected}` : styles.btn, variant: "outlined", shape: "default", size: size, active: option.value === value, disabled: disabled || option.disabled, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
+}

package/dist/components/button-select/ButtonSelect.module.css

@@ -0,0 +1,40 @@
+.group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+/* Collapse the doubled border between adjacent buttons */
+.group .btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+/* Flatten interior corners */
+.group .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group .btn:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Raise hovered / focused / selected button so its full border is visible above siblings */
+.group .btn:hover,
+.group .btn:focus-visible,
+.group .btn:active,
+.group .btnSelected {
+  position: relative;
+  z-index: 1;
+}
+
+/* Selected state follows the system's selection language (same as Chip) */
+.group .btnSelected {
+  background-color: var(--color-bg-selected);
+  color: var(--color-brand);
+  border-color: var(--color-border-selected);
+}
+
+.group .btnSelected:hover {
+  background-color: var(--color-bg-selected);
+}

package/dist/components/forms/input/Input.module.css

@@ -163,9 +163,9 @@
 
 .standalone {
   background-color: var(--color-bg-surface);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-subtle);
   border-radius: var(--border-radius-rounded);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
+  box-shadow: var(--shadow-xs), var(--shadow-sm);
 }
 
 .standalone .input {
@@ -401,14 +401,15 @@
 .withButton:has(.standalone) .trailingButton {
   border-top-right-radius: var(--border-radius-rounded);
   border-bottom-right-radius: var(--border-radius-rounded);
-  border-left-color: var(--color-border-default);
+  border-left-color: var(--color-border-subtle);
+  border-color: var(--color-border-subtle);
   background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
+  box-shadow: var(--shadow-xs), var(--shadow-sm);
 }
 
 .withButton:has(.standalone) .trailingButton:hover {
   border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-md);
+  box-shadow: var(--shadow-sm), var(--shadow-sm);
 }
 
 /* Date/time picker indicator (WebKit) */

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

@@ -6,6 +6,7 @@ type NavBarBase = {
     icon?: ReactNode;
     enabled?: boolean;
     tags?: string[];
+    truncateLabel?: boolean;
 };
 /** Simple clickable item */
 export type NavBarLinkItem = NavBarBase & {

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -21,7 +21,6 @@
   position: fixed;
   z-index: var(--z-tooltip);
   pointer-events: none;
-
   background: var(--color-fg-default);
   color: var(--color-fg-on-strong);
   font-size: var(--font-size-xs);
@@ -30,7 +29,6 @@
   border-radius: var(--border-radius-default);
 
   /*
-    ✅ Width behavior:
     - Don't let it run wild horizontally
     - But don't clip: allow wrap
     - Keep some relation to viewport

package/dist/components/search-box/SearchBox.d.ts

@@ -3,6 +3,7 @@ import { InputVariant } from '../../components/forms/input/Input';
 import { Size } from '../../types/sizes.types';
 type SearchBoxProps<T extends Record<string, unknown>> = {
     inputWidth?: string | number;
+    maxWidth?: string | number;
     inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
     result?: T[];

package/dist/components/search-box/SearchBox.js

@@ -7,7 +7,7 @@ import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import styles from './SearchBox.module.css';
-export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
+export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     // What the user sees immediately in the textbox
     const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
@@ -156,5 +156,8 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
         buttonIcon,
         fullWidth,
     ]);
-    return _jsx("div", { style: fullWidth ? { width: '100%' } : undefined, children: inputField });
+    return (_jsx("div", { style: {
+            ...(fullWidth ? { width: '100%' } : undefined),
+            ...(maxWidth !== undefined ? { maxWidth } : undefined),
+        }, children: inputField }));
 });

package/dist/components/sidebar/Sidebar.d.ts

@@ -11,6 +11,11 @@ interface SidebarProps {
     activeLink?: string;
     version?: string | number;
     hideSearch?: boolean;
+    footer?: React.ReactNode;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    storageKey?: string;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -1,7 +1,6 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink, version, hideSearch, }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch }) }));
+export function Sidebar({ items, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
 }

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -4,6 +4,7 @@ interface SidebarItemProps {
     label: string;
     icon: React.ReactNode;
     href?: string;
+    truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, href, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, href, truncateLabel, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
-export function SidebarItem({ component: Component, label, icon, href, }) {
+export function SidebarItem({ component: Component, label, icon, href, truncateLabel, }) {
     if (!Component) {
         return null;
     }
-    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href }) }));
+    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, truncateLabel: truncateLabel }) }));
 }

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

@@ -6,6 +6,7 @@ type ExpandableSidebarItemProps = {
     component: React.ElementType;
     icon: React.ReactNode;
     href: string;
+    truncateLabel?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -10,7 +10,7 @@ import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
 const isGroup = (item) => item.type === 'group';
 const isExpandable = (item) => item.type === 'expandable';
-export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
+export function ExpandableSidebarItem({ items, label, icon, component: Component, href, truncateLabel, }) {
     const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandItem, collapseItem, isExpanded, } = useSidebar();
     // Local-only state for animation coordination
     const [closing, setClosing] = useState(false);
@@ -60,7 +60,7 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         if (isExpandable(item)) {
             return (_jsx(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, component: item.component }, key));
         }
-        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href }, key));
+        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href, truncateLabel: item.truncateLabel }, key));
     };
-    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, truncateLabel: truncateLabel, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 interface SidebarContainerProps {
     logo?: ReactNode;
     productName?: string;
@@ -6,6 +6,11 @@ interface SidebarContainerProps {
     activeLink?: string;
     version?: string | number;
     hideSearch?: boolean;
+    footer?: ReactNode;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -1,12 +1,142 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }) {
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const num = Number(raw);
+        return Number.isFinite(num) ? num : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredWidth(key, value) {
+    try {
+        localStorage.setItem(key, String(Math.round(value)));
+    }
+    catch {
+        // ignore
+    }
+}
+function removeStoredWidth(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] })] }));
+    const initialStoredWidth = typeof window !== 'undefined' && storageKey ? readStoredWidth(storageKey) : null;
+    const [sidebarWidth, setSidebarWidth] = useState(() => initialStoredWidth !== null && initialStoredWidth !== void 0 ? initialStoredWidth : defaultWidth);
+    const [manualWidth, setManualWidth] = useState(() => initialStoredWidth);
+    const [isResizing, setIsResizing] = useState(false);
+    const [ariaMaxWidth, setAriaMaxWidth] = useState(undefined);
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const pointerIdRef = useRef(null);
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const maxWidthRef = useRef(Infinity);
+    // Use the viewport width as the ceiling — avoids the circular-dependency
+    // that occurs when the sidebar lives in an `auto`-width grid column whose
+    // size is determined by the sidebar itself (e.g. PageLayout vertical).
+    const getMaxWidth = useCallback(() => {
+        const viewportWidth = typeof window !== 'undefined'
+            ? window.innerWidth || document.documentElement.clientWidth
+            : Infinity;
+        return Math.max(minWidth, viewportWidth - minWidth);
+    }, [minWidth]);
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        if (manualWidth === null) {
+            removeStoredWidth(storageKey);
+            return;
+        }
+        writeStoredWidth(storageKey, manualWidth);
+    }, [manualWidth, storageKey]);
+    useEffect(() => {
+        setAriaMaxWidth(getMaxWidth());
+    }, [getMaxWidth]);
+    useEffect(() => {
+        return () => {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, []);
+    const updateWidth = useCallback((nextWidth) => {
+        setManualWidth(nextWidth);
+        setSidebarWidth(nextWidth);
+    }, []);
+    const onResizePointerDown = useCallback((e) => {
+        const maxWidth = getMaxWidth();
+        if (maxWidth === null)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        maxWidthRef.current = maxWidth;
+        draggingRef.current = true;
+        pointerIdRef.current = e.pointerId;
+        startXRef.current = e.clientX;
+        startWidthRef.current = sidebarWidth;
+        setIsResizing(true);
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+    }, [getMaxWidth, sidebarWidth]);
+    const onResizePointerMove = useCallback((e) => {
+        if (!draggingRef.current)
+            return;
+        if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+            return;
+        const next = startWidthRef.current + (e.clientX - startXRef.current);
+        updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    }, [minWidth, updateWidth]);
+    const endResizeDrag = useCallback(() => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        pointerIdRef.current = null;
+        setIsResizing(false);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, []);
+    const resetWidth = useCallback(() => {
+        setManualWidth(null);
+        setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+    }, [defaultWidth, getMaxWidth, minWidth]);
+    const onKeyDown = useCallback((e) => {
+        const maxWidth = getMaxWidth();
+        const step = e.shiftKey ? 32 : 8;
+        let next = null;
+        if (e.key === 'ArrowLeft')
+            next = sidebarWidth - step;
+        if (e.key === 'ArrowRight')
+            next = sidebarWidth + step;
+        if (e.key === 'Home')
+            next = minWidth;
+        if (e.key === 'End')
+            next = maxWidth;
+        if (next === null)
+            return;
+        e.preventDefault();
+        updateWidth(clamp(next, minWidth, maxWidth));
+    }, [getMaxWidth, minWidth, sidebarWidth, updateWidth]);
+    const containerStyle = useMemo(() => ({
+        '--sidebar-width': `${sidebarWidth}px`,
+    }), [sidebarWidth]);
+    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -1,4 +1,5 @@
 .container {
+  position: relative;
   flex-shrink: 1;
   height: 100%;
   overflow: auto;
@@ -14,6 +15,10 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+.container.resizing {
+  transition: none;
+}
+
 /* Collapsed state */
 .container.collapsed {
   width: var(--component-size-lg);
@@ -37,10 +42,12 @@
 /* HEADER (product + collapse) */
 .header {
   flex: 0 0 auto;
-  border-bottom: 1px solid var(--color-border-default);
-  padding: 0 var(--spacing-sm);
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 var(--color-border-default);
+  padding-inline: var(--spacing-xs);
   min-block-size: 60px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -57,15 +64,15 @@
   display: flex;
   align-items: center;
   max-inline-size: 100%;
+  block-size: 25px;
   min-width: 0;
 }
 
 /* Keep product logo visible in expanded state */
 .productLogo img,
 .productLogo svg {
-  inline-size: 50px;
-  max-inline-size: 100%;
-  block-size: auto;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 /* Collapse button */
@@ -131,6 +138,61 @@
   padding: 0;
 }
 
+/* RESIZE HANDLE */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.resizeHandle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.resizeHandle:hover::after,
+.resizeHandle:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.resizeHandle:active::after {
+  background-color: var(--color-brand);
+}
+
+.resizeHandle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+.container.collapsed .resizeHandle {
+  display: none;
+}
+
+/* CUSTOM FOOTER SLOT */
+.footerSlot {
+  flex: 0 0 auto;
+}
+
+.container:not(.collapsed) .footerSlot {
+  padding-inline: var(--spacing-xs);
+}
+
 /* FOOTER (company logo) */
 .footer {
   flex: 0 0 auto;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -7,5 +7,6 @@ export interface SidebarItemContentProps {
     href?: string;
     disableActiveStyles?: boolean;
     headerStyle?: boolean;
+    truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, headerStyle, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -1,7 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
-export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, }) {
+export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
     const { activeLink, isSidebarCollapsed } = useSidebar();
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && _jsx("span", { className: styles.label, children: label })] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${truncateLabel ? styles.truncate : ''}`, title: truncateLabel && typeof label === 'string' ? label : undefined, children: label }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
 }

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -41,6 +41,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  min-inline-size: 0;
 }
 
 .container:not(.active):hover {
@@ -83,3 +84,13 @@
   letter-spacing: 0.04em;
   transition: 0.15s ease-in-out;
 }
+
+.label {
+  min-inline-size: 0;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -16,11 +16,11 @@ export function SidebarItems({ activeLink }) {
             return isSidebarCollapsed ? ((_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`))) : (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))] }, key));
         }
         if (item.type === 'expandable') {
-            const { component: Component, label, icon, children, href } = item;
-            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, component: Component }, key));
+            const { component: Component, label, icon, children, href, truncateLabel } = item;
+            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, truncateLabel: truncateLabel, component: Component }, key));
         }
-        const { component: Component, label, icon, href } = item;
-        return _jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, key);
+        const { component: Component, label, icon, href, truncateLabel } = item;
+        return (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href, truncateLabel: truncateLabel }, key));
     };
     return filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/button/Button';
+export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
 export * from './components/popover/Popover';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './components/button/Button';
+export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
 export * from './components/popover/Popover';

package/dist/styles/themes/dbc/dark.css

@@ -181,11 +181,11 @@ html[data-theme='dark'] {
   --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
 
   /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
+  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.48);
 
   /* Data viz */
   --viz-cat-1: #2563eb;

package/dist/styles/themes/dbc/light.css

@@ -180,11 +180,11 @@ html[data-theme='light'] {
   --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
 
   /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
 
   /* Data viz */
   --viz-cat-1: #2563eb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -46,7 +46,7 @@
     "build": "npm run clean && npm run build:code && npm run postbuild",
     "build:code": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "dev": "tsc -p tsconfig.build.json --watch",
-    "test": "jest",
+    "test": "vitest run",
     "format": "prettier . --write",
     "format:fix": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
@@ -77,11 +77,9 @@
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@swc/core": "^1.15.11",
-    "@swc/jest": "^0.2.39",
     "@tanstack/react-table": "^8.20.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
@@ -98,8 +96,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^29.0.2",
     "prettier": "^3.2.4",
     "react": "19.2.4",