@trackunit/react-components 1.4.156 → 1.4.158

package/index.cjs.js

@@ -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.
+ * 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.
  */
 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
  */

package/index.esm.js

@@ -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.
+ * 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.
  */
 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
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.156",
+  "version": "1.4.158",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,12 +18,12 @@
     "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.127",
-    "@trackunit/css-class-variance-utilities": "1.3.128",
-    "@trackunit/shared-utils": "1.5.128",
-    "@trackunit/ui-icons": "1.3.130",
-    "@trackunit/react-table-pagination": "1.3.129",
-    "@trackunit/react-test-setup": "1.0.18"
+    "@trackunit/ui-design-tokens": "1.3.128",
+    "@trackunit/css-class-variance-utilities": "1.3.129",
+    "@trackunit/shared-utils": "1.5.129",
+    "@trackunit/ui-icons": "1.3.131",
+    "@trackunit/react-table-pagination": "1.3.130",
+    "@trackunit/react-test-setup": "1.0.19"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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/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;