@dbcdk/react-components 0.0.2 → 0.0.4

package/dist/components/popover/Popover.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import styles from './Popover.module.css';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+const Popover = forwardRef(function Popover2({ trigger: Trigger, children, minWidth = "200px", viewportPadding = 8, edgeBuffer = 100 }, ref) {
+  const [pos, setPos] = useState({ top: 0, left: 0, visible: false });
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const computeAndSetPosition = useCallback(
+    (show) => {
+      const container = containerRef.current;
+      const content = contentRef.current;
+      if (!container || !content) return;
+      const prevVis = content.style.visibility;
+      const prevDisp = content.style.display;
+      content.style.visibility = "hidden";
+      content.style.display = "block";
+      const triggerRect = container.getBoundingClientRect();
+      const contentWidth = content.offsetWidth;
+      const contentHeight = content.offsetHeight;
+      content.style.visibility = prevVis;
+      content.style.display = prevDisp;
+      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, visible: show });
+    },
+    [edgeBuffer, viewportPadding]
+  );
+  const openPopover = useCallback(
+    (e) => {
+      if (pos.visible) {
+        setPos((p) => ({ ...p, visible: false }));
+        return;
+      }
+      computeAndSetPosition(true);
+      e == null ? void 0 : e.stopPropagation();
+    },
+    [pos.visible, computeAndSetPosition]
+  );
+  const closePopover = useCallback(() => {
+    setPos((p) => ({ ...p, visible: false }));
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      close: closePopover,
+      open: () => computeAndSetPosition(true),
+      isOpen: () => !!pos.visible
+    }),
+    [closePopover, computeAndSetPosition, pos.visible]
+  );
+  useEffect(() => {
+    if (!pos.visible) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && contentRef.current && !containerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
+        closePopover();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") closePopover();
+    };
+    const handleReposition = () => computeAndSetPosition(true);
+    document.addEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleEscape, true);
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape, true);
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+    };
+  }, [pos.visible, closePopover, computeAndSetPosition]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, ref: containerRef, children: [
+    Trigger(openPopover, pos.visible ? /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 20 })),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: styles.content,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          visibility: pos.visible ? "visible" : "hidden",
+          minWidth,
+          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
+          overflow: "auto"
+        },
+        role: "dialog",
+        "aria-hidden": !pos.visible,
+        children
+      }
+    )
+  ] });
+});
+Popover.displayName = "Popover";
+
+export { Popover };

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

