@trackunit/react-components 0.1.382 → 0.1.384

package/index.cjs.js

@@ -3668,12 +3668,17 @@ const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"],
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
     variants: {
         isClickable: {
-            true: ["hover:bg-slate-50"],
+            true: ["hover:bg-slate-50", "component-card-border"],
+            false: [],
+        },
+        isActive: {
+            true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
     },
     defaultVariants: {
         isClickable: false,
+        isActive: false,
     },
 });
 const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
@@ -3698,9 +3703,12 @@ const LoadingContent = () => (jsxRuntime.jsxs("div", { className: "flex flex-row
  * @returns {JSX.Element} KPICard component
  */
 const KPICard = (_a) => {
-    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId", "tooltipLabel", "isActive", "onClick"]);
     const Comp = asChild ? reactSlot.Slot : "div";
-    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 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] })] })] })) }));
+    };
+    return (jsxRuntime.jsxs(Comp, Object.assign({ 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 })] })));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -3637,12 +3637,17 @@ const cvaKPICardContainer = cvaMerge(["inline-flex"], {
 const cvaKPICard = cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
     variants: {
         isClickable: {
-            true: ["hover:bg-slate-50"],
+            true: ["hover:bg-slate-50", "component-card-border"],
+            false: [],
+        },
+        isActive: {
+            true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
     },
     defaultVariants: {
         isClickable: false,
+        isActive: false,
     },
 });
 const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
@@ -3667,9 +3672,12 @@ const LoadingContent = () => (jsxs("div", { className: "flex flex-row items-cent
  * @returns {JSX.Element} KPICard component
  */
 const KPICard = (_a) => {
-    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId", "tooltipLabel", "isActive", "onClick"]);
     const Comp = asChild ? Slot : "div";
-    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 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] })] })] })) }));
+    };
+    return (jsxs(Comp, Object.assign({ 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 })] })));
 };
 
 const cvaMenuItem = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.382",
+  "version": "0.1.384",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -22,7 +22,7 @@
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0",
     "@floating-ui/react": "^0.26.6",
-    "@tanstack/react-router": "1.40.0",
+    "@tanstack/react-router": "1.46.8",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/react-table-pagination": "*",

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

@@ -41,6 +41,18 @@ export interface KPICardProps extends CommonProps {
      * </KPICard>
      */
     children?: ReactNode;
+    /**
+     * Label for the tooltip
+     */
+    tooltipLabel?: string;
+    /**
+     * Is the kpi card active
+     */
+    isActive?: boolean;
+    /**
+     * On kpi card click handler
+     */
+    onClick?: () => void;
 }
 /**
  * The KPICard component is used to display KPIs.
@@ -48,4 +60,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, ...rest }: KPICardProps) => JSX.Element;
+export declare const KPICard: ({ asChild, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }: KPICardProps) => JSX.Element;

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

@@ -3,6 +3,7 @@ export declare const cvaKPICardContainer: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPICard: (props?: ({
     isClickable?: boolean | null | undefined;
+    isActive?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPICardIconContainer: (props?: ({
     backgroundColor?: "info" | "success" | "warning" | "danger" | null | undefined;