@trackunit/react-components 0.5.38 → 0.5.40

package/index.cjs.js

@@ -458,7 +458,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     "cursor-pointer",
     "flex-none",
     "component-button-border",
-    "component-button-padding", //TODO: Is overwritten by size which messes with marketing theme
+    "component-button-padding",
     "component-button-height",
     "disabled:cursor-not-allowed",
     "font-medium",
@@ -653,11 +653,21 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
         variant: {
             primary: [],
             "primary-danger": [],
-            secondary: ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
+            secondary: [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
             "secondary-danger": [],
             ghost: [],
-            "ghost-neutral": ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
-        }
+            "ghost-neutral": [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -1281,7 +1291,7 @@ const getWindowSize = () => {
             width: window.innerWidth,
         };
     }
-    catch (err) {
+    catch (error) {
         return {
             height: 0,
             width: 0,
@@ -1928,7 +1938,6 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
     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 && 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 });
 });
 SkeletonLines.displayName = "SkeletonLines";
@@ -3722,7 +3731,7 @@ const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"],
         isClickable: false,
     },
 });
-const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -3732,38 +3741,61 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "pl
             true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
+        variant: {
+            small: ["px-3"],
+            default: ["min-w-40"],
+        },
     },
     defaultVariants: {
         isClickable: false,
         isActive: false,
+        variant: "default",
+    },
+});
+const cvaKPICardTrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
+    variants: {
+        color: {
+            success: ["text-success-500"],
+            danger: ["text-danger-500"],
+            neutral: ["text-neutral-500"],
+        },
+    },
+    defaultVariants: {
+        color: "success",
     },
 });
-const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+const cvaKPICardValueContainer = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
-        backgroundColor: {
-            info: "bg-primary-500",
-            success: "bg-secondary-500",
-            warning: "bg-yellow-500",
-            danger: "bg-red-500",
+        isDefaultAndHasTrendValue: {
+            true: [],
+            false: ["flex", "flex-row", "items-center", "gap-1"],
         },
     },
     defaultVariants: {
-        backgroundColor: "info",
+        isDefaultAndHasTrendValue: true,
     },
 });
 
-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] }) })] }));
+const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: 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.
  *
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }) => {
+const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
-    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] })] })] })) }));
+    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 })] }));
 };
 
@@ -4296,6 +4328,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
+    // eslint-disable-next-line sonarjs/deprecation
     reactRouter.useBlocker(confirmExit, when);
 }
 /**
@@ -4398,7 +4431,7 @@ const cvaSidebarChildContainer = cssClassVarianceUtilities.cvaMerge(["apply", "f
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
     const [itemOverflowMap, setItemOverflowMap] = React.useState({});
-    const overflowContainerRef = React.useRef(null); // TODO: Handle other elements than div
+    const overflowContainerRef = React.useRef(null);
     const observerRef = React.useRef(null);
     const handleIntersection = React.useCallback(entries => {
         const updatedEntries = {};
@@ -4608,6 +4641,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
+    // eslint-disable-next-line sonarjs/no-selector-parameter
     return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 

package/index.esm.js

@@ -438,7 +438,7 @@ const cvaButton = cvaMerge([
     "cursor-pointer",
     "flex-none",
     "component-button-border",
-    "component-button-padding", //TODO: Is overwritten by size which messes with marketing theme
+    "component-button-padding",
     "component-button-height",
     "disabled:cursor-not-allowed",
     "font-medium",
@@ -633,11 +633,21 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
         variant: {
             primary: [],
             "primary-danger": [],
-            secondary: ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
+            secondary: [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
             "secondary-danger": [],
             ghost: [],
-            "ghost-neutral": ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
-        }
+            "ghost-neutral": [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -1261,7 +1271,7 @@ const getWindowSize = () => {
             width: window.innerWidth,
         };
     }
-    catch (err) {
+    catch (error) {
         return {
             height: 0,
             width: 0,
@@ -1908,7 +1918,6 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
     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 && 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 });
 });
 SkeletonLines.displayName = "SkeletonLines";
@@ -3702,7 +3711,7 @@ const cvaKPICardContainer = cvaMerge(["inline-flex"], {
         isClickable: false,
     },
 });
-const cvaKPICard = cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+const cvaKPICard = cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -3712,38 +3721,61 @@ const cvaKPICard = cvaMerge(["w-full", "bg-white", "pl-6", "pr-8", "py-4", "flex
             true: ["bg-primary-50", "border-primary-600"],
             false: [],
         },
+        variant: {
+            small: ["px-3"],
+            default: ["min-w-40"],
+        },
     },
     defaultVariants: {
         isClickable: false,
         isActive: false,
+        variant: "default",
+    },
+});
+const cvaKPICardTrendPercentage = cvaMerge([""], {
+    variants: {
+        color: {
+            success: ["text-success-500"],
+            danger: ["text-danger-500"],
+            neutral: ["text-neutral-500"],
+        },
+    },
+    defaultVariants: {
+        color: "success",
     },
 });
-const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+const cvaKPICardValueContainer = cvaMerge([], {
     variants: {
-        backgroundColor: {
-            info: "bg-primary-500",
-            success: "bg-secondary-500",
-            warning: "bg-yellow-500",
-            danger: "bg-red-500",
+        isDefaultAndHasTrendValue: {
+            true: [],
+            false: ["flex", "flex-row", "items-center", "gap-1"],
         },
     },
     defaultVariants: {
-        backgroundColor: "info",
+        isDefaultAndHasTrendValue: true,
     },
 });
 
-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] }) })] }));
+const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: 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.
  *
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }) => {
+const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
-    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] })] })] })) }));
+    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 })] }));
 };
 
@@ -4276,6 +4308,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
+    // eslint-disable-next-line sonarjs/deprecation
     useBlocker(confirmExit, when);
 }
 /**
@@ -4378,7 +4411,7 @@ const cvaSidebarChildContainer = cvaMerge(["apply", "flex", "overflow-hidden", "
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
     const [itemOverflowMap, setItemOverflowMap] = useState({});
-    const overflowContainerRef = useRef(null); // TODO: Handle other elements than div
+    const overflowContainerRef = useRef(null);
     const observerRef = useRef(null);
     const handleIntersection = useCallback(entries => {
         const updatedEntries = {};
@@ -4588,6 +4621,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
+    // eslint-disable-next-line sonarjs/no-selector-parameter
     return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 

package/package.json

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

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

@@ -1,5 +1,3 @@
-import { IntentColors } from "@trackunit/ui-design-tokens";
-import { IconName } from "@trackunit/ui-icons";
 import { ReactNode } from "react";
 import { CommonProps } from "../../common";
 export interface KPICardProps extends CommonProps {
@@ -19,14 +17,6 @@ export interface KPICardProps extends CommonProps {
      * Whether or not to show the loading state
      */
     loading?: boolean;
