@mlw-packages/react-components 1.7.13 → 1.7.14

package/dist/index.mjs

@@ -955,6 +955,7 @@ function ComboboxBase({
   renderSelected,
   handleSelection,
   checkIsSelected,
+  disabled = false,
   keepOpen = false,
   closeAll,
   searchPlaceholder,
@@ -969,111 +970,124 @@ function ComboboxBase({
       className: "col-span-1 w-full",
       "data-testid": testIds.root ?? "combobox-base-root",
       children: [
-        /* @__PURE__ */ jsxs5(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
-          /* @__PURE__ */ jsx8(
-            PopoverTriggerBase,
-            {
-              asChild: true,
-              className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
-              children: /* @__PURE__ */ jsxs5(
-                ButtonBase,
+        /* @__PURE__ */ jsxs5(
+          PopoverBase,
+          {
+            open,
+            onOpenChange: (v) => !disabled && setOpen(v),
+            modal: true,
+            children: [
+              /* @__PURE__ */ jsx8(
+                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__ */ jsx8(
-                      motion2.div,
-                      {
-                        animate: { rotate: open ? 180 : 0 },
-                        transition: { duration: 0.3 },
-                        className: "flex",
-                        children: /* @__PURE__ */ jsx8(CaretDownIcon, { className: " flex-shrink-0" })
-                      }
-                    )
-                  ]
+                  asChild: true,
+                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+                  children: /* @__PURE__ */ jsxs5(
+                    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__ */ jsx8(
+                          motion2.div,
+                          {
+                            animate: { rotate: open ? 180 : 0 },
+                            transition: { duration: 0.3 },
+                            className: "flex",
+                            children: /* @__PURE__ */ jsx8(CaretDownIcon, { className: " flex-shrink-0" })
+                          }
+                        )
+                      ]
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx8(
-            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__ */ jsxs5(
-                CommandBase,
+              ),
+              /* @__PURE__ */ jsx8(
+                PopoverContentBase,
                 {
-                  className: "dark:text-white hover:bg-rsecondary",
-                  "data-testid": testIds.command ?? "combobox-command",
-                  children: [
-                    /* @__PURE__ */ jsx8(
-                      CommandInputBase,
-                      {
-                        tabIndex: -1,
-                        placeholder: searchPlaceholder ?? "Busque uma op\xE7\xE3o...",
-                        "data-testid": testIds.search ?? "combobox-search"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs5(CommandListBase, { "data-testid": testIds.list ?? "combobox-list", children: [
-                      /* @__PURE__ */ jsx8(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: empty }),
-                      /* @__PURE__ */ jsx8(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
-                        const isSelected = checkIsSelected(item.value);
-                        return /* @__PURE__ */ jsxs5(
-                          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__ */ jsxs5(
+                    CommandBase,
+                    {
+                      className: "dark:text-white hover:bg-rsecondary",
+                      "data-testid": testIds.command ?? "combobox-command",
+                      children: [
+                        /* @__PURE__ */ jsx8(
+                          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__ */ jsx8(
-                                motion2.div,
-                                {
-                                  initial: { scale: 0 },
-                                  animate: { scale: isSelected ? 1 : 0 },
-                                  transition: {
-                                    type: "spring",
-                                    stiffness: 500,
-                                    damping: 30
-                                  },
-                                  className: "ml-auto ",
-                                  children: /* @__PURE__ */ jsx8(
-                                    CheckIcon,
+                            tabIndex: -1,
+                            disabled,
+                            placeholder: searchPlaceholder ?? "Busque uma op\xE7\xE3o...",
+                            "data-testid": testIds.search ?? "combobox-search"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs5(CommandListBase, { "data-testid": testIds.list ?? "combobox-list", children: [
+                          /* @__PURE__ */ jsx8(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: empty }),
+                          /* @__PURE__ */ jsx8(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
+                            const isSelected = checkIsSelected(item.value);
+                            return /* @__PURE__ */ jsxs5(
+                              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__ */ jsx8(
+                                    motion2.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__ */ jsx8(
+                                        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__ */ jsx8(ErrorMessage_default, { error })
       ]
     }
@@ -1090,6 +1104,7 @@ function Combobox({
   placeholder,
   searchPlaceholder,
   empty,
+  disabled = false,
   label,
   labelClassname,
   testIds,
@@ -1101,11 +1116,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 = useCallback(
     (value) => selected == null ? false : selected == value,
     [selected]
@@ -1125,6 +1144,7 @@ function Combobox({
         renderSelected,
         handleSelection,
         checkIsSelected,
+        disabled,
         searchPlaceholder,
         empty,
         error,
@@ -1150,8 +1170,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 = useCallback2(
@@ -1175,7 +1197,9 @@ function MultiCombobox({
       variant: "ghost",
       "data-testid": testIds.clearAll ?? "combobox-clear-all",
       size: "icon",
+      disabled,
       onClick: (e) => {
+        if (disabled) return;
         e.stopPropagation();
         onChange([]);
       },
@@ -1218,15 +1242,19 @@ function MultiCombobox({
               /* @__PURE__ */ jsx10(
                 motion3.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__ */ jsx10(XIcon2, { size: 14 })
                 }
               )
@@ -1236,7 +1264,7 @@ function MultiCombobox({
         )) })
       }
     );
-  }, [handleSelection, placeholder, selectedItems, testIds]);
+  }, [handleSelection, placeholder, selectedItems, testIds, disabled]);
   return /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -1261,7 +1289,9 @@ function MultiCombobox({
             keepOpen,
             closeAll,
             searchPlaceholder,
-            error
+            error,
+            empty,
+            disabled
           }
         )
       ]
@@ -1866,7 +1896,7 @@ function Select({
   ] });
 }
 
-// src/components/selects/AvatarSelect.tsx
+// src/components/selects/AvatarCombobox.tsx
 import { useId, useState as useState4 } from "react";
 import { CaretDownIcon as CaretDownIcon3, CheckIcon as CheckIcon5 } from "@phosphor-icons/react";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -1891,14 +1921,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,
@@ -3212,7 +3242,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;
@@ -3243,6 +3275,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__ */ jsxs20(
     "div",
     {
@@ -3311,7 +3350,12 @@ var RechartTooltipWithTotal = ({
                     children: displayValue
                   }
                 ),
-                /* @__PURE__ */ jsx25("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
+                /* @__PURE__ */ jsx25("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__ */ jsx25("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx25(
@@ -3341,7 +3385,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;
@@ -3360,6 +3406,17 @@ var TooltipSimple = ({
         /* @__PURE__ */ jsx26("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) {
@@ -3394,13 +3451,16 @@ var TooltipSimple = ({
                   ),
                   /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground truncate", children: entry.name })
                 ] }),
-                /* @__PURE__ */ jsx26("div", { className: "ml-3", children: /* @__PURE__ */ jsx26(
-                  "span",
-                  {
-                    className: `font-medium tabular-nums ${value < 0 ? "text-destructive" : "text-foreground"}`,
-                    children: displayValue
-                  }
-                ) })
+                /* @__PURE__ */ jsx26("div", { className: "ml-3", children: /* @__PURE__ */ jsxs21("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx26(
+                    "span",
+                    {
+                      className: `font-medium tabular-nums ${value < 0 ? "text-destructive" : "text-foreground"}`,
+                      children: displayValue
+                    }
+                  ),
+                  isBiaxial ? /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toFixed(1)}%` : "-" }) : null
+                ] }) })
               ]
             },
             index
@@ -3465,10 +3525,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") {
@@ -3480,32 +3543,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__ */ jsxs22("g", { children: [
       /* @__PURE__ */ jsx27(
@@ -3541,7 +3598,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
 var pillLabelRenderer_default = renderPillLabel;
 
 // src/components/charts/Chart.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -3570,7 +3627,10 @@ var Chart = ({
   showTooltipTotal = false,
   maxTooltips = 5,
   formatBR = false,
-  chartMargin
+  chartMargin,
+  yAxisMap,
+  yAxes,
+  periodLabel = "Per\xEDodo"
 }) => {
   const smartConfig = useMemo5(() => {
     const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
@@ -3701,6 +3761,70 @@ var Chart = ({
     }
     return min;
   }, [processedData, allKeys]);
+  const leftKeys = useMemo5(
+    () => !yAxisMap ? allKeys : allKeys.filter((k) => (yAxisMap?.[k] ?? "left") === "left"),
+    [allKeys, yAxisMap]
+  );
+  const rightKeys = useMemo5(
+    () => !yAxisMap ? [] : allKeys.filter((k) => (yAxisMap?.[k] ?? "left") === "right"),
+    [allKeys, yAxisMap]
+  );
+  const maxForKeys = useCallback5(
+    (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 = useCallback5(
+    (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 = useMemo5(() => maxForKeys(leftKeys), [leftKeys, maxForKeys]);
+  const minLeft = useMemo5(() => minForKeys(leftKeys), [leftKeys, minForKeys]);
+  const maxRight = useMemo5(
+    () => rightKeys.length > 0 ? maxForKeys(rightKeys) : 0,
+    [rightKeys, maxForKeys]
+  );
+  const minRight = useMemo5(
+    () => rightKeys.length > 0 ? minForKeys(rightKeys) : 0,
+    [rightKeys, minForKeys]
+  );
+  const niceMaxLeft = useMemo5(() => {
+    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 = useMemo5(() => {
+    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 = useMemo5(() => {
     let padding = 0.08;
     if (maxDataValue > 1e6) padding = 0.05;
@@ -3890,8 +4014,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 = useCallback5((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 = useMemo5(() => {
+    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 = useMemo5(() => {
+    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 = useMemo5(() => {
+    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 = useMemo5(() => {
+    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 = useMemo5(() => {
+    const label = yAxes?.left?.label ?? yAxisLabel;
+    return label ? estimateTextWidth(label) : 0;
+  }, [yAxes, yAxisLabel, estimateTextWidth]);
+  const rightAxisLabelWidth = useMemo5(() => {
+    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;
@@ -3969,8 +4142,7 @@ var Chart = ({
       ref: wrapperRef,
       style: {
         width: "100%",
-        overflowX: "hidden",
-        overflowY: "hidden",
+        overflow: "visible",
         minWidth: 0
       },
       children: /* @__PURE__ */ jsxs23(
@@ -3985,7 +4157,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",
@@ -4107,8 +4278,8 @@ var Chart = ({
                       },
                       label: xAxisLabel ? {
                         value: xAxisLabel,
-                        position: "insideBottomRight",
-                        offset: -5,
+                        position: "bottom",
+                        offset: 12,
                         style: {
                           fontSize: 12,
                           fill: "hsl(var(--muted-foreground))",
@@ -4117,7 +4288,61 @@ var Chart = ({
                       } : void 0
                     }
                   ),
-                  /* @__PURE__ */ jsx28(
+                  rightKeys.length > 0 ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+                    /* @__PURE__ */ jsx28(
+                      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__ */ jsx28(
+                      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__ */ jsx28(Fragment7, { children: /* @__PURE__ */ jsx28(
                     YAxis,
                     {
                       stroke: "hsl(var(--muted-foreground))",
@@ -4130,7 +4355,8 @@ var Chart = ({
                       label: yAxisLabel ? {
                         value: yAxisLabel,
                         angle: -90,
-                        position: "leftTop",
+                        position: "left",
+                        dx: -leftYAxisLabelDx,
                         style: {
                           fontSize: 12,
                           fill: "hsl(var(--muted-foreground))",
@@ -4139,8 +4365,8 @@ var Chart = ({
                         }
                       } : void 0
                     }
-                  ),
-                  minDataValue < 0 && /* @__PURE__ */ jsx28(
+                  ) }),
+                  (minDataValue < 0 || minLeft < 0 || minRight < 0) && /* @__PURE__ */ jsx28(
                     ReferenceLine,
                     {
                       y: 0,
@@ -4155,16 +4381,22 @@ var Chart = ({
                       content: showTooltipTotal ? /* @__PURE__ */ jsx28(
                         TooltipWithTotal_default,
                         {
+                          periodLabel,
                           finalColors,
                           valueFormatter: finalValueFormatter,
-                          categoryFormatter
+                          categoryFormatter,
+                          yAxisMap,
+                          isBiaxial: rightKeys.length > 0
                         }
                       ) : /* @__PURE__ */ jsx28(
                         TooltipSimple_default,
                         {
+                          periodLabel,
                           finalColors,
                           valueFormatter: finalValueFormatter,
-                          categoryFormatter
+                          categoryFormatter,
+                          yAxisMap,
+                          isBiaxial: rightKeys.length > 0
                         }
                       ),
                       cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -4190,6 +4422,7 @@ var Chart = ({
                       return /* @__PURE__ */ jsx28(
                         Bar,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           fill: color,
@@ -4229,6 +4462,7 @@ var Chart = ({
                       return /* @__PURE__ */ jsx28(
                         Line,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           stroke: color,
@@ -4262,6 +4496,7 @@ var Chart = ({
                       return /* @__PURE__ */ jsx28(
                         Area,
                         {
+                          yAxisId: yAxisMap?.[key],
                           dataKey: key,
                           name: label,
                           stroke: color,
@@ -4310,7 +4545,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,
@@ -6013,7 +6248,7 @@ import {
   FilePptIcon,
   FileDocIcon
 } from "@phosphor-icons/react";
-import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -6408,7 +6643,7 @@ var FileUploader = React18.forwardRef(
                         ),
                         /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
                           /* @__PURE__ */ jsx36("span", { children: formatFileSize(file.size) }),
-                          file.type && /* @__PURE__ */ jsxs27(Fragment7, { children: [
+                          file.type && /* @__PURE__ */ jsxs27(Fragment8, { children: [
                             /* @__PURE__ */ jsx36("span", { children: "\u2022" }),
                             /* @__PURE__ */ jsx36("span", { className: "uppercase", children: getFileExtension(file.name) })
                           ] })
@@ -10575,7 +10810,7 @@ var TimePickerInput = React41.forwardRef(
 TimePickerInput.displayName = "TimePickerInput";
 
 // src/components/picker/TimePicker.tsx
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs48 } from "react/jsx-runtime";
 function TimePicker({
   date,
   setDate,
@@ -10645,7 +10880,7 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ jsx65(AnimatePresence10, { children: !hideSeconds && /* @__PURE__ */ jsx65(Fragment9, { children: /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx65(AnimatePresence10, { children: !hideSeconds && /* @__PURE__ */ jsx65(Fragment10, { children: /* @__PURE__ */ jsx65(
           motion14.div,
           {
             variants: itemVariants2,
@@ -12437,7 +12672,7 @@ import {
   CalendarIcon as CalendarIcon3,
   PlusIcon as PlusIcon3
 } from "@phosphor-icons/react";
-import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
 function EventCalendar({
   events = [],
   onEventAdd,
@@ -12640,7 +12875,7 @@ function EventCalendar({
       const year = format5(currentDate, "yyyy", { locale: ptBR4 });
       const short = `${dayNum} de ${month} de ${year}`;
       const long = `${format5(currentDate, "EEE", { locale: ptBR4 })}, ${dayNum} de ${month} de ${year}`;
-      return /* @__PURE__ */ jsxs57(Fragment10, { children: [
+      return /* @__PURE__ */ jsxs57(Fragment11, { children: [
         /* @__PURE__ */ jsx77("span", { "aria-hidden": "true", className: "min-[480px]:hidden", children: short }),
         /* @__PURE__ */ jsx77("span", { "aria-hidden": "true", className: "max-[479px]:hidden min-md:hidden", children: short }),
         /* @__PURE__ */ jsx77("span", { className: "max-md:hidden", children: long })
@@ -13334,7 +13569,7 @@ function EventDialog({
 // src/components/event-calendar/EventItem.tsx
 import { differenceInMinutes as differenceInMinutes3, format as format7, isPast } from "date-fns";
 import { useMemo as useMemo13 } from "react";
-import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx79, jsxs as jsxs59 } from "react/jsx-runtime";
 var formatTimeWithOptionalMinutes = (date) => {
   return format7(date, "HH:mm");
 };
@@ -13469,7 +13704,7 @@ function EventItem({
         children: durationMinutes < 45 ? /* @__PURE__ */ jsxs59("div", { className: "flex items-center justify-between w-full", children: [
           /* @__PURE__ */ jsx79("div", { className: "truncate", children: event.title }),
           showTime && /* @__PURE__ */ jsx79("span", { className: "ml-2 inline-block bg-white/10 px-2 py-0.5 rounded-full text-[11px] opacity-90", children: formatTimeWithOptionalMinutes(displayStart) })
-        ] }) : /* @__PURE__ */ jsxs59(Fragment11, { children: [
+        ] }) : /* @__PURE__ */ jsxs59(Fragment12, { children: [
           /* @__PURE__ */ jsx79("div", { className: "truncate font-medium", children: event.title }),
           showTime && /* @__PURE__ */ jsx79("div", { className: "truncate font-normal opacity-70 sm:text-[11px]", children: /* @__PURE__ */ jsx79("span", { className: "inline-block bg-white/5 px-2 py-0.5 rounded-full", children: getEventTime() }) })
         ] })
@@ -14575,9 +14810,9 @@ export {
   AlertDialogTitleBase,
   AlertDialogTriggerBase,
   AvatarBase,
+  AvatarCombobox,
   AvatarFallbackBase,
   AvatarImageBase,
-  AvatarSelect,
   BackButton,
   Badge,
   BarChart_default as BarChart,