@trackunit/react-components 1.17.23 → 1.17.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.cjs.js +15 -13
  2. package/index.esm.js +15 -13
  3. package/package.json +1 -1
  4. package/src/components/ValueBar/ValueBar.shared.d.ts +4 -0
  5. package/src/components/ValueBar/ValueBar.variants.d.ts +0 -3
package/index.cjs.js CHANGED
@@ -5012,6 +5012,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
5012
5012
  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))) }));
5013
5013
  };
5014
5014
 
5015
+ const valueBarContainerClassName = "relative flex w-full items-center gap-2";
5016
+ const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
5017
+ variants: {
5018
+ size: {
5019
+ small: "leading-xs text-xs font-medium text-neutral-600",
5020
+ large: "absolute pl-3 text-base text-white drop-shadow-lg",
5021
+ },
5022
+ },
5023
+ defaultVariants: {
5024
+ size: "small",
5025
+ },
5026
+ });
5027
+
5015
5028
  const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
5016
5029
  "w-full",
5017
5030
  "overflow-hidden",
@@ -5033,17 +5046,6 @@ const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
5033
5046
  size: "small",
5034
5047
  },
5035
5048
  });
5036
- const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
5037
- variants: {
5038
- size: {
5039
- small: "leading-xs text-xs font-medium text-neutral-600",
5040
- large: "absolute pl-3 text-base text-white drop-shadow-lg",
5041
- },
5042
- },
5043
- defaultVariants: {
5044
- size: "small",
5045
- },
5046
- });
5047
5049
 
5048
5050
  /**
5049
5051
  * 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
5158
5160
  const score = getScore(value, min, max, zeroScoreAllowed);
5159
5161
  const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
5160
5162
  const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
5161
- 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] }));
5163
+ 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] }));
5162
5164
  };
5163
5165
 
5164
5166
  const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
@@ -8183,7 +8185,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
8183
8185
  const valueText = formatValue(sum, unit);
8184
8186
  const canShowValue = showValue && size !== "extraSmall";
8185
8187
  const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
8186
- 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) => {
8188
+ 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) => {
8187
8189
  const tooltipLabel = segment.label
8188
8190
  ? `${segment.label}: ${formatValue(segment.value, unit)}`
8189
8191
  : formatValue(segment.value, unit);
package/index.esm.js CHANGED
@@ -5010,6 +5010,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
5010
5010
  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))) }));
5011
5011
  };
5012
5012
 
5013
+ const valueBarContainerClassName = "relative flex w-full items-center gap-2";
5014
+ const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
5015
+ variants: {
5016
+ size: {
5017
+ small: "leading-xs text-xs font-medium text-neutral-600",
5018
+ large: "absolute pl-3 text-base text-white drop-shadow-lg",
5019
+ },
5020
+ },
5021
+ defaultVariants: {
5022
+ size: "small",
5023
+ },
5024
+ });
5025
+
5013
5026
  const cvaValueBar = cvaMerge([
5014
5027
  "w-full",
5015
5028
  "overflow-hidden",
@@ -5031,17 +5044,6 @@ const cvaValueBar = cvaMerge([
5031
5044
  size: "small",
5032
5045
  },
5033
5046
  });
5034
- const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
5035
- variants: {
5036
- size: {
5037
- small: "leading-xs text-xs font-medium text-neutral-600",
5038
- large: "absolute pl-3 text-base text-white drop-shadow-lg",
5039
- },
5040
- },
5041
- defaultVariants: {
5042
- size: "small",
5043
- },
5044
- });
5045
5047
 
5046
5048
  /**
5047
5049
  * 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
5156
5158
  const score = getScore(value, min, max, zeroScoreAllowed);
5157
5159
  const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
5158
5160
  const valueText = `${Number(value.toFixed(1))}${nonNullable(unit) ? unit : ""}`;
5159
- 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] }));
5161
+ 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] }));
5160
5162
  };
5161
5163
 
5162
5164
  const cvaKPICard = cvaMerge([
@@ -8181,7 +8183,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
8181
8183
  const valueText = formatValue(sum, unit);
8182
8184
  const canShowValue = showValue && size !== "extraSmall";
8183
8185
  const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
8184
- 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) => {
8186
+ 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) => {
8185
8187
  const tooltipLabel = segment.label
8186
8188
  ? `${segment.label}: ${formatValue(segment.value, unit)}`
8187
8189
  : formatValue(segment.value, unit);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-components",
3
- "version": "1.17.23",
3
+ "version": "1.17.24",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/components/ValueBar/ValueBar.shared.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const valueBarContainerClassName = "relative flex w-full items-center gap-2";
2
+ export declare const cvaValueBarText: (props?: ({
3
+ size?: "small" | "large" | null | undefined;
4
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
package/src/components/ValueBar/ValueBar.variants.d.ts CHANGED
@@ -1,6 +1,3 @@
1
1
  export declare const cvaValueBar: (props?: ({
2
2
  size?: "extraSmall" | "small" | "large" | null | undefined;
3
3
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
4
- export declare const cvaValueBarText: (props?: ({
5
- size?: "small" | "large" | null | undefined;
6
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;