@dbcdk/react-components 0.0.47 → 0.0.49

package/dist/components/datetime-picker/DateTimePicker.module.css

@@ -9,11 +9,6 @@
 
 .compactTriggerField {
   padding-block: 2px;
-  padding-inline-end: calc(var(--spacing-xs) + 24px);
-}
-
-.compactTriggerField.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-sm));
 }
 
 .panel {

package/dist/components/filter-field/FilterField.js

@@ -166,7 +166,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                         scheduleEmitValue(next);
                     }, onBlur: () => {
                         flushPendingValue();
-                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'off', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
                         clearDebounce();
                         pendingValueRef.current = '';
                         setLocalValue('');

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -9,6 +9,7 @@ interface CheckboxProps {
     disabled?: boolean;
     modified?: boolean;
     label?: ReactNode;
+    labelAs?: 'label' | 'span';
     size?: Size;
     containerLabel?: string;
     error?: string;
@@ -21,5 +22,5 @@ interface CheckboxProps {
     id?: string;
     'data-cy'?: string;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
 export {};

package/dist/components/forms/checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export function Checkbox({ checked: controlled, onChange, variant = 'default', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+export function Checkbox({ checked: controlled, onChange, variant = 'default', disabled, label, labelAs = 'label', size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
     const [internal, setInternal] = useState(false);
     const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
     const generatedId = useId();
@@ -18,7 +18,8 @@ export function Checkbox({ checked: controlled, onChange, variant = 'default', d
     };
     const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
                     .filter(Boolean)
-                    .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
+                    .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label &&
+                (labelAs === 'label' ? (_jsx("label", { className: styles.label, htmlFor: controlId, children: label })) : (_jsx("span", { className: styles.label, children: label })))] }));
     if (noContainer)
         return content;
     return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));

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

@@ -73,8 +73,8 @@
   border-bottom-right-radius: 0;
 }
 
-.withClear .field {
-  padding-inline-end: calc(var(--spacing-md) + 16px);
+.withClear .input {
+  padding-inline-end: calc(var(--spacing-xs) + 16px + var(--spacing-xs));
 }
 
 /* Global focus reset - variants own visible focus treatment */
@@ -138,7 +138,6 @@
   border-color: transparent;
   border-radius: 0;
   box-shadow: none;
-  padding-inline: var(--spacing-xs);
   padding-block: 0;
   block-size: 100%;
 }
@@ -330,17 +329,17 @@
 }
 
 /* Leading icon */
-.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
+.fieldWithIcon .input {
+  padding-inline-start: calc(var(--spacing-sm) + var(--icon-size-md) + var(--spacing-xs));
 }
 
-.embedded.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-xl));
+.embedded.fieldWithIcon .input {
+  padding-inline-start: calc(var(--spacing-xs) + var(--icon-size-md) + var(--spacing-xs));
 }
 
 .icon {
   position: absolute;
-  inset-inline-start: var(--spacing-md);
+  inset-inline-start: var(--spacing-sm);
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
@@ -353,6 +352,10 @@
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
+.embedded .icon {
+  inset-inline-start: var(--spacing-xs);
+}
+
 .field:focus-within .icon {
   color: var(--color-fg-muted);
 }

package/dist/components/forms/typeahead/Typeahead.js

@@ -11,6 +11,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
     const optionRefs = useRef([]);
+    const interactingWithOptionsRef = useRef(false);
     const listboxId = useId();
     const { onFocus: inputPropsOnFocus, onBlur: inputPropsOnBlur, onKeyDown: inputPropsOnKeyDown, onMouseDown: inputPropsOnMouseDown, onClear: inputPropsOnClear, startAdornment: inputPropsStartAdornment, ...passthroughInputProps } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
     const selectedOption = useMemo(() => {
@@ -39,7 +40,11 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 return option.label;
         }
     }, [multiSelectedValueChipContent]);
-    const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: { whiteSpace: 'nowrap', flexShrink: 0, marginRight: 6 }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
+    const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: {
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            marginRight: 6,
+        }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
         const MAX_CHIPS = 2;
         const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
         const extraCount = selectedOptions.length - MAX_CHIPS;
@@ -112,6 +117,9 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 nextValues.push(option.value);
             }
             onChange(nextValues);
+            if (filteredOptions.length > 1) {
+                return;
+            }
             setInputValue('');
             setQuery('');
             return;
