@trackunit/react-components 1.17.23 → 1.17.24

package/index.cjs.js

@@ -5012,6 +5012,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
     return (jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: trends.map((trend, index) => (jsxRuntime.jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
 };
 
+const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
+    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",
+    },
+});
+
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
     "w-full",
     "overflow-hidden",
@@ -5033,17 +5046,6 @@ const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
         size: "small",
     },
 });
-const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
-    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",
-    },
-});
 
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
@@ -5158,7 +5160,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
-    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+    return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
@@ -8183,7 +8185,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
     const valueText = formatValue(sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "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) => {
+    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);

package/index.esm.js

@@ -5010,6 +5010,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
     return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
 };
 
+const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
+    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",
+    },
+});
+
 const cvaValueBar = cvaMerge([
     "w-full",
     "overflow-hidden",
@@ -5031,17 +5044,6 @@ const cvaValueBar = cvaMerge([
         size: "small",
     },
 });
-const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
-    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",
-    },
-});
 
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
@@ -5156,7 +5158,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const valueText = `${Number(value.toFixed(1))}${nonNullable(unit) ? unit : ""}`;
-    return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, ref: ref, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -8181,7 +8183,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
     const valueText = formatValue(sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.23",
+  "version": "1.17.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -0,0 +1,4 @@
+export declare const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+export declare const cvaValueBarText: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

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