@trackunit/react-widgets 2.4.14 → 2.5.0

package/index.cjs.js

@@ -256,14 +256,14 @@ const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
     "font-medium",
     "!leading-none",
 ]);
-const cvaWidgetKPITrendValueText = cssClassVarianceUtilities.cvaMerge([
+cssClassVarianceUtilities.cvaMerge([
     "text-xs",
     "font-normal",
     "whitespace-nowrap",
     "truncate",
     "overflow-hidden",
 ]);
-const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs", "font-semibold"], {
+cssClassVarianceUtilities.cvaMerge(["text-xs", "font-semibold"], {
     variants: {
         color: {
             success: ["text-success-600"],
@@ -275,7 +275,7 @@ const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs
         color: "success",
     },
 });
-const cvaWidgetKPINotice = cssClassVarianceUtilities.cvaMerge([
+cssClassVarianceUtilities.cvaMerge([
     "flex",
     "items-center",
     "gap-1",
@@ -286,17 +286,6 @@ const cvaWidgetKPINotice = cssClassVarianceUtilities.cvaMerge([
     "*:truncate",
     "**:truncate",
 ]);
-const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
-    variants: {
-        isDefaultAndHasTrendValue: {
-            true: [],
-            false: ["flex", "flex-row", "gap-1"],
-        },
-    },
-    defaultVariants: {
-        isDefaultAndHasTrendValue: true,
-    },
-});
 
 /**
  * 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.
@@ -304,17 +293,8 @@ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": 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, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-baseline justify-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), "data-testid": 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] }) }) }) })] }), jsxRuntime.jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trend ? (jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit })) : notice !== undefined ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsxRuntime.jsx("span", { children: notice }) : notice })) : null })] })) }));
-};
-const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    if (!trend) {
-        return null;
-    }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-baseline justify-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsxs("div", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) })] }), jsxRuntime.jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trends ? (jsxRuntime.jsx(reactComponents.TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : notice !== undefined ? (jsxRuntime.jsx(reactComponents.Notice, { "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, size: "small", ...notice, className: "block", iconSize: "small" })) : null })] })) }));
 };
 
 /*

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text } from '@trackunit/react-components';
+import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text, TrendIndicators, Notice } from '@trackunit/react-components';
 import { useState } from 'react';
 import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -254,14 +254,14 @@ const cvaWidgetKPIvalueText = cvaMerge([
     "font-medium",
     "!leading-none",
 ]);
-const cvaWidgetKPITrendValueText = cvaMerge([
+cvaMerge([
     "text-xs",
     "font-normal",
     "whitespace-nowrap",
     "truncate",
     "overflow-hidden",
 ]);
-const cvaWidgetKPITrendPercentage = cvaMerge(["text-xs", "font-semibold"], {
+cvaMerge(["text-xs", "font-semibold"], {
     variants: {
         color: {
             success: ["text-success-600"],
@@ -273,7 +273,7 @@ const cvaWidgetKPITrendPercentage = cvaMerge(["text-xs", "font-semibold"], {
         color: "success",
     },
 });
-const cvaWidgetKPINotice = cvaMerge([
+cvaMerge([
     "flex",
     "items-center",
     "gap-1",
@@ -284,17 +284,6 @@ const cvaWidgetKPINotice = cvaMerge([
     "*:truncate",
     "**:truncate",
 ]);
-const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
-    variants: {
-        isDefaultAndHasTrendValue: {
-            true: [],
-            false: ["flex", "flex-row", "gap-1"],
-        },
-    },
-    defaultVariants: {
-        isDefaultAndHasTrendValue: true,
-    },
-});
 
 /**
  * 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.
@@ -302,17 +291,8 @@ const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
-    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": 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, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsx(SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsx(Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-baseline justify-start", children: jsx(Text, { className: cvaWidgetKPIvalueText(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
-                                        isDefaultAndHasTrendValue: Boolean(trend?.value),
-                                        className,
-                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trend ? (jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit })) : notice !== undefined ? (jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsx("span", { children: notice }) : notice })) : null })] })) }));
-};
-const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    if (!trend) {
-        return null;
-    }
-    return (jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { className: cvaWidgetKPITrendValueText(), "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ...rest }) => {
+    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsx(SkeletonLines, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsx(SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsx(Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-baseline justify-start", children: jsx(Text, { className: cvaWidgetKPIvalueText(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxs("div", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) })] }), jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trends ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : notice !== undefined ? (jsx(Notice, { "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, size: "small", ...notice, className: "block", iconSize: "small" })) : null })] })) }));
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.4.14",
+  "version": "2.5.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.12.13",
-    "@trackunit/iris-app-runtime-core": "1.10.12",
-    "@trackunit/css-class-variance-utilities": "1.9.9",
-    "@trackunit/ui-design-tokens": "1.9.9",
-    "@trackunit/ui-icons": "1.9.9",
-    "@trackunit/i18n-library-translation": "1.9.12"
+    "@trackunit/react-components": "1.13.0",
+    "@trackunit/iris-app-runtime-core": "1.10.13",
+    "@trackunit/css-class-variance-utilities": "1.9.10",
+    "@trackunit/ui-design-tokens": "1.9.10",
+    "@trackunit/ui-icons": "1.9.10",
+    "@trackunit/i18n-library-translation": "1.9.13"
   },
   "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 { CommonProps, NoticeProps, TrendIndicatorProps } from "@trackunit/react-components";
 import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 export interface WidgetKPIProps extends CommonProps {
     /**
      * The title of the WidgetKPI Card
@@ -34,35 +34,13 @@ export interface WidgetKPIProps extends CommonProps {
     /**
      * The trend of the WidgetKPI Card
      */
-    trend?: {
-        /**
-         * The value of the trend
-         */
-        value?: number | string;
-        /**
-         * The percentage of the trend
-         */
-        percentage?: number | string;
-        /**
-         * The variant of the trend
-         */
-        variant?: {
-            /**
-             * The icon of the trend
-             */
-            icon?: "ArrowUp" | "ArrowDown" | "ArrowTrendingUp" | "ArrowTrendingDown";
-            /**
-             * The color of the trend
-             */
-            color?: "success" | "danger" | "neutral";
-        };
-    };
+    trends?: Array<Omit<TrendIndicatorProps, "className" | "dataTestId">>;
     /**
      * Custom notice or text to display in the trend area
      * If provided, this will override the trend display
      * Text will be truncated to fit on a single line
      */
-    notice?: ReactNode;
+    notice?: Pick<NoticeProps, "label" | "iconName" | "iconColor">;
 }
 /**
  * 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.
@@ -70,4 +48,4 @@ export interface WidgetKPIProps extends CommonProps {
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;
+export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;

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

@@ -9,6 +9,3 @@ 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;