@@ -136,6 +144,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
     };
     const handleBlur = () => {
         if (mode === 'multi') {
+            if (interactingWithOptionsRef.current) {
+                interactingWithOptionsRef.current = false;
+                setInputValue('');
+                setQuery('');
+                return;
+            }
             setInputValue('');
             setQuery('');
             setOpen(false);
@@ -166,13 +180,20 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         setOpen(true);
         setActiveIndex(getSelectedIndex(filteredOptions));
     }, [getSelectedIndex, filteredOptions]);
+    const prepareSingleSearchInput = React.useCallback(() => {
+        if (mode !== 'single' || !selectedOption)
+            return;
+        setInputValue('');
+        setQuery('');
+    }, [mode, selectedOption]);
     const handleOpen = React.useCallback(() => {
         if (mode === 'single' && selectedOption) {
+            prepareSingleSearchInput();
             openWithAllOptions();
             return;
         }
         openWithCurrentFilter();
-    }, [mode, selectedOption, openWithAllOptions, openWithCurrentFilter]);
+    }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
     const handleKeyDown = (e) => {
         switch (e.key) {
             case 'ArrowDown':
@@ -290,7 +311,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                                 return;
                             }
                             if (isAlreadyFocused && mode === 'single' && selectedOption) {
-                                setQuery('');
+                                prepareSingleSearchInput();
                                 setOpen(true);
                                 setActiveIndex(getSelectedIndex(options));
                             }
@@ -308,7 +329,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             if (e.defaultPrevented)
                                 return;
                             handleKeyDown(e);
-                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'off', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, onClear: () => {
+                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, onClear: () => {
                             setInputValue('');
                             setQuery('');
                             setActiveIndex(-1);
@@ -324,11 +345,22 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                         const isSelected = mode === 'multi'
                             ? Array.isArray(selectedValue) && selectedValue.includes(option.value)
                             : option.value === selectedValue;
-                        return (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { ref: node => {
+                        const optionId = `${listboxId}-option-${index}`;
+                        return (mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
+                                optionRefs.current[index] = node;
+                            }, interactiveProps: {
+                                id: optionId,
+                                role: 'option',
+                                onMouseEnter: () => setActiveIndex(index),
+                                onMouseDown: e => {
+                                    interactingWithOptionsRef.current = true;
+                                    e.preventDefault();
+                                },
+                            }, label: _jsx("span", { children: option.label }), onCheckedChange: () => commitSelection(option) }, option.value)) : (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { ref: node => {
                                     optionRefs.current[index] = node;
-                                }, id: `${listboxId}-option-${index}`, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
+                                }, id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
                                     e.preventDefault();
-                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
+                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value)));
                     })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
                 multiSelectedValuesDisplayMode === 'below-input' &&
                 selectedOptions.length > 0 && (_jsx("div", { style: {

package/dist/components/menu/Menu.d.ts

@@ -23,7 +23,10 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
 export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     label: React.ReactNode;
     checked: boolean;
+    active?: boolean;
     disabled?: boolean;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
     onCheckedChange?: (checked: boolean) => void;
 }
 export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {

package/dist/components/menu/Menu.js

@@ -63,8 +63,27 @@ const MenuItem = React.forwardRef(({ children, active, selected, disabled, class
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });
 MenuItem.displayName = 'Menu.Item';
-const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { variant: "default", size: "md", noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+const MenuCheckItem = React.forwardRef(({ label, checked, active, disabled, interactiveRef, interactiveProps, onCheckedChange, className, ...liProps }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+        styles.interactiveChild,
+        styles.item,
+        active ? styles.active : '',
+        isSelected ? styles.selected : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { ref: interactiveRef, role: interactiveProps === null || interactiveProps === void 0 ? void 0 : interactiveProps.role, tabIndex: -1, "aria-selected": isSelected || undefined, "aria-disabled": disabled || undefined, className: interactiveClass, ...interactiveProps, onClick: event => {
+                var _a;
+                (_a = interactiveProps === null || interactiveProps === void 0 ? void 0 : interactiveProps.onClick) === null || _a === void 0 ? void 0 : _a.call(interactiveProps, event);
+                if (event.defaultPrevented || disabled)
+                    return;
+                const target = event.target;
+                if (target instanceof Element && target.closest('button') !== null) {
+                    return;
+                }
+                onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
+            }, children: _jsx(Checkbox, { variant: "primary", size: "sm", noContainer: true, checked: checked, disabled: disabled, labelAs: "span", label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
 });
 MenuCheckItem.displayName = 'Menu.CheckItem';
 const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {

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

@@ -72,6 +72,7 @@
   padding-block: 2px;
   padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-sm);
+  cursor: default;
 }
 
 /* NEW: let Checkbox/Radio consume full width so the hover area feels right */
@@ -86,6 +87,17 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  inline-size: 100%;
+  cursor: default;
+}
+
+.row :global(.label) {
+  flex: 1 1 auto;
+  cursor: default;
+}
+
+.row :global(.label) * {
+  cursor: default;
 }
 
 /* Hover: support both cases (interactive element, or wrapper child) */

package/dist/components/split-pane/SplitPane.js

@@ -24,7 +24,7 @@ export function SplitPaneSecondary({ children }) {
     return _jsx("div", { className: styles.secondary, children: children });
 }
 export function SplitPaneGutter() {
-    const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = useSplitPaneContext();
+    const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef, resetDefault, } = useSplitPaneContext();
     const draggingRef = useRef(false);
     const pointerIdRef = useRef(null);
     const startPosRef = useRef(0);
@@ -103,5 +103,5 @@ export function SplitPaneGutter() {
     }, [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]);
     const ariaOrientation = direction === 'horizontal' ? 'vertical' : 'horizontal';
     const { maxPrimary } = computeClamp();
-    return (_jsx("div", { className: styles.gutter, children: _jsx("div", { className: styles.resizer, role: "separator", "aria-orientation": ariaOrientation, "aria-valuemin": Math.round(minPrimarySize), "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : undefined, "aria-valuenow": Math.round(primarySize), tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown }) }));
+    return (_jsx("div", { className: styles.gutter, children: _jsx("div", { className: styles.resizer, role: "separator", "aria-orientation": ariaOrientation, "aria-valuemin": Math.round(minPrimarySize), "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : undefined, "aria-valuenow": Math.round(primarySize), tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onDoubleClick: resetDefault, onKeyDown: onKeyDown }) }));
 }

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -3,11 +3,12 @@ export type SplitDirection = 'horizontal' | 'vertical';
 export interface SplitPaneContextValue {
     direction: SplitDirection;
     primarySize: number;
-    setPrimarySize: React.Dispatch<React.SetStateAction<number>>;
+    setPrimarySize: (newSize: number) => void;
     minPrimarySize: number;
     minSecondarySize: number;
     containerRef: React.RefObject<HTMLDivElement>;
     storageKey?: string;
+    resetDefault: () => void;
 }
 export declare const SplitPaneContext: React.Context<SplitPaneContextValue | null>;
 export declare function useSplitPaneContext(): SplitPaneContextValue;

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 export const SplitPaneContext = React.createContext(null);
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
@@ -24,6 +24,14 @@ function writeStoredSize(key, value) {
         // ignore
     }
 }
+function removeStoredSize(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
 export function useSplitPaneContext() {
     const ctx = React.useContext(SplitPaneContext);
     if (!ctx)
@@ -34,12 +42,24 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
     const containerRef = useRef(null);
     // Start with initial to avoid SSR mismatch, then hydrate from storage
     const [primarySize, setPrimarySize] = useState(initialPrimarySize);
+    const [manualPrimarySize, setManualPrimarySize] = useState(null);
+    const getMaxPrimary = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return null;
+        const rect = el.getBoundingClientRect();
+        const total = direction === 'horizontal' ? rect.width : rect.height;
+        if (!Number.isFinite(total) || total <= 0)
+            return null;
+        return Math.max(minPrimarySize, total - minSecondarySize);
+    }, [direction, minPrimarySize, minSecondarySize]);
     useEffect(() => {
         if (!storageKey)
             return;
         const stored = readStoredSize(storageKey);
         if (stored === null)
             return;
+        setManualPrimarySize(stored);
         setPrimarySize(stored);
     }, [storageKey]);
     useEffect(() => {
@@ -49,31 +69,48 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
         if (typeof ResizeObserver === 'undefined')
             return;
         const clampToContainer = () => {
-            const rect = el.getBoundingClientRect();
-            const total = direction === 'horizontal' ? rect.width : rect.height;
-            if (!Number.isFinite(total) || total <= 0)
+            const maxPrimary = getMaxPrimary();
+            if (maxPrimary === null)
                 return;
-            const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
-            setPrimarySize(prev => clamp(prev, minPrimarySize, maxPrimary));
+            const targetSize = manualPrimarySize !== null && manualPrimarySize !== void 0 ? manualPrimarySize : initialPrimarySize;
+            setPrimarySize(clamp(targetSize, minPrimarySize, maxPrimary));
         };
         clampToContainer();
         const ro = new ResizeObserver(clampToContainer);
         ro.observe(el);
         return () => ro.disconnect();
-    }, [direction, minPrimarySize, minSecondarySize]);
+    }, [getMaxPrimary, initialPrimarySize, manualPrimarySize]);
     useEffect(() => {
         if (!storageKey)
             return;
-        writeStoredSize(storageKey, primarySize);
-    }, [storageKey, primarySize]);
+        if (manualPrimarySize === null) {
+            removeStoredSize(storageKey);
+            return;
+        }
+        writeStoredSize(storageKey, manualPrimarySize);
+    }, [manualPrimarySize, storageKey]);
+    const handleSizeChange = useCallback((newSize) => {
+        setManualPrimarySize(newSize);
+        setPrimarySize(newSize);
+    }, []);
+    const resetDefault = useCallback(() => {
+        setManualPrimarySize(null);
+        const maxPrimary = getMaxPrimary();
+        if (maxPrimary === null) {
+            setPrimarySize(initialPrimarySize);
+            return;
+        }
+        setPrimarySize(clamp(initialPrimarySize, minPrimarySize, maxPrimary));
+    }, [getMaxPrimary, initialPrimarySize, minPrimarySize]);
     const value = useMemo(() => ({
         direction,
         primarySize,
-        setPrimarySize,
+        setPrimarySize: handleSizeChange,
+        resetDefault,
         minPrimarySize,
         minSecondarySize,
         containerRef,
         storageKey,
-    }), [direction, primarySize, minPrimarySize, minSecondarySize, storageKey]);
+    }), [direction, primarySize, handleSizeChange, resetDefault, minPrimarySize, minSecondarySize, storageKey]);
     return _jsx(SplitPaneContext.Provider, { value: value, children: children });
 }

package/dist/hooks/useTimeDuration.d.ts

@@ -3,6 +3,8 @@ export type useTimeDurationReturn = {
     started: string;
     /** Formatted end date (hydration-safe) */
     ended: string;
+    /** Whether the time duration has finished */
+    isFinished?: boolean;
     /** Formatted duration (hydration-safe) */
     duration: string;
     /** Whether client hydration has completed */
@@ -15,8 +17,10 @@ type useTimeDurationArgs = {
     dateFormat?: Intl.DateTimeFormatOptions;
     /** Placeholder shown before hydration or when date is missing */
     fallback?: string;
+    /** Whether to update the duration in real time (every second) */
+    liveUpdate?: boolean;
     /** Custom duration formatter if you don’t want the default "1t 2m 3s" */
     formatDuration?: (ms: number) => string;
 };
-export declare function useTimeDuration({ start, end, dateFormat, fallback, formatDuration, }: useTimeDurationArgs): useTimeDurationReturn;
+export declare function useTimeDuration({ start, end, dateFormat, fallback, liveUpdate, formatDuration, }: useTimeDurationArgs): useTimeDurationReturn;
 export {};

package/dist/hooks/useTimeDuration.js

@@ -14,9 +14,23 @@ function defaultDuration(ms) {
     }
     return `${sec}s`;
 }
-export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', formatDuration = defaultDuration, }) {
+export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', liveUpdate = false, formatDuration = defaultDuration, }) {
     const [hydrated, setHydrated] = useState(false);
+    const [tick, setTick] = useState(0);
     useEffect(() => setHydrated(true), []);
+    useEffect(() => {
+        if (!liveUpdate)
+            return;
+        if (end && end.getTime() <= Date.now())
+            return;
+        const timer = setInterval(() => {
+            if (end && end.getTime() <= Date.now()) {
+                clearInterval(timer);
+            }
+            setTick(tick => tick + 1);
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [liveUpdate, end]);
     const started = useMemo(() => {
         if (!start)
             return fallback;
@@ -32,11 +46,16 @@ export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short',
         return new Intl.DateTimeFormat('da-DK', dateFormat).format(end);
     }, [end, hydrated, fallback, dateFormat]);
     const duration = useMemo(() => {
-        if (!start || !end)
-            return fallback;
-        if (!hydrated)
+        if (!start || !hydrated)
             return fallback;
+        const now = Date.now();
+        if (!end) {
+            return formatDuration(now - start.getTime());
+        }
+        if (end.getTime() > now) {
+            return formatDuration(end.getTime() - now);
+        }
         return formatDuration(end.getTime() - start.getTime());
-    }, [start, end, hydrated, fallback, formatDuration]);
-    return { started, ended, duration, hydrated };
+    }, [start, end, fallback, hydrated, formatDuration, tick]);
+    return { started, ended, isFinished: !!start && !!end, duration, hydrated };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",