@trackunit/react-components 0.5.39 → 0.5.40

package/index.cjs.js

@@ -3731,7 +3731,7 @@ const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"],
         isClickable: false,
     },
 });
-const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -3741,38 +3741,61 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "pl
             true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
+        variant: {
+            small: ["px-3"],
+            default: ["min-w-40"],
+        },
     },
     defaultVariants: {
         isClickable: false,
         isActive: false,
+        variant: "default",
+    },
+});
+const cvaKPICardTrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
+    variants: {
+        color: {
+            success: ["text-success-500"],
+            danger: ["text-danger-500"],
+            neutral: ["text-neutral-500"],
+        },
+    },
+    defaultVariants: {
+        color: "success",
     },
 });
-const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+const cvaKPICardValueContainer = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
-        backgroundColor: {
-            info: "bg-primary-500",
-            success: "bg-secondary-500",
-            warning: "bg-yellow-500",
-            danger: "bg-red-500",
+        isDefaultAndHasTrendValue: {
+            true: [],
+            false: ["flex", "flex-row", "items-center", "gap-1"],
         },
     },
     defaultVariants: {
-        backgroundColor: "info",
+        isDefaultAndHasTrendValue: true,
     },
 });
 
-const LoadingContent = () => (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(SkeletonLines, { height: 28, lines: 1, width: 28 }) }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) })] }));
+const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
 /**
  * The KPICard component is used to display KPIs.
  *
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }) => {
+const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
-    const CardContent = () => {
-        return (jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName ? (jsxRuntime.jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsxRuntime.jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxRuntime.jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] })) }));
+    const isSmallVariant = variant === "small";
+    const TrendIndicator = () => {
+        var _a, _b;
+        if (!trend) {
+            return null;
+        }
+        return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
     };
+    const CardContent = () => (jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
+                            isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                        }), children: [jsxRuntime.jsxs("span", { children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, {})] }) })] })) }));
     return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(CardContent, {}) })) : (jsxRuntime.jsx(CardContent, {})), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
 };
 

package/index.esm.js

@@ -3711,7 +3711,7 @@ const cvaKPICardContainer = cvaMerge(["inline-flex"], {
         isClickable: false,
     },
 });
-const cvaKPICard = cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+const cvaKPICard = cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -3721,38 +3721,61 @@ const cvaKPICard = cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex
             true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
+        variant: {
+            small: ["px-3"],
+            default: ["min-w-40"],
+        },
     },
     defaultVariants: {
         isClickable: false,
         isActive: false,
+        variant: "default",
+    },
+});
+const cvaKPICardTrendPercentage = cvaMerge([""], {
+    variants: {
+        color: {
+            success: ["text-success-500"],
+            danger: ["text-danger-500"],
+            neutral: ["text-neutral-500"],
+        },
+    },
+    defaultVariants: {
+        color: "success",
     },
 });
-const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+const cvaKPICardValueContainer = cvaMerge([], {
     variants: {
-        backgroundColor: {
-            info: "bg-primary-500",
-            success: "bg-secondary-500",
-            warning: "bg-yellow-500",
-            danger: "bg-red-500",
+        isDefaultAndHasTrendValue: {
+            true: [],
+            false: ["flex", "flex-row", "items-center", "gap-1"],
         },
     },
     defaultVariants: {
-        backgroundColor: "info",
+        isDefaultAndHasTrendValue: true,
     },
 });
 
-const LoadingContent = () => (jsxs("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: [jsx("div", { children: jsx(SkeletonLines, { height: 28, lines: 1, width: 28 }) }), jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) })] }));
+const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
 /**
  * The KPICard component is used to display KPIs.
  *
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }) => {
+const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
-    const CardContent = () => {
-        return (jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive }), children: loading ? (jsx(LoadingContent, {})) : (jsxs(Fragment, { children: [iconName ? (jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] })) }));
+    const isSmallVariant = variant === "small";
+    const TrendIndicator = () => {
+        var _a, _b;
+        if (!trend) {
+            return null;
+        }
+        return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
     };
+    const CardContent = () => (jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
+                            isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                        }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, {})] }) })] })) }));
     return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsx(CardContent, {}) })) : (jsx(CardContent, {})), !loading && jsx(Slottable, { children: rest.children })] }));
 };
 

package/package.json

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

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

@@ -1,5 +1,3 @@
-import { IntentColors } from "@trackunit/ui-design-tokens";
-import { IconName } from "@trackunit/ui-icons";
 import { ReactNode } from "react";
 import { CommonProps } from "../../common";
 export interface KPICardProps extends CommonProps {
@@ -19,14 +17,6 @@ export interface KPICardProps extends CommonProps {
      * Whether or not to show the loading state
      */
     loading?: boolean;
-    /**
-     * The icon to be displayed in the prefix
-     */
-    iconName?: IconName;
-    /**
-     * The icon to be displayed in the prefix
-     */
-    iconBackgroundColor?: IntentColors;
     /**
      * Use asChild to render the KPICard as another component
      */
@@ -49,6 +39,36 @@ export interface KPICardProps extends CommonProps {
      * Is the kpi card active
      */
     isActive?: boolean;
+    /**
+     * The size of the KPI Card
+     */
+    variant?: "small" | "default";
+    /**
+     * The trend of the KPI 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";
+        };
+    };
     /**
      * On kpi card click handler
      */
@@ -60,4 +80,4 @@ export interface KPICardProps extends CommonProps {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-export declare const KPICard: ({ asChild, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }: KPICardProps) => JSX.Element;
+export declare const KPICard: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant, trend, onClick, ...rest }: KPICardProps) => JSX.Element;

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

@@ -4,7 +4,11 @@ export declare const cvaKPICardContainer: (props?: ({
 export declare const cvaKPICard: (props?: ({
     isClickable?: boolean | null | undefined;
     isActive?: boolean | null | undefined;
+    variant?: "default" | "small" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaKPICardIconContainer: (props?: ({
-    backgroundColor?: "info" | "success" | "warning" | "danger" | null | undefined;
+export declare const cvaKPICardTrendPercentage: (props?: ({
+    color?: "success" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPICardValueContainer: (props?: ({
+    isDefaultAndHasTrendValue?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;