@trackunit/react-components 0.5.23 → 0.5.25

package/index.cjs.js

@@ -3720,7 +3720,18 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm"]);
+const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "capitalize", "text-secondary-600"], {
+    variants: {
+        size: {
+            small: "pl-1 pr-1 text-xs",
+            medium: "pl-2 pr-2 text-sm",
+            large: "pl-2 pr-2 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
 const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
     variants: {
         color: {
@@ -3816,8 +3827,8 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"], {
@@ -4068,7 +4079,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4086,7 +4097,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -4170,17 +4181,25 @@ const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font
             primary: "text-primary-600",
             secondary: "text-secondary-600",
             accent: "text-accent-600",
-            neutral: "text-neutral-600",
+            neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
             warning: "text-warning-600",
             danger: "text-danger-600",
             black: "text-black",
             white: "text-white",
+            critical: "text-critical-500",
+            low: "text-low-500",
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base",
         },
     },
     defaultVariants: {
         color: "neutral",
+        size: "medium",
     },
 });
 const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
@@ -4189,13 +4208,15 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
             primary: "text-primary-600",
             secondary: "text-secondary-600",
             accent: "text-accent-600",
-            neutral: "text-neutral-600",
+            neutral: "text-neutral-300",
             info: "text-info-600",
             success: "text-success-600",
             warning: "text-warning-600",
             danger: "text-danger-600",
             black: "text-black",
             white: "text-white",
+            critical: "text-critical-500",
+            low: "text-low-500",
         },
     },
     defaultVariants: {
@@ -4213,8 +4234,8 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {JSX.Element} Notice component
  */
-const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
@@ -4764,6 +4785,7 @@ const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, icon
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
     variants: {
         size: {
+            extraSmall: "h-1",
             small: "h-3",
             large: "h-9",
         },
@@ -4801,10 +4823,15 @@ const cvaValueBarText = cssClassVarianceUtilities.cvaMerge([], {
  * @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) => {
+const getScore = (value, min, max, zeroScoreAllowed) => {
     if (value <= min) {
+        if (zeroScoreAllowed) {
+            return 0;
+        }
         return 0.01; // always render at least some small fragment
     }
     if (value >= max) {
@@ -4864,15 +4891,15 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, }) => {
-    const score = getScore(value, min, max);
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }) => {
+    const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const barWidth = showValue && size === "small" ? 90 : 100;
-    return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
 const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "overflow-auto"]);
-const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative", "m-1"]);
+const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative"]);
 const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {

package/index.esm.js

@@ -3700,7 +3700,18 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm"]);
+const cvaIndicatorLabel = cvaMerge(["font-medium", "capitalize", "text-secondary-600"], {
+    variants: {
+        size: {
+            small: "pl-1 pr-1 text-xs",
+            medium: "pl-2 pr-2 text-sm",
+            large: "pl-2 pr-2 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
 const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
     variants: {
         color: {
@@ -3796,8 +3807,8 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className, ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPICardContainer = cvaMerge(["inline-flex"], {
@@ -4048,7 +4059,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4066,7 +4077,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -4150,17 +4161,25 @@ const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
             primary: "text-primary-600",
             secondary: "text-secondary-600",
             accent: "text-accent-600",
-            neutral: "text-neutral-600",
+            neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
             warning: "text-warning-600",
             danger: "text-danger-600",
             black: "text-black",
             white: "text-white",
+            critical: "text-critical-500",
+            low: "text-low-500",
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base",
         },
     },
     defaultVariants: {
         color: "neutral",
+        size: "medium",
     },
 });
 const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
@@ -4169,13 +4188,15 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
             primary: "text-primary-600",
             secondary: "text-secondary-600",
             accent: "text-accent-600",
-            neutral: "text-neutral-600",
+            neutral: "text-neutral-300",
             info: "text-info-600",
             success: "text-success-600",
             warning: "text-warning-600",
             danger: "text-danger-600",
             black: "text-black",
             white: "text-white",
+            critical: "text-critical-500",
+            low: "text-low-500",
         },
     },
     defaultVariants: {
@@ -4193,8 +4214,8 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {JSX.Element} Notice component
  */
-const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: !withTooltip, 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 !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: !withTooltip, 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 !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -4744,6 +4765,7 @@ const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, icon
 const cvaValueBar = cvaMerge(["w-full"], {
     variants: {
         size: {
+            extraSmall: "h-1",
             small: "h-3",
             large: "h-9",
         },
@@ -4781,10 +4803,15 @@ const cvaValueBarText = cvaMerge([], {
  * @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) => {
+const getScore = (value, min, max, zeroScoreAllowed) => {
     if (value <= min) {
+        if (zeroScoreAllowed) {
+            return 0;
+        }
         return 0.01; // always render at least some small fragment
     }
     if (value >= max) {
@@ -4844,15 +4871,15 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, }) => {
-    const score = getScore(value, min, max);
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }) => {
+    const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const barWidth = showValue && size === "small" ? 90 : 100;
-    return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
 const cvaVirtualizedListContainer = cvaMerge(["h-full", "overflow-auto"]);
-const cvaVirtualizedList = cvaMerge(["relative", "m-1"]);
+const cvaVirtualizedList = cvaMerge(["relative"]);
 const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {

package/package.json

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

package/src/components/Indicator/Indicator.d.ts

@@ -9,6 +9,10 @@ export interface IndicatorProps extends CommonProps {
      * A color token used to style the icon and the icon background
      */
     color?: GeneralColors | IntentColors | CriticalityColors | ActivityColors | UtilizationColors | RentalStatusColors | SitesColors;
+    /**
+     * The size of the label's text
+     */
+    size?: "small" | "medium" | "large";
     /**
      * A text label to be displayed next to the indicator
      */
@@ -38,4 +42,4 @@ export interface IndicatorProps extends CommonProps {
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, className, ...rest }: IndicatorProps) => JSX.Element;
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, size, className, ...rest }: IndicatorProps) => JSX.Element;

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

@@ -1,6 +1,8 @@
 export declare const cvaIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaIndicatorLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIndicatorLabel: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
     color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -62,6 +62,10 @@ export interface MenuItemProps extends CommonProps {
      * The button's variant. Values are primary and danger.
      */
     variant?: MenuItemVariant;
+    /**
+     * Adds a suffixed description to the label, ie. (CustomerID 1234)
+     */
+    optionLabelDescription?: string;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -69,5 +73,5 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Notice/Notice.d.ts

@@ -1,4 +1,4 @@
-import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
 export interface NoticeProps extends CommonProps {
     /**
@@ -8,7 +8,11 @@ export interface NoticeProps extends CommonProps {
     /**
      * A color token used to style the icon and the icon background
      */
-    color?: GeneralColors | IntentColors;
+    color?: Exclude<GeneralColors | IntentColors | CriticalityColors, "good">;
+    /**
+     * The size of the label's text
+     */
+    size?: "small" | "medium" | "large";
     /**
      * A text label to be displayed next to the icon
      */
@@ -36,4 +40,4 @@ export interface NoticeProps extends CommonProps {
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {JSX.Element} Notice component
  */
-export declare const Notice: ({ dataTestId, icon, label, color, withLabel, className, tooltipLabel, withTooltip, ...rest }: NoticeProps) => JSX.Element;
+export declare const Notice: ({ dataTestId, icon, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => JSX.Element;

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

@@ -1,7 +1,8 @@
 export declare const cvaNotice: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaNoticeLabel: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | "critical" | "low" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaNoticeIcon: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | "critical" | "low" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1,6 +1,6 @@
 import { CommonProps, Size } from "../../common";
 import { LevelColors } from "./ValueBarTypes";
-type ValueBarSize = Extract<Size, "small" | "large">;
+type ValueBarSize = Extract<Size, "small" | "large"> | "extraSmall";
 export interface ValueBarProps extends CommonProps {
     /**
      * Value to display.
@@ -34,6 +34,12 @@ export interface ValueBarProps extends CommonProps {
      * Show value with unit (if provided) on the bar in large version or after the bar in the small version.
      */
     showValue?: boolean;
+    /**
+     * Allows the score of the value bar to be exactly 0 when the value is less than or equal to the minimum.
+     * If not provided or set to false, ensures a minimal score (0.01)
+     * is returned to always render a small fragment of the bar.
+     */
+    zeroScoreAllowed?: boolean;
 }
 /**
  * ValueBar component is used to display value on a colorful bar within provided range.
@@ -41,5 +47,5 @@ export interface ValueBarProps extends CommonProps {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
-export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, }: ValueBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }: ValueBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -5,9 +5,11 @@ import { LevelColors } from "./ValueBarTypes";
  * @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
  */
-export declare const getScore: (value: number, min: number, max: number) => number;
+export declare const getScore: (value: number, min: number, max: number, zeroScoreAllowed?: boolean) => number;
 /**
  * Helper function to get default color used by the ValueBar