@dbcdk/react-components 0.0.103 → 0.0.105

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

@@ -0,0 +1,274 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Input = require('../../components/forms/input/Input');
+var Popover = require('../../components/popover/Popover');
+var SkeletonLoaderItem = require('../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var styles = require('./SearchBox.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SearchBox = react.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) {
+  var _a;
+  const isControlled = value !== void 0;
+  const [draft, setDraft] = react.useState(() => isControlled ? String(value != null ? value : "") : "");
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [popoverOpen, setPopoverOpen] = react.useState(false);
+  const listboxId = react.useId();
+  const popoverRef = react.useRef(null);
+  const internalInputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (typeof ref === "function") {
+      ref(internalInputRef.current);
+    } else if (ref) {
+      ref.current = internalInputRef.current;
+    }
+  }, [ref]);
+  react.useEffect(() => {
+    if (!isControlled) return;
+    const next = String(value != null ? value : "");
+    if (next !== draft) setDraft(next);
+  }, [value]);
+  react.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]);
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      var _a2;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const handleChange = react.useCallback(
+    (e) => {
+      var _a2, _b;
+      setDraft(e.target.value);
+      if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+      onChange == null ? void 0 : onChange(e);
+    },
+    [onChange]
+  );
+  const handleSelect = react.useCallback(
+    (item) => {
+      onSelect == null ? void 0 : onSelect(item);
+      reset();
+    },
+    [onSelect]
+  );
+  function reset() {
+    var _a2;
+    setDraft("");
+    setSearchQuery("");
+    setActiveIndex(null);
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+  }
+  const handleClear = react.useCallback(() => {
+    var _a2;
+    reset();
+    onSearch == null ? void 0 : onSearch("");
+    (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+  }, [onSearch]);
+  react.useEffect(() => {
+    setActiveIndex(null);
+  }, [result]);
+  const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
+  const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : buttonIcon;
+  const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
+  const inputProps = {
+    ...rest,
+    value: draft,
+    onChange: handleChange
+  };
+  if (!displayPopover) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          ...fullWidth ? { width: "100%" } : void 0,
+          ...maxWidth !== void 0 ? { maxWidth } : void 0
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.Input,
+          {
+            ref: internalInputRef,
+            icon: showInputIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : void 0,
+            minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+            fullWidth,
+            inputSize,
+            variant,
+            onClear: handleClear,
+            onButtonClick,
+            buttonLabel,
+            buttonIcon: trailingButtonIcon,
+            ...inputProps,
+            placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
+          }
+        )
+      }
+    );
+  }
+  const dropdownContent = resultTemplate ? resultTemplate : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": "S\xF8geresultater",
+        "aria-busy": loading ? "true" : void 0,
+        className: styles__default.default.suggestionList,
+        children: loading ? Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.suggestionOption, children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }, key)) }, index)) : result == null ? void 0 : result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            id: `${listboxId}-option-${index}`,
+            role: "option",
+            "aria-selected": index === activeIndex,
+            className: `${styles__default.default.suggestionOption}${index === activeIndex ? ` ${styles__default.default.suggestionOptionActive}` : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleSelect(item);
+            },
+            children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+              const raw = item[key];
+              return raw != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suggestionCell, children: String(raw) }, key) : null;
+            })
+          },
+          index
+        ))
+      }
+    ),
+    !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: !searchQuery ? initialTemplate != null ? initialTemplate : "Indtast s\xF8geord" : noResultText })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        ...fullWidth ? { width: "100%" } : void 0,
+        ...maxWidth !== void 0 ? { maxWidth } : void 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          fullWidth,
+          onOpenChange: setPopoverOpen,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Input.Input,
+              {
+                ref: internalInputRef,
+                onFocusCapture: event,
+                onClick: () => {
+                  var _a3, _b;
+                  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+                },
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": popoverOpen,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeOptionId,
+                clearAriaLabel: "Ryd s\xF8gning",
+                minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                width: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                fullWidth,
+                icon: showInputIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : void 0,
+                inputSize,
+                variant,
+                autoComplete: "off",
+                onClear: handleClear,
+                onButtonClick,
+                buttonLabel,
+                buttonIcon: trailingButtonIcon,
+                ...inputProps,
+                onKeyDown: (e) => {
+                  var _a3;
+                  if (result == null ? 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 === "Home") {
+                      e.preventDefault();
+                      setActiveIndex(0);
+                    } else if (e.key === "End") {
+                      e.preventDefault();
+                      setActiveIndex(result.length - 1);
+                    } else if (e.key === "Enter") {
+                      e.preventDefault();
+                      if (activeIndex !== null) {
+                        handleSelect(result[activeIndex]);
+                      } else if (onButtonClick) {
+                        onButtonClick();
+                      }
+                    }
+                  }
+                  if (e.key === "Escape") reset();
+                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
+                },
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
+              }
+            );
+          },
+          children: dropdownContent
+        }
+      )
+    }
+  );
+});
+
+exports.SearchBox = SearchBox;

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

@@ -0,0 +1,268 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Search } from 'lucide-react';
+import { forwardRef, useState, useId, useRef, useEffect, useCallback } from 'react';
+import { Input } from '../../components/forms/input/Input';
+import { Popover } from '../../components/popover/Popover';
+import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import styles from './SearchBox.module.css';
+
+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) {
+  var _a;
+  const isControlled = value !== void 0;
+  const [draft, setDraft] = useState(() => isControlled ? String(value != null ? value : "") : "");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const listboxId = useId();
+  const popoverRef = useRef(null);
+  const internalInputRef = useRef(null);
+  useEffect(() => {
+    if (typeof ref === "function") {
+      ref(internalInputRef.current);
+    } else if (ref) {
+      ref.current = internalInputRef.current;
+    }
+  }, [ref]);
+  useEffect(() => {
+    if (!isControlled) return;
+    const next = String(value != null ? value : "");
+    if (next !== draft) setDraft(next);
+  }, [value]);
+  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]);
+  useEffect(() => {
+    function handleKeyDown(event) {
+      var _a2;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const handleChange = useCallback(
+    (e) => {
+      var _a2, _b;
+      setDraft(e.target.value);
+      if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+      onChange == null ? void 0 : onChange(e);
+    },
+    [onChange]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      onSelect == null ? void 0 : onSelect(item);
+      reset();
+    },
+    [onSelect]
+  );
+  function reset() {
+    var _a2;
+    setDraft("");
+    setSearchQuery("");
+    setActiveIndex(null);
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+  }
+  const handleClear = useCallback(() => {
+    var _a2;
+    reset();
+    onSearch == null ? void 0 : onSearch("");
+    (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+  }, [onSearch]);
+  useEffect(() => {
+    setActiveIndex(null);
+  }, [result]);
+  const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
+  const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
+  const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
+  const inputProps = {
+    ...rest,
+    value: draft,
+    onChange: handleChange
+  };
+  if (!displayPopover) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...fullWidth ? { width: "100%" } : void 0,
+          ...maxWidth !== void 0 ? { maxWidth } : void 0
+        },
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: internalInputRef,
+            icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
+            minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+            fullWidth,
+            inputSize,
+            variant,
+            onClear: handleClear,
+            onButtonClick,
+            buttonLabel,
+            buttonIcon: trailingButtonIcon,
+            ...inputProps,
+            placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
+          }
+        )
+      }
+    );
+  }
+  const dropdownContent = resultTemplate ? resultTemplate : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": "S\xF8geresultater",
+        "aria-busy": loading ? "true" : void 0,
+        className: styles.suggestionList,
+        children: loading ? Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("li", { className: styles.suggestionOption, children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }, key)) }, index)) : result == null ? void 0 : result.map((item, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `${listboxId}-option-${index}`,
+            role: "option",
+            "aria-selected": index === activeIndex,
+            className: `${styles.suggestionOption}${index === activeIndex ? ` ${styles.suggestionOptionActive}` : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleSelect(item);
+            },
+            children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+              const raw = item[key];
+              return raw != null ? /* @__PURE__ */ jsx("span", { className: styles.suggestionCell, children: String(raw) }, key) : null;
+            })
+          },
+          index
+        ))
+      }
+    ),
+    !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: !searchQuery ? initialTemplate != null ? initialTemplate : "Indtast s\xF8geord" : noResultText })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...fullWidth ? { width: "100%" } : void 0,
+        ...maxWidth !== void 0 ? { maxWidth } : void 0
+      },
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          fullWidth,
+          onOpenChange: setPopoverOpen,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: internalInputRef,
+                onFocusCapture: event,
+                onClick: () => {
+                  var _a3, _b;
+                  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+                },
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": popoverOpen,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeOptionId,
+                clearAriaLabel: "Ryd s\xF8gning",
+                minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                width: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                fullWidth,
+                icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
+                inputSize,
+                variant,
+                autoComplete: "off",
+                onClear: handleClear,
+                onButtonClick,
+                buttonLabel,
+                buttonIcon: trailingButtonIcon,
+                ...inputProps,
+                onKeyDown: (e) => {
+                  var _a3;
+                  if (result == null ? 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 === "Home") {
+                      e.preventDefault();
+                      setActiveIndex(0);
+                    } else if (e.key === "End") {
+                      e.preventDefault();
+                      setActiveIndex(result.length - 1);
+                    } else if (e.key === "Enter") {
+                      e.preventDefault();
+                      if (activeIndex !== null) {
+                        handleSelect(result[activeIndex]);
+                      } else if (onButtonClick) {
+                        onButtonClick();
+                      }
+                    }
+                  }
+                  if (e.key === "Escape") reset();
+                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
+                },
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
+              }
+            );
+          },
+          children: dropdownContent
+        }
+      )
+    }
+  );
+});
+
+export { SearchBox };

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

