@trackunit/react-components 0.1.341 → 0.1.342

package/index.cjs.js

@@ -1888,7 +1888,7 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 && i >= 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
@@ -3639,6 +3639,7 @@ const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7"
     },
 });
 
+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] }) })] }));
 /**
  * The KPICard component is used to display KPIs.
  *
@@ -3646,9 +3647,9 @@ const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7"
  * @returns {JSX.Element} KPICard component
  */
 const KPICard = (_a) => {
-    var { asChild = false, title, value, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
     const Comp = asChild ? reactSlot.Slot : "div";
-    return (jsxRuntime.jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsxRuntime.jsxs(Card, { className: cvaKPICard({ isClickable: asChild }), 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] })] })] }), jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] })));
+    return (jsxRuntime.jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: asChild && !loading }), 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] })] })] })) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] })));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1857,7 +1857,7 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 && i >= 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
@@ -3608,6 +3608,7 @@ const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center"
     },
 });
 
+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] }) })] }));
 /**
  * The KPICard component is used to display KPIs.
  *
@@ -3615,9 +3616,9 @@ const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center"
  * @returns {JSX.Element} KPICard component
  */
 const KPICard = (_a) => {
-    var { asChild = false, title, value, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
     const Comp = asChild ? Slot : "div";
-    return (jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsxs(Card, { className: cvaKPICard({ isClickable: asChild }), 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] })] })] }), jsx(Slottable, { children: rest.children })] })));
+    return (jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsx(Card, { className: cvaKPICard({ isClickable: asChild && !loading }), 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] })] })] })) }), !loading && jsx(Slottable, { children: rest.children })] })));
 };
 
 const cvaMenuItem = cvaMerge([

package/package.json

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

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

@@ -15,6 +15,10 @@ export interface KPICardProps extends CommonProps {
      * The unit of the KPI Card
      */
     unit: string;
+    /**
+     * Whether or not to show the loading state
+     */
+    loading?: boolean;
     /**
      * The icon to be displayed in the prefix
      */
@@ -44,4 +48,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, unit, iconName, iconBackgroundColor, className, dataTestId, ...rest }: KPICardProps) => JSX.Element;
+export declare const KPICard: ({ asChild, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, ...rest }: KPICardProps) => JSX.Element;