@trackunit/react-components 1.7.6 → 1.7.8

package/index.cjs.js

@@ -51,24 +51,24 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             default: "text-current",
             black: "text-black",
             white: "text-white",
-            unused: "text-unused-500",
+            unused: "text-unused-400",
             utilized: "text-utilized-600",
             heavily_utilized: "text-heavily_utilized-500",
-            unknown_utilization: "text-unknown-600",
+            unknown_utilization: "text-unknown_utilization-600",
             site_area: "text-site_area-600",
-            site_classic_poi: "text-site_classic_poi-500",
-            site_classic_zone: "text-site_classic_zone-500",
+            site_classic_poi: "text-site_classic_poi-600",
+            site_classic_zone: "text-site_classic_zone-600",
             site_depot: "text-site_depot-500",
             site_work_place: "text-site_work_place-600",
             site_construction_site: "text-site_construction_site-500",
-            site_unknown: "text-site_unknown-500",
-            on_rent: "text-on_rent-600",
-            returned: "text-returned-600",
-            available: "text-available-600",
-            pickup_ready: "text-pickup_ready-600",
-            transfer: "text-transfer-400",
-            in_repair: "text-in_repair-600",
-            other_rental_status: "text-other_rental_status-600",
+            site_unknown: "text-site_unknown-600",
+            on_rent: "text-on_rent-400",
+            returned: "text-returned-500",
+            available: "text-available-500",
+            pickup_ready: "text-pickup_ready-500",
+            transfer: "text-transfer-300",
+            in_repair: "text-in_repair-400",
+            other_rental_status: "text-other_rental_status-500",
         },
         size: {
             small: "w-4",
@@ -2230,9 +2230,12 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
     "truncate",
     "max-w-full",
     "w-fit",
-    "text-xs",
 ], {
     variants: {
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+        },
         color: {
             info: ["bg-info-100", "text-info-700"],
             success: ["bg-success-100", "text-success-700"],
@@ -2242,6 +2245,7 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
         },
     },
     defaultVariants: {
+        size: "small",
         color: "warning",
     },
 });
@@ -2258,8 +2262,8 @@ const cvaHighlightText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
  * @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 }) }));
+const Highlight = ({ className, dataTestId, children, size = "small", color = "warning", ref, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
 

package/index.esm.js

@@ -49,24 +49,24 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             default: "text-current",
             black: "text-black",
             white: "text-white",
-            unused: "text-unused-500",
+            unused: "text-unused-400",
             utilized: "text-utilized-600",
             heavily_utilized: "text-heavily_utilized-500",
-            unknown_utilization: "text-unknown-600",
+            unknown_utilization: "text-unknown_utilization-600",
             site_area: "text-site_area-600",
-            site_classic_poi: "text-site_classic_poi-500",
-            site_classic_zone: "text-site_classic_zone-500",
+            site_classic_poi: "text-site_classic_poi-600",
+            site_classic_zone: "text-site_classic_zone-600",
             site_depot: "text-site_depot-500",
             site_work_place: "text-site_work_place-600",
             site_construction_site: "text-site_construction_site-500",
-            site_unknown: "text-site_unknown-500",
-            on_rent: "text-on_rent-600",
-            returned: "text-returned-600",
-            available: "text-available-600",
-            pickup_ready: "text-pickup_ready-600",
-            transfer: "text-transfer-400",
-            in_repair: "text-in_repair-600",
-            other_rental_status: "text-other_rental_status-600",
+            site_unknown: "text-site_unknown-600",
+            on_rent: "text-on_rent-400",
+            returned: "text-returned-500",
+            available: "text-available-500",
+            pickup_ready: "text-pickup_ready-500",
+            transfer: "text-transfer-300",
+            in_repair: "text-in_repair-400",
+            other_rental_status: "text-other_rental_status-500",
         },
         size: {
             small: "w-4",
@@ -2228,9 +2228,12 @@ const cvaHighlight = cvaMerge([
     "truncate",
     "max-w-full",
     "w-fit",
-    "text-xs",
 ], {
     variants: {
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+        },
         color: {
             info: ["bg-info-100", "text-info-700"],
             success: ["bg-success-100", "text-success-700"],
@@ -2240,6 +2243,7 @@ const cvaHighlight = cvaMerge([
         },
     },
     defaultVariants: {
+        size: "small",
         color: "warning",
     },
 });
@@ -2256,8 +2260,8 @@ const cvaHighlightText = cvaMerge(["truncate"]);
  * @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 }) }));
+const Highlight = ({ className, dataTestId, children, size = "small", color = "warning", ref, }) => {
+    return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "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.6.6",
-    "@trackunit/css-class-variance-utilities": "1.6.5",
-    "@trackunit/shared-utils": "1.8.5",
-    "@trackunit/ui-icons": "1.6.5",
-    "@trackunit/react-table-pagination": "1.6.5",
-    "@trackunit/react-test-setup": "1.3.5"
+    "@trackunit/ui-design-tokens": "1.6.7",
+    "@trackunit/css-class-variance-utilities": "1.6.6",
+    "@trackunit/shared-utils": "1.8.6",
+    "@trackunit/ui-icons": "1.6.6",
+    "@trackunit/react-table-pagination": "1.6.6",
+    "@trackunit/react-test-setup": "1.3.6"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -2,6 +2,10 @@ import { ReactNode, Ref } from "react";
 import { CommonProps, Size } from "../../common";
 export type HighlightSize = Extract<Size, "small" | "medium">;
 export interface HighlightProps extends CommonProps {
+    /**
+     * The size of the highlight. Allowed values: "small" (text-xs), "medium" (text-sm).
+     */
+    size?: HighlightSize;
     /**
      * The color of the highlight. Allowed values: "primary", "success", "warning", "danger", "unknown".
      */
@@ -27,6 +31,6 @@ export interface HighlightProps extends CommonProps {
  * @returns {ReactElement} highlight component
  */
 export declare const Highlight: {
-    ({ className, dataTestId, children, color, ref }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, dataTestId, children, size, color, ref, }: HighlightProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1,4 +1,5 @@
 export declare const cvaHighlight: (props?: ({
+    size?: "small" | "medium" | null | undefined;
     color?: "info" | "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;