@trackunit/react-components 1.17.28 → 1.17.33-alpha-f192ffc2526.0

package/index.cjs.js

@@ -8109,16 +8109,16 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
-    const valueText = formatValue(sum, unit);
+    const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
     return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
-                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
-                        : formatValue(segment.value, unit);
+                        ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
+                        : formatValue(segment.value, tooltipUnit ?? unit);
                     return showTooltip ? (jsxRuntime.jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
                 }) }), canShowValue ? (jsxRuntime.jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };

package/index.esm.js

@@ -8107,16 +8107,16 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
-    const valueText = formatValue(sum, unit);
+    const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
     return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
-                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
-                        : formatValue(segment.value, unit);
+                        ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
+                        : formatValue(segment.value, tooltipUnit ?? unit);
                     return showTooltip ? (jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
                 }) }), canShowValue ? (jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.28",
+  "version": "1.17.33-alpha-f192ffc2526.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.45",
-    "@trackunit/css-class-variance-utilities": "1.11.45",
-    "@trackunit/shared-utils": "1.13.45",
-    "@trackunit/ui-icons": "1.11.44",
+    "@trackunit/ui-design-tokens": "1.11.49-alpha-f192ffc2526.0",
+    "@trackunit/css-class-variance-utilities": "1.11.49-alpha-f192ffc2526.0",
+    "@trackunit/shared-utils": "1.13.49-alpha-f192ffc2526.0",
+    "@trackunit/ui-icons": "1.11.48-alpha-f192ffc2526.0",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/ValueBar/SegmentedValueBar.d.ts

@@ -16,10 +16,13 @@ export interface SegmentedValueBarProps extends CommonProps {
      */
     readonly size?: SegmentedValueBarSize;
     /**
-     * Show the sum of segment values with unit (if provided) on the bar in large version or after the bar in the small version.
-     * Ignored when size is "extraSmall".
+     * Show the sum of segment values next to the bar. Ignored when size is "extraSmall".
      */
     readonly showValue?: boolean;
+    /**
+     * Overrides the displayed value.
+     */
+    readonly displayValue?: number;
     /**
      * Unit appended to the displayed value, e.g. "%", "h", "°C".
      */
@@ -32,9 +35,13 @@ export interface SegmentedValueBarProps extends CommonProps {
      * Show a tooltip on hover with the individual segment value (and unit if provided). If a segment has a label, it is shown alongside the value.
      */
     readonly showTooltip?: boolean;
+    /**
+     * Unit for tooltip values. Defaults to `unit`.
+     */
+    readonly tooltipUnit?: string;
 }
 /**
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-export declare const SegmentedValueBar: ({ segments, total, size, showValue, unit, valueColor, showTooltip, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;