@trackunit/react-components 1.7.41 → 1.8.0

package/index.cjs.js

@@ -3922,7 +3922,16 @@ const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, icon
     return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content, label: tooltip?.content, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
-const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
+const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
+    "w-full",
+    "overflow-hidden",
+    "rounded",
+    "bg-slate-100",
+    "appearance-none",
+    "[&::-webkit-progress-bar]:bg-transparent",
+    "[&::-webkit-progress-value]:bg-current",
+    "[&::-moz-progress-bar]:bg-current",
+], {
     variants: {
         size: {
             extraSmall: "h-1",
@@ -3934,22 +3943,11 @@ const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
         size: "small",
     },
 });
-const cvaValueBarProgress = cssClassVarianceUtilities.cvaMerge(["h-full", "rounded"], {
-    variants: {
-        fill: {
-            default: "",
-            background: "fill-slate-100",
-        },
-    },
-    defaultVariants: {
-        fill: "default",
-    },
-});
-const cvaValueBarText = cssClassVarianceUtilities.cvaMerge([], {
+const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
     variants: {
         size: {
-            small: "text-sm font-bold",
-            large: "drop-shadow-lg",
+            small: "text-sm font-bold text-neutral-400",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
         },
     },
     defaultVariants: {
@@ -4033,8 +4031,8 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
 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", 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 ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
+    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full"], {

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
-import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
+import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
@@ -3920,7 +3920,16 @@ const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, icon
     return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !tooltip?.content, label: tooltip?.content, placement: tooltip?.placement || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
-const cvaValueBar = cvaMerge(["w-full"], {
+const cvaValueBar = cvaMerge([
+    "w-full",
+    "overflow-hidden",
+    "rounded",
+    "bg-slate-100",
+    "appearance-none",
+    "[&::-webkit-progress-bar]:bg-transparent",
+    "[&::-webkit-progress-value]:bg-current",
+    "[&::-moz-progress-bar]:bg-current",
+], {
     variants: {
         size: {
             extraSmall: "h-1",
@@ -3932,22 +3941,11 @@ const cvaValueBar = cvaMerge(["w-full"], {
         size: "small",
     },
 });
-const cvaValueBarProgress = cvaMerge(["h-full", "rounded"], {
-    variants: {
-        fill: {
-            default: "",
-            background: "fill-slate-100",
-        },
-    },
-    defaultVariants: {
-        fill: "default",
-    },
-});
-const cvaValueBarText = cvaMerge([], {
+const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
     variants: {
         size: {
-            small: "text-sm font-bold",
-            large: "drop-shadow-lg",
+            small: "text-sm font-bold text-neutral-400",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
         },
     },
     defaultVariants: {
@@ -4031,8 +4029,8 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
 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", 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 ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    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 }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaVirtualizedListContainer = cvaMerge(["h-full"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.41",
+  "version": "1.8.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.31",
-    "@trackunit/css-class-variance-utilities": "1.6.30",
-    "@trackunit/shared-utils": "1.8.30",
-    "@trackunit/ui-icons": "1.6.29",
-    "@trackunit/react-table-pagination": "1.6.29",
-    "@trackunit/react-test-setup": "1.3.30",
+    "@trackunit/ui-design-tokens": "1.6.34",
+    "@trackunit/css-class-variance-utilities": "1.6.33",
+    "@trackunit/shared-utils": "1.8.33",
+    "@trackunit/ui-icons": "1.6.32",
+    "@trackunit/react-table-pagination": "1.6.32",
+    "@trackunit/react-test-setup": "1.3.33",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

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

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