@trackunit/react-components 0.1.146 → 0.1.147

package/index.cjs.js

@@ -18936,6 +18936,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
+const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19036,7 +19067,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, 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" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsxRuntime.jsx(Tooltip, { disabled: withLabel, label: label, children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, 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" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -38835,37 +38866,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
-const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
     variants: {
         size: {

package/index.esm.js

@@ -18909,6 +18909,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cvaMerge("inline-flex");
+const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
+cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19009,7 +19040,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, 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" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsx(Tooltip, { disabled: withLabel, label: label, children: jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, 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" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -38808,37 +38839,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cvaMerge("inline-flex");
-const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
-cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cvaMerge(["w-full"], {
     variants: {
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.146",
+  "version": "0.1.147",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {