@mlw-packages/react-components 1.7.13 → 1.7.14

package/dist/index.js

@@ -500,9 +500,9 @@ __export(index_exports, {
   AlertDialogTitleBase: () => AlertDialogTitleBase,
   AlertDialogTriggerBase: () => AlertDialogTriggerBase,
   AvatarBase: () => AvatarBase,
+  AvatarCombobox: () => AvatarCombobox,
   AvatarFallbackBase: () => AvatarFallbackBase,
   AvatarImageBase: () => AvatarImageBase,
-  AvatarSelect: () => AvatarSelect,
   BackButton: () => BackButton,
   Badge: () => Badge,
   BarChart: () => BarChart_default,
@@ -1289,6 +1289,7 @@ function ComboboxBase({
   renderSelected,
   handleSelection,
   checkIsSelected,
+  disabled = false,
   keepOpen = false,
   closeAll,
   searchPlaceholder,
@@ -1303,111 +1304,124 @@ function ComboboxBase({
       className: "col-span-1 w-full",
       "data-testid": testIds.root ?? "combobox-base-root",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            PopoverTriggerBase,
-            {
-              asChild: true,
-              className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                ButtonBase,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          PopoverBase,
+          {
+            open,
+            onOpenChange: (v) => !disabled && setOpen(v),
+            modal: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                PopoverTriggerBase,
                 {
-                  variant: "select",
-                  size: "select",
-                  role: "combobox",
-                  "aria-expanded": open,
-                  className: cn(
-                    "flex items-center gap-2 justify-between h-auto [&>div]:line-clamp-1 [&>span]:line-clamp-1",
-                    error && "border-red-500"
-                  ),
-                  "data-testid": testIds.trigger ?? "combobox-trigger",
-                  children: [
-                    renderSelected,
-                    closeAll,
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      import_framer_motion2.motion.div,
-                      {
-                        animate: { rotate: open ? 180 : 0 },
-                        transition: { duration: 0.3 },
-                        className: "flex",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.CaretDownIcon, { className: " flex-shrink-0" })
-                      }
-                    )
-                  ]
+                  asChild: true,
+                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    ButtonBase,
+                    {
+                      variant: "select",
+                      size: "select",
+                      role: "combobox",
+                      "aria-expanded": open,
+                      "aria-disabled": disabled || void 0,
+                      disabled,
+                      className: cn(
+                        "flex items-center gap-2 justify-between h-auto [&>div]:line-clamp-1 [&>span]:line-clamp-1",
+                        error && "border-red-500"
+                      ),
+                      "data-testid": testIds.trigger ?? "combobox-trigger",
+                      children: [
+                        renderSelected,
+                        closeAll,
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          import_framer_motion2.motion.div,
+                          {
+                            animate: { rotate: open ? 180 : 0 },
+                            transition: { duration: 0.3 },
+                            className: "flex",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.CaretDownIcon, { className: " flex-shrink-0" })
+                          }
+                        )
+                      ]
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            PopoverContentBase,
-            {
-              className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] p-0 border-none",
-              "data-testid": testIds.popover ?? "combobox-popover",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                CommandBase,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                PopoverContentBase,
                 {
-                  className: "dark:text-white hover:bg-rsecondary",
-                  "data-testid": testIds.command ?? "combobox-command",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      CommandInputBase,
-                      {
-                        tabIndex: -1,
-                        placeholder: searchPlaceholder ?? "Busque uma op\xE7\xE3o...",
-                        "data-testid": testIds.search ?? "combobox-search"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CommandListBase, { "data-testid": testIds.list ?? "combobox-list", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: empty }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
-                        const isSelected = checkIsSelected(item.value);
-                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                          CommandItemBase,
+                  className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] p-0 border-none",
+                  "data-testid": testIds.popover ?? "combobox-popover",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    CommandBase,
+                    {
+                      className: "dark:text-white hover:bg-rsecondary",
+                      "data-testid": testIds.command ?? "combobox-command",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          CommandInputBase,
                           {
-                            keywords: [item.label],
-                            value: item.value,
-                            onSelect: (value) => {
-                              handleSelection(value);
-                              if (!keepOpen) setOpen(false);
-                            },
-                            "data-testid": testIds.option ?? "combobox-option",
-                            children: [
-                              item.label,
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                import_framer_motion2.motion.div,
-                                {
-                                  initial: { scale: 0 },
-                                  animate: { scale: isSelected ? 1 : 0 },
-                                  transition: {
-                                    type: "spring",
-                                    stiffness: 500,
-                                    damping: 30
-                                  },
-                                  className: "ml-auto ",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                    import_react5.CheckIcon,
+                            tabIndex: -1,
+                            disabled,
+                            placeholder: searchPlaceholder ?? "Busque uma op\xE7\xE3o...",
+                            "data-testid": testIds.search ?? "combobox-search"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CommandListBase, { "data-testid": testIds.list ?? "combobox-list", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: empty }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
+                            const isSelected = checkIsSelected(item.value);
+                            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                              CommandItemBase,
+                              {
+                                keywords: [item.label],
+                                value: item.value,
+                                onSelect: (value) => {
+                                  if (disabled) return;
+                                  handleSelection(value);
+                                  if (!keepOpen) setOpen(false);
+                                },
+                                disabled,
+                                "data-testid": testIds.option ?? "combobox-option",
+                                children: [
+                                  item.label,
+                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    import_framer_motion2.motion.div,
                                     {
-                                      className: cn(
-                                        "ml-auto",
-                                        isSelected ? "opacity-100" : "opacity-0"
-                                      ),
-                                      "data-testid": isSelected ? testIds.check ?? "combobox-option-check" : void 0
+                                      initial: { scale: 0 },
+                                      animate: { scale: isSelected ? 1 : 0 },
+                                      transition: {
+                                        type: "spring",
+                                        stiffness: 500,
+                                        damping: 30
+                                      },
+                                      className: "ml-auto ",
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                        import_react5.CheckIcon,
+                                        {
+                                          className: cn(
+                                            "ml-auto",
+                                            isSelected ? "opacity-100" : "opacity-0"
+                                          ),
+                                          "data-testid": isSelected ? testIds.check ?? "combobox-option-check" : void 0
+                                        }
+                                      )
                                     }
                                   )
-                                }
-                              )
-                            ]
-                          },
-                          item.value
-                        );
-                      }) })
-                    ] })
-                  ]
+                                ]
+                              },
+                              item.value
+                            );
+                          }) })
+                        ] })
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorMessage_default, { error })
       ]
     }
