@trackunit/react-components 1.5.58 → 1.5.60

package/index.cjs.js

@@ -1769,7 +1769,7 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"
         density: "auto",
     },
 });
-const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyDensityContainer$1 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -1786,7 +1786,6 @@ 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",
         },
@@ -1819,7 +1818,7 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
+    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -2945,8 +2944,16 @@ const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }
             minHeight: rest.trend ? "withTrends" : "default",
             variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: tailwindMerge.twMerge(rest.iconName ? "grid grid-cols-[1fr_auto] gap-2" : ""), density: "kpi", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(rest.iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), rest.iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor: rest.iconColor ?? "info" }), children: jsxRuntime.jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(rest.iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(rest.iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), rest.iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor: rest.iconColor ?? "info" }), children: jsxRuntime.jsx(Icon, { name: rest.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 cvaMenuList = cssClassVarianceUtilities.cvaMerge([
     "shadow",

package/index.esm.js

@@ -1767,7 +1767,7 @@ const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b", "border-seco
         density: "auto",
     },
 });
-const cvaCardBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyDensityContainer$1 = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -1784,7 +1784,6 @@ 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",
         },
@@ -1817,7 +1816,7 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
-    return (jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
+    return (jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -2943,8 +2942,16 @@ const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }
             minHeight: rest.trend ? "withTrends" : "default",
             variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: twMerge(rest.iconName ? "grid grid-cols-[1fr_auto] gap-2" : ""), density: "kpi", children: [jsx(KPI, { ...rest, className: twMerge(rest.iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), rest.iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor: rest.iconColor ?? "info" }), children: jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(rest.iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: twMerge(rest.iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), rest.iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor: rest.iconColor ?? "info" }), children: jsx(Icon, { name: rest.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 cvaMenuList = cvaMerge([
     "shadow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.5.58",
+  "version": "1.5.60",
   "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" | "kpi" | "spacious" | "auto";
+export type Density = "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto";

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

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