@trackunit/react-components 1.17.33 → 1.17.35

package/index.cjs.js

@@ -2875,7 +2875,7 @@ function createGrid() {
                 layout(config) {
                     // At runtime, config properties are always valid arrays (error types only exist at compile-time)
                     // We need to cast and copy readonly arrays to mutable arrays for storage
-                    // eslint-disable-next-line local-rules/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
+                    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
                     const runtimeConfig = config;
                     layouts.push({
                         layout: runtimeConfig.layout.map(row => [...row]),
@@ -2987,7 +2987,7 @@ function GridAreas({ slots, css, containerProps, validationRef, className, child
  *
  * @see https://tailwindcss.com/docs/responsive-design#container-queries
  */
-// eslint-disable-next-line local-rules/no-typescript-assertion
+// eslint-disable-next-line @trackunit/no-typescript-assertion
 const CONTAINER_BREAKPOINTS = Object.fromEntries(Object.entries(uiDesignTokens.themeContainerSize).map(([key, value]) => [`@${key}`, value]));
 
 /**
@@ -3060,7 +3060,7 @@ function isContainerBreakpoint(value) {
  * Each slot contains a data-slot attribute and gridArea style.
  */
 function createSlots(areas) {
-    // eslint-disable-next-line local-rules/no-typescript-assertion -- Object.fromEntries loses key type information
+    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Object.fromEntries loses key type information
     return Object.fromEntries(areas.map(area => [area, { "data-slot": area, style: { gridArea: area } }]));
 }
 /**
@@ -6186,7 +6186,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
             if (stopPropagation) {
                 e.stopPropagation();
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
+            // eslint-disable-next-line @trackunit/no-typescript-assertion
             onClick(e);
         }
     };
@@ -8029,7 +8029,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         setSlidingWidth(width);
     }, [validIndex]);
     return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         {
             "--sliding-left": `${slidingLeft}px`,
             "--sliding-width": `${slidingWidth}px`,
@@ -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] }));
 };
 
 /**
@@ -8414,7 +8425,7 @@ const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
     const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
             options.onClick(ev);

package/index.esm.js

@@ -2873,7 +2873,7 @@ function createGrid() {
                 layout(config) {
                     // At runtime, config properties are always valid arrays (error types only exist at compile-time)
                     // We need to cast and copy readonly arrays to mutable arrays for storage
-                    // eslint-disable-next-line local-rules/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
+                    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
                     const runtimeConfig = config;
                     layouts.push({
                         layout: runtimeConfig.layout.map(row => [...row]),
@@ -2985,7 +2985,7 @@ function GridAreas({ slots, css, containerProps, validationRef, className, child
  *
  * @see https://tailwindcss.com/docs/responsive-design#container-queries
  */
-// eslint-disable-next-line local-rules/no-typescript-assertion
+// eslint-disable-next-line @trackunit/no-typescript-assertion
 const CONTAINER_BREAKPOINTS = Object.fromEntries(Object.entries(themeContainerSize).map(([key, value]) => [`@${key}`, value]));
 
 /**
@@ -3058,7 +3058,7 @@ function isContainerBreakpoint(value) {
  * Each slot contains a data-slot attribute and gridArea style.
  */
 function createSlots(areas) {
-    // eslint-disable-next-line local-rules/no-typescript-assertion -- Object.fromEntries loses key type information
+    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Object.fromEntries loses key type information
     return Object.fromEntries(areas.map(area => [area, { "data-slot": area, style: { gridArea: area } }]));
 }
 /**
@@ -6184,7 +6184,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
             if (stopPropagation) {
                 e.stopPropagation();
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
+            // eslint-disable-next-line @trackunit/no-typescript-assertion
             onClick(e);
         }
     };
@@ -8027,7 +8027,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         setSlidingWidth(width);
     }, [validIndex]);
     return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         {
             "--sliding-left": `${slidingLeft}px`,
             "--sliding-width": `${slidingWidth}px`,
@@ -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] }));
 };
 
 /**
@@ -8412,7 +8423,7 @@ const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
     const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
             options.onClick(ev);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.33",
+  "version": "1.17.35",
   "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.48",
-    "@trackunit/css-class-variance-utilities": "1.11.48",
-    "@trackunit/shared-utils": "1.13.48",
-    "@trackunit/ui-icons": "1.11.47",
+    "@trackunit/ui-design-tokens": "1.11.50",
+    "@trackunit/css-class-variance-utilities": "1.11.50",
+    "@trackunit/shared-utils": "1.13.50",
+    "@trackunit/ui-icons": "1.11.49",
     "@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;