@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/popover/Popover.js

@@ -1,257 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import * as React from 'react';
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import styles from './Popover.module.css';
-function assignRef(ref, value) {
-    if (!ref)
-        return;
-    if (typeof ref === 'function') {
-        ref(value);
-        return;
-    }
-    ;
-    ref.current = value;
-}
-function getFocusable(container) {
-    const els = container.querySelectorAll([
-        'a[href]',
-        'button:not([disabled])',
-        'input:not([disabled])',
-        'select:not([disabled])',
-        'textarea:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])',
-    ].join(','));
-    return Array.from(els).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-}
-function parseMinWidthPx(minWidth, elForEm) {
-    const v = minWidth.trim();
-    if (v.endsWith('px')) {
-        const n = Number.parseFloat(v);
-        return Number.isFinite(n) ? n : 0;
-    }
-    if (typeof window !== 'undefined' && v.endsWith('rem')) {
-        const n = Number.parseFloat(v);
-        if (!Number.isFinite(n))
-            return 0;
-        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
-        return n * (Number.isFinite(rootFont) ? rootFont : 16);
-    }
-    if (typeof window !== 'undefined' && v.endsWith('em')) {
-        const n = Number.parseFloat(v);
-        if (!Number.isFinite(n))
-            return 0;
-        const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || '16') : 16;
-        return n * (Number.isFinite(font) ? font : 16);
-    }
-    return 0;
-}
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, contentMaxHeightPx = 400, edgeBuffer = 100, dataCy, fullWidth = false, fillTrigger = false, autoFocusContent = false, returnFocus = true, anchorRef, overlayRef, }, ref) {
-    const internalId = useId();
-    const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
-    const isControlled = open !== undefined;
-    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-    const isOpen = isControlled ? !!open : uncontrolledOpen;
-    const [pos, setPos] = useState({ top: 0, left: 0 });
-    const [positioned, setPositioned] = useState(false);
-    const [triggerWidth, setTriggerWidth] = useState(null);
-    const containerRef = useRef(null);
-    const contentRef = useRef(null);
-    const triggerElRef = useRef(null);
-    const lastCloseReasonRef = useRef('unknown');
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-    const setOpen = useCallback((next) => {
-        if (!isControlled)
-            setUncontrolledOpen(next);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
-    }, [isControlled, onOpenChange]);
-    const openPopover = useCallback(() => {
-        setPositioned(false);
-        setOpen(true);
-    }, [setOpen]);
-    const closePopover = useCallback((reason = 'api') => {
-        lastCloseReasonRef.current = reason;
-        setOpen(false);
-    }, [setOpen]);
-    const togglePopover = useCallback((e) => {
-        var _a, _b;
-        triggerElRef.current =
-            (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : e.currentTarget) !== null && _b !== void 0 ? _b : containerRef.current;
-        if (isOpen)
-            closePopover('trigger');
-        else
-            openPopover();
-    }, [isOpen, closePopover, openPopover, anchorRef]);
-    useImperativeHandle(ref, () => ({
-        close: () => closePopover('api'),
-        open: openPopover,
-        isOpen: () => isOpen,
-    }), [closePopover, openPopover, isOpen]);
-    const computeAndSetPosition = useCallback(() => {
-        var _a, _b;
-        const content = contentRef.current;
-        if (!content)
-            return;
-        const triggerEl = (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : triggerElRef.current) !== null && _b !== void 0 ? _b : containerRef.current;
-        if (!triggerEl)
-            return;
-        const triggerRect = triggerEl.getBoundingClientRect();
-        const overlayWidthBuffer = 8;
-        let forcedWidthPx = null;
-        if (matchTriggerWidth) {
-            const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
-            forcedWidthPx = Math.max(triggerRect.width + overlayWidthBuffer, minWidthPx || 0);
-            setTriggerWidth(forcedWidthPx);
-        }
-        else {
-            setTriggerWidth(null);
-        }
-        const prevHidden = content.hidden;
-        const prevVis = content.style.visibility;
-        const prevDisp = content.style.display;
-        const prevMinWidth = content.style.minWidth;
-        const prevWidth = content.style.width;
-        const prevTop = content.style.top;
-        const prevLeft = content.style.left;
-        content.hidden = false;
-        content.style.visibility = 'hidden';
-        content.style.display = 'block';
-        content.style.top = '0px';
-        content.style.left = '0px';
-        content.style.minWidth = minWidth;
-        content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : 'auto';
-        const contentWidth = content.offsetWidth;
-        const contentHeight = content.offsetHeight;
-        content.hidden = prevHidden;
-        content.style.visibility = prevVis;
-        content.style.display = prevDisp;
-        content.style.minWidth = prevMinWidth;
-        content.style.width = prevWidth;
-        content.style.top = prevTop;
-        content.style.left = prevLeft;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const spaceAbove = Math.max(0, triggerRect.top);
-        const spaceBelow = Math.max(0, vh - triggerRect.bottom);
-        const spaceLeft = Math.max(0, triggerRect.left);
-        const spaceRight = Math.max(0, vw - triggerRect.right);
-        const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
-        const spacing = viewportPadding;
-        const rawTop = preferBelow
-            ? triggerRect.bottom + spacing
-            : triggerRect.top - contentHeight - spacing;
-        const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
-        const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
-        let rawLeft;
-        if (placeRightOfLeftEdge)
-            rawLeft = triggerRect.left;
-        else if (placeLeftOfRightEdge)
-            rawLeft = triggerRect.right - contentWidth;
-        else
-            rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-        const clampedLeft = Math.max(viewportPadding, Math.min(rawLeft, vw - contentWidth - viewportPadding));
-        const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
-        setPos({ top: clampedTop, left: clampedLeft });
-        setPositioned(true);
-    }, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
-    useLayoutEffect(() => {
-        if (!isOpen)
-            return;
-        computeAndSetPosition();
-    }, [isOpen, computeAndSetPosition]);
-    useEffect(() => {
-        var _a, _b, _c;
-        if (!isOpen)
-            return;
-        const content = contentRef.current;
-        if (!content)
-            return;
-        const triggerEl = (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : triggerElRef.current) !== null && _b !== void 0 ? _b : containerRef.current;
-        if (autoFocusContent) {
-            const focusables = getFocusable(content);
-            (_c = focusables[0]) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-        const handlePointerDownCapture = (e) => {
-            const container = containerRef.current;
-            const contentEl = contentRef.current;
-            if (!container || !contentEl)
-                return;
-            const target = e.target;
-            if (!container.contains(target) && !contentEl.contains(target)) {
-                closePopover('outside');
-            }
-        };
-        const handleEscape = (e) => {
-            if (e.key === 'Escape')
-                closePopover('escape');
-        };
-        const handleReposition = () => computeAndSetPosition();
-        const resizeObserver = typeof ResizeObserver !== 'undefined'
-            ? new ResizeObserver(() => {
-                handleReposition();
-            })
-            : null;
-        document.addEventListener('pointerdown', handlePointerDownCapture, true);
-        document.addEventListener('keydown', handleEscape, true);
-        window.addEventListener('resize', handleReposition);
-        window.addEventListener('scroll', handleReposition, true);
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(content);
-        if (triggerEl)
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(triggerEl);
-        return () => {
-            document.removeEventListener('pointerdown', handlePointerDownCapture, true);
-            document.removeEventListener('keydown', handleEscape, true);
-            window.removeEventListener('resize', handleReposition);
-            window.removeEventListener('scroll', handleReposition, true);
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
-    useEffect(() => {
-        var _a, _b;
-        if (isOpen)
-            return;
-        if (!returnFocus)
-            return;
-        if (lastCloseReasonRef.current === 'outside')
-            return;
-        (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }, [isOpen, returnFocus]);
-    const icon = isOpen ? (_jsx(ChevronUp, { className: "dbc-muted-text", size: 20 })) : (_jsx(ChevronDown, { className: "dbc-muted-text", size: 20 }));
-    const setOverlayRef = React.useCallback((node) => {
-        assignRef(overlayRef, node);
-    }, [overlayRef]);
-    return (_jsxs("div", { className: [
-            styles.container,
-            fullWidth ? styles.fullWidth : '',
-            fillTrigger ? styles.fillTrigger : '',
-        ]
-            .filter(Boolean)
-            .join(' '), ref: containerRef, children: [_jsx("div", { className: [
-                    styles.triggerSlot,
-                    fullWidth ? styles.fullWidth : '',
-                    fillTrigger ? styles.fillTrigger : '',
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: Trigger(togglePopover, icon, isOpen) }), mounted &&
-                isOpen &&
-                createPortal(_jsx("div", { id: resolvedContentId, ref: node => {
-                        ;
-                        contentRef.current = node;
-                        setOverlayRef(node);
-                    }, className: styles.content, style: {
-                        top: pos.top,
-                        left: pos.left,
-                        minWidth,
-                        width: triggerWidth != null ? `${triggerWidth}px` : undefined,
-                        maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-                        maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
-                        visibility: positioned ? undefined : 'hidden',
-                    }, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
-                        ? // eslint-disable-next-line react-hooks/refs
-                            children(() => closePopover('api'))
-                        : children }), document.body)] }));
-});
-Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css

@@ -1,54 +0,0 @@
-.container {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-  min-width: 0;
-  width: auto;
-  flex: 0 0 auto;
-}
-
-.container > * {
-  min-width: 0;
-}
-
-.triggerSlot {
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-  width: auto;
-  flex: 0 0 auto;
-}
-
-.triggerSlot > * {
-  min-width: 0;
-}
-
-.fullWidth,
-.fillTrigger {
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-.fullWidth > *,
-.fillTrigger > * {
-  width: 100%;
-  min-width: 0;
-}
-
-.content {
-  position: fixed;
-  border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-bg-surface);
-  border-radius: var(--border-radius-lg);
-  padding: var(--spacing-xxs);
-  z-index: var(--z-popover);
-  overflow: auto;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.01),
-    var(--shadow-sm);
-}
-
-.content[hidden] {
-  display: none;
-}

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

@@ -1,170 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Search } from 'lucide-react';
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Input } from '../../components/forms/input/Input';
-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, 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 : '') : ''));
-    // Used only for UI state ("Indtast søgeord" vs results/no results)
-    const [searchQuery, setSearchQuery] = useState('');
-    const [activeIndex, setActiveIndex] = useState(null);
-    const popoverRef = useRef(null);
-    const internalInputRef = useRef(null);
-    // Forward ref to parent
-    useEffect(() => {
-        if (typeof ref === 'function') {
-            ref(internalInputRef.current);
-        }
-        else if (ref) {
-            ;
-            ref.current = internalInputRef.current;
-        }
-    }, [ref]);
-    // If parent changes value (reset/select/navigation), update draft shown in the input
-    useEffect(() => {
-        if (!isControlled)
-            return;
-        const next = String(value !== null && value !== void 0 ? value : '');
-        if (next !== draft)
-            setDraft(next);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    // Debounced search side-effect (never debounce the displayed input)
-    useEffect(() => {
-        if (!onSearch)
-            return;
-        if (!debounce) {
-            setSearchQuery(draft);
-            onSearch(draft);
-            return;
-        }
-        const handler = setTimeout(() => {
-            setSearchQuery(draft);
-            onSearch(draft);
-        }, debounceMs);
-        return () => clearTimeout(handler);
-    }, [draft, onSearch, debounce, debounceMs]);
-    // Keyboard shortcut (Cmd/Ctrl + K)
-    useEffect(() => {
-        function handleKeyDown(event) {
-            var _a;
-            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }
-        if (enableHotkey) {
-            window.addEventListener('keydown', handleKeyDown);
-            return () => window.removeEventListener('keydown', handleKeyDown);
-        }
-    }, [enableHotkey]);
-    const handleChange = React.useCallback((e) => {
-        setDraft(e.target.value); // immediate UI update
-        onChange === null || onChange === void 0 ? void 0 : onChange(e); // allow parent to react if it wants (optional)
-    }, [onChange]);
-    const handleSelect = React.useCallback((item) => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
-        reset();
-    }, [onSelect]);
-    function reset() {
-        var _a;
-        setDraft(''); // always clear UI immediately
-        setSearchQuery('');
-        setActiveIndex(null);
-        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-    const handleClear = React.useCallback(() => {
-        var _a;
-        reset();
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-        (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [onSearch]);
-    // Reset active index when results change
-    useEffect(() => {
-        setActiveIndex(null);
-    }, [result]);
-    // Props for the input are now created inside useMemo to avoid unnecessary dependency changes
-    const inputField = useMemo(() => {
-        var _a;
-        const inputProps = {
-            ...rest,
-            value: draft,
-            onChange: handleChange,
-        };
-        const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
-        const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? _jsx(Search, {}) : buttonIcon;
-        if (displayPopover) {
-            return (_jsx(Popover, { ref: popoverRef, minWidth: popoverMinWidth, fullWidth: fullWidth, trigger: event => {
-                    var _a;
-                    return (_jsx(Input, { ref: internalInputRef, onFocusCapture: event, onClick: () => {
-                            var _a, _b;
-                            if (!((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()))
-                                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.open();
-                        }, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), width: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, icon: showInputIcon ? _jsx(Search, {}) : undefined, inputSize: inputSize, variant: variant, autoComplete: "off", onClear: handleClear, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, onKeyDown: e => {
-                            var _a;
-                            if (result === null || result === void 0 ? void 0 : result.length) {
-                                if (e.key === 'ArrowDown') {
-                                    e.preventDefault();
-                                    setActiveIndex(prev => prev === null || prev === result.length - 1 ? 0 : prev + 1);
-                                }
-                                else if (e.key === 'ArrowUp') {
-                                    e.preventDefault();
-                                    setActiveIndex(prev => prev === null || prev === 0 ? result.length - 1 : prev - 1);
-                                }
-                                else if (e.key === 'Enter') {
-                                    e.preventDefault();
-                                    if (activeIndex !== null) {
-                                        handleSelect(result[activeIndex]);
-                                    }
-                                    else if (onButtonClick) {
-                                        onButtonClick();
-                                    }
-                                }
-                                else if (e.key === 'Escape') {
-                                    reset();
-                                }
-                            }
-                            (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-                        }, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
-                }, children: resultTemplate ? (resultTemplate) : (result === null || result === void 0 ? void 0 : result.length) ? (_jsx(Menu, { children: _jsx("table", { className: styles.suggestionTable, children: _jsx("tbody", { children: result.map((item, index) => (_jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, className: `${styles.suggestionRow}${index === activeIndex ? ` ${styles.suggestionRowActive}` : ''}`, children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => {
-                                    const raw = item[key];
-                                    const cell = raw != null ? String(raw) : '';
-                                    return (_jsx("td", { className: styles.suggestionCell, style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
-                                }) }, index))) }) }) })) : !searchQuery && !loading ? (initialTemplate || _jsx("div", { className: styles.resultContainer, children: "Indtast s\u00F8geord" })) : loading ? (_jsx("table", { style: { width: '100%' }, children: _jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsx("tr", { children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => (_jsx("td", { style: { padding: '8px' }, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key))) }, index))) }) })) : (_jsx("div", { className: styles.resultContainer, children: noResultText })) }));
-        }
-        return (_jsx(Input, { ref: internalInputRef, icon: showInputIcon ? _jsx(Search, {}) : undefined, minWidth: fullWidth ? undefined : (inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px'), fullWidth: fullWidth, inputSize: inputSize, variant: variant, onClear: handleClear, onButtonClick: onButtonClick, buttonLabel: buttonLabel, buttonIcon: trailingButtonIcon, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
-    }, [
-        rest,
-        draft,
-        handleChange,
-        handleClear,
-        displayPopover,
-        inputWidth,
-        inputSize,
-        variant,
-        popoverMinWidth,
-        resultTemplate,
-        result,
-        searchQuery,
-        loading,
-        initialTemplate,
-        noResultText,
-        resultKeys,
-        handleSelect,
-        activeIndex,
-        onButtonClick,
-        buttonLabel,
-        buttonIcon,
-        fullWidth,
-    ]);
-    return (_jsx("div", { style: {
-            ...(fullWidth ? { width: '100%' } : undefined),
-            ...(maxWidth !== undefined ? { maxWidth } : undefined),
-        }, children: inputField }));
-});

package/dist/components/search-box/SearchBox.module.css

@@ -1,21 +0,0 @@
-.resultContainer {
-  padding: var(--spacing-sm);
-}
-
-.suggestionTable {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.suggestionRow {
-  cursor: pointer;
-}
-
-.suggestionRow:hover > .suggestionCell,
-.suggestionRowActive > .suggestionCell {
-  background-color: var(--table-row-bg-hover);
-}
-
-.suggestionCell {
-  padding: var(--spacing-xs) var(--spacing-sm);
-}

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -1,48 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
-import styles from './SegmentedProgressBar.module.css';
-function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
-    var _a, _b;
-    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_a = seg.value) !== null && _a !== void 0 ? _a : 0);
-    const tooltipEnabled = tooltipContent !== null && tooltipContent !== undefined && tooltipContent !== '';
-    const { triggerProps } = useTooltipTrigger({
-        content: tooltipEnabled ? tooltipContent : null,
-        placement: tooltipPlacement,
-        offset: 8,
-    });
-    return (_jsx("span", { className: styles.segmentWrapper, style: {
-            flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("span", { className: styles.progressSegment, "data-index": index, "data-severity": (_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral', style: seg.color
-                ? {
-                    ['--segment-color']: seg.color,
-                }
-                : undefined }) }));
-}
-export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor, tooltipPlacement = 'top', className, ...aria }) => {
-    const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
-    const effectiveTotal = total !== null && total !== void 0 ? total : sum;
-    const safeTotal = Math.max(effectiveTotal, 0.0001);
-    const remainder = Math.max(effectiveTotal - sum, 0);
-    const pctFilled = Math.min(100, Math.max(0, (Math.min(sum, effectiveTotal) / safeTotal) * 100));
-    const computedSegments = [
-        ...segments,
-        ...(showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []),
-    ];
-    const autoNumbers = (() => {
-        const base = segments.map(s => s.value || 0);
-        if (showRemainder)
-            base.push(remainder);
-        return base.join('/');
-    })();
-    const filteredSegments = computedSegments.filter(x => x.value > 0);
-    const rootClass = [styles.container, className].filter(Boolean).join(' ');
-    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, "data-rounded": rounded ? 'true' : 'false', style: {
-                height: height ? `${height}px` : '24px',
-                background: trackColor !== null && trackColor !== void 0 ? trackColor : 'var(--color-bg-surface-subtle)',
-            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: _jsx("span", { className: styles.progressCenterLabel, children: centerLabel
-                            ? typeof centerLabel === 'function'
-                                ? centerLabel(pctFilled)
-                                : centerLabel
-                            : autoNumbers }) })] }) }));
-};