-    /**
-     * The icon to be displayed in the prefix
-     */
-    iconName?: IconName;
-    /**
-     * The icon to be displayed in the prefix
-     */
-    iconBackgroundColor?: IntentColors;
     /**
      * Use asChild to render the KPICard as another component
      */
@@ -49,6 +39,36 @@ export interface KPICardProps extends CommonProps {
      * Is the kpi card active
      */
     isActive?: boolean;
+    /**
+     * The size of the KPI Card
+     */
+    variant?: "small" | "default";
+    /**
+     * The trend of the KPI Card
+     */
+    trend?: {
+        /**
+         * The value of the trend
+         */
+        value?: number | string;
+        /**
+         * The percentage of the trend
+         */
+        percentage?: number | string;
+        /**
+         * The variant of the trend
+         */
+        variant?: {
+            /**
+             * The icon of the trend
+             */
+            icon?: "ArrowUp" | "ArrowDown" | "ArrowTrendingUp" | "ArrowTrendingDown";
+            /**
+             * The color of the trend
+             */
+            color?: "success" | "danger" | "neutral";
+        };
+    };
     /**
      * On kpi card click handler
      */
@@ -60,4 +80,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, tooltipLabel, isActive, onClick, ...rest }: KPICardProps) => JSX.Element;
+export declare const KPICard: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant, trend, onClick, ...rest }: KPICardProps) => JSX.Element;

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

@@ -4,7 +4,11 @@ export declare const cvaKPICardContainer: (props?: ({
 export declare const cvaKPICard: (props?: ({
     isClickable?: boolean | null | undefined;
     isActive?: boolean | null | undefined;
+    variant?: "default" | "small" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaKPICardIconContainer: (props?: ({
-    backgroundColor?: "info" | "success" | "warning" | "danger" | null | undefined;
+export declare const cvaKPICardTrendPercentage: (props?: ({
+    color?: "success" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPICardValueContainer: (props?: ({
+    isDefaultAndHasTrendValue?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -4,7 +4,7 @@ import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.var
 import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     variant?: MenuItemVariant;
-    selected?: boolean | null | undefined;
+    selected: boolean | null | undefined;
 };
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.

package/src/test-utils/hooks.d.ts

@@ -0,0 +1,12 @@
+import { RenderHookOptions } from "@testing-library/react";
+/**
+ *  Custom renderHook function to avoid boilerplate
+ *
+ * @template T
+ * @template K
+ * @param {(props: T) => K} callback - callback function
+ * @param {RenderHookOptions<T>} [options] - options
+ */
+declare const customRenderHook: <TProps, TReturn>(callback: (props: TProps) => TReturn, options?: RenderHookOptions<TProps>) => import("@testing-library/react").RenderHookResult<TReturn, TProps>;
+export * from "@testing-library/react";
+export { customRenderHook as renderHook };

package/src/test-utils/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { RenderOptions, RenderResult } from "@testing-library/react";
+import * as React from "react";
+/**
+ * Enhanced render with providers
+ *
+ * @param ui - The UI to render
+ * @param options - The options for the render
+ * @returns {RenderResult} The rendered UI
+ */
+declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "wrapper">) => RenderResult;
+export * from "@testing-library/react";
+export { customRender as render };