@trackunit/react-components 1.4.201 → 1.4.203

package/index.cjs.js

@@ -1736,6 +1736,7 @@ const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1758,6 +1759,7 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1784,6 +1786,7 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex",
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1892,7 +1895,7 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsxRuntime.jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
@@ -2815,7 +2818,7 @@ const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground
     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, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
-const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
+const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
     variants: {
         variant: {
             small: ["px-3"],
@@ -2827,8 +2830,19 @@ const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "fl
         variant: "default",
     },
 });
+const cvaKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
+const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+    variants: {
+        iconColor: {
+            primary: ["bg-primary-600"],
+            success: ["bg-success-600"],
+            warning: ["bg-warning-500"],
+            danger: ["bg-danger-600"],
+        },
+    },
+});
 const cvaKPITitleText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-2xl", "font-medium"], {
+const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
     variants: {
         variant: {
             small: ["mt-0.5"],
@@ -2871,9 +2885,9 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "primary", ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
+    return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cvaKPIHeader(), children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
                                 isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                 className,
                             }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
@@ -2887,6 +2901,10 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
 
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["inline-flex", "gap-1"], {
     variants: {
+        minHeight: {
+            default: ["min-h-[78px]"],
+            withTrends: ["min-h-[94px]"],
+        },
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
             false: [],
@@ -2919,9 +2937,10 @@ const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
+            minHeight: rest.trend ? "withTrends" : "default",
             variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { density: "compact", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { density: "kpi", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1734,6 +1734,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t", "border-seco
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1756,6 +1757,7 @@ const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b", "border-seco
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1782,6 +1784,7 @@ const cvaCardBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-aut
             dense: "gap-1 p-2",
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
+            kpi: "gap-3 px-3 pb-2 pt-3",
             spacious: "gap-4 p-6",
             auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
         },
@@ -1890,7 +1893,7 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
@@ -2813,7 +2816,7 @@ const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground
     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, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
-const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
+const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
     variants: {
         variant: {
             small: ["px-3"],
@@ -2825,8 +2828,19 @@ const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"],
         variant: "default",
     },
 });
+const cvaKPIHeader = cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
+const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+    variants: {
+        iconColor: {
+            primary: ["bg-primary-600"],
+            success: ["bg-success-600"],
+            warning: ["bg-warning-500"],
+            danger: ["bg-danger-600"],
+        },
+    },
+});
 const cvaKPITitleText = cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-2xl", "font-medium"], {
+const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
     variants: {
         variant: {
             small: ["mt-0.5"],
@@ -2869,9 +2883,9 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "primary", ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
+    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsxs("div", { className: cvaKPIHeader(), children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
                                 isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                 className,
                             }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
@@ -2885,6 +2899,10 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
 
 const cvaKPICard = cvaMerge(["inline-flex", "gap-1"], {
     variants: {
+        minHeight: {
+            default: ["min-h-[78px]"],
+            withTrends: ["min-h-[94px]"],
+        },
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
             false: [],
@@ -2917,9 +2935,10 @@ const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
+            minHeight: rest.trend ? "withTrends" : "default",
             variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { density: "compact", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { density: "kpi", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
 };
 
 const cvaMenuList = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.201",
+  "version": "1.4.203",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/common/Density.d.ts

@@ -1 +1 @@
-export type Density = "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto";
+export type Density = "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto";

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

@@ -4,16 +4,16 @@ export declare const cvaCard: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCardFooterDensityContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+    density?: "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderDensityContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+    density?: "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCardBodyDensityContainer: (props?: ({
     disableGap?: boolean | null | undefined;
     direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+    density?: "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Card/CardHeader.d.ts

@@ -10,7 +10,7 @@ export interface CardHeaderProps extends CommonProps {
      * The variant/size of the heading.
      * Same as the `Heading` component.
      *
-     * @default "primary"
+     * @default "secondary"
      */
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */

package/src/components/KPI/KPI.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 export interface KPIProps extends CommonProps {
@@ -25,6 +26,14 @@ export interface KPIProps extends CommonProps {
      * The size of the KPI Card
      */
     variant?: "small" | "default" | "condensed";
+    /**
+     * The icon name to be displayed
+     */
+    iconName?: IconName;
+    /**
+     * The color of the icon
+     */
+    iconColor?: "primary" | "success" | "warning" | "danger";
     /**
      * The trend of the KPI Card
      */
@@ -58,4 +67,4 @@ export interface KPIProps extends CommonProps {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-export declare const KPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, ...rest }: KPIProps) => ReactElement;
+export declare const KPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, iconName, iconColor, ...rest }: KPIProps) => ReactElement;

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

@@ -1,6 +1,10 @@
 export declare const cvaKPI: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPIHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKPIIconContainer: (props?: ({
+    iconColor?: "primary" | "success" | "warning" | "danger" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPITitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaKPIvalueText: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;

package/src/components/KPICard/KPICard.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { KPIProps } from "../KPI/KPI";
 export interface KPICardProps extends KPIProps {
@@ -13,6 +14,14 @@ export interface KPICardProps extends KPIProps {
      * Children to be rendered
      */
     children?: ReactNode;
+    /**
+     * The name of the icon
+     */
+    iconName?: IconName;
+    /**
+     * The color of the icon
+     */
+    iconColor?: "primary" | "success" | "warning" | "danger";
 }
 /**
  * The KPICard component is used to display KPIs.

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

@@ -1,4 +1,5 @@
 export declare const cvaKPICard: (props?: ({
+    minHeight?: "default" | "withTrends" | null | undefined;
     isClickable?: boolean | null | undefined;
     isActive?: boolean | null | undefined;
     variant?: "default" | "small" | "condensed" | null | undefined;