@mlw-packages/react-components 1.9.3 → 1.9.4

package/dist/index.css

@@ -1118,6 +1118,9 @@ body {
 .w-1\.5 {
   width: 0.375rem;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -1382,9 +1385,6 @@ body {
 .max-w-\[1100px\] {
   max-width: 1100px;
 }
-.max-w-\[120px\] {
-  max-width: 120px;
-}
 .max-w-\[210px\] {
   max-width: 210px;
 }
@@ -2992,6 +2992,9 @@ body {
 .pl-24 {
   padding-left: 6rem;
 }
+.pl-3 {
+  padding-left: 0.75rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
@@ -6215,12 +6218,6 @@ body {
   .sm\:mb-2 {
     margin-bottom: 0.5rem;
   }
-  .sm\:ml-3 {
-    margin-left: 0.75rem;
-  }
-  .sm\:mt-0 {
-    margin-top: 0px;
-  }
   .sm\:inline {
     display: inline;
   }
@@ -6281,9 +6278,6 @@ body {
   .sm\:max-w-md {
     max-width: 28rem;
   }
-  .sm\:max-w-none {
-    max-width: none;
-  }
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -6368,9 +6362,6 @@ body {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
   }
-  .sm\:border-l {
-    border-left-width: 1px;
-  }
   .sm\:p-1\.5 {
     padding: 0.375rem;
   }
@@ -6405,9 +6396,6 @@ body {
   .sm\:pe-4 {
     padding-inline-end: 1rem;
   }
-  .sm\:pl-3 {
-    padding-left: 0.75rem;
-  }
   .sm\:pr-0 {
     padding-right: 0px;
   }

package/dist/index.d.mts

@@ -1988,17 +1988,31 @@ interface Props {
 }
 declare const TooltipSimple: React__default.FC<Props>;
 
+interface IntegrationProperties {
+    tipo?: string;
+    Tipo?: string;
+    Setor?: string;
+    Destino?: string;
+    Contato?: string;
+    Ambiente?: string;
+    Nome?: string;
+    Protocolos?: string;
+    Sustentacao?: string;
+    Origem?: string;
+}
 interface Connection {
     id: string;
     name: string;
     type: "entrada" | "saida";
     status?: "active" | "inactive" | "warning";
+    integration?: IntegrationProperties;
 }
 interface SystemData {
     name: string;
-    description: string;
+    description?: string;
     connections: Connection[];
 }
+
 interface Position$1 {
     top: number;
     left: number;
@@ -2008,6 +2022,7 @@ interface SystemTooltipProps {
     data: SystemData;
     position: Position$1;
     title?: string;
+    isLoading?: boolean;
     onMouseDown?: (id: string, e: React__default.MouseEvent | React__default.TouchEvent) => void;
     onClose: (id: string) => void;
     onPositionChange?: (id: string, position: Position$1) => void;

package/dist/index.d.ts

@@ -1988,17 +1988,31 @@ interface Props {
 }
 declare const TooltipSimple: React__default.FC<Props>;
 
+interface IntegrationProperties {
+    tipo?: string;
+    Tipo?: string;
+    Setor?: string;
+    Destino?: string;
+    Contato?: string;
+    Ambiente?: string;
+    Nome?: string;
+    Protocolos?: string;
+    Sustentacao?: string;
+    Origem?: string;
+}
 interface Connection {
     id: string;
     name: string;
     type: "entrada" | "saida";
     status?: "active" | "inactive" | "warning";
+    integration?: IntegrationProperties;
 }
 interface SystemData {
     name: string;
-    description: string;
+    description?: string;
     connections: Connection[];
 }
+
 interface Position$1 {
     top: number;
     left: number;
@@ -2008,6 +2022,7 @@ interface SystemTooltipProps {
     data: SystemData;
     position: Position$1;
     title?: string;
+    isLoading?: boolean;
     onMouseDown?: (id: string, e: React__default.MouseEvent | React__default.TouchEvent) => void;
     onClose: (id: string) => void;
     onPositionChange?: (id: string, position: Position$1) => void;

package/dist/index.js

@@ -14346,6 +14346,42 @@ var computeYAxisTickWidth = (chartMarginLeft, yAxisLabel, axisLabelMargin, yTick
   const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
   return estimated;
 };
+var CustomYAxisTick = (props) => {
+  const { x = 0, y = 0, payload } = props;
+  const text = String(payload?.value || "");
+  const maxCharsPerLine = 20;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  words.forEach((word) => {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    if (testLine.length > maxCharsPerLine && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  const lineHeight = 12;
+  const totalHeight = lines.length * lineHeight;
+  const startY = y - totalHeight / 2 + lineHeight / 2;
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x,
+      y: startY + index * lineHeight,
+      textAnchor: "end",
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 11,
+      children: line
+    },
+    index
+  )) });
+};
+var CustomYAxisTick_default = CustomYAxisTick;
 var menuVariants = {
   hidden: { opacity: 0, y: -6, scale: 0.98 },
   visible: { opacity: 1, y: 0, scale: 1 },
@@ -15631,12 +15667,14 @@ var SystemTooltip = ({
   data,
   position,
   title = "Conex\xF5es",
+  isLoading = false,
   onMouseDown,
   onClose,
   onPositionChange
 }) => {
   const [localPos, setLocalPos] = React33.useState(position);
   const [dragging, setDragging] = React33.useState(false);
+  const [expandedId, setExpandedId] = React33.useState(null);
   const offsetRef = React33.useRef({ x: 0, y: 0 });
   const lastMouse = React33.useRef({ x: 0, y: 0 });
   React33.useEffect(() => setLocalPos(position), [position]);
@@ -15758,54 +15796,157 @@ var SystemTooltip = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-4 pb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-4 pb-3", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-6 w-3/4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-4 w-1/2" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-foreground tracking-tight truncate", children: data.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold text-muted-foreground tracking-tight truncate", children: data.description })
-        ] }),
+          data.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground tracking-tight truncate", children: data.description })
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-4 space-y-4 max-h-[300px] overflow-y-auto [&::-webkit-scrollbar]:w- [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
           /* @__PURE__ */ jsxRuntime.jsx(SeparatorBase, { className: "w-full" }),
-          entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    react.ArrowRight,
-                    {
-                      size: 14,
-                      className: "text-emerald-500 shrink-0 rotate-180"
-                    }
-                  )
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          exits.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: [1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-emerald-500 shrink-0 rotate-180"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowRight, { size: 14, className: "text-blue-500 shrink-0" })
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          data.connections.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+            exits.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-blue-500 shrink-0"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
+            ] }),
+            data.connections.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+          ] })
         ] })
       ]
     },
