@trackunit/react-widgets 2.0.0 → 2.1.1

package/index.cjs.js

@@ -245,7 +245,8 @@ const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "fl
 const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "", "place-items-end", "gap-2", "h-10"]);
 const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
     "leading-tight",
-    "break-words",
+    "!line-clamp-2",
+    "!overflow-hidden",
     "flex",
     "items-start",
     "text-sm",
@@ -255,7 +256,7 @@ const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
 const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-3xl", "font-medium"]);
 const cvaWidgetKPITrendValueText = cssClassVarianceUtilities.cvaMerge([
     "text-xs",
-    "font-semibold",
+    "font-normal",
     "whitespace-nowrap",
     "truncate",
     "overflow-hidden",
@@ -272,6 +273,7 @@ const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs
         color: "success",
     },
 });
+const cvaWidgetKPINotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1", "text-xs", "font-normal"]);
 const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
@@ -285,16 +287,16 @@ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate
 });
 
 /**
- * The WidgetKPI component is used to display WidgetKPIs.
+ * The KPI Widget is a compact and flexible component designed to surface key metrics in a clear, impactful way. It provides at-a-glance insights through bold values, concise labels, and optional contextual elements such as trend indicators or time zones. Its goal is to drive user attention toward meaningful data that prompts action.
  *
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: cvaWidgetKPIHeader(), children: jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsxRuntime.jsx(reactComponents.Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
+const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: cvaWidgetKPIHeader(), children: jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsxRuntime.jsx(reactComponents.Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value),
                                         className,
-                                    }), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : null] })) }));
+                                    }), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-1", children: notice }) })) : null] })) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {

package/index.esm.js

@@ -243,7 +243,8 @@ const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col", "flex-1",
 const cvaWidgetKPIHeader = cvaMerge(["flex", "flex-row", "", "place-items-end", "gap-2", "h-10"]);
 const cvaWidgetKPITitleText = cvaMerge([
     "leading-tight",
-    "break-words",
+    "!line-clamp-2",
+    "!overflow-hidden",
     "flex",
     "items-start",
     "text-sm",
@@ -253,7 +254,7 @@ const cvaWidgetKPITitleText = cvaMerge([
 const cvaWidgetKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-3xl", "font-medium"]);
 const cvaWidgetKPITrendValueText = cvaMerge([
     "text-xs",
-    "font-semibold",
+    "font-normal",
     "whitespace-nowrap",
     "truncate",
     "overflow-hidden",
@@ -270,6 +271,7 @@ const cvaWidgetKPITrendPercentage = cvaMerge(["text-xs", "font-semibold"], {
         color: "success",
     },
 });
+const cvaWidgetKPINotice = cvaMerge(["flex", "items-center", "gap-1", "text-xs", "font-normal"]);
 const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
@@ -283,16 +285,16 @@ const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
 });
 
 /**
- * The WidgetKPI component is used to display WidgetKPIs.
+ * The KPI Widget is a compact and flexible component designed to surface key metrics in a clear, impactful way. It provides at-a-glance insights through bold values, concise labels, and optional contextual elements such as trend indicators or time zones. Its goal is to drive user attention toward meaningful data that prompts action.
  *
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", ...rest }) => {
-    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsx(SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsx(SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("div", { className: cvaWidgetKPIHeader(), children: jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsx(Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-end", children: jsx(Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
+const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
+    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsx(SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsx(SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("div", { className: cvaWidgetKPIHeader(), children: jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsx(Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsx(Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-end", children: jsx(Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value),
                                         className,
-                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsx("div", { className: "flex items-center gap-1", children: jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : null] })) }));
+                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsx("div", { className: "flex items-center gap-1", children: jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsx("div", { className: cvaWidgetKPINotice(), children: jsx("div", { className: "flex flex-1 items-center gap-1", children: notice }) })) : null] })) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,15 +8,15 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.6.9",
-    "@trackunit/iris-app-runtime-core": "1.6.9",
-    "@trackunit/css-class-variance-utilities": "1.5.8",
-    "@trackunit/ui-design-tokens": "1.5.8",
-    "@trackunit/ui-icons": "1.5.8",
-    "@trackunit/react-table-pagination": "1.5.8",
-    "@trackunit/shared-utils": "1.7.8",
-    "@trackunit/i18n-library-translation": "1.5.9",
-    "@trackunit/react-test-setup": "1.2.8"
+    "@trackunit/react-components": "1.7.0",
+    "@trackunit/iris-app-runtime-core": "1.7.0",
+    "@trackunit/css-class-variance-utilities": "1.6.0",
+    "@trackunit/ui-design-tokens": "1.6.0",
+    "@trackunit/ui-icons": "1.6.0",
+    "@trackunit/react-table-pagination": "1.6.0",
+    "@trackunit/shared-utils": "1.8.0",
+    "@trackunit/i18n-library-translation": "1.6.0",
+    "@trackunit/react-test-setup": "1.3.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/WidgetKPI/WidgetKPI.d.ts

@@ -1,7 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 export interface WidgetKPIProps extends CommonProps {
     /**
      * The title of the WidgetKPI Card
@@ -57,11 +57,16 @@ export interface WidgetKPIProps extends CommonProps {
             color?: "success" | "danger" | "neutral";
         };
     };
+    /**
+     * Custom notice or text to display in the trend area
+     * If provided, this will override the trend display
+     */
+    notice?: ReactNode;
 }
 /**
- * The WidgetKPI component is used to display WidgetKPIs.
+ * The KPI Widget is a compact and flexible component designed to surface key metrics in a clear, impactful way. It provides at-a-glance insights through bold values, concise labels, and optional contextual elements such as trend indicators or time zones. Its goal is to drive user attention toward meaningful data that prompts action.
  *
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-export declare const WidgetKPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor, ...rest }: WidgetKPIProps) => ReactElement;
+export declare const WidgetKPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;

package/src/WidgetKPI/WidgetKPI.variants.d.ts

@@ -8,6 +8,7 @@ export declare const cvaWidgetKPITrendValueText: (props?: import("class-variance
 export declare const cvaWidgetKPITrendPercentage: (props?: ({
     color?: "success" | "danger" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetKPINotice: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaWidgetKPIValueContainer: (props?: ({
     isDefaultAndHasTrendValue?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;