@trackunit/react-components 1.5.31 → 1.5.33

package/index.cjs.js

@@ -226,7 +226,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         },
         border: {
             none: "border-none",
-            default: "border border-secondary-300",
+            default: "outline-secondary-300 border-none outline-1 -outline-offset-1",
         },
     },
     defaultVariants: {
@@ -2831,16 +2831,6 @@ const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "fl
     },
 });
 const cvaKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
-const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
-    variants: {
-        iconColor: {
-            primary: ["bg-primary-600"],
-            success: ["bg-success-600"],
-            warning: ["bg-warning-500"],
-            danger: ["bg-danger-600"],
-        },
-    },
-});
 const cvaKPITitleText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"]);
 const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
     variants: {
@@ -2887,7 +2877,7 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
  */
 const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "primary", ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cvaKPIHeader(), children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
+    return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaKPIHeader(), children: jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
                                 isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                 className,
                             }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
@@ -2929,6 +2919,16 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
         variant: "default",
     },
 });
+const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+    variants: {
+        iconColor: {
+            primary: ["bg-primary-600"],
+            success: ["bg-success-600"],
+            warning: ["bg-warning-500"],
+            danger: ["bg-danger-600"],
+        },
+    },
+});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -2944,7 +2944,7 @@ 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, { density: "kpi", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
+        }), "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 ?? "primary" }), children: jsxRuntime.jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -224,7 +224,7 @@ const cvaTag = cvaMerge([
         },
         border: {
             none: "border-none",
-            default: "border border-secondary-300",
+            default: "outline-secondary-300 border-none outline-1 -outline-offset-1",
         },
     },
     defaultVariants: {
@@ -2829,16 +2829,6 @@ const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
     },
 });
 const cvaKPIHeader = cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
-const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
-    variants: {
-        iconColor: {
-            primary: ["bg-primary-600"],
-            success: ["bg-success-600"],
-            warning: ["bg-warning-500"],
-            danger: ["bg-danger-600"],
-        },
-    },
-});
 const cvaKPITitleText = cvaMerge(["truncate", "whitespace-nowrap"]);
 const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
     variants: {
@@ -2885,7 +2875,7 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
  */
 const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "primary", ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsxs("div", { className: cvaKPIHeader(), children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
+    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx("div", { className: cvaKPIHeader(), children: jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
                                 isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                 className,
                             }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
@@ -2927,6 +2917,16 @@ const cvaKPICard = cvaMerge([
         variant: "default",
     },
 });
+const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+    variants: {
+        iconColor: {
+            primary: ["bg-primary-600"],
+            success: ["bg-success-600"],
+            warning: ["bg-warning-500"],
+            danger: ["bg-danger-600"],
+        },
+    },
+});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -2942,7 +2942,7 @@ 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, { density: "kpi", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
+        }), "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 ?? "primary" }), children: jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaMenuList = cvaMerge([

package/package.json

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

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

@@ -2,9 +2,6 @@ export declare const cvaKPI: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPIHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKPIIconContainer: (props?: ({
-    iconColor?: "primary" | "success" | "warning" | "danger" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPITitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaKPIvalueText: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;

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

@@ -4,3 +4,6 @@ export declare const cvaKPICard: (props?: ({
     isActive?: boolean | null | undefined;
     variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPIIconContainer: (props?: ({
+    iconColor?: "primary" | "success" | "warning" | "danger" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;