@trackunit/react-widgets 2.13.3 → 2.13.4

package/index.cjs.js

@@ -6,6 +6,7 @@ var reactComponents = require('@trackunit/react-components');
 var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var react = require('react');
+var tailwindMerge = require('tailwind-merge');
 
 var defaultTranslations = {
 	"widget.edit.cancel": "Cancel",
@@ -318,7 +319,7 @@ const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "fl
         variant: {
             small: ["px-3"],
             condensed: ["px-2", "py-0"],
-            default: [""],
+            default: ["p-4"],
         },
     },
     defaultVariants: {
@@ -343,6 +344,28 @@ const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
     "font-medium",
     "!leading-none",
 ]);
+const cvaWidgetKPIContentLayout = cssClassVarianceUtilities.cvaMerge(["flex", "flex-1"], {
+    variants: {
+        interactive: {
+            true: ["flex-row"],
+            false: ["flex-col"],
+        },
+    },
+    defaultVariants: {
+        interactive: false,
+    },
+});
+const cvaWidgetKPIBodyLayout = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "flex-1"], {
+    variants: {
+        interactive: {
+            true: ["min-w-0"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        interactive: false,
+    },
+});
 
 /**
  * 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.
@@ -350,15 +373,24 @@ const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
  * @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, trends, iconName = undefined, iconColor = "info", notice, ref, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ref: ref, ...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, { lines: [
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, onClick, ref, ...rest }) => {
+    const baseClass = cvaWidgetKPI({ className });
+    const rootClass = onClick ? tailwindMerge.twMerge(baseClass, reactComponents.cvaInteractableItem({ cursor: "pointer" })) : baseClass;
+    const isInteractive = !!onClick;
+    const handleKeyDown = react.useCallback((event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, []);
+    return (jsxRuntime.jsx("div", { className: rootClass, "data-testid": dataTestId ?? undefined, onClick: onClick, onKeyDown: isInteractive ? handleKeyDown : undefined, ref: ref, role: isInteractive ? "button" : undefined, tabIndex: isInteractive ? 0 : 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, { lines: [
                     { textSize: "text-sm", width: 100 },
                     { textSize: "text-lg", width: 40 },
                     { textSize: "text-sm", width: 60 },
                 ], variant: "custom" })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: [
                     { textSize: "text-sm", width: 100 },
                     { textSize: "text-lg", width: 40 },
-                ], variant: "custom" })) })) : (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 })] })) }));
+                ], variant: "custom" })) })) : (jsxRuntime.jsxs("div", { className: cvaWidgetKPIContentLayout({ interactive: isInteractive }), children: [jsxRuntime.jsxs("div", { className: cvaWidgetKPIBodyLayout({ interactive: isInteractive }), 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 min-w-0 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, iconSize: "small" })) : null })] }), onClick ? (jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, className: "flex-shrink-0 self-center", color: "neutral", "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, name: "ChevronRight", size: "small" })) : null] })) }));
 };
 
 /*

package/index.esm.js

@@ -1,9 +1,10 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text, TrendIndicators, Notice } from '@trackunit/react-components';
+import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, cvaInteractableItem, SkeletonLines, Icon, Tooltip, Text, TrendIndicators, Notice } from '@trackunit/react-components';
 import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 var defaultTranslations = {
 	"widget.edit.cancel": "Cancel",
@@ -316,7 +317,7 @@ const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
         variant: {
             small: ["px-3"],
             condensed: ["px-2", "py-0"],
-            default: [""],
+            default: ["p-4"],
         },
     },
     defaultVariants: {
@@ -341,6 +342,28 @@ const cvaWidgetKPIvalueText = cvaMerge([
     "font-medium",
     "!leading-none",
 ]);
+const cvaWidgetKPIContentLayout = cvaMerge(["flex", "flex-1"], {
+    variants: {
+        interactive: {
+            true: ["flex-row"],
+            false: ["flex-col"],
+        },
+    },
+    defaultVariants: {
+        interactive: false,
+    },
+});
+const cvaWidgetKPIBodyLayout = cvaMerge(["flex", "flex-col", "flex-1"], {
+    variants: {
+        interactive: {
+            true: ["min-w-0"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        interactive: false,
+    },
+});
 
 /**
  * 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.
@@ -348,15 +371,24 @@ const cvaWidgetKPIvalueText = cvaMerge([
  * @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, trends, iconName = undefined, iconColor = "info", notice, ref, ...rest }) => {
-    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ref: ref, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsx(SkeletonLines, { lines: [
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, onClick, ref, ...rest }) => {
+    const baseClass = cvaWidgetKPI({ className });
+    const rootClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
+    const isInteractive = !!onClick;
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, []);
+    return (jsx("div", { className: rootClass, "data-testid": dataTestId ?? undefined, onClick: onClick, onKeyDown: isInteractive ? handleKeyDown : undefined, ref: ref, role: isInteractive ? "button" : undefined, tabIndex: isInteractive ? 0 : 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, { lines: [
                     { textSize: "text-sm", width: 100 },
                     { textSize: "text-lg", width: 40 },
                     { textSize: "text-sm", width: 60 },
                 ], variant: "custom" })) : (jsx(SkeletonLines, { lines: [
                     { textSize: "text-sm", width: 100 },
                     { textSize: "text-lg", width: 40 },
-                ], variant: "custom" })) })) : (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 })] })) }));
+                ], variant: "custom" })) })) : (jsxs("div", { className: cvaWidgetKPIContentLayout({ interactive: isInteractive }), children: [jsxs("div", { className: cvaWidgetKPIBodyLayout({ interactive: isInteractive }), children: [jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: cvaWidgetKPIHeader(), children: jsxs("div", { className: "flex min-w-0 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, iconSize: "small" })) : null })] }), onClick ? (jsx(Icon, { ariaHidden: true, className: "flex-shrink-0 self-center", color: "neutral", "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, name: "ChevronRight", size: "small" })) : null] })) }));
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.13.3",
+  "version": "2.13.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,7 +12,8 @@
     "@trackunit/css-class-variance-utilities": "1.11.77",
     "@trackunit/ui-design-tokens": "1.11.74",
     "@trackunit/ui-icons": "1.11.73",
-    "@trackunit/i18n-library-translation": "1.15.3"
+    "@trackunit/i18n-library-translation": "1.15.3",
+    "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"

package/src/WidgetKPI/WidgetKPI.d.ts

@@ -1,7 +1,7 @@
 import { CommonProps, NoticeProps, Refable, TrendIndicatorProps } from "@trackunit/react-components";
 import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { ReactElement } from "react";
+import { type MouseEventHandler, type ReactElement } from "react";
 export interface WidgetKPIProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The title of the WidgetKPI Card
@@ -41,6 +41,11 @@ export interface WidgetKPIProps extends CommonProps, Refable<HTMLDivElement> {
      * Text will be truncated to fit on a single line
      */
     notice?: Pick<NoticeProps, "label" | "iconName" | "iconColor">;
+    /**
+     * Click handler for the WidgetKPI Card.
+     * When provided, the KPI becomes interactive with a hover effect and a visible chevron.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
 }
 /**
  * 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.
@@ -48,4 +53,4 @@ export interface WidgetKPIProps extends CommonProps, Refable<HTMLDivElement> {
  * @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, trends, iconName, iconColor, notice, ref, ...rest }: WidgetKPIProps) => ReactElement;
+export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName, iconColor, notice, onClick, ref, ...rest }: WidgetKPIProps) => ReactElement;

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

@@ -4,3 +4,9 @@ export declare const cvaWidgetKPI: (props?: ({
 export declare const cvaWidgetKPIHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaWidgetKPITitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaWidgetKPIvalueText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetKPIContentLayout: (props?: ({
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetKPIBodyLayout: (props?: ({
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;