@trackunit/react-components 1.9.56 → 1.10.0

package/index.cjs.js

@@ -3377,10 +3377,6 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
     "hover:shadow-none", // overwriting the Card hover shadow when wrapped in a KPICard
 ], {
     variants: {
-        minHeight: {
-            default: ["min-h-[78px]"],
-            withTrends: ["min-h-[94px]"],
-        },
         isClickable: {
             true: ["hover:bg-neutral-50", "component-card-border"],
             false: [],
@@ -3406,6 +3402,14 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
         },
     },
 });
+const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
+    variants: {
+        iconName: {
+            true: "gap-2",
+            false: "gap-3 ",
+        },
+    },
+});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -3418,18 +3422,9 @@ const KPICard = ({ isActive = false, onClick, className, dataTestId, children, i
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
-            minHeight: rest.trend ? "withTrends" : "default",
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
-const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
-    variants: {
-        iconName: {
-            true: "gap-2 px-3 pb-2 pt-3",
-            false: "gap-3 px-3 pb-2 pt-3",
-        },
-    },
-});
 
 const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
     variants: {

package/index.esm.js

@@ -3375,10 +3375,6 @@ const cvaKPICard = cvaMerge([
     "hover:shadow-none", // overwriting the Card hover shadow when wrapped in a KPICard
 ], {
     variants: {
-        minHeight: {
-            default: ["min-h-[78px]"],
-            withTrends: ["min-h-[94px]"],
-        },
         isClickable: {
             true: ["hover:bg-neutral-50", "component-card-border"],
             false: [],
@@ -3404,6 +3400,14 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
         },
     },
 });
+const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
+    variants: {
+        iconName: {
+            true: "gap-2",
+            false: "gap-3 ",
+        },
+    },
+});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -3416,18 +3420,9 @@ const KPICard = ({ isActive = false, onClick, className, dataTestId, children, i
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
-            minHeight: rest.trend ? "withTrends" : "default",
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
-const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
-    variants: {
-        iconName: {
-            true: "gap-2 px-3 pb-2 pt-3",
-            false: "gap-3 px-3 pb-2 pt-3",
-        },
-    },
-});
 
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.56",
+  "version": "1.10.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.40",
-    "@trackunit/css-class-variance-utilities": "1.7.40",
-    "@trackunit/shared-utils": "1.9.40",
-    "@trackunit/ui-icons": "1.7.41",
-    "@trackunit/react-test-setup": "1.4.40",
+    "@trackunit/ui-design-tokens": "1.7.42",
+    "@trackunit/css-class-variance-utilities": "1.7.42",
+    "@trackunit/shared-utils": "1.9.42",
+    "@trackunit/ui-icons": "1.7.43",
+    "@trackunit/react-test-setup": "1.4.42",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

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

@@ -1,8 +1,10 @@
 export declare const cvaKPICard: (props?: ({
-    minHeight?: "default" | "withTrends" | null | undefined;
     isClickable?: boolean | null | undefined;
     isActive?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPIIconContainer: (props?: ({
     iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardBodyDensityContainer: (props?: ({
+    iconName?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;