@trackunit/react-components 1.7.29 → 1.7.32

package/index.cjs.js

@@ -28,7 +28,7 @@ const docs = {
     },
 };
 
-const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative"], {
+const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"], {
     variants: {
         color: {
             primary: "text-primary-600",
@@ -1773,6 +1773,7 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
     "component-card-border",
     "transition-shadow",
     "ease-in-out",
+    "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
 ], {
     variants: {
         clickable: {
@@ -2943,7 +2944,7 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "info", ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...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.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),
@@ -2975,16 +2976,10 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
             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",
     },
 });
 const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
@@ -3005,15 +3000,14 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }) => {
+const KPICard = ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, ...rest }) => {
     const isClickable = Boolean(onClick && !rest.loading);
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             minHeight: rest.trend ? "withTrends" : "default",
-            variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(rest.iconName) }), density: "none", 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 ?? "info" }), children: jsxRuntime.jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor: iconColor ?? "info" }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     variants: {

package/index.esm.js

@@ -26,7 +26,7 @@ const docs = {
     },
 };
 
-const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
+const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"], {
     variants: {
         color: {
             primary: "text-primary-600",
@@ -1771,6 +1771,7 @@ const cvaCard = cvaMerge([
     "component-card-border",
     "transition-shadow",
     "ease-in-out",
+    "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
 ], {
     variants: {
         clickable: {
@@ -2941,7 +2942,7 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "info", ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...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: [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),
@@ -2973,16 +2974,10 @@ const cvaKPICard = cvaMerge([
             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",
     },
 });
 const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
@@ -3003,15 +2998,14 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }) => {
+const KPICard = ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, ...rest }) => {
     const isClickable = Boolean(onClick && !rest.loading);
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             minHeight: rest.trend ? "withTrends" : "default",
-            variant: rest.variant,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(rest.iconName) }), density: "none", 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 ?? "info" }), children: jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor: iconColor ?? "info" }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.29",
+  "version": "1.7.32",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.23",
-    "@trackunit/css-class-variance-utilities": "1.6.22",
-    "@trackunit/shared-utils": "1.8.22",
-    "@trackunit/ui-icons": "1.6.21",
-    "@trackunit/react-table-pagination": "1.6.21",
-    "@trackunit/react-test-setup": "1.3.22",
+    "@trackunit/ui-design-tokens": "1.6.24",
+    "@trackunit/css-class-variance-utilities": "1.6.23",
+    "@trackunit/shared-utils": "1.8.23",
+    "@trackunit/ui-icons": "1.6.22",
+    "@trackunit/react-table-pagination": "1.6.22",
+    "@trackunit/react-test-setup": "1.3.23",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

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

@@ -1,17 +1,16 @@
-import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 export interface KPIProps extends CommonProps {
     /**
-     * The title of the KPI Card
+     * The title of the KPI
      */
     title: string;
     /**
-     * The value of the KPI Card
+     * The value of the KPI
      */
     value: string | number;
     /**
-     * The unit of the KPI Card
+     * The unit of the KPI
      */
     unit: string;
     /**
@@ -23,19 +22,11 @@ export interface KPIProps extends CommonProps {
      */
     tooltipLabel?: string;
     /**
-     * The size of the KPI Card
+     * The size of the KPI
      */
     variant?: "small" | "default" | "condensed";
     /**
-     * The icon name to be displayed
-     */
-    iconName?: IconName;
-    /**
-     * The color of the icon
-     */
-    iconColor?: "success" | "warning" | "danger" | "info" | "neutral";
-    /**
-     * The trend of the KPI Card
+     * The trend of the KPI
      */
     trend?: {
         /**
@@ -67,4 +58,4 @@ export interface KPIProps extends CommonProps {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-export declare const KPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, iconName, iconColor, ...rest }: KPIProps) => ReactElement;
+export declare const KPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, ...rest }: KPIProps) => ReactElement;

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

@@ -1,7 +1,8 @@
+import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { KPIProps } from "../KPI/KPI";
-export interface KPICardProps extends KPIProps {
+export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     /**
      * Is the kpi card active
      */
@@ -29,4 +30,4 @@ export interface KPICardProps extends KPIProps {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ isActive, onClick, className, dataTestId, children, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, ...rest }: KPICardProps) => ReactElement;

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

@@ -2,7 +2,6 @@ export declare const cvaKPICard: (props?: ({
     minHeight?: "default" | "withTrends" | null | undefined;
     isClickable?: boolean | null | undefined;
     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?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;