@trackunit/react-components 1.4.58 → 1.4.61

package/index.cjs.js

@@ -86,7 +86,7 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
     ],
     defaultVariants: {
         color: "default",
-        size: "large",
+        size: "medium",
     },
 });
 cssClassVarianceUtilities.cvaMerge([], {
@@ -134,7 +134,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = react.useRef(null);
     const ICON_CONTAINER_ID = sharedUtils.uuidv4();
     const correctIconType = react.useMemo(() => {
@@ -2563,20 +2563,25 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize", "text-secondary-600"], {
+const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize"], {
     variants: {
         size: {
-            small: "pl-1 pr-1 text-xs",
-            medium: "pl-2 pr-2 text-sm",
+            small: "text-xs",
+            medium: "text-sm",
         },
         weight: {
             normal: "font-normal",
             medium: "font-medium",
         },
+        background: {
+            visible: "pl-2 pr-1",
+            hidden: "pl-1 pr-1",
+        },
     },
     defaultVariants: {
         size: "medium",
         weight: "medium",
+        background: "visible",
     },
 });
 const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
@@ -2685,7 +2690,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {

package/index.esm.js

@@ -84,7 +84,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
     ],
     defaultVariants: {
         color: "default",
-        size: "large",
+        size: "medium",
     },
 });
 cvaMerge([], {
@@ -132,7 +132,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = uuidv4();
     const correctIconType = useMemo(() => {
@@ -2561,20 +2561,25 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cvaMerge(["capitalize", "text-secondary-600"], {
+const cvaIndicatorLabel = cvaMerge(["capitalize"], {
     variants: {
         size: {
-            small: "pl-1 pr-1 text-xs",
-            medium: "pl-2 pr-2 text-sm",
+            small: "text-xs",
+            medium: "text-sm",
         },
         weight: {
             normal: "font-normal",
             medium: "font-medium",
         },
+        background: {
+            visible: "pl-2 pr-1",
+            hidden: "pl-1 pr-1",
+        },
     },
     defaultVariants: {
         size: "medium",
         weight: "medium",
+        background: "visible",
     },
 });
 const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
@@ -2683,7 +2688,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.58",
+  "version": "1.4.61",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.48",
-    "@trackunit/css-class-variance-utilities": "1.3.48",
-    "@trackunit/shared-utils": "1.5.48",
-    "@trackunit/ui-icons": "1.3.48",
-    "@trackunit/react-table-pagination": "1.3.49"
+    "@trackunit/ui-design-tokens": "1.3.49",
+    "@trackunit/css-class-variance-utilities": "1.3.49",
+    "@trackunit/shared-utils": "1.5.49",
+    "@trackunit/ui-icons": "1.3.49",
+    "@trackunit/react-table-pagination": "1.3.50"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -3,6 +3,7 @@ export declare const cvaIndicatorIcon: (props?: import("class-variance-authority
 export declare const cvaIndicatorLabel: (props?: ({
     size?: "small" | "medium" | null | undefined;
     weight?: "medium" | "normal" | null | undefined;
+    background?: "visible" | "hidden" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
     color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;