@trackunit/react-components 1.4.40 → 1.4.42

package/index.cjs.js

@@ -2674,39 +2674,33 @@ const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground
     return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
-const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"], {
+const cvaKPIContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
+const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
     variants: {
-        isClickable: {
-            true: ["cursor-pointer"],
-            false: [],
+        variant: {
+            small: ["px-3"],
+            condensed: ["px-2", "py-0"],
+            default: ["min-w-40"],
         },
     },
     defaultVariants: {
-        isClickable: false,
+        variant: "default",
     },
 });
-const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
+const cvaKPITitleText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"]);
+const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
-        isClickable: {
-            true: ["hover:bg-slate-50", "component-card-border"],
-            false: [],
-        },
-        isActive: {
-            true: ["bg-primary-50", "border-primary-600"],
-            false: [],
-        },
         variant: {
-            small: ["px-3"],
-            default: ["min-w-40"],
+            small: ["mt-0.5"],
+            condensed: [""],
+            default: [""],
         },
     },
     defaultVariants: {
-        isClickable: false,
-        isActive: false,
         variant: "default",
     },
 });
-const cvaKPICardTrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
+const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
     variants: {
         color: {
             success: ["text-success-500"],
@@ -2718,7 +2712,7 @@ const cvaKPICardTrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
         color: "success",
     },
 });
-const cvaKPICardValueContainer = cssClassVarianceUtilities.cvaMerge([], {
+const cvaKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
             true: [],
@@ -2730,25 +2724,64 @@ const cvaKPICardValueContainer = cssClassVarianceUtilities.cvaMerge([], {
     },
 });
 
-const LoadingContent$1 = () => (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] }) }) }));
+const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [14, 18], lines: 2, margin: "3px 0", width: [100, 70] }) }) }));
 /**
- * The KPICard component is used to display KPIs.
+ * The KPI component is used to display KPIs.
  *
- * @param {KPICardProps} props - The props for the KPICard component
- * @returns {ReactElement} KPICard component
+ * @param {KPIProps} props - The props for the KPI component
+ * @returns {ReactElement} KPI component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
+const KPI = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
     const isSmallVariant = variant === "small";
-    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$1, {})) : (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({
+    return (jsxRuntime.jsxs(Comp, { className: cvaKPIContainer({ className }), "data-testid": `${dataTestId}-comp`, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant }), children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(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 })] }));
+                                        className,
+                                    }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), 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 }) => {
     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, trend.variant?.icon ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPICardTrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : 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, trend.variant?.icon ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+};
+
+const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["inline-flex", "gap-1", "p-0"], {
+    variants: {
+        isClickable: {
+            true: ["hover:bg-slate-50", "component-card-border"],
+            false: [],
+        },
+        isActive: {
+            true: ["bg-primary-50", "border-primary-600"],
+            false: [],
+        },
+        variant: {
+            small: ["px-3"],
+            condensed: ["px-2"],
+            default: ["min-w-40"],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+        isActive: false,
+        variant: "default",
+    },
+});
+
+/**
+ * The KPICard component is used to display KPIs.
+ *
+ * @param {KPICardProps} props - The props for the KPICard component
+ * @returns {ReactElement} KPICard component
+ */
+const KPICard = ({ isActive, onClick, className, ...rest }) => {
+    return (jsxRuntime.jsx(Card, { className: cvaKPICard({
+            isClickable: Boolean((onClick || rest.asChild) && !rest.loading),
+            isActive,
+            variant: rest.variant,
+            className,
+        }), dataTestId: `${rest.dataTestId}-card`, onClick: Boolean(onClick || rest.asChild) ? () => onClick?.() : undefined, children: jsxRuntime.jsx(KPI, { ...rest, className: "overflow-hidden rounded-lg" }) }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
@@ -3910,6 +3943,7 @@ exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Indicator = Indicator;
+exports.KPI = KPI;
 exports.KPICard = KPICard;
 exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;

package/index.esm.js

@@ -2672,39 +2672,33 @@ const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground
     return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
-const cvaKPICardContainer = cvaMerge(["inline-flex"], {
+const cvaKPIContainer = cvaMerge(["inline-flex"]);
+const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
     variants: {
-        isClickable: {
-            true: ["cursor-pointer"],
-            false: [],
+        variant: {
+            small: ["px-3"],
+            condensed: ["px-2", "py-0"],
+            default: ["min-w-40"],
         },
     },
     defaultVariants: {
-        isClickable: false,
+        variant: "default",
     },
 });
-const cvaKPICard = cvaMerge(["w-full", "bg-white", "px-4", "py-2", "flex", "flex-row", "items-center", "gap-1"], {
+const cvaKPITitleText = cvaMerge(["truncate", "whitespace-nowrap"]);
+const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
-        isClickable: {
-            true: ["hover:bg-slate-50", "component-card-border"],
-            false: [],
-        },
-        isActive: {
-            true: ["bg-primary-50", "border-primary-600"],
-            false: [],
-        },
         variant: {
-            small: ["px-3"],
-            default: ["min-w-40"],
+            small: ["mt-0.5"],
+            condensed: [""],
+            default: [""],
         },
     },
     defaultVariants: {
-        isClickable: false,
-        isActive: false,
         variant: "default",
     },
 });
-const cvaKPICardTrendPercentage = cvaMerge([""], {
+const cvaKPITrendPercentage = cvaMerge([""], {
     variants: {
         color: {
             success: ["text-success-500"],
@@ -2716,7 +2710,7 @@ const cvaKPICardTrendPercentage = cvaMerge([""], {
         color: "success",
     },
 });
-const cvaKPICardValueContainer = cvaMerge([], {
+const cvaKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
             true: [],
@@ -2728,25 +2722,64 @@ const cvaKPICardValueContainer = cvaMerge([], {
     },
 });
 
-const LoadingContent$1 = () => (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] }) }) }));
+const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [14, 18], lines: 2, margin: "3px 0", width: [100, 70] }) }) }));
 /**
- * The KPICard component is used to display KPIs.
+ * The KPI component is used to display KPIs.
  *
- * @param {KPICardProps} props - The props for the KPICard component
- * @returns {ReactElement} KPICard component
+ * @param {KPIProps} props - The props for the KPI component
+ * @returns {ReactElement} KPI component
  */
