@trackunit/react-components 1.4.178-alpha-a47903fd6dc.0 → 1.4.178

package/index.cjs.js

@@ -2214,6 +2214,53 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "rounded",
+    "py-0.5",
+    "px-1",
+    "text-center",
+    "h-min",
+    "min-w-[1.5rem]",
+    "font-medium",
+    "truncate",
+    "max-w-full",
+    "w-fit",
+    "text-xs",
+], {
+    variants: {
+        color: {
+            primary: ["bg-primary-100", "text-primary-700"],
+            success: ["bg-success-100", "text-success-700"],
+            warning: ["bg-warning-100", "text-warning-700"],
+            danger: ["bg-danger-100", "text-danger-700"],
+            unknown: ["bg-unknown-100", "text-unknown-700"],
+        },
+    },
+    defaultVariants: {
+        color: "warning",
+    },
+});
+const cvaHighlightText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
+
+/**
+ * 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
+ */
+const Highlight = ({ className, dataTestId, children, color = "warning", ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlight({ className, color }), "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) }));
+};
+Highlight.displayName = "Highlight";
+
 const PADDING = 12;
 /**
  * Converts a width size value into a CSS dimension value for max constraints
@@ -4028,6 +4075,7 @@ exports.EmptyState = EmptyState;
 exports.EmptyValue = EmptyValue;
 exports.ExternalLink = ExternalLink;
 exports.Heading = Heading;
+exports.Highlight = Highlight;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Indicator = Indicator;

package/index.esm.js

@@ -2212,6 +2212,53 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+const cvaHighlight = cvaMerge([
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "rounded",
+    "py-0.5",
+    "px-1",
+    "text-center",
+    "h-min",
+    "min-w-[1.5rem]",
+    "font-medium",
+    "truncate",
+    "max-w-full",
+    "w-fit",
+    "text-xs",
+], {
+    variants: {
+        color: {
+            primary: ["bg-primary-100", "text-primary-700"],
+            success: ["bg-success-100", "text-success-700"],
+            warning: ["bg-warning-100", "text-warning-700"],
+            danger: ["bg-danger-100", "text-danger-700"],
+            unknown: ["bg-unknown-100", "text-unknown-700"],
+        },
+    },
+    defaultVariants: {
+        color: "warning",
+    },
+});
+const cvaHighlightText = cvaMerge(["truncate"]);
+
+/**
+ * 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
+ */
+const Highlight = ({ className, dataTestId, children, color = "warning", ref }) => {
+    return (jsx("div", { className: cvaHighlight({ className, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
+};
+Highlight.displayName = "Highlight";
+
 const PADDING = 12;
 /**
  * Converts a width size value into a CSS dimension value for max constraints
@@ -4009,4 +4056,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, 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, 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, useModifierKey, 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, Highlight, 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, 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, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.178-alpha-a47903fd6dc.0",
+  "version": "1.4.178",
   "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.145-alpha-a47903fd6dc.0",
-    "@trackunit/css-class-variance-utilities": "1.3.147-alpha-a47903fd6dc.0",
-    "@trackunit/shared-utils": "1.5.147-alpha-a47903fd6dc.0",
-    "@trackunit/ui-icons": "1.3.147-alpha-a47903fd6dc.0",
-    "@trackunit/react-table-pagination": "1.3.147-alpha-a47903fd6dc.0",
-    "@trackunit/react-test-setup": "1.0.37-alpha-a47903fd6dc.0"
+    "@trackunit/ui-design-tokens": "1.3.144",
+    "@trackunit/css-class-variance-utilities": "1.3.146",
+    "@trackunit/shared-utils": "1.5.146",
+    "@trackunit/ui-icons": "1.3.146",
+    "@trackunit/react-table-pagination": "1.3.146",
+    "@trackunit/react-test-setup": "1.0.36"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/index.d.ts

@@ -11,6 +11,7 @@ export * from "./EmptyState/EmptyState.variants";
 export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
+export * from "./Highlight/Highlight";
 export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./KPI/KPI";