@@ -16065,10 +16206,10 @@ var HorizontalLegend = ({
     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
     return legendUppercase ? label.toUpperCase() : label;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-wrap", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
     allKeys.map((key) => {
       const displayLabel = formatLegendLabel(key);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -16076,10 +16217,10 @@ var HorizontalLegend = ({
             style: { backgroundColor: finalColors[key] }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] break-words", children: displayLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] whitespace-nowrap", children: displayLabel })
       ] }, key);
     }),
-    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center mt-2 sm:mt-0 sm:ml-3 sm:pl-3 md:ml-4 md:pl-4 sm:border-l border-border", children: [
+    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 ml-3 pl-3 md:ml-4 md:pl-4 border-l border-border flex-shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           react.FunnelSimpleIcon,
@@ -16088,7 +16229,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: maxPeriodLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: maxPeriodLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -16098,7 +16239,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: minPeriodLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: minPeriodLabel })
       ] })
     ] })
   ] }) });
@@ -17206,23 +17347,27 @@ var Chart = ({
   const CONTAINER_PADDING_LEFT = -6;
   const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
   const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
-  const yAxisTickWidth = React33.useMemo(
-    () => computeYAxisTickWidth(
+  const yAxisTickWidth = React33.useMemo(() => {
+    if (horizontal) {
+      if (typeof chartMargin?.left === "number") return chartMargin.left;
+      return 130;
+    }
+    return computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
       AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
-    ),
-    [
-      chartMargin?.left,
-      yAxisLabel,
-      yTickFormatter,
-      minLeftDataValue,
-      niceMaxLeft
-    ]
-  );
+    );
+  }, [
+    horizontal,
+    chartMargin?.left,
+    yAxisLabel,
+    yTickFormatter,
+    minLeftDataValue,
+    niceMaxLeft
+  ]);
   const HORIZONTAL_PADDING_CLASS = "px-24";
   const teste = "pl-24 pr-4";
   const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
@@ -17264,14 +17409,43 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      NoData_default,
-      {
-        title,
-        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NoData_default,
+        {
+          title,
+          paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+          height
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: effectiveChartWidth, height, children: [
+        xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: effectiveChartWidth - 40,
+            y: height - 10,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "end",
+            children: xAxisLabel
+          }
+        ),
+        yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: 20,
+            y: 40,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "start",
+            transform: `rotate(-90 20 40)`,
+            children: yAxisLabel
+          }
+        )
+      ] }) })
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -17487,9 +17661,10 @@ var Chart = ({
                             yAxisId: "left",
                             width: yAxisTickWidth,
                             stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
+                            fontSize: 11,
                             tickLine: false,
                             axisLine: false,
+                            tick: /* @__PURE__ */ jsxRuntime.jsx(CustomYAxisTick_default, { width: yAxisTickWidth - 10 }),
                             tickFormatter: (value) => {
                               if (categoryFormatter)
                                 return categoryFormatter(value);

package/dist/index.mjs

@@ -14303,6 +14303,42 @@ var computeYAxisTickWidth = (chartMarginLeft, yAxisLabel, axisLabelMargin, yTick
   const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
   return estimated;
 };
+var CustomYAxisTick = (props) => {
+  const { x = 0, y = 0, payload } = props;
+  const text = String(payload?.value || "");
+  const maxCharsPerLine = 20;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  words.forEach((word) => {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    if (testLine.length > maxCharsPerLine && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  const lineHeight = 12;
+  const totalHeight = lines.length * lineHeight;
+  const startY = y - totalHeight / 2 + lineHeight / 2;
+  return /* @__PURE__ */ jsx("g", { children: lines.map((line, index) => /* @__PURE__ */ jsx(
+    "text",
+    {
+      x,
+      y: startY + index * lineHeight,
+      textAnchor: "end",
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 11,
+      children: line
+    },
+    index
+  )) });
+};
+var CustomYAxisTick_default = CustomYAxisTick;
 var menuVariants = {
   hidden: { opacity: 0, y: -6, scale: 0.98 },
   visible: { opacity: 1, y: 0, scale: 1 },
@@ -15588,12 +15624,14 @@ var SystemTooltip = ({
   data,
   position,
   title = "Conex\xF5es",
+  isLoading = false,
   onMouseDown,
   onClose,
   onPositionChange
 }) => {
   const [localPos, setLocalPos] = useState(position);
   const [dragging, setDragging] = useState(false);
+  const [expandedId, setExpandedId] = useState(null);
   const offsetRef = useRef({ x: 0, y: 0 });
   const lastMouse = useRef({ x: 0, y: 0 });
   useEffect(() => setLocalPos(position), [position]);
@@ -15715,54 +15753,157 @@ var SystemTooltip = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-3", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-6 w-3/4" }),
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-4 w-1/2" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-foreground tracking-tight truncate", children: data.name }),
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-muted-foreground tracking-tight truncate", children: data.description })
-        ] }),
+          data.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground tracking-tight truncate", children: data.description })
+        ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "px-3 pb-4 space-y-4 max-h-[300px] overflow-y-auto [&::-webkit-scrollbar]:w- [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
           /* @__PURE__ */ jsx(SeparatorBase, { className: "w-full" }),
-          entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    ArrowRight,
-                    {
-                      size: 14,
-                      className: "text-emerald-500 shrink-0 rotate-180"
-                    }
-                  )
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          exits.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-emerald-500 shrink-0 rotate-180"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  /* @__PURE__ */ jsx(ArrowRight, { size: 14, className: "text-blue-500 shrink-0" })
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          data.connections.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+            exits.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-blue-500 shrink-0"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
+            ] }),
+            data.connections.length === 0 && !isLoading && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+          ] })
         ] })
       ]
     },
