@trackunit/react-components 2.13.23-alpha-12adfed37e0.0 → 2.13.24

package/index.cjs.js

@@ -81,6 +81,7 @@ const cvaIcon = cssClassVarianceUtilities.cva({
     variants: {
         color: {
             primary: "text-primary-600",
+            ai: "text-ai",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -142,6 +143,7 @@ const cvaIcon = cssClassVarianceUtilities.cva({
 const iconPalette = {
     ...uiDesignTokens.intentPalette,
     ...uiDesignTokens.generalPalette,
+    ...uiDesignTokens.aiPalette,
     ...uiDesignTokens.criticalityPalette,
     ...uiDesignTokens.activityPalette,
     ...uiDesignTokens.utilizationPalette,
@@ -1833,6 +1835,15 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cva({
 const cvaIconButton = cssClassVarianceUtilities.cva({
     base: [],
     variants: {
+        ai: {
+            true: [
+                "bg-ai",
+                "hover:bg-[color-mix(in_srgb,var(--color-ai),black_10%)]",
+                "active:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
+                "focus:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
+            ],
+            false: [],
+        },
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -2604,9 +2615,9 @@ const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
  * @param {IconButtonProps} props - The props for the IconButton component
  * @returns {ReactElement} IconButton component
  */
-const IconButton = ({ icon, size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
+const IconButton = ({ icon, variant = "primary", size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined }) }));
+    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, ai: variant === "ai", className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant === "ai" ? "primary" : variant }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -5396,6 +5407,7 @@ const cvaHighlight = cssClassVarianceUtilities.cva({
         "inline-flex",
         "justify-center",
         "items-center",
+        "gap-1",
         "rounded",
         "py-0.5",
         "px-1",
@@ -5461,11 +5473,19 @@ const cvaHighlightText = cssClassVarianceUtilities.cva({ base: ["truncate"] });
  *   </div>
  * );
  * ```
+ * @example Highlight with a leading icon
+ * ```tsx
+ * import { Highlight } from "@trackunit/react-components";
+ *
+ * const LastSeen = () => (
+ *   <Highlight color="danger" iconName="MapPin">3 days ago</Highlight>
+ * );
+ * ```
  * @param {HighlightProps} props - The props for the Highlight component
  * @returns {ReactElement} Highlight component
  */
-const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", style, ref, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) }));
+const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", iconName = undefined, style, ref, }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, style: style, children: [iconName !== undefined ? jsxRuntime.jsx(Icon, { ariaHidden: true, name: iconName, size: "small" }) : null, children !== undefined && children !== null ? jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) : null] }));
 };
 Highlight.displayName = "Highlight";
 

package/index.esm.js

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, validateState, writeToStorage, readFromStorage, storageSerializer, filterByMultiple } from '@trackunit/shared-utils';
 export { storageSerializer } from '@trackunit/shared-utils';
 import { useRef, useMemo, useEffect, useSyncExternalStore, useState, useLayoutEffect, createContext, useContext, isValidElement, cloneElement, createElement, useCallback, Fragment as Fragment$1, memo, forwardRef, useId, useReducer, Children } from 'react';
-import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
+import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, aiPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -80,6 +80,7 @@ const cvaIcon = cva({
     variants: {
         color: {
             primary: "text-primary-600",
+            ai: "text-ai",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -141,6 +142,7 @@ const cvaIcon = cva({
 const iconPalette = {
     ...intentPalette,
     ...generalPalette,
+    ...aiPalette,
     ...criticalityPalette,
     ...activityPalette,
     ...utilizationPalette,
@@ -1832,6 +1834,15 @@ const cvaButtonPrefixSuffix = cva({
 const cvaIconButton = cva({
     base: [],
     variants: {
+        ai: {
+            true: [
+                "bg-ai",
+                "hover:bg-[color-mix(in_srgb,var(--color-ai),black_10%)]",
+                "active:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
+                "focus:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
+            ],
+            false: [],
+        },
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -2603,9 +2614,9 @@ const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
  * @param {IconButtonProps} props - The props for the IconButton component
  * @returns {ReactElement} IconButton component
  */
-const IconButton = ({ icon, size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
+const IconButton = ({ icon, variant = "primary", size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined }) }));
+    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, ai: variant === "ai", className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant === "ai" ? "primary" : variant }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -5395,6 +5406,7 @@ const cvaHighlight = cva({
         "inline-flex",
         "justify-center",
         "items-center",
+        "gap-1",
         "rounded",
         "py-0.5",
         "px-1",
@@ -5460,11 +5472,19 @@ const cvaHighlightText = cva({ base: ["truncate"] });
  *   </div>
  * );
  * ```
+ * @example Highlight with a leading icon
+ * ```tsx
+ * import { Highlight } from "@trackunit/react-components";
+ *
+ * const LastSeen = () => (
+ *   <Highlight color="danger" iconName="MapPin">3 days ago</Highlight>
+ * );
+ * ```
  * @param {HighlightProps} props - The props for the Highlight component
  * @returns {ReactElement} Highlight component
  */
-const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", style, ref, }) => {
-    return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, style: style, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
+const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", iconName = undefined, style, ref, }) => {
+    return (jsxs("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, style: style, children: [iconName !== undefined ? jsx(Icon, { ariaHidden: true, name: iconName, size: "small" }) : null, children !== undefined && children !== null ? jsx("span", { className: cvaHighlightText(), children: children }) : null] }));
 };
 Highlight.displayName = "Highlight";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.13.23-alpha-12adfed37e0.0",
+  "version": "2.13.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.33-alpha-12adfed37e0.0",
-    "@trackunit/css-class-variance-utilities": "2.0.14-alpha-12adfed37e0.0",
-    "@trackunit/shared-utils": "1.16.49-alpha-12adfed37e0.0",
-    "@trackunit/ui-icons": "1.14.42-alpha-12adfed37e0.0",
+    "@trackunit/ui-design-tokens": "1.15.34",
+    "@trackunit/css-class-variance-utilities": "2.0.14",
+    "@trackunit/shared-utils": "1.16.49",
+    "@trackunit/ui-icons": "1.14.43",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.62-alpha-12adfed37e0.0"
+    "@trackunit/i18n-library-translation": "2.4.63"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -1,3 +1,4 @@
+import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
@@ -17,6 +18,13 @@ export interface HighlightProps extends CommonProps, Styleable, Refable<HTMLDivE
      * The content of the highlight. Accepts any valid React children (text, numbers, elements).
      */
     children?: ReactNode;
+    /**
+     * Optional icon. When omitted, the highlight renders as text only. When provided,
+     * an icon is rendered before the highlight's content. The icon is always rendered
+     * at the "small" (16px) size regardless of the highlight's `size` — a medium
+     * highlight with a full-size medium icon reads as visually top-heavy.
+     */
+    iconName?: IconName;
 }
 /**
  * Highlight draws visual attention to data values that may require user action, monitoring, or investigation.
@@ -51,10 +59,18 @@ export interface HighlightProps extends CommonProps, Styleable, Refable<HTMLDivE
  *   </div>
  * );
  * ```
+ * @example Highlight with a leading icon
+ * ```tsx
+ * import { Highlight } from "@trackunit/react-components";
+ *
+ * const LastSeen = () => (
+ *   <Highlight color="danger" iconName="MapPin">3 days ago</Highlight>
+ * );
+ * ```
  * @param {HighlightProps} props - The props for the Highlight component
  * @returns {ReactElement} Highlight component
  */
 export declare const Highlight: {
-    ({ className, "data-testid": dataTestId, children, size, color, style, ref, }: HighlightProps): ReactElement;
+    ({ className, "data-testid": dataTestId, children, size, color, iconName, style, ref, }: HighlightProps): ReactElement;
     displayName: string;
 };

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

@@ -1,4 +1,4 @@
-import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, AiColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEventHandler, ReactElement } from "react";
 import { AriaProps } from "../../common/AriaProps";
@@ -6,7 +6,7 @@ import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 import type { Styleable } from "../../common/Styleable";
-export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
+export type IconColors = IntentColors | AiColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
     ON_RENT: {
         readonly 100: "219 234 254";
@@ -163,6 +163,9 @@ export declare const iconPalette: {
         readonly 600: "220 38 38";
         readonly 700: "185 28 28";
     };
+    AI: {
+        readonly DEFAULT: "249 66 58";
+    };
     PRIMARY: {
         readonly 50: "239 246 255";
         readonly 100: "219 234 254";
@@ -242,7 +245,7 @@ export declare const iconPalette: {
         readonly 900: "127 29 29";
     };
 };
-export declare const iconColorNames: ("black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
+export declare const iconColorNames: ("black" | "white" | "active" | "primary" | "ai" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";

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

@@ -3,6 +3,7 @@ export declare const cvaIcon: import("cva").CVAComponent<Omit<{
     variants: {
         color: {
             primary: string;
+            ai: string;
             neutral: string;
             info: string;
             success: string;
@@ -71,6 +72,7 @@ export declare const cvaIcon: import("cva").CVAComponent<Omit<{
     variants: {
         color: {
             primary: string;
+            ai: string;
             neutral: string;
             info: string;
             success: string;
@@ -125,6 +127,7 @@ export declare const cvaIcon: import("cva").CVAComponent<Omit<{
 }, {
     color: {
         primary: string;
+        ai: string;
         neutral: string;
         info: string;
         success: string;

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -4,7 +4,7 @@ import { Refable } from "../../../common/Refable";
 import { Icon, IconProps } from "../../Icon/Icon";
 import { ButtonCommonProps } from "../shared/ButtonProps";
 import { IconButtonSize } from "../shared/IconButtonSize";
-interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel" | "size" | "title">, Refable<HTMLButtonElement>, Refable<HTMLButtonElement> {
+interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel" | "size" | "title" | "variant">, Refable<HTMLButtonElement>, Refable<HTMLButtonElement> {
     /**
      * The icon to display. Must be an `<Icon />` element.
      */
@@ -21,6 +21,8 @@ interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel"
      * single text line.
      */
     size?: IconButtonSize;
+    /** The button appearance, including the AI icon-only treatment. */
+    variant?: ButtonCommonProps["variant"] | "ai";
 }
 type IconButtonAccessibleNameProps = {
     /**
@@ -85,7 +87,7 @@ export type IconButtonProps = IconButtonBaseProps & IconButtonAccessibleNameProp
  * @returns {ReactElement} IconButton component
  */
 export declare const IconButton: {
-    ({ icon, size, square, loading, disabled, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }: IconButtonProps): ReactElement;
+    ({ icon, variant, size, square, loading, disabled, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }: IconButtonProps): ReactElement;
     displayName: string;
 };
 export {};

package/src/components/buttons/shared/Button.variants.d.ts

@@ -336,6 +336,10 @@ export declare const cvaButtonPrefixSuffix: import("cva").CVAComponent<Omit<{
 export declare const cvaIconButton: import("cva").CVAComponent<Omit<{
     base: never[];
     variants: {
+        ai: {
+            true: string[];
+            false: never[];
+        };
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -355,6 +359,10 @@ export declare const cvaIconButton: import("cva").CVAComponent<Omit<{
     };
 }, "defaultVariants"> & {
     variants: {
+        ai: {
+            true: string[];
+            false: never[];
+        };
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -373,6 +381,10 @@ export declare const cvaIconButton: import("cva").CVAComponent<Omit<{
         size: "medium";
     };
 }, {
+    ai: {
+        true: string[];
+        false: never[];
+    };
     size: {
         /**
          * Sized to match a single text line (20px) so the button fits inside