@@ -1424,6 +1438,7 @@ function Combobox({
   placeholder,
   searchPlaceholder,
   empty,
+  disabled = false,
   label,
   labelClassname,
   testIds,
@@ -1435,11 +1450,15 @@ function Combobox({
       "span",
       {
         "data-testid": testIds?.selected ?? "combobox-selected",
-        className: cn("truncate", !selectedItem && "text-gray-500"),
+        className: cn(
+          "truncate",
+          disabled && "opacity-60 cursor-not-allowed",
+          !selectedItem && "text-gray-500"
+        ),
         children: selectedItem?.label ?? placeholder ?? "Selecione uma op\xE7\xE3o..."
       }
     );
-  }, [placeholder, selectedItem, testIds?.selected]);
+  }, [placeholder, selectedItem, testIds?.selected, disabled]);
   const checkIsSelected = (0, import_react6.useCallback)(
     (value) => selected == null ? false : selected == value,
     [selected]
@@ -1459,6 +1478,7 @@ function Combobox({
         renderSelected,
         handleSelection,
         checkIsSelected,
+        disabled,
         searchPlaceholder,
         empty,
         error,
@@ -1484,8 +1504,10 @@ function MultiCombobox({
   labelClassname,
   testIds = {},
   error,
+  disabled = false,
   keepOpen = true,
-  showClearAll = false
+  showClearAll = false,
+  empty
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = (0, import_react7.useCallback)(
@@ -1509,7 +1531,9 @@ function MultiCombobox({
       variant: "ghost",
       "data-testid": testIds.clearAll ?? "combobox-clear-all",
       size: "icon",
+      disabled,
       onClick: (e) => {
+        if (disabled) return;
         e.stopPropagation();
         onChange([]);
       },
@@ -1552,15 +1576,19 @@ function MultiCombobox({
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 import_framer_motion3.motion.span,
                 {
-                  role: "button",
-                  tabIndex: 0,
+                  role: disabled ? void 0 : "button",
+                  tabIndex: disabled ? -1 : 0,
                   onClick: (e) => {
+                    if (disabled) return;
                     e.stopPropagation();
                     handleSelection(item.value);
                   },
                   whileHover: { scale: 1.1 },
                   whileTap: { scale: 0.95 },
-                  className: "cursor-pointer text-xs flex items-center justify-center hover:text-red-500 transition-colors flex-shrink-0 rounded hover:bg-red-50 ",
+                  className: cn(
+                    "text-xs flex items-center justify-center transition-colors flex-shrink-0 rounded",
+                    !disabled ? "cursor-pointer hover:text-red-500 hover:bg-red-50" : "opacity-50 pointer-events-none"
+                  ),
                   children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react8.XIcon, { size: 14 })
                 }
               )
@@ -1570,7 +1598,7 @@ function MultiCombobox({
         )) })
       }
     );
-  }, [handleSelection, placeholder, selectedItems, testIds]);
+  }, [handleSelection, placeholder, selectedItems, testIds, disabled]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
@@ -1595,7 +1623,9 @@ function MultiCombobox({
             keepOpen,
             closeAll,
             searchPlaceholder,
-            error
+            error,
+            empty,
+            disabled
           }
         )
       ]