@@ -0,0 +1,27 @@
+.resultContainer {
+  padding: var(--spacing-sm);
+}
+
+.suggestionList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.suggestionOption {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.suggestionOption:hover,
+.suggestionOptionActive {
+  background-color: var(--table-row-bg-hover);
+}
+
+.suggestionCell {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,127 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('./SegmentedProgressBar.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const sizeTokenMap = {
+  "2xs": "var(--component-size-2xs)",
+  xxs: "var(--component-size-xxs)",
+  xs: "var(--component-size-xs)",
+  sm: "var(--component-size-sm)",
+  md: "var(--component-size-md)",
+  lg: "var(--component-size-lg)"
+};
+function SegmentWithTooltip({
+  seg,
+  index,
+  tooltipPlacement
+}) {
+  var _a, _b;
+  const tooltipContent = typeof seg.label !== "undefined" ? seg.label : String((_a = seg.value) != null ? _a : 0);
+  const tooltipEnabled = tooltipContent !== null && tooltipContent !== void 0 && tooltipContent !== "";
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltipContent : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: styles__default.default.segmentWrapper,
+      style: {
+        flex: `${Math.max(seg.value || 0, 0)} 0 0`
+      },
+      ...tooltipEnabled ? triggerProps : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: styles__default.default.progressSegment,
+          "data-index": index,
+          "data-severity": (_b = seg.severity) != null ? _b : "neutral",
+          style: seg.color ? {
+            ["--segment-color"]: seg.color
+          } : void 0
+        }
+      )
+    }
+  );
+}
+const SegmentedProgressBar = ({
+  segments,
+  total,
+  showRemainder = true,
+  remainderSeverity = "missing",
+  centerLabel,
+  size = "sm",
+  rounded = true,
+  trackColor,
+  tooltipPlacement = "top",
+  className,
+  ...aria
+}) => {
+  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
+  const effectiveTotal = total != null ? total : sum;
+  const safeTotal = Math.max(effectiveTotal, 1e-4);
+  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__default.default.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: rootClass,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": effectiveTotal,
+      "aria-valuenow": Math.min(sum, effectiveTotal),
+      ...aria,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: styles__default.default.progressBar,
+          "data-rounded": rounded ? "true" : "false",
+          style: {
+            ["--progress-height"]: sizeTokenMap[size],
+            height: sizeTokenMap[size],
+            background: trackColor != null ? trackColor : "var(--color-bg-surface-subtle)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: filteredSegments.map((seg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              SegmentWithTooltip,
+              {
+                seg,
+                index: i,
+                tooltipPlacement
+              },
+              `${i}`
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${styles__default.default.progressCenter} ${filteredSegments.length === 0 ? styles__default.default.emptySegments : ""}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.progressCenterLabel, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.SegmentedProgressBar = SegmentedProgressBar;