@@ -16022,10 +16163,10 @@ var HorizontalLegend = ({
     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
     return legendUppercase ? label.toUpperCase() : label;
   };
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-wrap", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
     allKeys.map((key) => {
       const displayLabel = formatLegendLabel(key);
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -16033,10 +16174,10 @@ var HorizontalLegend = ({
             style: { backgroundColor: finalColors[key] }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] break-words", children: displayLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] whitespace-nowrap", children: displayLabel })
       ] }, key);
     }),
-    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center mt-2 sm:mt-0 sm:ml-3 sm:pl-3 md:ml-4 md:pl-4 sm:border-l border-border", children: [
+    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 ml-3 pl-3 md:ml-4 md:pl-4 border-l border-border flex-shrink-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsx(
           FunnelSimpleIcon,
@@ -16045,7 +16186,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: maxPeriodLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: maxPeriodLabel })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsx(
@@ -16055,7 +16196,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: minPeriodLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: minPeriodLabel })
       ] })
     ] })
   ] }) });
@@ -17163,23 +17304,27 @@ var Chart = ({
   const CONTAINER_PADDING_LEFT = -6;
   const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
   const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
-  const yAxisTickWidth = useMemo(
-    () => computeYAxisTickWidth(
+  const yAxisTickWidth = useMemo(() => {
+    if (horizontal) {
+      if (typeof chartMargin?.left === "number") return chartMargin.left;
+      return 130;
+    }
+    return computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
       AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
-    ),
-    [
-      chartMargin?.left,
-      yAxisLabel,
-      yTickFormatter,
-      minLeftDataValue,
-      niceMaxLeft
-    ]
-  );
+    );
+  }, [
+    horizontal,
+    chartMargin?.left,
+    yAxisLabel,
+    yTickFormatter,
+    minLeftDataValue,
+    niceMaxLeft
+  ]);
   const HORIZONTAL_PADDING_CLASS = "px-24";
   const teste = "pl-24 pr-4";
   const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
@@ -17221,14 +17366,43 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsx(
-      NoData_default,
-      {
-        title,
-        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        NoData_default,
+        {
+          title,
+          paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+          height
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { height: 0 }, children: /* @__PURE__ */ jsxs("svg", { width: effectiveChartWidth, height, children: [
+        xAxisLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: effectiveChartWidth - 40,
+            y: height - 10,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "end",
+            children: xAxisLabel
+          }
+        ),
+        yAxisLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: 20,
+            y: 40,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "start",
+            transform: `rotate(-90 20 40)`,
+            children: yAxisLabel
+          }
+        )
+      ] }) })
+    ] });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -17444,9 +17618,10 @@ var Chart = ({
                             yAxisId: "left",
                             width: yAxisTickWidth,
                             stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
+                            fontSize: 11,
                             tickLine: false,
                             axisLine: false,
+                            tick: /* @__PURE__ */ jsx(CustomYAxisTick_default, { width: yAxisTickWidth - 10 }),
                             tickFormatter: (value) => {
                               if (categoryFormatter)
                                 return categoryFormatter(value);

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.3",
+  "version": "1.9.4",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",