@trackunit/react-components 1.17.34 → 1.17.36

package/index.cjs.js

@@ -8065,7 +8065,7 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsxRuntime.jsx("button", { className: tailwindMerge.twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconPrefix, children] })) }));
 };
 
-const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["w-full", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
     variants: {
         size: {
             extraSmall: "h-1",
@@ -8077,6 +8077,17 @@ const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["w-full", "over
         size: "small",
     },
 });
+const cvaSegmentedValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap", "tabular-nums", "shrink-0"], {
+    variants: {
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
 
 /** Minimum fraction of the total a segment must occupy for value text to be overlaid inside it. */
 const MIN_RATIO_FOR_OVERLAY_ALIGNMENT = 0.2;
@@ -8114,18 +8125,18 @@ 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, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
     const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
-    const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
+    const valueTextClassName = cvaSegmentedValueBarText({ 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, 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] }));
+                }) }), canShowValue ? (jsxRuntime.jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, style: valueWidth ? { width: valueWidth } : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 /**

package/index.esm.js

@@ -8063,7 +8063,7 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsx("button", { className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxs(Fragment$1, { children: [iconPrefix, children] })) }));
 };
 
-const cvaSegmentedValueBar = cvaMerge(["w-full", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+const cvaSegmentedValueBar = cvaMerge(["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
     variants: {
         size: {
             extraSmall: "h-1",
@@ -8075,6 +8075,17 @@ const cvaSegmentedValueBar = cvaMerge(["w-full", "overflow-hidden", "rounded", "
         size: "small",
     },
 });
+const cvaSegmentedValueBarText = cvaMerge(["whitespace-nowrap", "tabular-nums", "shrink-0"], {
+    variants: {
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
 
 /** Minimum fraction of the total a segment must occupy for value text to be overlaid inside it. */
 const MIN_RATIO_FOR_OVERLAY_ALIGNMENT = 0.2;
@@ -8112,18 +8123,18 @@ 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, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
     const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
-    const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
+    const valueTextClassName = cvaSegmentedValueBarText({ 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, 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] }));
+                }) }), canShowValue ? (jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, style: valueWidth ? { width: valueWidth } : 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.34",
+  "version": "1.17.36",
   "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.49",
-    "@trackunit/css-class-variance-utilities": "1.11.49",
-    "@trackunit/shared-utils": "1.13.49",
-    "@trackunit/ui-icons": "1.11.48",
+    "@trackunit/ui-design-tokens": "1.11.51",
+    "@trackunit/css-class-variance-utilities": "1.11.51",
+    "@trackunit/shared-utils": "1.13.51",
+    "@trackunit/ui-icons": "1.11.50",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

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

@@ -39,9 +39,14 @@ export interface SegmentedValueBarProps extends CommonProps {
      * Unit for tooltip values. Defaults to `unit`.
      */
     readonly tooltipUnit?: string;
+    /**
+     * Fixed width for the value text (e.g., "4ch", "50px"). Ensures consistent bar lengths
+     * when multiple SegmentedValueBars are displayed in a list or table with varying value lengths.
+     */
+    readonly valueWidth?: 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, displayValue, unit, valueColor, showTooltip, tooltipUnit, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, valueWidth, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;

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

@@ -1,3 +1,6 @@
 export declare const cvaSegmentedValueBar: (props?: ({
     size?: "extraSmall" | "small" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSegmentedValueBarText: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;