@@ -2200,7 +2230,7 @@ function Select({
   ] });
 }
 
-// src/components/selects/AvatarSelect.tsx
+// src/components/selects/AvatarCombobox.tsx
 var import_react15 = require("react");
 var import_react16 = require("@phosphor-icons/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -2225,14 +2255,14 @@ var Square = ({
   {
     "aria-hidden": "true",
     className: cn(
-      "flex size-5 items-center justify-center rounded bg-muted font-medium text-muted-foreground text-xs",
+      "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-muted font-medium text-muted-foreground leading-none overflow-hidden",
       className
     ),
     "data-square": true,
     children
   }
 );
-function AvatarSelect({
+function AvatarCombobox({
   items,
   groupItems,
   placeholder,
@@ -3519,7 +3549,9 @@ var RechartTooltipWithTotal = ({
   periodLabel = "Per\xEDodo",
   totalLabel = "Total",
   valueFormatter: valueFormatter2,
-  categoryFormatter
+  categoryFormatter,
+  yAxisMap,
+  isBiaxial = false
 }) => {
   if (!active || !payload || payload.length === 0) return null;
   const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -3550,6 +3582,13 @@ var RechartTooltipWithTotal = ({
     (sum, p) => sum + Math.abs(typeof p.value === "number" ? p.value : 0),
     0
   );
+  const axisDenominators = {};
+  if (isBiaxial && yAxisMap) {
+    for (const p of numeric) {
+      const axis = yAxisMap[p.dataKey] || "left";
+      axisDenominators[axis] = (axisDenominators[axis] || 0) + Math.abs(p.value || 0);
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
@@ -3618,7 +3657,12 @@ var RechartTooltipWithTotal = ({
                     children: displayValue
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs text-muted-foreground", children: isBiaxial && yAxisMap ? (() => {
+                  const axis = yAxisMap[entry.dataKey] || "left";
+                  const denom = axisDenominators[axis] || 0;
+                  const p = denom > 0 ? Math.abs(value) / denom * 100 : 0;
+                  return denom > 0 ? `${p.toFixed(1)}%` : "-";
+                })() : absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -3648,7 +3692,9 @@ var TooltipSimple = ({
   finalColors = {},
   periodLabel = "Per\xEDodo",
   valueFormatter: valueFormatter2,
-  categoryFormatter
+  categoryFormatter,
+  yAxisMap,
+  isBiaxial = false
 }) => {
   if (!active || !payload || payload.length === 0) return null;
   const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -3667,6 +3713,17 @@ var TooltipSimple = ({
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "divide-y divide-border rounded-md overflow-hidden", children: payload.map((entry, index) => {
           const value = typeof entry.value === "number" ? entry.value : 0;
           const color = finalColors[entry.dataKey] || entry.color || "#999";
+          let pct = 0;
+          if (isBiaxial && yAxisMap) {
+            const axis = yAxisMap[entry.dataKey] || "left";
+            const axisSum = payload.filter(
+              (p) => (yAxisMap[p.dataKey] || "left") === axis
+            ).reduce(
+              (s, p) => s + Math.abs(typeof p.value === "number" ? p.value : 0),
+              0
+            );
+            pct = axisSum > 0 ? Math.abs(value) / axisSum * 100 : 0;
+          }
           const defaultFormatted = (() => {
             try {
               if (Math.abs(value) < 1e3) {
@@ -3701,13 +3758,16 @@ var TooltipSimple = ({
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-muted-foreground truncate", children: entry.name })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  "span",
-                  {
-                    className: `font-medium tabular-nums ${value < 0 ? "text-destructive" : "text-foreground"}`,
-                    children: displayValue
-                  }
-                ) })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "span",
+                    {
+                      className: `font-medium tabular-nums ${value < 0 ? "text-destructive" : "text-foreground"}`,
+                      children: displayValue
+                    }
+                  ),
+                  isBiaxial ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toFixed(1)}%` : "-" }) : null
+                ] }) })
               ]
             },
             index
@@ -3772,10 +3832,13 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
     const vb = props.viewBox;
     const cxNum = parseNumber(props.cx);
     let centerX;
+    let usedBarCenter = false;
     if (typeof px === "number" && typeof pWidth === "number") {
       centerX = px + pWidth / 2;
+      usedBarCenter = true;
     } else if (typeof xNum === "number" && typeof pWidth === "number") {
       centerX = xNum + pWidth / 2;
+      usedBarCenter = true;
     } else if (typeof cxNum === "number") {
       centerX = cxNum;
     } else if (vb && typeof vb.x === "number" && typeof vb.width === "number" && typeof props.index === "number") {
@@ -3787,32 +3850,26 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
     } else {
       centerX = typeof props.index === "number" ? props.index * 40 + 24 : 0;
     }
-    if (vb && typeof vb.x === "number" && typeof vb.width === "number") {
-      const minX = vb.x + 0 + pillWidth / 22;
-      const maxX = vb.x + vb.width - 2 - pillWidth / 2;
+    if (!usedBarCenter && vb && typeof vb.x === "number" && typeof vb.width === "number") {
+      const minX = vb.x + pillWidth / 2;
+      const maxX = vb.x + vb.width - pillWidth / 2;
       centerX = Math.max(minX, Math.min(maxX, centerX));
     }
     const yNum = parseNumber(y);
     const py = parseNumber(props.y);
     const cyNum = parseNumber(props.cy);
     const centerY = yNum ?? (typeof py === "number" ? py : vb && typeof vb.y === "number" && typeof vb.height === "number" ? vb.y + vb.height / 2 : typeof cyNum === "number" ? cyNum : 0);
-    const rectX = centerX - pillWidth / 3.5;
+    const rectX = centerX - pillWidth / 2;
     const rectY = centerY - pillHeight - 6;
-    const textX = centerX - pillWidth / 3.5 + pillWidth / 2;
+    const textX = centerX;
     const textY = rectY + pillHeight / 2 + 3;
     const rectFill = variant === "filled" ? color : variant === "soft" ? `${color}20` : "#ffffff";
     const rectStroke = variant === "outline" ? `${color}CC` : void 0;
-    const numValue = parseNumber(value);
-    const isNegative = typeof numValue === "number" && numValue < 0;
     let textColor;
-    if (isNegative) {
-      textColor = "#dc2626";
+    if (variant === "filled") {
+      textColor = "#ffffff";
     } else {
-      if (variant === "filled") {
-        textColor = "#ffffff";
-      } else {
-        textColor = "#374151";
-      }
+      textColor = "#374151";
     }
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -3877,7 +3934,10 @@ var Chart = ({
   showTooltipTotal = false,
   maxTooltips = 5,
   formatBR = false,
-  chartMargin
+  chartMargin,
+  yAxisMap,
+  yAxes,
+  periodLabel = "Per\xEDodo"
 }) => {
   const smartConfig = (0, import_react21.useMemo)(() => {
     const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
@@ -4008,6 +4068,70 @@ var Chart = ({
     }
     return min;
   }, [processedData, allKeys]);
+  const leftKeys = (0, import_react21.useMemo)(
+    () => !yAxisMap ? allKeys : allKeys.filter((k) => (yAxisMap?.[k] ?? "left") === "left"),
+    [allKeys, yAxisMap]
+  );
+  const rightKeys = (0, import_react21.useMemo)(
+    () => !yAxisMap ? [] : allKeys.filter((k) => (yAxisMap?.[k] ?? "left") === "right"),
+    [allKeys, yAxisMap]
+  );
+  const maxForKeys = (0, import_react21.useCallback)(
+    (keys) => {
+      let max = 0;
+      for (const row of processedData) {
+        const r = row;
+        for (const key of keys) {
+          const v = r[key];
+          if (typeof v === "number" && Number.isFinite(v) && v > max)
+            max = v;
+        }
+      }
+      return max;
+    },
+    [processedData]
+  );
+  const minForKeys = (0, import_react21.useCallback)(
+    (keys) => {
+      let min = 0;
+      for (const row of processedData) {
+        const r = row;
+        for (const key of keys) {
+          const v = r[key];
+          if (typeof v === "number" && Number.isFinite(v) && v < min)
+            min = v;
+        }
+      }
+      return min;
+    },
+    [processedData]
+  );
+  const maxLeft = (0, import_react21.useMemo)(() => maxForKeys(leftKeys), [leftKeys, maxForKeys]);
+  const minLeft = (0, import_react21.useMemo)(() => minForKeys(leftKeys), [leftKeys, minForKeys]);
+  const maxRight = (0, import_react21.useMemo)(
+    () => rightKeys.length > 0 ? maxForKeys(rightKeys) : 0,
+    [rightKeys, maxForKeys]
+  );
+  const minRight = (0, import_react21.useMemo)(
+    () => rightKeys.length > 0 ? minForKeys(rightKeys) : 0,
+    [rightKeys, minForKeys]
+  );
+  const niceMaxLeft = (0, import_react21.useMemo)(() => {
+    let padding = 0.08;
+    if (maxLeft > 1e6) padding = 0.05;
+    if (maxLeft > 1e7) padding = 0.03;
+    if (maxLeft === 0) padding = 0.12;
+    const padded = maxLeft * (1 + padding);
+    return niceCeil(padded);
+  }, [maxLeft]);
+  const niceMaxRight = (0, import_react21.useMemo)(() => {
+    let padding = 0.08;
+    if (maxRight > 1e6) padding = 0.05;
+    if (maxRight > 1e7) padding = 0.03;
+    if (maxRight === 0) padding = 0.12;
+    const padded = maxRight * (1 + padding);
+    return niceCeil(padded);
+  }, [maxRight]);
   const niceMax = (0, import_react21.useMemo)(() => {
     let padding = 0.08;
     if (maxDataValue > 1e6) padding = 0.05;
@@ -4197,8 +4321,57 @@ var Chart = ({
   const defaultChartRightMargin = 30;
   const defaultChartLeftMargin = 0;
   const containerPaddingLeft = 16;
-  const finalChartRightMargin = chartMargin?.right ?? defaultChartRightMargin;
-  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? 40 : defaultChartLeftMargin);
+  const estimateTextWidth = (0, import_react21.useCallback)((text) => {
+    const s = String(text ?? "");
+    if (typeof document === "undefined")
+      return Math.min(200, s.length * 8 + 12);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return Math.min(200, s.length * 8 + 12);
+    ctx.font = "12px system-ui, -apple-system, 'Segoe UI', Roboto";
+    const w = Math.ceil(ctx.measureText(s).width) + 12;
+    return Math.min(300, w);
+  }, []);
+  const leftLabelSample = (0, import_react21.useMemo)(() => {
+    if (!leftKeys || leftKeys.length === 0) return "";
+    const candidates = [maxLeft, minLeft, niceMaxLeft];
+    return String(
+      candidates.map((v) => yTickFormatter(v)).sort((a, b) => String(b).length - String(a).length)[0] ?? ""
+    );
+  }, [leftKeys, maxLeft, minLeft, niceMaxLeft, yTickFormatter]);
+  const rightLabelSample = (0, import_react21.useMemo)(() => {
+    if (!rightKeys || rightKeys.length === 0) return "";
+    const candidates = [maxRight, minRight, niceMaxRight];
+    return String(
+      candidates.map((v) => yTickFormatter(v)).sort((a, b) => String(b).length - String(a).length)[0] ?? ""
+    );
+  }, [rightKeys, maxRight, minRight, niceMaxRight, yTickFormatter]);
+  const estimatedLeftNeeded = (0, import_react21.useMemo)(() => {
+    const tickW = leftLabelSample ? estimateTextWidth(leftLabelSample) : 0;
+    const axisW = yAxisLabel ? estimateTextWidth(yAxisLabel) + 8 : 0;
+    return Math.max(
+      defaultChartLeftMargin,
+      Math.ceil(tickW + axisW + containerPaddingLeft / 2)
+    );
+  }, [leftLabelSample, yAxisLabel, estimateTextWidth]);
+  const estimatedRightNeeded = (0, import_react21.useMemo)(() => {
+    const tickW = rightLabelSample ? estimateTextWidth(rightLabelSample) : 0;
+    const axisW = yAxes?.right?.label ? estimateTextWidth(yAxes.right.label) + 8 : 0;
+    return Math.max(defaultChartRightMargin, Math.ceil(tickW + axisW / 2));
+  }, [rightLabelSample, yAxes, estimateTextWidth]);
+  const leftAxisLabelWidth = (0, import_react21.useMemo)(() => {
+    const label = yAxes?.left?.label ?? yAxisLabel;
+    return label ? estimateTextWidth(label) : 0;
+  }, [yAxes, yAxisLabel, estimateTextWidth]);
+  const rightAxisLabelWidth = (0, import_react21.useMemo)(() => {
+    const label = yAxes?.right?.label;
+    return label ? estimateTextWidth(label) : 0;
+  }, [yAxes, estimateTextWidth]);
+  const leftYAxisLabelDx = Math.ceil(leftAxisLabelWidth / 2) + 8;
+  const rightYAxisLabelDx = Math.ceil(rightAxisLabelWidth / 2) + 8;
+  const finalChartLeftMargin = chartMargin?.left ?? Math.max(estimatedLeftNeeded, yAxisLabel ? 40 : defaultChartLeftMargin);
+  const finalChartRightMarginFinal = chartMargin?.right ?? estimatedRightNeeded;
+  const finalChartRightMargin = finalChartRightMarginFinal;
   const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
   const baseBottom = chartMargin?.bottom ?? 5;
   const extraForXAxisLabel = xAxisLabel ? 22 : 0;
@@ -4276,8 +4449,7 @@ var Chart = ({
       ref: wrapperRef,
       style: {
         width: "100%",
-        overflowX: "hidden",
-        overflowY: "hidden",
+        overflow: "visible",
         minWidth: 0
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
@@ -4292,7 +4464,6 @@ var Chart = ({
                 style: {
                   paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
                   width: "100%",
-                  maxWidth: `${chartInnerWidth}px`,
                   display: "flex",
                   justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
                   alignItems: "center",
@@ -4414,8 +4585,8 @@ var Chart = ({
                       },
                       label: xAxisLabel ? {
                         value: xAxisLabel,
-                        position: "insideBottomRight",
-                        offset: -5,
+                        position: "bottom",
+                        offset: 12,
                         style: {
                           fontSize: 12,
                           fill: "hsl(var(--muted-foreground))",
@@ -4424,7 +4595,61 @@ var Chart = ({
                       } : void 0
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  rightKeys.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      import_recharts.YAxis,
+                      {
+                        yAxisId: "left",
+                        stroke: yAxes?.left?.stroke || "hsl(var(--muted-foreground))",
+                        width: yAxes?.left?.width,
+                        fontSize: 12,
+                        tickLine: false,
+                        axisLine: false,
+                        tickFormatter: yTickFormatter,
+                        domain: [Math.min(minLeft, 0), niceMaxLeft],
+                        tickCount: 6,
+                        label: yAxes?.left?.label ?? yAxisLabel ? {
+                          value: yAxes?.left?.label ?? yAxisLabel,
+                          angle: -90,
+                          position: "left",
+                          dx: -leftYAxisLabelDx,
+                          style: {
+                            fontSize: 12,
+                            fill: "hsl(var(--muted-foreground))",
+                            fontWeight: 500,
+                            textAnchor: "middle"
+                          }
+                        } : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      import_recharts.YAxis,
+                      {
+                        yAxisId: "right",
+                        orientation: "right",
+                        stroke: yAxes?.right?.stroke || "hsl(var(--muted-foreground))",
+                        width: yAxes?.right?.width,
+                        fontSize: 12,
+                        tickLine: false,
+                        axisLine: false,
+                        tickFormatter: yTickFormatter,
+                        domain: [Math.min(minRight, 0), niceMaxRight],
+                        tickCount: 6,
+                        label: yAxes?.right?.label ? {
+                          value: yAxes?.right?.label,
+                          angle: -90,
+                          position: "right",
+                          dx: rightYAxisLabelDx,
+                          style: {
+                            fontSize: 12,
+                            fill: "hsl(var(--muted-foreground))",
+                            fontWeight: 500,
+                            textAnchor: "middle"
+                          }
+                        } : void 0
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     import_recharts.YAxis,
                     {
                       stroke: "hsl(var(--muted-foreground))",
@@ -4437,7 +4662,8 @@ var Chart = ({
                       label: yAxisLabel ? {
                         value: yAxisLabel,
                         angle: -90,
-                        position: "leftTop",
+                        position: "left",
+                        dx: -leftYAxisLabelDx,
                         style: {
                           fontSize: 12,
                           fill: "hsl(var(--muted-foreground))",
@@ -4446,8 +4672,8 @@ var Chart = ({
                         }
                       } : void 0
                     }
-                  ),
-                  minDataValue < 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  ) }),
+                  (minDataValue < 0 || minLeft < 0 || minRight < 0) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     import_recharts.ReferenceLine,
                     {
                       y: 0,
@@ -4462,16 +4688,22 @@ var Chart = ({
                       content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         TooltipWithTotal_default,
                         {
+                          periodLabel,
                           finalColors,
                           valueFormatter: finalValueFormatter,
-                          categoryFormatter
+                          categoryFormatter,
+                          yAxisMap,
+                          isBiaxial: rightKeys.length > 0
                         }
                       ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         TooltipSimple_default,
                         {
+                          periodLabel,
                           finalColors,
                           valueFormatter: finalValueFormatter,
-                          categoryFormatter
+                          categoryFormatter,
+                          yAxisMap,
+                          isBiaxial: rightKeys.length > 0
                         }
                       ),
                       cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -4497,6 +4729,7 @@ var Chart = ({
                       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         import_recharts.Bar,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           fill: color,
@@ -4536,6 +4769,7 @@ var Chart = ({
                       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         import_recharts.Line,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           stroke: color,
@@ -4569,6 +4803,7 @@ var Chart = ({
                       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         import_recharts.Area,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           stroke: color,
@@ -4617,7 +4852,7 @@ var Chart = ({
                 showOnlyHighlighted,
                 onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
                 onPositionChange: onTooltipPositionChange,
-                periodLabel: "Per\xEDodo Selecionado",
+                periodLabel,
                 dataLabel: "Dados do Per\xEDodo",
                 valueFormatter: finalValueFormatter,
                 categoryFormatter,