@trackunit/react-components 1.12.13 → 1.13.2

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, forwardRef, Fragment, memo, useReducer, Children, isValidElement, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
-import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable, filterByMultiple } from '@trackunit/shared-utils';
-import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
+import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, filterByMultiple } from '@trackunit/shared-utils';
+import { useRef, useMemo, useEffect, useState, useLayoutEffect, useCallback, createElement, forwardRef, Fragment, memo, useReducer, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
+import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, themeFontSize, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -163,8 +163,17 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
     return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
+/**
+ * The Tailwind class for minimum width of tag text.
+ * This is the source of truth - use parseTailwindArbitraryValue to derive the numeric value.
+ */
+const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
 const cvaTag = cvaMerge([
-    "inline-flex",
+    "grid",
+    "grid-cols-[1fr]",
+    "has-[[data-slot=icon]]:grid-cols-[auto_1fr]",
+    "has-[[data-slot=dismiss]]:grid-cols-[1fr_auto]",
+    "has-[[data-slot=icon]]:has-[[data-slot=dismiss]]:grid-cols-[auto_1fr_auto]",
     "justify-center",
     "items-center",
     "rounded-full",
@@ -172,11 +181,11 @@ const cvaTag = cvaMerge([
     "px-2",
     "text-center",
     "h-min",
-    "min-w-[1.5rem]",
     "font-medium",
-    "truncate",
     "max-w-full",
     "w-fit",
+    "overflow-hidden",
+    "min-w-min",
     "text-xs",
 ], {
     variants: {
@@ -220,10 +229,21 @@ const cvaTag = cvaMerge([
         color: "info",
     },
 });
-const cvaTagText = cvaMerge(["truncate"]);
-const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
+const cvaTagText = cvaMerge(["whitespace-nowrap"], {
+    variants: {
+        truncate: {
+            true: ["truncate", TAG_TEXT_MIN_WIDTH_CLASS],
+            false: "min-w-min",
+        },
+    },
+    defaultVariants: {
+        truncate: true,
+    },
+});
+const cvaTagIconContainer = cvaMerge(["shrink-0", "inline-flex", "self-center"]);
 const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
+const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLASS);
 /**
  * The Tag component is used for labeling or categorizing items in the UI.
  * It's commonly used to indicate the status of an asset, mark a feature as Beta,
@@ -238,6 +258,19 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @returns {ReactElement} The rendered Tag component.
  */
 const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+    const textRef = useRef(null);
+    const [shouldTruncate, setShouldTruncate] = useState(false);
+    useLayoutEffect(() => {
+        // Using simple DOM measurements to avoid the complexity of the useMeasure hook.
+        // Resize observers have some overhead and we don't need the full power of the useMeasure hook here.
+        // And tags could be rendered many at a time, multiplying the performance penalty of useMeasure.
+        // We measure the visible span directly using scrollWidth which gives the full content width
+        // even when truncation styles are applied.
+        if (textRef.current !== null) {
+            const width = textRef.current.scrollWidth;
+            setShouldTruncate(width >= TAG_TEXT_MIN_WIDTH_PX);
+        }
+    }, [children]);
     const isSupportedDismissColor = useMemo(() => {
         if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
             return true;
@@ -253,11 +286,16 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         }
         return "default";
     }, [onClose, isSupportedDismissColor, disabled, icon]);
-    return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), children: icon })) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    return (jsxs("div", { className: cvaTag({
+            className,
+            size,
+            color,
+            layout,
+            border: color === "white" ? "default" : "none",
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
-Tag.displayName = "Tag";
 
 /**
  * A component used to display the package name and version in the Storybook docs.
@@ -1242,7 +1280,7 @@ const cvaCardHeaderContainer = cvaMerge(["flex", "border-b", "border-neutral-200
         padding: "default",
     },
 });
-const cvaCardBodyContainer$1 = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         direction: {
             row: "flex-row",
@@ -1287,7 +1325,7 @@ const Card = forwardRef(function Card({ children, onClick, fullHeight = false, o
  * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, }) => {
-    return (jsx("div", { className: cvaCardBodyContainer$1({
+    return (jsx("div", { className: cvaCardBodyContainer({
             gap,
             padding,
             className,
@@ -2370,7 +2408,7 @@ const useScrollDetection = (options) => {
     }), [ref, element, scrollState]);
 };
 
-const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
+const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1", "isolate"]);
 const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
 
 /**
@@ -3122,63 +3160,163 @@ const cvaKPI = cvaMerge(["w-full", "flex", "flex-col"], {
         variant: "default",
     },
 });
-const cvaKPIHeader = cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
-const cvaKPITitleText = cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
+const cvaKPITrendPercentage = cvaMerge([""], {
     variants: {
-        variant: {
-            small: ["mt-0.5"],
-            condensed: [""],
-            default: [""],
+        color: {
+            success: ["text-success-600"],
+            danger: ["text-danger-600"],
+            warning: ["text-warning-600"],
+            neutral: ["text-neutral-600"],
+            info: ["text-info-600"],
         },
     },
     defaultVariants: {
-        variant: "default",
+        color: "success",
     },
 });
-const cvaKPITrendPercentage = cvaMerge([""], {
+
+/**
+ * The KPI component is used to display KPIs.
+ *
+ * @param {KPIProps} props - The props for the KPI component
+ * @returns {ReactElement} KPI component
+ */
+const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ...rest }) => {
+    const isSmallVariant = variant === "small";
+    return (jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [loading ? (jsx(SkeletonLines, { className: twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, height: isSmallVariant ? themeFontSize.xs : themeFontSize.sm, lines: 1, width: "80%" })) : (jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title })), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: loading ? (jsx(SkeletonLines, { className: "flex h-7 flex-row items-center", "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, height: themeFontSize.base, lines: 1, width: "100%" })) : (jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] })) })] }) }));
+};
+
+/**
+ * The TrendIndicator component is used within the KPI Card component to display the trend indicator.
+ *
+ * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
+ * @returns {ReactElement} TrendIndicator component
+ */
+const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, }) => {
+    return (jsxs("div", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: [value !== undefined ? (jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxs("div", { className: "flex items-center", children: [icon ? (jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
+};
+
+/**
+ * The TrendIndicators component is used within the KPI Card component to display the trend indicators.
+ *
+ * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
+ * @returns {ReactElement} TrendIndicators component
+ */
+const TrendIndicators = ({ trends, "data-testid": dataTestId, className, }) => {
+    return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
+};
+
+const cvaValueBar = cvaMerge([
+    "w-full",
+    "overflow-hidden",
+    "rounded",
+    "bg-neutral-100",
+    "appearance-none",
+    "[&::-webkit-progress-bar]:bg-transparent",
+    "[&::-webkit-progress-value]:bg-current",
+    "[&::-moz-progress-bar]:bg-current",
+], {
     variants: {
-        color: {
-            success: ["text-success-500"],
-            danger: ["text-danger-500"],
-            neutral: ["text-neutral-500"],
+        size: {
+            extraSmall: "h-1",
+            small: "h-3",
+            large: "h-9",
         },
     },
     defaultVariants: {
-        color: "success",
+        size: "small",
     },
 });
-const cvaKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
+const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
     variants: {
-        isDefaultAndHasTrendValue: {
-            true: [],
-            false: ["flex", "flex-row", "items-center", "gap-1"],
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
         },
     },
     defaultVariants: {
-        isDefaultAndHasTrendValue: true,
+        size: "small",
     },
 });
 
-const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { gap: 3, height: [14, 18], lines: 2, width: [80, 60] }) }) }));
 /**
- * The KPI component is used to display KPIs.
- *
- * @param {KPIProps} props - The props for the KPI component
- * @returns {ReactElement} KPI component
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ 
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {boolean} zeroScoreAllowed - If true, allows the score to be exactly 0 when the value is less than or equal to the minimum.
+ *                                     If false or not provided, ensures a minimal score (0.01) is returned to always render a small fragment.
+ * @returns {number} normalized score
  */
-const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", trend, style, ...rest }) => {
-    const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", style: style, children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment$1, { children: [jsx("div", { className: cvaKPIHeader(), children: jsx(Text, { className: cvaKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsx(Text, { className: cvaKPIvalueText({ variant }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
-                                isDefaultAndHasTrendValue: Boolean(trend !== undefined && trend.value !== undefined && !isSmallVariant),
-                                className,
-                            }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
+const getScore = (value, min, max, zeroScoreAllowed) => {
+    if (value <= min) {
+        if (zeroScoreAllowed === true) {
+            return 0;
+        }
+        return 0.01; // always render at least some small fragment
+    }
+    if (value >= max) {
+        return 1;
+    }
+    return (value - min) / (max - min);
 };
-const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    if (!trend) {
-        return null;
+/**
+ * Helper function to get default color used by the ValueBar
+ 
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+const getDefaultFillColor = (score) => {
+    if (score < 0.3) {
+        return color("DANGER", 500, "CSS");
+    }
+    if (score >= 0.6) {
+        return color("SUCCESS", 600, "CSS");
     }
-    return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value !== undefined ? (jsxs(Text, { "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant !== undefined && trend.variant.icon !== undefined ? (jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" })) : null, trend.percentage !== undefined ? (jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+    return color("WARNING", 300, "CSS");
+};
+/**
+ * Helper function to get custom color used by the ValueBar
+ 
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+const getFillColor = (score, levelColors) => {
+    if (levelColors.low !== undefined && score < (levelColors.low.level !== undefined ? levelColors.low.level : 0)) {
+        return levelColors.low.color;
+    }
+    if (levelColors.high !== undefined && score >= (levelColors.high.level !== undefined ? levelColors.high.level : 0)) {
+        return levelColors.high.color;
+    }
+    return levelColors.medium?.color ?? color("WARNING", 300);
+};
+/**
+ * Helper function to get color used by the ValueBar
+ 
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {ReactElement} ValueBar component
+ */
+const getValueBarColorByValue = (value, min, max, levelColors) => {
+    const score = getScore(value, min, max);
+    return getFillColor(score, levelColors);
+};
+
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ 
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {ReactElement} ValueBar component
+ */
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
+    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, 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([
@@ -3212,14 +3350,6 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
         },
     },
 });
-const cvaCardBodyContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
-    variants: {
-        iconName: {
-            true: "gap-2",
-            false: "gap-3 ",
-        },
-    },
-});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -3227,13 +3357,15 @@ const cvaCardBodyContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, ...rest }) => {
+const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, notice, valueBar, trends, unit, ...rest }) => {
     const isClickable = Boolean(onClick !== undefined && loading !== true);
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyContainer({ iconName: Boolean(iconName) }), gap: "none", padding: "none", children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: "grid gap-2 px-3 pb-2 pt-3", gap: "none", padding: "none", children: [jsxs("div", { className: "grid grid-cols-[1fr_auto] justify-between gap-2", children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (loading ? (jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, height: themeFontSize.xs, lines: 1, width: "100%" })) : (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends }))) : null, valueBar !== undefined ? (loading ? (jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, gap: 0, height: themeFontSize.xs, lines: 1, width: "100%" })) : (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar }))) : null, notice !== undefined ? (loading ? (jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, gap: 0, height: themeFontSize.xs, lines: 1, width: "100%" })) : (
+                // NOTE: Can't use Notice component here due to the non-flexible text styling options
+                jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] }))) : null, children] }) }));
 };
 
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
@@ -3369,6 +3501,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  *
  * @example Basic usage
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],
@@ -3385,6 +3518,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * ```
  * @example With header
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],
@@ -3893,7 +4027,11 @@ const cvaMenuList = cvaMerge([
     "overflow-y-auto",
 ]);
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
-const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
+const cvaMenuListMultiSelect = cvaMerge([
+    "!has-[:checked]:bg-primary-100",
+    "!hover:has-[:checked]:bg-primary-200",
+    "!focus-within:has-[:checked]:bg-primary-100",
+]);
 const cvaMenuListItem = cvaMerge("max-w-full");
 
 /**
@@ -3984,7 +4122,7 @@ const cvaMenuItemPrefix = cvaMerge([
 ], {
     variants: {
         selected: {
-            true: "text-neutral-600",
+            true: "text-primary-600",
             false: "",
         },
         variant: {
@@ -4099,7 +4237,7 @@ const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = fa
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
                         suffix: menuItem.props.suffix ??
-                            (isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                            (isMulti && isSelected ? jsx(Icon, { className: "text-primary-600 block", name: "Check", size: "medium" }) : null),
                     });
                 }
                 return null;
@@ -4127,8 +4265,8 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
-const cvaNotice = cvaMerge(["flex", "items-center"]);
-const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
+const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
+const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -4168,12 +4306,12 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
  *
  * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
- 
+ *
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {ReactElement} Notice component
  */
-const Notice = ({ "data-testid": dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [nonNullable(iconName) ? (jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -4563,7 +4701,18 @@ const cvaSpacer = cvaMerge([], {
 
 /**
  * The Spacer component is used for adding a bit of space in the ui.
- 
+ *
+ * @example basic usage
+ * ```tsx
+ * import { Spacer } from "@trackunit/react-components";
+ * const MySpacer = () => {
+ *   return (
+ *     <div>
+ *       <Spacer size="small" border data-testid="my-spacer-testid" />
+ *     </div>
+ *   );
+ * };
+ * ```
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
@@ -4993,119 +5142,6 @@ 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 cvaValueBar = cvaMerge([
-    "w-full",
-    "overflow-hidden",
-    "rounded",
-    "bg-neutral-100",
-    "appearance-none",
-    "[&::-webkit-progress-bar]:bg-transparent",
-    "[&::-webkit-progress-value]:bg-current",
-    "[&::-moz-progress-bar]:bg-current",
-], {
-    variants: {
-        size: {
-            extraSmall: "h-1",
-            small: "h-3",
-            large: "h-9",
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
-const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
-    variants: {
-        size: {
-            small: "text-sm font-bold text-neutral-400",
-            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
- 
- * @param {number} value - value for which score should be returned
- * @param {number} min - min range value
- * @param {number} max - max range value
- * @param {boolean} zeroScoreAllowed - If true, allows the score to be exactly 0 when the value is less than or equal to the minimum.
- *                                     If false or not provided, ensures a minimal score (0.01) is returned to always render a small fragment.
- * @returns {number} normalized score
- */
-const getScore = (value, min, max, zeroScoreAllowed) => {
-    if (value <= min) {
-        if (zeroScoreAllowed === true) {
-            return 0;
-        }
-        return 0.01; // always render at least some small fragment
-    }
-    if (value >= max) {
-        return 1;
-    }
-    return (value - min) / (max - min);
-};
-/**
- * Helper function to get default color used by the ValueBar
- 
- * @param {number} score - score number for which color should be returned
- * @returns {string} color value
- */
-const getDefaultFillColor = (score) => {
-    if (score < 0.3) {
-        return color("DANGER", 500, "CSS");
-    }
-    if (score >= 0.6) {
-        return color("SUCCESS", 600, "CSS");
-    }
-    return color("WARNING", 300, "CSS");
-};
-/**
- * Helper function to get custom color used by the ValueBar
- 
- * @param {number} score - score number for which color should be returned
- * @param {LevelColors} levelColors - custom colors and levels definitions
- * @returns {string} color value
- */
-const getFillColor = (score, levelColors) => {
-    if (levelColors.low !== undefined && score < (levelColors.low.level !== undefined ? levelColors.low.level : 0)) {
-        return levelColors.low.color;
-    }
-    if (levelColors.high !== undefined && score >= (levelColors.high.level !== undefined ? levelColors.high.level : 0)) {
-        return levelColors.high.color;
-    }
-    return levelColors.medium?.color ?? color("WARNING", 300);
-};
-/**
- * Helper function to get color used by the ValueBar
- 
- * @param {number} value - value for which color should be returned
- * @param {number} min - min range value
- * @param {number} max - max range value
- * @param {LevelColors} levelColors - level colors used to coloring the bar
- * @returns {ReactElement} ValueBar component
- */
-const getValueBarColorByValue = (value, min, max, levelColors) => {
-    const score = getScore(value, min, max);
-    return getFillColor(score, levelColors);
-};
-
-/**
- * ValueBar component is used to display value on a colorful bar within provided range.
- 
- * @param {ValueBarProps} props - The props for the ValueBar component
- * @returns {ReactElement} ValueBar component
- */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
-    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, 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] }));
-};
-
 /**
  * Base64URL encode bytes to a URL-safe string
  */
@@ -6047,4 +6083,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return useMemo(() => ({ focused }), [focused]);
 };
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.12.13",
+  "version": "1.13.2",
   "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.9.9",
-    "@trackunit/css-class-variance-utilities": "1.9.9",
-    "@trackunit/shared-utils": "1.11.9",
-    "@trackunit/ui-icons": "1.9.9",
+    "@trackunit/ui-design-tokens": "1.9.12",
+    "@trackunit/css-class-variance-utilities": "1.9.12",
+    "@trackunit/shared-utils": "1.11.12",
+    "@trackunit/ui-icons": "1.9.12",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",