@trackunit/react-components 1.5.34 → 1.5.36

package/index.cjs.js

@@ -206,7 +206,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
             secondary: ["bg-secondary-100", "text-secondary-700"],
-            neutral: ["bg-neutral-100", "text-neutral-700"],
+            neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
             info: ["bg-info-100", "text-info-700"],
@@ -219,7 +219,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             working: ["bg-working-100", "text-working-700"],
             stopped: ["bg-stopped-100", "text-stopped-700"],
             idle: ["bg-idle-100", "text-idle-700"],
-            unknown: ["bg-unknown-100", "text-unknown-700"],
+            unknown: ["bg-unknown-200", "text-unknown-700"],
             moving: ["bg-neutral-100", "text-neutral-700"],
             active: ["bg-neutral-100", "text-neutral-700"],
             excessive_usage: ["bg-danger-100", "text-danger-700"],
@@ -232,7 +232,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
     defaultVariants: {
         size: "medium",
         layout: "default",
-        color: "primary",
+        color: "info",
     },
 });
 const cvaTagText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
@@ -252,9 +252,9 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
     const isSupportedDismissColor = react.useMemo(() => {
-        if (color === "neutral" || color === "primary" || color === "white") {
+        if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
             return true;
         }
         return false;
@@ -2875,7 +2875,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 = "primary", ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "info", ...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),
@@ -2922,10 +2922,11 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
 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"],
+            info: ["bg-info-600"],
+            neutral: ["bg-neutral-600"],
         },
     },
 });
@@ -2944,7 +2945,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, { 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] }) }));
+        }), "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 ?? "info" }), children: jsxRuntime.jsx(Icon, { name: rest.iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -204,7 +204,7 @@ const cvaTag = cvaMerge([
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
             secondary: ["bg-secondary-100", "text-secondary-700"],
-            neutral: ["bg-neutral-100", "text-neutral-700"],
+            neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
             info: ["bg-info-100", "text-info-700"],
@@ -217,7 +217,7 @@ const cvaTag = cvaMerge([
             working: ["bg-working-100", "text-working-700"],
             stopped: ["bg-stopped-100", "text-stopped-700"],
             idle: ["bg-idle-100", "text-idle-700"],
-            unknown: ["bg-unknown-100", "text-unknown-700"],
+            unknown: ["bg-unknown-200", "text-unknown-700"],
             moving: ["bg-neutral-100", "text-neutral-700"],
             active: ["bg-neutral-100", "text-neutral-700"],
             excessive_usage: ["bg-danger-100", "text-danger-700"],
@@ -230,7 +230,7 @@ const cvaTag = cvaMerge([
     defaultVariants: {
         size: "medium",
         layout: "default",
-        color: "primary",
+        color: "info",
     },
 });
 const cvaTagText = cvaMerge(["truncate"]);
@@ -250,9 +250,9 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
     const isSupportedDismissColor = useMemo(() => {
-        if (color === "neutral" || color === "primary" || color === "white") {
+        if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
             return true;
         }
         return false;
@@ -2873,7 +2873,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 = "primary", ...rest }) => {
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, iconName, iconColor = "info", ...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),
@@ -2920,10 +2920,11 @@ const cvaKPICard = cvaMerge([
 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"],
+            info: ["bg-info-600"],
+            neutral: ["bg-neutral-600"],
         },
     },
 });
@@ -2942,7 +2943,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, { 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] }) }));
+        }), "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 ?? "info" }), 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.34",
+  "version": "1.5.36",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -33,7 +33,7 @@ export interface KPIProps extends CommonProps {
     /**
      * The color of the icon
      */
-    iconColor?: "primary" | "success" | "warning" | "danger";
+    iconColor?: "success" | "warning" | "danger" | "info" | "neutral";
     /**
      * The trend of the KPI Card
      */

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

@@ -21,7 +21,7 @@ export interface KPICardProps extends KPIProps {
     /**
      * The color of the icon
      */
-    iconColor?: "primary" | "success" | "warning" | "danger";
+    iconColor?: "success" | "warning" | "danger" | "info" | "neutral";
 }
 /**
  * The KPICard component is used to display KPIs.

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

@@ -5,5 +5,5 @@ export declare const cvaKPICard: (props?: ({
     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;
+    iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;