@@ -0,0 +1,25 @@
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+.content {
+  position: absolute;
+  border: 1px solid var(--color-border);
+  top: 100%;
+  left: 0;
+  background-color: var(--color-surface);
+  border-radius: var(--border-radius-default);
+  padding: var(--spacing-sm) 0;
+  z-index: var(--z-popover);
+  background-color: var(--color-background);
+  max-width: 80vw;
+  max-height: 80vh;
+  overflow: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.content svg {
+  height: 20px;
+  width: 20px;
+}

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

@@ -0,0 +1,162 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var Input = require('../input/Input');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+var Button = require('../button/Button');
+var SkeletonLoaderItem = require('../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 SearchBox2({
+  width,
+  inputSize,
+  variant,
+  result,
+  debounce = true,
+  debounceMs = 800,
+  onSearch,
+  onSelect,
+  displayPopover,
+  resultKeys,
+  resultTemplate,
+  initialTemplate,
+  popoverMinWidth = "500px",
+  noResultText = "Ingen resultater",
+  loading,
+  enableHotkey = true,
+  onButtonClick,
+  ...rest
+}, ref) {
+  const [query, setQuery] = react.useState("");
+  const [searchQuery, setSearchQuery] = react.useState("");
+  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 (!onSearch) return;
+    if (debounce) {
+      const handler = setTimeout(() => {
+        setSearchQuery(query);
+        onSearch(query);
+      }, debounceMs);
+      return () => clearTimeout(handler);
+    } else {
+      onSearch(query);
+    }
+  }, [query, onSearch, debounce]);
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      var _a;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+  };
+  function handleSelect(item) {
+    onSelect == null ? void 0 : onSelect(item);
+    reset();
+  }
+  function reset() {
+    var _a;
+    setQuery("");
+    setSearchQuery("");
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  }
+  rest.value = query;
+  rest.onChange = handleChange;
+  const inputField = react.useMemo(() => {
+    var _a;
+    if (displayPopover) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Input.Input,
+              {
+                ref: internalInputRef,
+                onInput: handleChange,
+                onFocusCapture: event,
+                onClick: event,
+                minWidth: width != null ? width : "300px",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
+                inputSize,
+                ...rest,
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
+              }
+            );
+          },
+          children: (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+            const value = item[key] ? String(item[key]) : "";
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                style: {
+                  whiteSpace: String(value.length < 10 ? "nowrap" : "")
+                },
+                children: String(item[key])
+              },
+              String(key)
+            );
+          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Input.Input,
+      {
+        ref: internalInputRef,
+        onInput: handleChange,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
+        minWidth: width != null ? width : "300px",
+        inputSize,
+        variant,
+        ...rest,
+        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
+      }
+    );
+  }, [
+    displayPopover,
+    popoverMinWidth,
+    result,
+    resultKeys,
+    resultTemplate,
+    initialTemplate,
+    searchQuery,
+    loading,
+    width,
+    inputSize,
+    variant,
+    rest
+  ]);
+  return onButtonClick ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.withButton, children: [
+    inputField,
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}), onClick: onButtonClick })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: inputField });
+});
+
+exports.SearchBox = SearchBox;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InputVariant } from '../input/Input';
+import { Size } from '@/types/sizes.types';
+export declare const SearchBox: React.ForwardRefExoticComponent<{
+    width?: string;
+    inputSize?: Size;
+    variant?: InputVariant;
+    result?: unknown[] | undefined;
+    resultKeys?: never[] | undefined;
+    resultTemplate?: React.ReactNode;
+    debounce?: boolean;
+    debounceMs?: number;
+    onSearch?: (query: string) => void;
+    onSelect?: ((item: unknown) => void) | undefined;
+    displayPopover?: boolean;
+    initialTemplate?: React.ReactNode;
+    noResultText?: string;
+    popoverMinWidth?: string;
+    loading?: boolean;
+    enableHotkey?: boolean;
+    onButtonClick?: () => void;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+import { Search } from 'lucide-react';
+import { Input } from '../input/Input';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+import { Button } from '../button/Button';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import styles from './SearchBox.module.css';
+
+const SearchBox = forwardRef(function SearchBox2({
+  width,
+  inputSize,
+  variant,
+  result,
+  debounce = true,
+  debounceMs = 800,
+  onSearch,
+  onSelect,
+  displayPopover,
+  resultKeys,
+  resultTemplate,
+  initialTemplate,
+  popoverMinWidth = "500px",
+  noResultText = "Ingen resultater",
+  loading,
+  enableHotkey = true,
+  onButtonClick,
+  ...rest
+}, ref) {
+  const [query, setQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  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 (!onSearch) return;
+    if (debounce) {
+      const handler = setTimeout(() => {
+        setSearchQuery(query);
+        onSearch(query);
+      }, debounceMs);
+      return () => clearTimeout(handler);
+    } else {
+      onSearch(query);
+    }
+  }, [query, onSearch, debounce]);
+  useEffect(() => {
+    function handleKeyDown(event) {
+      var _a;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+  };
+  function handleSelect(item) {
+    onSelect == null ? void 0 : onSelect(item);
+    reset();
+  }
+  function reset() {
+    var _a;
+    setQuery("");
+    setSearchQuery("");
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  }
+  rest.value = query;
+  rest.onChange = handleChange;
+  const inputField = useMemo(() => {
+    var _a;
+    if (displayPopover) {
+      return /* @__PURE__ */ jsx(
+        Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: internalInputRef,
+                onInput: handleChange,
+                onFocusCapture: event,
+                onClick: event,
+                minWidth: width != null ? width : "300px",
+                icon: /* @__PURE__ */ jsx(Search, {}),
+                inputSize,
+                ...rest,
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
+              }
+            );
+          },
+          children: (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+            const value = item[key] ? String(item[key]) : "";
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                style: {
+                  whiteSpace: String(value.length < 10 ? "nowrap" : "")
+                },
+                children: String(item[key])
+              },
+              String(key)
+            );
+          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: noResultText })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: internalInputRef,
+        onInput: handleChange,
+        icon: /* @__PURE__ */ jsx(Search, {}),
+        minWidth: width != null ? width : "300px",
+        inputSize,
+        variant,
+        ...rest,
+        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
+      }
+    );
+  }, [
+    displayPopover,
+    popoverMinWidth,
+    result,
+    resultKeys,
+    resultTemplate,
+    initialTemplate,
+    searchQuery,
+    loading,
+    width,
+    inputSize,
+    variant,
+    rest
+  ]);
+  return onButtonClick ? /* @__PURE__ */ jsxs("div", { className: styles.withButton, children: [
+    inputField,
+    /* @__PURE__ */ jsx(Button, { variant: "outlined", icon: /* @__PURE__ */ jsx(Search, {}), onClick: onButtonClick })
+  ] }) : /* @__PURE__ */ jsx("div", { children: inputField });
+});
+
+export { SearchBox };

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

