@trackunit/react-components 1.0.11 → 1.0.12

package/index.cjs.js

@@ -3905,17 +3905,16 @@ const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
     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 })] }));
+    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: 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, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
+};
+const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
+    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 cvaMenuList = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -3885,17 +3885,16 @@ const LoadingContent = () => (jsx("div", { className: "flex flex-row items-cente
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
     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 })] }));
+    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: 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, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
+};
+const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
+    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 cvaMenuList = cvaMerge([

package/package.json

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