@trackunit/react-components 0.5.24 → 0.5.26

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"], {
@@ -3897,7 +3908,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
 });
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-[290px]");
+const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-[292px]");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -3963,15 +3974,11 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { size, selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
-    return tailwindMerge.twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
-        size: {
-            small: "py-1",
-            medium: "py-2",
-        },
         variant: {
             primary: [],
             danger: [
@@ -4068,7 +4075,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, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, 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) {
@@ -4080,7 +4087,6 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
     return (jsxRuntime.jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
-            size,
             className,
             variant,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
@@ -4135,7 +4141,7 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
                             ? cvaMenuListMultiSelect({ className: menuItem.props.className })
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
-                        suffix: isMulti && isSelected ? (jsxRuntime.jsx(Icon, { className: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                        suffix: isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
                     }) }, index));
             }
             return null;
@@ -4153,14 +4159,15 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
+    className: "text-secondary-800",
 }, iconButtonProps = {
-    size: "small",
+    size: "medium",
     circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -4170,17 +4177,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 +4204,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 +4230,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"], {
@@ -4574,7 +4591,6 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                         className: tailwindMerge.twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
-                    circular: false,
                     variant: "ghost-neutral",
                 }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
@@ -4764,6 +4780,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 +4818,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 +4886,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"], {
@@ -3877,7 +3888,7 @@ const cvaMenuList = cvaMerge([
 });
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cvaMerge("max-w-[290px]");
+const cvaMenuListItem = cvaMerge("max-w-[292px]");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -3943,15 +3954,11 @@ const cvaInteractableItem = cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { size, selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
-    return twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
+    return twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
-        size: {
-            small: "py-1",
-            medium: "py-2",
-        },
         variant: {
             primary: [],
             danger: [
@@ -4048,7 +4055,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, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, 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) {
@@ -4060,7 +4067,6 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
     return (jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
-            size,
             className,
             variant,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
@@ -4115,7 +4121,7 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
                             ? cvaMenuListMultiSelect({ className: menuItem.props.className })
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
-                        suffix: isMulti && isSelected ? (jsx(Icon, { className: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                        suffix: isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
                     }) }, index));
             }
             return null;
@@ -4133,14 +4139,15 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
+    className: "text-secondary-800",
 }, iconButtonProps = {
-    size: "small",
+    size: "medium",
     circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "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"]);
@@ -4150,17 +4157,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 +4184,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 +4210,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"], {
@@ -4554,7 +4571,6 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
-                    circular: false,
                     variant: "ghost-neutral",
                 }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
@@ -4744,6 +4760,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 +4798,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 +4866,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.24",
+  "version": "0.5.26",
   "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

@@ -1,5 +1,4 @@
-import { CommonProps, Size } from "../../../common";
-type MenuItemSize = Extract<Size, "small" | "medium">;
+import { CommonProps } from "../../../common";
 export type MenuItemVariant = "primary" | "danger";
 export interface MenuItemProps extends CommonProps {
     /**
@@ -15,10 +14,6 @@ export interface MenuItemProps extends CommonProps {
      * If you use this prop, the label prop will be ignored.
      */
     children?: React.ReactNode;
-    /**
-     * Size of the menu item
-     */
-    size?: MenuItemSize;
     /**
      * An React element to render before the label.
      * This is typically used to render an icon.
@@ -73,5 +68,4 @@ 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, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,6 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.variants";
 import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
-    size?: "small" | "medium";
     variant?: MenuItemVariant;
     selected?: boolean | null | undefined;
 };
@@ -13,7 +12,6 @@ type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableIt
  */
 export declare const cvaMenuItem: (props?: CvaMenuItemProps) => string;
 export declare const cvaMenuItemStyle: (props?: ({
-    size?: "small" | "medium" | null | undefined;
     variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;

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