@@ -0,0 +1,20 @@
+.resultContainer {
+  padding: var(--spacing-sm);
+}
+
+.withButton {
+  display: inline-flex;
+  align-items: center;
+  border-collapse: collapse;
+}
+
+.withButton input {
+  border-right-color: transparent;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.withButton button {
+  border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
+}
+

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

@@ -0,0 +1,97 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var severity = require('../../constants/severity');
+var Tooltip = require('../tooltip/Tooltip');
+var styles = require('./SegmentedProgressBar.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SegmentedProgressBar = ({
+  segments,
+  total,
+  showRemainder = true,
+  remainderSeverity = "neutral",
+  centerLabel,
+  height,
+  rounded = true,
+  trackColor = "var(--color-secondary)",
+  tooltipPlacement = "top",
+  className,
+  ...aria
+}) => {
+  var _a;
+  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 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,
+          style: {
+            height: height ? `${height}px` : `var(--component-size-xs)`,
+            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
+            background: trackColor
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
+              var _a2, _b, _c, _d, _e;
+              const bg = (_b = seg.color) != null ? _b : severity.SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
+              const fg = severity.SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
+              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Tooltip.Tooltip,
+                {
+                  content: tooltipText,
+                  placement: tooltipPlacement,
+                  className: styles__default.default.segmentWrapper,
+                  style: {
+                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
+                    height: "100%",
+                    minWidth: "2px"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: styles__default.default.progressSegment,
+                      "data-index": i,
+                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
+                      style: { background: bg, color: fg }
+                    }
+                  )
+                },
+                `${i}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.SegmentedProgressBar = SegmentedProgressBar;

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Severity } from '../../constants/severity.types';
+import { type TooltipPlacement } from '../tooltip/Tooltip';
+export type Segment = {
+    value: number;
+    severity?: Severity;
+    color?: string;
+    label?: React.ReactNode;
+};
+export interface SegmentedProgressBarProps {
+    segments: Segment[];
+    total?: number;
+    showRemainder?: boolean;
+    remainderSeverity?: Severity;
+    centerLabel?: React.ReactNode | ((filledPct: number) => React.ReactNode);
+    height?: number;
+    rounded?: boolean;
+    trackColor?: string;
+    tooltipPlacement?: TooltipPlacement;
+    'aria-label'?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const SegmentedProgressBar: React.FC<SegmentedProgressBarProps>;