-const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
+const KPI = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
     const Comp = asChild ? Slot : "div";
     const isSmallVariant = variant === "small";
-    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$1, {})) : (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({
+    return (jsxs(Comp, { className: cvaKPIContainer({ className }), "data-testid": `${dataTestId}-comp`, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant }), children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
-                                    }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
+                                        className,
+                                    }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     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, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPICardTrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : 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, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+};
+
+const cvaKPICard = cvaMerge(["inline-flex", "gap-1", "p-0"], {
+    variants: {
+        isClickable: {
+            true: ["hover:bg-slate-50", "component-card-border"],
+            false: [],
+        },
+        isActive: {
+            true: ["bg-primary-50", "border-primary-600"],
+            false: [],
+        },
+        variant: {
+            small: ["px-3"],
+            condensed: ["px-2"],
+            default: ["min-w-40"],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+        isActive: false,
+        variant: "default",
+    },
+});
+
+/**
+ * The KPICard component is used to display KPIs.
+ *
+ * @param {KPICardProps} props - The props for the KPICard component
+ * @returns {ReactElement} KPICard component
+ */
+const KPICard = ({ isActive, onClick, className, ...rest }) => {
+    return (jsx(Card, { className: cvaKPICard({
+            isClickable: Boolean((onClick || rest.asChild) && !rest.loading),
+            isActive,
+            variant: rest.variant,
+            className,
+        }), dataTestId: `${rest.dataTestId}-card`, onClick: Boolean(onClick || rest.asChild) ? () => onClick?.() : undefined, children: jsx(KPI, { ...rest, className: "overflow-hidden rounded-lg" }) }));
 };
 
 const cvaMenuList = cvaMerge([
@@ -3888,4 +3921,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleItem, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPI, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleItem, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.40",
+  "version": "1.4.42",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.36",
-    "@trackunit/css-class-variance-utilities": "1.3.36",
-    "@trackunit/shared-utils": "1.5.36",
-    "@trackunit/ui-icons": "1.3.36",
-    "@trackunit/react-table-pagination": "1.3.37"
+    "@trackunit/ui-design-tokens": "1.3.38",
+    "@trackunit/css-class-variance-utilities": "1.3.38",
+    "@trackunit/shared-utils": "1.5.38",
+    "@trackunit/ui-icons": "1.3.38",
+    "@trackunit/react-table-pagination": "1.3.39"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -0,0 +1,75 @@
+import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common";
+export interface KPIProps extends CommonProps {
+    /**
+     * The title of the KPI Card
+     */
+    title: string;
+    /**
+     * The value of the KPI Card
+     */
+    value: string | number;
+    /**
+     * The unit of the KPI Card
+     */
+    unit: string;
+    /**
+     * Whether or not to show the loading state
+     */
+    loading?: boolean;
+    /**
+     * Use asChild to render the KPI as another component
+     */
+    asChild?: boolean;
+    /**
+     * Only add when asChild is true.
+     * The child element is used to wrap the KPI component to set it to another HTML element.
+     *
+     * @example
+     * <KPI {...props}>
+     *   <Link to="/" />
+     * </KPI>
+     */
+    children?: ReactNode;
+    /**
+     * Label for the tooltip
+     */
+    tooltipLabel?: string;
+    /**
+     * The size of the KPI Card
+     */
+    variant?: "small" | "default" | "condensed";
+    /**
+     * 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";
+        };
+    };
+}
+/**
+ * The KPI component is used to display KPIs.
+ *
+ * @param {KPIProps} props - The props for the KPI component
+ * @returns {ReactElement} KPI component
+ */
+export declare const KPI: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, ...rest }: KPIProps) => ReactElement;

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

@@ -0,0 +1,14 @@
+export declare const cvaKPIContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKPI: (props?: ({
+    variant?: "default" | "small" | "condensed" | 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;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPITrendPercentage: (props?: ({
+    color?: "success" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPIValueContainer: (props?: ({
+    isDefaultAndHasTrendValue?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1,74 +1,10 @@
-import { ReactElement, ReactNode } from "react";
-import { CommonProps } from "../../common";
-export interface KPICardProps extends CommonProps {
-    /**
-     * The title of the KPI Card
-     */
-    title: string;
-    /**
-     * The value of the KPI Card
-     */
-    value: string | number;
-    /**
-     * The unit of the KPI Card
-     */
-    unit: string;
-    /**
-     * Whether or not to show the loading state
-     */
-    loading?: boolean;
-    /**
-     * Use asChild to render the KPICard as another component
-     */
-    asChild?: boolean;
-    /**
-     * Only add when asChild is true.
-     * The child element is used to wrap the KPICard component to set it to another HTML element.
-     *
-     * @example
-     * <KPICard {...props}>
-     *   <Link to="/" />
-     * </KPICard>
-     */
-    children?: ReactNode;
-    /**
-     * Label for the tooltip
-     */
-    tooltipLabel?: string;
+import { ReactElement } from "react";
+import { KPIProps } from "../KPI/KPI";
+export interface KPICardProps extends KPIProps {
     /**
      * 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
      */
@@ -80,4 +16,4 @@ export interface KPICardProps extends CommonProps {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant, trend, onClick, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, ...rest }: KPICardProps) => ReactElement;

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

@@ -1,14 +1,5 @@
-export declare const cvaKPICardContainer: (props?: ({
-    isClickable?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 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 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;
+    variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -13,6 +13,7 @@ export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
 export * from "./Icon/Icon";
 export * from "./Indicator";
+export * from "./KPI/KPI";
 export * from "./KPICard/KPICard";
 export * from "./Menu";
 export * from "./Notice";