@trackunit/react-components 1.4.157 → 1.4.159

package/index.cjs.js

@@ -41,12 +41,12 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             good: "text-good-600",
             low: "text-low-600",
             critical: "text-critical-600",
-            working: "text-working-600",
+            working: "text-working-500",
             idle: "text-idle-600",
             moving: "text-moving-600",
             active: "text-active-600",
-            stopped: "text-stopped-600",
-            unknown: "text-unknown-600",
+            stopped: "text-stopped-700",
+            unknown: "text-unknown-400",
             default: "text-current",
             black: "text-black",
             white: "text-white",
@@ -203,24 +203,24 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             default: "",
         },
         color: {
-            primary: "bg-primary-100 text-primary-700",
-            secondary: "bg-secondary-100 text-secondary-700",
-            neutral: "bg-neutral-100 text-neutral-700",
-            black: "bg-neutral-100 text-neutral-700",
-            white: "bg-white text-neutral-600",
-            info: "bg-info-100 text-info-700",
-            success: "bg-success-100 text-success-700",
-            warning: "bg-warning-100 text-warning-700",
-            danger: "bg-danger-100 text-danger-700",
-            good: "bg-good-100 text-good-700",
-            low: "bg-low-100 text-low-700",
-            critical: "bg-critical-100 text-critical-700",
-            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",
-            moving: "bg-neutral-100 text-neutral-700",
-            active: "bg-neutral-100 text-neutral-700",
+            primary: ["bg-primary-100", "text-primary-700"],
+            secondary: ["bg-secondary-100", "text-secondary-700"],
+            neutral: ["bg-neutral-100", "text-neutral-700"],
+            black: ["bg-neutral-100", "text-neutral-700"],
+            white: ["bg-white", "text-neutral-600"],
+            info: ["bg-info-100", "text-info-700"],
+            success: ["bg-success-100", "text-success-700"],
+            warning: ["bg-warning-100", "text-warning-700"],
+            danger: ["bg-danger-100", "text-danger-700"],
+            good: ["bg-good-100", "text-good-700"],
+            low: ["bg-low-100", "text-low-700"],
+            critical: ["bg-critical-100", "text-critical-700"],
+            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"],
+            moving: ["bg-neutral-100", "text-neutral-700"],
+            active: ["bg-neutral-100", "text-neutral-700"],
         },
         border: {
             none: "border-none",
@@ -238,16 +238,17 @@ const cvaTagIconContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex", "
 const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
 /**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
+ * The Tag component is used for labeling or categorizing items in the UI.
+ * It's commonly used to indicate the status of an asset, mark a feature as Beta,
+ * or display selected options in multi-select inputs.
  *
- *  The tag is also used in multiselect components to show selected options.
+ * How to choose between Tag, Badge and Highlight?
+ * - Use a Tag for labeling statuses, categories, or selections.
+ * - Use a [Badge](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
+ * - Use a [Highlight](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
  *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} tag component
+ * @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, }) => {
     const isSupportedDismissColor = react.useMemo(() => {
@@ -887,8 +888,13 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
 });
 
 /**
- * The Badge component is used to display a notification badge with an optional number value.
- 
+ * The Badge component is used to indicate notifications or counts of applied elements.
+ * It's typically used to display numbers on elements like filters, tabs, or buttons.
+ *
+ * How to choose between Badge and Tag?
+ * - Use a Badge to indicate notifications or counts of applied elements.
+ * - Use a [Tag](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
+ *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
@@ -2662,12 +2668,12 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
             good: "bg-good-600",
             low: "bg-low-600",
             critical: "bg-critical-600",
-            working: "bg-working-600",
+            working: "bg-working-500",
             idle: "bg-idle-600",
-            stopped: "bg-stopped-600",
+            stopped: "bg-stopped-700",
             moving: "bg-moving-600",
             active: "bg-active-600",
-            unknown: "bg-unknown-600",
+            unknown: "bg-unknown-400",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
@@ -2704,12 +2710,12 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
             good: "bg-good-100 text-good-600",
             low: "bg-low-100 text-low-500",
             critical: "bg-critical-100 text-critical-600",
-            working: "bg-working-100 text-working-600",
+            working: "bg-working-50 text-working-500",
             idle: "bg-idle-100 text-idle-500",
-            stopped: "bg-stopped-100 text-stopped-600",
+            stopped: "bg-stopped-100 text-stopped-700",
             moving: "text-moving-600 bg-neutral-100",
             active: "text-active-600 bg-neutral-100",
-            unknown: "bg-unknown-100 text-unknown-600",
+            unknown: "bg-unknown-50 text-unknown-400",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
             heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",

package/index.esm.js

@@ -39,12 +39,12 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             good: "text-good-600",
             low: "text-low-600",
             critical: "text-critical-600",
-            working: "text-working-600",
+            working: "text-working-500",
             idle: "text-idle-600",
             moving: "text-moving-600",
             active: "text-active-600",
-            stopped: "text-stopped-600",
-            unknown: "text-unknown-600",
+            stopped: "text-stopped-700",
+            unknown: "text-unknown-400",
             default: "text-current",
             black: "text-black",
             white: "text-white",
@@ -201,24 +201,24 @@ const cvaTag = cvaMerge([
             default: "",
         },
         color: {
-            primary: "bg-primary-100 text-primary-700",
-            secondary: "bg-secondary-100 text-secondary-700",
-            neutral: "bg-neutral-100 text-neutral-700",
-            black: "bg-neutral-100 text-neutral-700",
-            white: "bg-white text-neutral-600",
-            info: "bg-info-100 text-info-700",
-            success: "bg-success-100 text-success-700",
-            warning: "bg-warning-100 text-warning-700",
-            danger: "bg-danger-100 text-danger-700",
-            good: "bg-good-100 text-good-700",
-            low: "bg-low-100 text-low-700",
-            critical: "bg-critical-100 text-critical-700",
-            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",
-            moving: "bg-neutral-100 text-neutral-700",
-            active: "bg-neutral-100 text-neutral-700",
+            primary: ["bg-primary-100", "text-primary-700"],
+            secondary: ["bg-secondary-100", "text-secondary-700"],
+            neutral: ["bg-neutral-100", "text-neutral-700"],
+            black: ["bg-neutral-100", "text-neutral-700"],
+            white: ["bg-white", "text-neutral-600"],
+            info: ["bg-info-100", "text-info-700"],
+            success: ["bg-success-100", "text-success-700"],
+            warning: ["bg-warning-100", "text-warning-700"],
+            danger: ["bg-danger-100", "text-danger-700"],
+            good: ["bg-good-100", "text-good-700"],
+            low: ["bg-low-100", "text-low-700"],
+            critical: ["bg-critical-100", "text-critical-700"],
+            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"],
+            moving: ["bg-neutral-100", "text-neutral-700"],
+            active: ["bg-neutral-100", "text-neutral-700"],
         },
         border: {
             none: "border-none",
@@ -236,16 +236,17 @@ const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
 const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
 /**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
+ * The Tag component is used for labeling or categorizing items in the UI.
+ * It's commonly used to indicate the status of an asset, mark a feature as Beta,
+ * or display selected options in multi-select inputs.
  *
- *  The tag is also used in multiselect components to show selected options.
+ * How to choose between Tag, Badge and Highlight?
+ * - Use a Tag for labeling statuses, categories, or selections.
+ * - Use a [Badge](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
+ * - Use a [Highlight](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
  *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} tag component
+ * @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, }) => {
     const isSupportedDismissColor = useMemo(() => {
@@ -885,8 +886,13 @@ const cvaBadge = cvaMerge([
 });
 
 /**
- * The Badge component is used to display a notification badge with an optional number value.
- 
+ * The Badge component is used to indicate notifications or counts of applied elements.
+ * It's typically used to display numbers on elements like filters, tabs, or buttons.
+ *
+ * How to choose between Badge and Tag?
+ * - Use a Badge to indicate notifications or counts of applied elements.
+ * - Use a [Tag](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
+ *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
@@ -2660,12 +2666,12 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
             good: "bg-good-600",
             low: "bg-low-600",
             critical: "bg-critical-600",
-            working: "bg-working-600",
+            working: "bg-working-500",
             idle: "bg-idle-600",
-            stopped: "bg-stopped-600",
+            stopped: "bg-stopped-700",
             moving: "bg-moving-600",
             active: "bg-active-600",
-            unknown: "bg-unknown-600",
+            unknown: "bg-unknown-400",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
@@ -2702,12 +2708,12 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
             good: "bg-good-100 text-good-600",
             low: "bg-low-100 text-low-500",
             critical: "bg-critical-100 text-critical-600",
-            working: "bg-working-100 text-working-600",
+            working: "bg-working-50 text-working-500",
             idle: "bg-idle-100 text-idle-500",
-            stopped: "bg-stopped-100 text-stopped-600",
+            stopped: "bg-stopped-100 text-stopped-700",
             moving: "text-moving-600 bg-neutral-100",
             active: "text-active-600 bg-neutral-100",
-            unknown: "bg-unknown-100 text-unknown-600",
+            unknown: "bg-unknown-50 text-unknown-400",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
             heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.157",
+  "version": "1.4.159",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.128",
+    "@trackunit/ui-design-tokens": "1.3.129",
     "@trackunit/css-class-variance-utilities": "1.3.129",
     "@trackunit/shared-utils": "1.5.129",
     "@trackunit/ui-icons": "1.3.131",

package/src/components/Badge/Badge.d.ts

@@ -32,8 +32,13 @@ interface BaseBadgeProps extends CommonProps {
 }
 export type BadgeProps = BaseBadgeProps;
 /**
- * The Badge component is used to display a notification badge with an optional number value.
- 
+ * The Badge component is used to indicate notifications or counts of applied elements.
+ * It's typically used to display numbers on elements like filters, tabs, or buttons.
+ *
+ * How to choose between Badge and Tag?
+ * - Use a Badge to indicate notifications or counts of applied elements.
+ * - Use a [Tag](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
+ *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */

package/src/components/Highlight/Highlight.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, Ref } from "react";
+import { CommonProps, Size } from "../../common";
+export type HighlightSize = Extract<Size, "small" | "medium">;
+export interface HighlightProps extends CommonProps {
+    /**
+     * The color of the highlight. Allowed values: "primary", "success", "warning", "danger", "unknown".
+     */
+    color?: "primary" | "success" | "warning" | "danger" | "unknown";
+    /**
+     * The content of the highlight. Accepts any valid React children (text, numbers, elements).
+     */
+    children?: ReactNode;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The Highlight component is used to draw attention to data values that may require user action, monitoring, or investigation.
+ * It visually emphasizes out-of-range or critical values using color cues (e.g. danger or warning) to support quick scanning and awareness.
+ *
+ * How to choose between Highlight and Tag?
+ * - Use Highlight to draw attention to values in plain text that require special attention or have crossed a threshold.
+ * - Use a [Tag](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
+ *
+ * @param {HighlightProps} props - The props for the highlight component
+ * @returns {ReactElement} highlight component
+ */
+export declare const Highlight: {
+    ({ className, dataTestId, children, color, ref }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,4 @@
+export declare const cvaHighlight: (props?: ({
+    color?: "primary" | "success" | "warning" | "danger" | "unknown" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaHighlightText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Icon/Icon.d.ts

@@ -246,16 +246,16 @@ export declare const iconPalette: {
         readonly 900: "120 53 15";
     };
     STOPPED: {
-        readonly 50: "245 243 255";
-        readonly 100: "237 233 254";
-        readonly 200: "221 214 254";
-        readonly 300: "196 181 253";
-        readonly 400: "167 139 250";
-        readonly 500: "139 92 246";
-        readonly 600: "124 58 237";
-        readonly 700: "109 40 217";
-        readonly 800: "91 33 182";
-        readonly 900: "76 29 149";
+        readonly 50: "249 250 251";
+        readonly 100: "243 244 246";
+        readonly 200: "229 231 235";
+        readonly 300: "209 213 219";
+        readonly 400: "156 163 175";
+        readonly 500: "107 114 128";
+        readonly 600: "75 85 99";
+        readonly 700: "55 65 81";
+        readonly 800: "31 41 55";
+        readonly 900: "17 24 39";
     };
     UNKNOWN: {
         readonly 50: "249 250 251";

package/src/components/Tag/Tag.d.ts

@@ -39,16 +39,17 @@ export interface TagProps extends CommonProps {
     icon?: ReactNode;
 }
 /**
- *  The tag component is used to categorize elements in the ui.
+ * The Tag component is used for labeling or categorizing items in the UI.
+ * It's commonly used to indicate the status of an asset, mark a feature as Beta,
+ * or display selected options in multi-select inputs.
  *
- *  This could be to tell the state of an asset, or label a page as Beta.
+ * How to choose between Tag, Badge and Highlight?
+ * - Use a Tag for labeling statuses, categories, or selections.
+ * - Use a [Badge](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
+ * - Use a [Highlight](https://apps.iris.trackunit.com/storybook/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
  *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} tag component
+ * @param {TagProps} props - The props for the Tag component.
+ * @returns {ReactElement} The rendered Tag component.
  */
 export declare const Tag: {
     ({ className, dataTestId, children, size, onClose, color, disabled, ref, icon, }: TagProps): import("react/jsx-runtime").JSX.Element;