@mlw-packages/react-components 1.5.4 → 1.5.6

package/dist/index.js

@@ -500,6 +500,7 @@ __export(index_exports, {
   AvatarFallbackBase: () => AvatarFallbackBase,
   AvatarImageBase: () => AvatarImageBase,
   BadgeBase: () => BadgeBase,
+  BarChart: () => BarChart_default,
   BreadcrumbBase: () => BreadcrumbBase,
   BreadcrumbEllipsisBase: () => BreadcrumbEllipsisBase,
   BreadcrumbItemBase: () => BreadcrumbItemBase,
@@ -521,6 +522,7 @@ __export(index_exports, {
   CarouselItemBase: () => CarouselItemBase,
   CarouselNextBase: () => CarouselNextBase,
   CarouselPrevious: () => CarouselPrevious,
+  Chart: () => Chart_default,
   CheckboxBase: () => CheckboxBase,
   CollapsibleBase: () => CollapsibleBase,
   CollapsibleContentBase: () => CollapsibleContentBase,
@@ -596,6 +598,7 @@ __export(index_exports, {
   InputOTPSeparatorBase: () => InputOTPSeparatorBase,
   InputOTPSlotBase: () => InputOTPSlotBase,
   LabelBase: () => LabelBase_default,
+  LineChart: () => LineChart_default,
   ModeToggleBase: () => ModeToggleBase,
   MultiCombobox: () => MultiCombobox,
   NavigationMenuBase: () => NavigationMenuBase,
@@ -606,6 +609,7 @@ __export(index_exports, {
   NavigationMenuListBase: () => NavigationMenuListBase,
   NavigationMenuTriggerBase: () => NavigationMenuTriggerBase,
   NavigationMenuViewportBase: () => NavigationMenuViewportBase,
+  PieChart: () => PieChart_default,
   PopoverAnchorBase: () => PopoverAnchorBase,
   PopoverBase: () => PopoverBase,
   PopoverContentBase: () => PopoverContentBase,
@@ -689,6 +693,7 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariantsBase: () => buttonVariantsBase,
   toast: () => toast,
+  useDrag: () => useDrag,
   useIsMobile: () => useIsMobile,
   useTheme: () => useTheme
 });
@@ -838,7 +843,7 @@ var AlertDialogFooterBase = ({
   "div",
   {
     className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end",
       className
     ),
     ...props
@@ -879,11 +884,7 @@ var AlertDialogCancelBase = React2.forwardRef(({ className, testid = "alertdialo
   AlertDialogPrimitive.Cancel,
   {
     ref,
-    className: cn(
-      buttonVariantsBase({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    ),
+    className: cn(buttonVariantsBase({ variant: "outline" }), className),
     "data-testid": testid,
     ...props
   }
@@ -5055,3 +5056,3105 @@ var DestructiveDialog = ({
     )
   ] });
 };
+
+// src/components/rechart/LineChart.tsx
+var import_react33 = require("react");
+var import_recharts = require("recharts");
+
+// src/components/rechart/DraggableTooltip.tsx
+var import_react31 = require("react");
+var import_react32 = require("@phosphor-icons/react");
+var import_ssr2 = require("@phosphor-icons/react/dist/ssr");
+
+// src/components/rechart/CloseAllButton.tsx
+var import_ssr = require("@phosphor-icons/react/dist/ssr");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var CloseAllButton = ({
+  count,
+  onCloseAll,
+  position = "top-center",
+  variant = "floating"
+}) => {
+  if (count <= 1) return null;
+  const getPositionClasses = () => {
+    if (variant === "inline") return "";
+    switch (position) {
+      case "top-left":
+        return "fixed top-6 left-6 z-50";
+      case "top-right":
+        return "fixed top-6 right-6 z-50";
+      case "top-center":
+        return "fixed top-6 left-1/2 transform -translate-x-1/2 z-50";
+      default:
+        return "fixed top-6 left-1/2 transform -translate-x-1/2 z-50";
+    }
+  };
+  const getVariantClasses = () => {
+    if (variant === "inline") {
+      return "text-xs px-2 py-1 h-auto bg-card border border-border shadow-sm hover:bg-accent";
+    }
+    return `
+      rounded-full px-4 py-2.5 bg-transparent hover:bg-white/15 active:bg-white/20
+      text-white font-semibold text-sm
+      transition-all duration-200 ease-in-out
+      hover:scale-105 active:scale-95 hover:shadow-2xl
+      flex items-center gap-2.5
+      group
+      min-w-max
+    `;
+  };
+  if (variant === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "absolute top-4 right-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      ButtonBase,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onCloseAll,
+        className: getVariantClasses(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ssr.XIcon, { size: 12, className: "mr-1" }),
+          "Fechar Todos"
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `${getPositionClasses()} animate-in fade-in slide-in-from-top-2 duration-300`, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "bg-red-500 rounded-full shadow-xl border border-white/20 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    ButtonBase,
+    {
+      onClick: onCloseAll,
+      variant: "destructive",
+      size: "sm",
+      className: getVariantClasses(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_ssr.XIcon,
+          {
+            size: 18,
+            className: "\n              group-hover:rotate-90 transition-all duration-300 ease-out\n              drop-shadow-sm\n            "
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 tracking-wide", children: "Fechar Todos" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "div",
+          {
+            className: "\n            bg-white/20 text-white text-xs font-bold\n            rounded-full w-6 h-6 \n            flex items-center justify-center\n            transition-colors duration-200\n          ",
+            children: count
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var CloseAllButton_default = CloseAllButton;
+
+// src/components/rechart/DraggableTooltip.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var DraggableTooltip = ({
+  id,
+  data,
+  position,
+  title,
+  dataKeys,
+  finalColors,
+  onClose,
+  periodLabel = "Per\xEDodo Selecionado",
+  dataLabel = "Dados do Per\xEDodo",
+  showCloseAllButton = false,
+  globalTooltipCount,
+  onCloseAll,
+  closeAllButtonPosition = "top-center",
+  closeAllButtonVariant = "floating",
+  onPositionChange
+}) => {
+  const [localPos, setLocalPos] = (0, import_react31.useState)(
+    position
+  );
+  const [dragging, setDragging] = (0, import_react31.useState)(false);
+  const offsetRef = (0, import_react31.useRef)({ x: 0, y: 0 });
+  const lastMouse = (0, import_react31.useRef)({ x: 0, y: 0 });
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react31.useState)([]);
+  const [globalTooltipCountLocal, setGlobalTooltipCountLocal] = (0, import_react31.useState)(0);
+  (0, import_react31.useEffect)(() => setLocalPos(position), [position]);
+  const ALIGNMENT_THRESHOLD = 25;
+  const GUIDE_THRESHOLD = 60;
+  const STRONG_SNAP_THRESHOLD = 35;
+  const PRECISION_SNAP_THRESHOLD = 8;
+  const getAllTooltips = (0, import_react31.useCallback)(() => {
+    const response = [];
+    const ev = new CustomEvent("requestGlobalTooltips", {
+      detail: { requesterId: id, response }
+    });
+    window.dispatchEvent(ev);
+    return response;
+  }, [id]);
+  const updateAlignmentGuides = (0, import_react31.useCallback)(
+    (currentPosition) => {
+      const allTooltips = getAllTooltips();
+      const otherTooltips = allTooltips.filter((t) => t.id !== id);
+      const guides = [];
+      const tooltipDimensions = { width: 224, height: 120 };
+      otherTooltips.forEach((tooltip) => {
+        const topDiff = Math.abs(currentPosition.top - tooltip.position.top);
+        if (topDiff <= GUIDE_THRESHOLD) {
+          guides.push({
+            type: "horizontal",
+            position: tooltip.position.top,
+            sourceTooltip: {
+              top: currentPosition.top,
+              left: currentPosition.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            },
+            targetTooltip: {
+              top: tooltip.position.top,
+              left: tooltip.position.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            }
+          });
+        }
+        const leftDiff = Math.abs(currentPosition.left - tooltip.position.left);
+        if (leftDiff <= GUIDE_THRESHOLD) {
+          guides.push({
+            type: "vertical",
+            position: tooltip.position.left,
+            sourceTooltip: {
+              top: currentPosition.top,
+              left: currentPosition.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            },
+            targetTooltip: {
+              top: tooltip.position.top,
+              left: tooltip.position.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            }
+          });
+        }
+      });
+      setAlignmentGuides(guides);
+    },
+    [getAllTooltips, id]
+  );
+  const snapToGuides = (0, import_react31.useCallback)(
+    (position2) => {
+      const snappedPosition = { ...position2 };
+      let hasSnapped = false;
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position2.top - guide.position);
+          if (diff <= PRECISION_SNAP_THRESHOLD) {
+            snappedPosition.top = guide.position;
+            hasSnapped = true;
+          }
+        } else {
+          const diff = Math.abs(position2.left - guide.position);
+          if (diff <= PRECISION_SNAP_THRESHOLD) {
+            snappedPosition.left = guide.position;
+            hasSnapped = true;
+          }
+        }
+      });
+      if (!hasSnapped) {
+        alignmentGuides.forEach((guide) => {
+          if (guide.type === "horizontal") {
+            const diff = Math.abs(position2.top - guide.position);
+            if (diff <= STRONG_SNAP_THRESHOLD)
+              snappedPosition.top = guide.position;
+          } else {
+            const diff = Math.abs(position2.left - guide.position);
+            if (diff <= STRONG_SNAP_THRESHOLD)
+              snappedPosition.left = guide.position;
+          }
+        });
+      }
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position2.top - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD && snappedPosition.top === position2.top)
+            snappedPosition.top = guide.position;
+        } else {
+          const diff = Math.abs(position2.left - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD && snappedPosition.left === position2.left)
+            snappedPosition.left = guide.position;
+        }
+      });
+      return snappedPosition;
+    },
+    [alignmentGuides]
+  );
+  (0, import_react31.useEffect)(() => {
+    let rafId = null;
+    const handleMouseMove = (e) => {
+      if (!dragging) return;
+      lastMouse.current = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMouse.current.x - offsetRef.current.x;
+        const newTop = lastMouse.current.y - offsetRef.current.y;
+        const rawPosition = {
+          top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
+          left: Math.max(0, Math.min(newLeft, window.innerWidth - 250))
+        };
+        updateAlignmentGuides(rawPosition);
+        const snapped = snapToGuides(rawPosition);
+        setLocalPos(snapped);
+        if (onPositionChange) onPositionChange(id, snapped);
+      });
+    };
+    const handleMouseUp = () => {
+      if (dragging) {
+        setDragging(false);
+        setAlignmentGuides([]);
+        if (rafId) cancelAnimationFrame(rafId);
+      }
+    };
+    if (dragging) {
+      document.addEventListener("mousemove", handleMouseMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [dragging, snapToGuides, updateAlignmentGuides, id, onPositionChange]);
+  (0, import_react31.useEffect)(() => {
+    const handleCloseAll = () => {
+      onClose(id);
+    };
+    const handleRequestTooltipCount = () => {
+      window.dispatchEvent(
+        new CustomEvent("tooltipCountResponse", { detail: { count: 1 } })
+      );
+    };
+    const handleRequestGlobalTooltips = (event) => {
+      const customEvent = event;
+      const detail = customEvent.detail;
+      if (detail && detail.response && detail.requesterId) {
+        if (!detail.response.find((t) => t.id === id)) {
+          detail.response.push({ id, position: localPos });
+        }
+      }
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAll);
+    window.addEventListener("requestTooltipCount", handleRequestTooltipCount);
+    window.addEventListener(
+      "requestGlobalTooltips",
+      handleRequestGlobalTooltips
+    );
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAll);
+      window.removeEventListener(
+        "requestTooltipCount",
+        handleRequestTooltipCount
+      );
+      window.removeEventListener(
+        "requestGlobalTooltips",
+        handleRequestGlobalTooltips
+      );
+    };
+  }, [id, localPos, onClose]);
+  (0, import_react31.useEffect)(() => {
+    if (dragging) return;
+    let total = 0;
+    const handleCountResponse = (event) => {
+      const customEvent = event;
+      total += customEvent.detail.count || 0;
+    };
+    window.addEventListener("tooltipCountResponse", handleCountResponse);
+    window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+    const timeoutId = setTimeout(() => {
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+      setGlobalTooltipCountLocal(total);
+    }, 50);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+    };
+  }, [localPos, dragging]);
+  (0, import_react31.useEffect)(() => {
+    const recount = () => {
+      if (dragging) return;
+      let total = 0;
+      const handleCountResponse = (event) => {
+        const customEvent = event;
+        total += customEvent.detail.count || 0;
+      };
+      window.addEventListener("tooltipCountResponse", handleCountResponse);
+      window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+      setTimeout(() => {
+        window.removeEventListener("tooltipCountResponse", handleCountResponse);
+        setGlobalTooltipCountLocal(total);
+      }, 50);
+    };
+    window.addEventListener("recountTooltips", recount);
+    return () => window.removeEventListener("recountTooltips", recount);
+  }, [dragging]);
+  const handleMouseDownLocal = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    offsetRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    setDragging(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    dragging && alignmentGuides.map((guide, index) => {
+      const isHorizontal = guide.type === "horizontal";
+      const color = isHorizontal ? "#3b82f6" : "#ef4444";
+      const startX = isHorizontal ? Math.min(
+        guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+        guide.targetTooltip.left + guide.targetTooltip.width / 2
+      ) : guide.sourceTooltip.left + guide.sourceTooltip.width / 2;
+      const endX = isHorizontal ? Math.max(
+        guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+        guide.targetTooltip.left + guide.targetTooltip.width / 2
+      ) : guide.targetTooltip.left + guide.targetTooltip.width / 2;
+      const startY = isHorizontal ? guide.sourceTooltip.top + guide.sourceTooltip.height / 2 : Math.min(
+        guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+        guide.targetTooltip.top + guide.targetTooltip.height / 2
+      );
+      const endY = isHorizontal ? guide.targetTooltip.top + guide.targetTooltip.height / 2 : Math.max(
+        guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+        guide.targetTooltip.top + guide.targetTooltip.height / 2
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: "fixed pointer-events-none z-30",
+            style: {
+              left: startX,
+              top: startY,
+              width: isHorizontal ? endX - startX : "2px",
+              height: isHorizontal ? "2px" : endY - startY,
+              backgroundColor: color,
+              boxShadow: `0 0 8px ${color}60`,
+              opacity: 0.9,
+              borderStyle: "dashed",
+              borderWidth: "1px",
+              borderColor: color,
+              transform: "translateZ(0)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: "fixed pointer-events-none z-31",
+            style: {
+              left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
+              top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
+              width: "8px",
+              height: "8px",
+              backgroundColor: color,
+              borderRadius: "50%",
+              boxShadow: `0 0 4px ${color}80`,
+              opacity: 0.8
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: "fixed pointer-events-none z-31",
+            style: {
+              left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
+              top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
+              width: "8px",
+              height: "8px",
+              backgroundColor: color,
+              borderRadius: "50%",
+              boxShadow: `0 0 4px ${color}80`,
+              opacity: 0.8
+            }
+          }
+        )
+      ] }, index);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "div",
+      {
+        className: "fixed bg-card border border-border rounded-lg shadow-lg z-50 min-w-56 select-none",
+        style: {
+          top: localPos.top,
+          left: localPos.left,
+          cursor: dragging ? "grabbing" : "grab"
+        },
+        onMouseDown: handleMouseDownLocal,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between mb-2 p-3 pb-2 border-b bg-muted/20 rounded-t-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-col gap-1", children: title && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-2 h-2 bg-blue-500 rounded-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-bold text-foreground text-base", children: title })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClose(id);
+                },
+                className: "text-muted-foreground hover:text-destructive ml-2 text-sm hover:bg-destructive/10 rounded p-1",
+                title: "Fechar este tooltip",
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ssr2.XIcon, { size: 14 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "px-3 py-2 bg-accent/30 border-l-4 border-primary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: periodLabel }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-bold text-lg text-foreground mt-1", children: data.name })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "p-3 pt-2 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: dataLabel }),
+            dataKeys.map((key) => {
+              const value = data[key];
+              if (value === void 0) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-3 text-sm mb-2 p-2 rounded bg-muted/20 hover:bg-muted/40 transition-colors",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                        "div",
+                        {
+                          className: "w-3 h-3 rounded-sm shadow-sm",
+                          style: { backgroundColor: finalColors[key] || "#666" }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "font-medium text-foreground", children: key.charAt(0).toUpperCase() + key.slice(1) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "font-semibold text-foreground bg-background px-2 py-1 rounded text-xs", children: value.toLocaleString("pt-BR") })
+                  ]
+                },
+                key
+              );
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mt-3 pt-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react32.MouseIcon, {}) }),
+              "Arraste para mover \u2022 Clique no ",
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ssr2.XIcon, { size: 12 }),
+              " para remover"
+            ] }) })
+          ] })
+        ]
+      }
+    ),
+    showCloseAllButton && onCloseAll && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      CloseAllButton_default,
+      {
+        count: typeof globalTooltipCount === "number" ? globalTooltipCount : globalTooltipCountLocal,
+        onCloseAll,
+        position: closeAllButtonPosition,
+        variant: closeAllButtonVariant
+      }
+    )
+  ] });
+};
+var DraggableTooltip_default = DraggableTooltip;
+
+// src/components/rechart/pillLabelRenderer.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var formatCompactNumber = (value) => {
+  if (value >= 1e9)
+    return (value / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+  if (value >= 1e6)
+    return (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  if (value >= 1e3) return (value / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
+  return value.toString();
+};
+var parseNumber = (v) => {
+  if (typeof v === "number") return v;
+  if (typeof v === "string" && v.trim() !== "" && !Number.isNaN(Number(v)))
+    return Number(v);
+  return void 0;
+};
+var renderPillLabel = (color, variant) => {
+  return (props) => {
+    const { x, y, value } = props;
+    const text = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
+    const paddingX = 8;
+    const approxCharWidth = 7;
+    const pillWidth = Math.max(
+      40,
+      String(text).length * approxCharWidth + paddingX * 2
+    );
+    const pillHeight = 20;
+    const xNum = parseNumber(x);
+    const px = parseNumber(props.x);
+    const pWidth = parseNumber(props.width);
+    const vb = props.viewBox;
+    const cxNum = parseNumber(props.cx);
+    let centerX;
+    if (typeof px === "number" && typeof pWidth === "number") {
+      centerX = px + pWidth / 2;
+    } else if (typeof xNum === "number" && typeof pWidth === "number") {
+      centerX = xNum + pWidth / 2;
+    } else if (typeof cxNum === "number") {
+      centerX = cxNum;
+    } else if (vb && typeof vb.x === "number" && typeof vb.width === "number" && typeof props.index === "number") {
+      const approxCols = Math.max(1, props.index + 1);
+      const colWidth = vb.width / approxCols;
+      centerX = vb.x + colWidth * (props.index + 0.5);
+    } else if (vb && typeof vb.x === "number" && typeof vb.width === "number") {
+      centerX = vb.x + vb.width / 2;
+    } 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;
+      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 / 2;
+    const rectY = centerY - pillHeight - 6;
+    const textX = centerX;
+    const textY = rectY + pillHeight / 2 + 3;
+    const rectFill = variant === "filled" ? color : variant === "soft" ? `${color}` : "#ffffff";
+    const rectStroke = variant === "outline" ? `${color}CC` : void 0;
+    const textColor = variant === "filled" ? "#ffffff" : variant === "outline" ? color : "#111827";
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "rect",
+        {
+          x: rectX,
+          y: rectY,
+          rx: pillHeight / 2,
+          width: pillWidth,
+          height: pillHeight,
+          fill: rectFill,
+          stroke: rectStroke,
+          strokeWidth: rectStroke ? 1 : 0
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "text",
+        {
+          x: textX,
+          y: textY - 3,
+          fill: textColor,
+          fontSize: 13,
+          fontWeight: 700,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          letterSpacing: 0.2,
+          children: text
+        }
+      )
+    ] });
+  };
+};
+var pillLabelRenderer_default = renderPillLabel;
+
+// src/components/rechart/LineChart.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var defaultData = [
+  { name: "A", value: 100 },
+  { name: "B", value: 200 },
+  { name: "C", value: 150 }
+];
+var DEFAULT_COLORS = ["#55af7d", "#8e68ff", "#2273e1"];
+var generateAdditionalColors = (baseColors, count) => {
+  const colors2 = [...baseColors];
+  const variations = [
+    "#ff6b6b",
+    "#4ecdc4",
+    "#45b7d1",
+    "#f9ca24",
+    "#6c5ce7",
+    "#a29bfe",
+    "#fd79a8",
+    "#00b894"
+  ];
+  while (colors2.length < count) {
+    colors2.push(
+      variations[(colors2.length - baseColors.length) % variations.length]
+    );
+  }
+  return colors2;
+};
+var compactTick = (value) => {
+  if (value >= 1e9)
+    return (value / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+  if (value >= 1e6)
+    return (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  if (value >= 1e3) return (value / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
+  return String(value);
+};
+var CustomLineChart = ({
+  data = defaultData,
+  className,
+  height = 300,
+  width = "100%",
+  colors: colors2 = DEFAULT_COLORS,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  strokeWidth = 2,
+  showDots = true,
+  showLabels = false
+}) => {
+  const [activeTooltips, setActiveTooltips] = (0, import_react33.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react33.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react33.useState)({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react33.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react33.useState)([]);
+  const generateColors = (dataKeys2) => {
+    const colorMap = {};
+    const allColors = generateAdditionalColors(colors2, dataKeys2.length);
+    dataKeys2.forEach((key, index) => {
+      colorMap[key] = allColors[index] || colors2[index % colors2.length];
+    });
+    return colorMap;
+  };
+  const dataKeys = (0, import_react33.useMemo)(
+    () => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
+    [data]
+  );
+  const finalColors = generateColors(dataKeys);
+  const niceCeil = (value) => {
+    if (!isFinite(value) || value <= 0) return 1;
+    const pow = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / pow;
+    const multipliers = [
+      1,
+      1.25,
+      1.5,
+      2,
+      2.5,
+      3,
+      4,
+      5,
+      7.5,
+      10,
+      15,
+      20,
+      25,
+      50,
+      100
+    ];
+    for (const m of multipliers) {
+      if (m >= normalized) return Math.ceil(m * pow);
+    }
+    return Math.ceil(100 * pow);
+  };
+  const maxDataValue = (0, import_react33.useMemo)(() => {
+    let max = 0;
+    for (const row of data) {
+      const r = row;
+      for (const key of dataKeys) {
+        const v = r[key];
+        if (typeof v === "number" && Number.isFinite(v) && v > max)
+          max = v;
+      }
+    }
+    return max;
+  }, [data, dataKeys]);
+  const niceMax = (0, import_react33.useMemo)(() => {
+    let padding = 0.08;
+    if (maxDataValue > 1e6) padding = 0.05;
+    if (maxDataValue > 1e7) padding = 0.03;
+    if (maxDataValue === 0) padding = 0.12;
+    const padded = maxDataValue * (1 + padding);
+    return niceCeil(padded);
+  }, [maxDataValue]);
+  const ClickableDot = (props) => {
+    const { cx, cy, payload, dataKey } = props;
+    const handleDotClick = (e) => {
+      e.stopPropagation();
+      if (!payload || !cx || !cy) return;
+      const tooltipId = `${payload.name}`;
+      const existingIndex = activeTooltips.findIndex(
+        (tooltip) => tooltip.id === tooltipId
+      );
+      if (existingIndex !== -1) {
+        setActiveTooltips(
+          (prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
+        );
+      } else {
+        const newTooltip = {
+          id: tooltipId,
+          data: payload,
+          position: {
+            top: cy - 50,
+            // Posição relativa ao SVG
+            left: cx - 100
+          }
+        };
+        setActiveTooltips((prev) => [...prev, newTooltip]);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "circle",
+      {
+        cx,
+        cy,
+        r: 6,
+        fill: finalColors[dataKey || ""] || colors2[0],
+        stroke: finalColors[dataKey || ""] || colors2[0],
+        strokeWidth: 2,
+        style: { cursor: "pointer" },
+        onClick: handleDotClick
+      }
+    );
+  };
+  const handleChartClick = (e) => {
+    if (e && e.activePayload && e.activePayload.length > 0) {
+      const clickedData = e.activePayload[0].payload;
+      const tooltipId = `${clickedData.name}`;
+      const existingIndex = activeTooltips.findIndex(
+        (tooltip) => tooltip.id === tooltipId
+      );
+      if (existingIndex !== -1) {
+        setActiveTooltips(
+          (prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
+        );
+      } else {
+        const newTooltip = {
+          id: tooltipId,
+          data: clickedData,
+          position: {
+            top: (e.chartY || 100) - 10,
+            left: (e.chartX || 100) - 100
+          }
+        };
+        setActiveTooltips((prev) => [...prev, newTooltip]);
+      }
+    } else {
+    }
+  };
+  const handleChartBackgroundClick = () => {
+    setActiveTooltips([]);
+  };
+  const handleCloseAllTooltips = (0, import_react33.useCallback)(() => {
+    window.dispatchEvent(new CustomEvent("closeAllTooltips"));
+  }, []);
+  const updateAlignmentGuides = (0, import_react33.useCallback)(
+    (draggedTooltipId, draggedPosition) => {
+      const SNAP_THRESHOLD = 15;
+      const draggedTooltip = activeTooltips.find(
+        (t) => t.id === draggedTooltipId
+      );
+      if (!draggedTooltip) return;
+      const tooltipWidth = 200;
+      const tooltipHeight = 80;
+      const globalTooltips = [];
+      window.dispatchEvent(
+        new CustomEvent("requestGlobalTooltips", {
+          detail: { requesterId: draggedTooltipId }
+        })
+      );
+      activeTooltips.forEach((tooltip) => {
+        if (tooltip.id !== draggedTooltipId) {
+          globalTooltips.push({
+            top: tooltip.position.top,
+            left: tooltip.position.left,
+            width: tooltipWidth,
+            height: tooltipHeight,
+            id: tooltip.id
+          });
+        }
+      });
+      const newGuides = [];
+      globalTooltips.forEach((otherTooltip) => {
+        const draggedCenter = {
+          x: draggedPosition.left + tooltipWidth / 2,
+          y: draggedPosition.top + tooltipHeight / 2
+        };
+        const otherCenter = {
+          x: otherTooltip.left + otherTooltip.width / 2,
+          y: otherTooltip.top + otherTooltip.height / 2
+        };
+        const horizontalDistance = Math.abs(draggedCenter.y - otherCenter.y);
+        if (horizontalDistance <= SNAP_THRESHOLD) {
+          newGuides.push({
+            type: "horizontal",
+            position: otherCenter.y,
+            visible: true,
+            sourceTooltip: {
+              top: draggedPosition.top,
+              left: draggedPosition.left,
+              width: tooltipWidth,
+              height: tooltipHeight
+            },
+            targetTooltip: {
+              top: otherTooltip.top,
+              left: otherTooltip.left,
+              width: otherTooltip.width,
+              height: otherTooltip.height
+            }
+          });
+        }
+        const verticalDistance = Math.abs(draggedCenter.x - otherCenter.x);
+        if (verticalDistance <= SNAP_THRESHOLD) {
+          newGuides.push({
+            type: "vertical",
+            position: otherCenter.x,
+            visible: true,
+            sourceTooltip: {
+              top: draggedPosition.top,
+              left: draggedPosition.left,
+              width: tooltipWidth,
+              height: tooltipHeight
+            },
+            targetTooltip: {
+              top: otherTooltip.top,
+              left: otherTooltip.left,
+              width: otherTooltip.width,
+              height: otherTooltip.height
+            }
+          });
+        }
+      });
+      setAlignmentGuides(newGuides);
+    },
+    [activeTooltips]
+  );
+  const snapToGuides = (0, import_react33.useCallback)(
+    (position) => {
+      const SNAP_DISTANCE = 10;
+      const snappedPosition = { ...position };
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const tooltipCenter = position.top + 40;
+          if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
+            snappedPosition.top = guide.position - 40;
+          }
+        } else if (guide.type === "vertical") {
+          const tooltipCenter = position.left + 100;
+          if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
+            snappedPosition.left = guide.position - 100;
+          }
+        }
+      });
+      return snappedPosition;
+    },
+    [alignmentGuides]
+  );
+  const handleMouseDown = (tooltipId, e) => {
+    const rect = e.target.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    setIsDragging(tooltipId);
+    setDragOffset({ x: offsetX, y: offsetY });
+  };
+  (0, import_react33.useEffect)(() => {
+    let rafId;
+    let lastMousePosition = { x: 0, y: 0 };
+    const handleGlobalMouseMove = (e) => {
+      if (!isDragging) return;
+      lastMousePosition = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMousePosition.x - dragOffset.x;
+        const newTop = lastMousePosition.y - dragOffset.y;
+        let finalPosition = { top: newTop, left: newLeft };
+        finalPosition = snapToGuides(finalPosition);
+        setActiveTooltips(
+          (prev) => prev.map(
+            (tooltip) => tooltip.id === isDragging ? { ...tooltip, position: finalPosition } : tooltip
+          )
+        );
+        updateAlignmentGuides(isDragging, finalPosition);
+      });
+    };
+    const handleGlobalMouseUp = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      setIsDragging(null);
+      setAlignmentGuides([]);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    if (isDragging) {
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+      window.addEventListener("mousemove", handleGlobalMouseMove);
+      window.addEventListener("mouseup", handleGlobalMouseUp);
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [
+    isDragging,
+    dragOffset,
+    alignmentGuides,
+    updateAlignmentGuides,
+    snapToGuides
+  ]);
+  (0, import_react33.useEffect)(() => {
+    const handleCloseAllTooltips2 = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    };
+  }, []);
+  (0, import_react33.useEffect)(() => {
+    const handleTooltipCountRequest = () => {
+      window.dispatchEvent(
+        new CustomEvent("tooltipCountResponse", {
+          detail: { count: activeTooltips.length }
+        })
+      );
+    };
+    const handleGlobalTooltipsRequest = (event) => {
+      const requesterId = event.detail?.requesterId;
+      activeTooltips.forEach((tooltip) => {
+        if (tooltip.id !== requesterId) {
+          window.dispatchEvent(
+            new CustomEvent("globalTooltipResponse", {
+              detail: {
+                tooltip: {
+                  top: tooltip.position.top,
+                  left: tooltip.position.left,
+                  width: 200,
+                  height: 80,
+                  id: tooltip.id
+                }
+              }
+            })
+          );
+        }
+      });
+    };
+    window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
+    window.addEventListener(
+      "requestGlobalTooltips",
+      handleGlobalTooltipsRequest
+    );
+    return () => {
+      window.removeEventListener(
+        "requestTooltipCount",
+        handleTooltipCountRequest
+      );
+      window.removeEventListener(
+        "requestGlobalTooltips",
+        handleGlobalTooltipsRequest
+      );
+    };
+  }, [activeTooltips]);
+  (0, import_react33.useEffect)(() => {
+    if (isDragging) return;
+    let totalCount = 0;
+    const handleCountResponse = (event) => {
+      const customEvent = event;
+      totalCount += customEvent.detail.count;
+    };
+    window.addEventListener("tooltipCountResponse", handleCountResponse);
+    window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+    const timeoutId = setTimeout(() => {
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+      setGlobalTooltipCount(totalCount);
+    }, 5);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+    };
+  }, [activeTooltips.length, isDragging]);
+  const getTitleClass = () => {
+    switch (titlePosition) {
+      case "center":
+        return "text-center";
+      case "right":
+        return "text-right";
+      default:
+        return "text-left";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
+    {
+      className: "rounded-lg bg-card p-4 relative border border-border",
+      style: {
+        width: typeof width === "number" ? `${width + 32}px` : "fit-content",
+        maxWidth: "100%"
+      },
+      onClick: handleChartBackgroundClick,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          import_recharts.LineChart,
+          {
+            data,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: {
+              top: showLabels ? 48 : 20,
+              right: 30,
+              left: 20,
+              bottom: 5
+            },
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_recharts.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.3
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_recharts.XAxis,
+                {
+                  dataKey: "name",
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_recharts.YAxis,
+                {
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12,
+                  tickFormatter: (value) => compactTick(Number(value)),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_recharts.Tooltip, { content: () => null }),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_recharts.Legend,
+                {
+                  wrapperStyle: {
+                    fontSize: "12px",
+                    color: "hsl(var(--muted-foreground))"
+                  }
+                }
+              ),
+              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: key,
+                  stroke: finalColors[key],
+                  strokeWidth,
+                  dot: showDots ? { r: 4, cursor: "pointer" } : false,
+                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    import_recharts.LabelList,
+                    {
+                      dataKey: key,
+                      position: "top",
+                      content: pillLabelRenderer_default(
+                        finalColors[key] || "#000",
+                        "filled"
+                      ),
+                      offset: 14
+                    }
+                  )
+                },
+                key
+              ))
+            ]
+          }
+        ),
+        alignmentGuides.map((guide, index) => {
+          const isHorizontal = guide.type === "horizontal";
+          const color = isHorizontal ? "#3b82f6" : "#ef4444";
+          const startX = isHorizontal ? Math.min(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
+          const endX = isHorizontal ? Math.max(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
+          const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-30",
+                style: {
+                  left: startX,
+                  top: startY,
+                  width: isHorizontal ? endX - startX : "2px",
+                  height: isHorizontal ? "2px" : endY - startY,
+                  backgroundColor: color,
+                  boxShadow: `0 0 8px ${color}60`,
+                  opacity: 0.9,
+                  borderStyle: "dashed",
+                  borderWidth: "1px",
+                  borderColor: color,
+                  transform: "translateZ(0)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
+                  top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
+                  top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            )
+          ] }, index);
+        }),
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: tooltip.data,
+            position: tooltip.position,
+            isDragging: isDragging === tooltip.id,
+            title,
+            dataKeys,
+            finalColors,
+            onMouseDown: (id, e) => handleMouseDown(id, e),
+            onClose: (id) => {
+              setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
+            },
+            periodLabel: "Ponto Selecionado",
+            dataLabel: "Dados do Ponto",
+            showCloseAllButton: index === 0,
+            globalTooltipCount,
+            onCloseAll: handleCloseAllTooltips,
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        ))
+      ]
+    }
+  ) });
+};
+var LineChart_default = CustomLineChart;
+
+// src/components/rechart/PieChart.tsx
+var import_recharts2 = require("recharts");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var defaultData2 = [
+  { name: "Vendas", value: 4e3 },
+  { name: "Marketing", value: 3e3 },
+  { name: "Desenvolvimento", value: 2e3 },
+  { name: "Suporte", value: 1e3 },
+  { name: "Outros", value: 800 }
+];
+var DEFAULT_COLORS2 = [
+  "#55af7d",
+  // verde do projeto
+  "#8e68ff",
+  // roxo do projeto
+  "#2273e1",
+  // azul do projeto
+  "#f59e0b",
+  // amarelo complementar
+  "#ef4444",
+  // vermelho complementar
+  "#8b5cf6",
+  // roxo claro
+  "#06b6d4",
+  // ciano
+  "#84cc16"
+  // verde lima
+];
+var RADIAN = Math.PI / 180;
+var renderCustomizedLabel = ({ cx = 0, cy = 0, midAngle = 0, innerRadius = 0, outerRadius = 0, percent = 0 }) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "text",
+    {
+      x,
+      y,
+      fill: "white",
+      textAnchor: x > cx ? "start" : "end",
+      dominantBaseline: "central",
+      fontSize: 12,
+      fontWeight: "600",
+      children: `${(percent * 100).toFixed(0)}%`
+    }
+  );
+};
+var CustomPieChart = ({
+  data = defaultData2,
+  className,
+  height = 400,
+  width = "100%",
+  colors: colors2,
+  showTooltip = true,
+  showLegend = true,
+  showLabels = true,
+  innerRadius = 0,
+  outerRadius = 120,
+  centerX = "50%",
+  centerY = "50%"
+}) => {
+  const finalColors = colors2 || DEFAULT_COLORS2;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_recharts2.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_recharts2.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      import_recharts2.Pie,
+      {
+        data,
+        cx: centerX,
+        cy: centerY,
+        labelLine: false,
+        label: showLabels ? renderCustomizedLabel : false,
+        outerRadius,
+        innerRadius,
+        fill: "#8884d8",
+        dataKey: "value",
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          import_recharts2.Cell,
+          {
+            fill: finalColors[index % finalColors.length]
+          },
+          `cell-${entry.name}-${index}`
+        ))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      import_recharts2.Tooltip,
+      {
+        contentStyle: {
+          backgroundColor: "hsl(var(--popover))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "6px",
+          color: "hsl(var(--popover-foreground))"
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_recharts2.Legend, {})
+  ] }) }) });
+};
+var PieChart_default = CustomPieChart;
+
+// src/components/rechart/BarChart.tsx
+var import_react34 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var formatFieldName = (fieldName) => {
+  return fieldName.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
+};
+var detectXAxis = (data) => {
+  if (!data || data.length === 0) return "name";
+  const firstItem = data[0];
+  const stringFields = Object.keys(firstItem).filter(
+    (key) => typeof firstItem[key] === "string" || typeof firstItem[key] === "number" && String(firstItem[key]).length <= 4
+    // Anos, IDs curtos
+  );
+  return stringFields[0] || Object.keys(firstItem)[0] || "name";
+};
+var detectDataFields = (data, xAxisKey) => {
+  if (!data || data.length === 0) return [];
+  const firstItem = data[0];
+  return Object.keys(firstItem).filter(
+    (key) => key !== xAxisKey && typeof firstItem[key] === "number"
+  );
+};
+var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
+var generateAdditionalColors2 = (baseColors, count) => {
+  const colors2 = [...baseColors];
+  const variations = [
+    "#ff6b6b",
+    "#4ecdc4",
+    "#45b7d1",
+    "#f9ca24",
+    "#6c5ce7",
+    "#a29bfe",
+    "#fd79a8",
+    "#00b894"
+  ];
+  while (colors2.length < count) {
+    colors2.push(
+      variations[(colors2.length - baseColors.length) % variations.length]
+    );
+  }
+  return colors2;
+};
+var BarChart = ({
+  data,
+  className,
+  height = 350,
+  width = 900,
+  colors: colors2 = DEFAULT_COLORS3,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  xAxis,
+  mapper,
+  yAxis,
+  labelMap,
+  autoDetect = false
+}) => {
+  const smartConfig = (0, import_react34.useMemo)(() => {
+    const providedMapper = yAxis ?? mapper;
+    if (autoDetect === true || xAxis == null || providedMapper == null) {
+      const detectedXAxis = detectXAxis(data);
+      const detectedFields = detectDataFields(data, detectedXAxis);
+      return {
+        xAxisConfig: {
+          dataKey: detectedXAxis,
+          label: labelMap?.[detectedXAxis] ?? formatFieldName(detectedXAxis),
+          autoLabel: true
+        },
+        mapperConfig: detectedFields.reduce((acc, field) => {
+          acc[field] = {
+            label: labelMap?.[field] ?? formatFieldName(field),
+            type: "number",
+            visible: true
+          };
+          return acc;
+        }, {})
+      };
+    }
+    const xAxisConfig2 = typeof xAxis === "string" ? { dataKey: xAxis, label: formatFieldName(xAxis), autoLabel: true } : xAxis;
+    let mapperConfig2;
+    if (Array.isArray(providedMapper)) {
+      mapperConfig2 = providedMapper.reduce((acc, field) => {
+        acc[field] = {
+          label: labelMap?.[field] ?? formatFieldName(field),
+          type: "auto",
+          visible: true
+        };
+        return acc;
+      }, {});
+    } else {
+      mapperConfig2 = Object.keys(providedMapper).reduce(
+        (acc, key) => {
+          acc[key] = {
+            label: providedMapper[key]?.label ?? labelMap?.[key] ?? formatFieldName(key),
+            type: "auto",
+            visible: true,
+            ...providedMapper[key]
+            // Sobrescreve com configurações do usuário
+          };
+          return acc;
+        },
+        {}
+      );
+    }
+    return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
+  }, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
+  const { xAxisConfig, mapperConfig } = smartConfig;
+  const [activeTooltips, setActiveTooltips] = (0, import_react34.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react34.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react34.useState)({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react34.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react34.useState)([]);
+  const processedData = data.map((item) => ({
+    ...item,
+    name: String(item[xAxisConfig.dataKey] || "N/A")
+    // Garantir propriedade 'name' para tooltip
+  }));
+  const generateColors = (dataKeys2) => {
+    const colorMap = {};
+    const allColors = generateAdditionalColors2(colors2, dataKeys2.length);
+    dataKeys2.forEach((key, index) => {
+      colorMap[key] = allColors[index] || colors2[index % colors2.length];
+    });
+    return colorMap;
+  };
+  const dataKeys = Object.keys(mapperConfig);
+  const finalColors = generateColors(dataKeys);
+  const adaptDataForTooltip = (universalData) => {
+    return {
+      ...universalData,
+      name: String(universalData[xAxisConfig.dataKey] || "N/A")
+      // Garantir que tem a propriedade 'name'
+    };
+  };
+  const niceCeil = (value) => {
+    if (!isFinite(value) || value <= 0) return 1;
+    const pow = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / pow;
+    const multipliers = [
+      1,
+      1.25,
+      1.5,
+      2,
+      2.5,
+      3,
+      4,
+      5,
+      7.5,
+      10,
+      15,
+      20,
+      25,
+      50,
+      100
+    ];
+    for (const m of multipliers) {
+      if (m >= normalized) return Math.ceil(m * pow);
+    }
+    return Math.ceil(100 * pow);
+  };
+  const maxDataValue = (0, import_react34.useMemo)(() => {
+    let max = 0;
+    const keys = Object.keys(mapperConfig);
+    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, mapperConfig]);
+  const niceMax = (0, import_react34.useMemo)(() => {
+    let padding = 0.08;
+    if (maxDataValue > 1e6) padding = 0.05;
+    if (maxDataValue > 1e7) padding = 0.03;
+    if (maxDataValue === 0) padding = 0.12;
+    const padded = maxDataValue * (1 + padding);
+    return niceCeil(padded);
+  }, [maxDataValue]);
+  const handleBarClick = (data2, index, event) => {
+    event.stopPropagation();
+    const xAxisValue = data2[xAxisConfig.dataKey] || "N/A";
+    const tooltipId = `${xAxisValue}`;
+    const rect = event.target.getBoundingClientRect();
+    const existingIndex = activeTooltips.findIndex(
+      (tooltip) => tooltip.id === tooltipId
+    );
+    if (existingIndex !== -1) {
+      setActiveTooltips(
+        (prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
+      );
+    } else {
+      const newTooltip = {
+        id: tooltipId,
+        data: data2,
+        position: {
+          top: rect.top - 10,
+          // Posição fixa da viewport
+          left: rect.right + 10
+          // À direita da barra clicada
+        }
+      };
+      setActiveTooltips((prev) => [...prev, newTooltip]);
+    }
+  };
+  const handleChartClick = () => {
+    setActiveTooltips([]);
+  };
+  const ALIGNMENT_THRESHOLD = 25;
+  const GUIDE_THRESHOLD = 60;
+  const STRONG_SNAP_THRESHOLD = 35;
+  const PRECISION_SNAP_THRESHOLD = 8;
+  const updateAlignmentGuides = (0, import_react34.useCallback)(
+    (draggedTooltipId, currentPosition) => {
+      if (!isDragging) return;
+      const getAllTooltips = () => {
+        const allTooltips2 = [];
+        allTooltips2.push(...activeTooltips);
+        const globalEvent = new CustomEvent("requestGlobalTooltips", {
+          detail: { requesterId: draggedTooltipId, response: allTooltips2 }
+        });
+        window.dispatchEvent(globalEvent);
+        return allTooltips2;
+      };
+      const allTooltips = getAllTooltips();
+      const otherTooltips = allTooltips.filter(
+        (t) => t.id !== draggedTooltipId
+      );
+      const guides = [];
+      const tooltipDimensions = { width: 224, height: 120 };
+      otherTooltips.forEach((tooltip) => {
+        const topDiff = Math.abs(currentPosition.top - tooltip.position.top);
+        if (topDiff <= GUIDE_THRESHOLD) {
+          guides.push({
+            type: "horizontal",
+            position: tooltip.position.top,
+            visible: true,
+            sourceTooltip: {
+              top: currentPosition.top,
+              left: currentPosition.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            },
+            targetTooltip: {
+              top: tooltip.position.top,
+              left: tooltip.position.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            }
+          });
+        }
+        const leftDiff = Math.abs(currentPosition.left - tooltip.position.left);
+        if (leftDiff <= GUIDE_THRESHOLD) {
+          guides.push({
+            type: "vertical",
+            position: tooltip.position.left,
+            visible: true,
+            sourceTooltip: {
+              top: currentPosition.top,
+              left: currentPosition.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            },
+            targetTooltip: {
+              top: tooltip.position.top,
+              left: tooltip.position.left,
+              width: tooltipDimensions.width,
+              height: tooltipDimensions.height
+            }
+          });
+        }
+      });
+      setAlignmentGuides(guides);
+    },
+    [isDragging, activeTooltips]
+  );
+  const snapToGuides = (0, import_react34.useCallback)(
+    (position) => {
+      const snappedPosition = { ...position };
+      let hasSnapped = false;
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position.top - guide.position);
+          if (diff <= PRECISION_SNAP_THRESHOLD) {
+            snappedPosition.top = guide.position;
+            hasSnapped = true;
+          }
+        } else if (guide.type === "vertical") {
+          const diff = Math.abs(position.left - guide.position);
+          if (diff <= PRECISION_SNAP_THRESHOLD) {
+            snappedPosition.left = guide.position;
+            hasSnapped = true;
+          }
+        }
+      });
+      if (!hasSnapped) {
+        alignmentGuides.forEach((guide) => {
+          if (guide.type === "horizontal") {
+            const diff = Math.abs(position.top - guide.position);
+            if (diff <= STRONG_SNAP_THRESHOLD) {
+              snappedPosition.top = guide.position;
+            }
+          } else if (guide.type === "vertical") {
+            const diff = Math.abs(position.left - guide.position);
+            if (diff <= STRONG_SNAP_THRESHOLD) {
+              snappedPosition.left = guide.position;
+            }
+          }
+        });
+      }
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position.top - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD && snappedPosition.top === position.top) {
+            snappedPosition.top = guide.position;
+          }
+        } else if (guide.type === "vertical") {
+          const diff = Math.abs(position.left - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD && snappedPosition.left === position.left) {
+            snappedPosition.left = guide.position;
+          }
+        }
+      });
+      return snappedPosition;
+    },
+    [alignmentGuides]
+  );
+  const handleMouseDown = (e, tooltipId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const tooltip = activeTooltips.find((t) => t.id === tooltipId);
+    if (!tooltip) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    setIsDragging(tooltipId);
+    setDragOffset({ x: offsetX, y: offsetY });
+  };
+  (0, import_react34.useEffect)(() => {
+    let rafId;
+    let lastMousePosition = { x: 0, y: 0 };
+    const handleGlobalMouseMove = (e) => {
+      if (!isDragging) return;
+      lastMousePosition = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMousePosition.x - dragOffset.x;
+        const newTop = lastMousePosition.y - dragOffset.y;
+        const rawPosition = {
+          top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
+          left: Math.max(0, Math.min(newLeft, window.innerWidth - 250))
+        };
+        updateAlignmentGuides(isDragging, rawPosition);
+        const snappedPosition = snapToGuides(rawPosition);
+        setActiveTooltips(
+          (prev) => prev.map((tooltip) => {
+            if (tooltip.id === isDragging) {
+              return {
+                ...tooltip,
+                position: snappedPosition
+              };
+            }
+            return tooltip;
+          })
+        );
+      });
+    };
+    const handleGlobalMouseUp = () => {
+      if (isDragging) {
+        setIsDragging(null);
+        setAlignmentGuides([]);
+        if (rafId) cancelAnimationFrame(rafId);
+      }
+    };
+    if (isDragging) {
+      document.addEventListener("mousemove", handleGlobalMouseMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      document.removeEventListener("mousemove", handleGlobalMouseMove);
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [
+    isDragging,
+    dragOffset,
+    alignmentGuides,
+    updateAlignmentGuides,
+    snapToGuides
+  ]);
+  (0, import_react34.useEffect)(() => {
+    const handleCloseAllTooltips = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
+    };
+  }, []);
+  (0, import_react34.useEffect)(() => {
+    const handleTooltipCountRequest = () => {
+      window.dispatchEvent(
+        new CustomEvent("tooltipCountResponse", {
+          detail: { count: activeTooltips.length }
+        })
+      );
+    };
+    const handleGlobalTooltipsRequest = (event) => {
+      const { detail } = event;
+      if (detail && detail.response && detail.requesterId) {
+        activeTooltips.forEach((tooltip) => {
+          if (!detail.response.find(
+            (t) => t.id === tooltip.id
+          )) {
+            detail.response.push({
+              id: tooltip.id,
+              position: tooltip.position
+            });
+          }
+        });
+      }
+    };
+    window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
+    window.addEventListener(
+      "requestGlobalTooltips",
+      handleGlobalTooltipsRequest
+    );
+    return () => {
+      window.removeEventListener(
+        "requestTooltipCount",
+        handleTooltipCountRequest
+      );
+      window.removeEventListener(
+        "requestGlobalTooltips",
+        handleGlobalTooltipsRequest
+      );
+    };
+  }, [activeTooltips]);
+  (0, import_react34.useEffect)(() => {
+    if (isDragging) return;
+    let totalCount = 0;
+    const handleCountResponse = (event) => {
+      const customEvent = event;
+      totalCount += customEvent.detail.count;
+    };
+    window.addEventListener("tooltipCountResponse", handleCountResponse);
+    window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+    const timeoutId = setTimeout(() => {
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+      setGlobalTooltipCount(totalCount);
+    }, 5);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+    };
+  }, [activeTooltips.length, isDragging]);
+  const CustomTooltip = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (!active || !payload) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
+      payload.map(
+        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            "div",
+            {
+              className: "w-3 h-3 rounded-sm",
+              style: { backgroundColor: entry.color }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-muted-foreground", children: [
+            entry.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+        ] }, index)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+    ] });
+  };
+  const getTitleClassName = (position) => {
+    const baseClasses = "text-xl font-semibold text-foreground mb-3";
+    switch (position) {
+      case "center":
+        return `${baseClasses} text-center`;
+      case "right":
+        return `${baseClasses} text-right`;
+      default:
+        return `${baseClasses} text-left`;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    "div",
+    {
+      className: cn("rounded-lg bg-card p-4 relative", className),
+      style: {
+        width: typeof width === "number" ? `${width + 32}px` : "fit-content",
+        maxWidth: "100%"
+      },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          import_recharts3.BarChart,
+          {
+            data: processedData,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: { top: showLabels ? 48 : 20, right: 30, left: 20, bottom: 5 },
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_recharts3.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_recharts3.XAxis,
+                {
+                  dataKey: xAxisConfig.dataKey,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: xAxisConfig.formatter
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_recharts3.YAxis,
+                {
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: (value) => value.toLocaleString("pt-BR"),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_recharts3.Tooltip,
+                {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CustomTooltip, {}),
+                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                }
+              ),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                import_recharts3.Legend,
+                {
+                  wrapperStyle: {
+                    color: "hsl(var(--foreground))",
+                    fontSize: "14px"
+                  }
+                }
+              ),
+              dataKeys.map((key) => {
+                const fieldConfig = mapperConfig[key];
+                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  import_recharts3.Bar,
+                  {
+                    dataKey: key,
+                    name: fieldConfig?.label || key,
+                    fill: fieldConfig?.color || finalColors[key],
+                    radius: [4, 4, 0, 0],
+                    onClick: handleBarClick,
+                    style: { cursor: "pointer" },
+                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                      import_recharts3.Rectangle,
+                      {
+                        fill: finalColors[key],
+                        stroke: finalColors[key],
+                        strokeWidth: 2,
+                        opacity: 0.8
+                      }
+                    ),
+                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                      import_recharts3.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          finalColors[key] || "#000",
+                          "filled"
+                        )
+                      }
+                    )
+                  },
+                  key
+                );
+              })
+            ]
+          }
+        ),
+        alignmentGuides.map((guide, index) => {
+          const isHorizontal = guide.type === "horizontal";
+          const color = isHorizontal ? "#3b82f6" : "#ef4444";
+          const startX = isHorizontal ? Math.min(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
+          const endX = isHorizontal ? Math.max(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
+          const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-30",
+                style: {
+                  left: startX,
+                  top: startY,
+                  width: isHorizontal ? endX - startX : "2px",
+                  height: isHorizontal ? "2px" : endY - startY,
+                  backgroundColor: color,
+                  boxShadow: `0 0 8px ${color}60`,
+                  opacity: 0.9,
+                  borderStyle: "dashed",
+                  borderWidth: "1px",
+                  borderColor: color,
+                  transform: "translateZ(0)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
+                  top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
+                  top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            )
+          ] }, index);
+        }),
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: adaptDataForTooltip(tooltip.data),
+            position: tooltip.position,
+            isDragging: isDragging === tooltip.id,
+            title,
+            dataKeys,
+            finalColors,
+            onMouseDown: (id, e) => handleMouseDown(e, id),
+            onClose: (id) => {
+              setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
+            },
+            periodLabel: "Per\xEDodo Selecionado",
+            dataLabel: "Dados do Per\xEDodo",
+            showCloseAllButton: index === 0,
+            globalTooltipCount,
+            onCloseAll: () => {
+              window.dispatchEvent(new Event("closeAllTooltips"));
+            },
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        ))
+      ]
+    }
+  );
+};
+var BarChart_default = BarChart;
+
+// src/components/rechart/Chart.tsx
+var import_react37 = require("react");
+var import_recharts4 = require("recharts");
+
+// src/components/rechart/helpers.ts
+var formatFieldName2 = (fieldName) => {
+  return fieldName.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
+};
+var detectDataFields2 = (data, xAxisKey) => {
+  if (!data || data.length === 0) return [];
+  const firstItem = data[0];
+  return Object.keys(firstItem).filter(
+    (key) => key !== xAxisKey && typeof firstItem[key] === "number"
+  );
+};
+var generateAdditionalColors3 = (baseColors, count) => {
+  const hexToRgb = (hex) => {
+    const clean = hex.replace("#", "");
+    const bigint = parseInt(
+      clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean,
+      16
+    );
+    return { r: bigint >> 16 & 255, g: bigint >> 8 & 255, b: bigint & 255 };
+  };
+  const rgbToHsl = ({ r, g, b }) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return {
+      h: Math.round(h * 360),
+      s: Math.round(s * 100),
+      l: Math.round(l * 100)
+    };
+  };
+  const hslToHex = (h, s, l) => {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 5;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+      const color = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+      return Math.round(255 * color).toString(16).padStart(2, "0");
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+  };
+  const anchors = baseColors.map((c) => rgbToHsl(hexToRgb(c)));
+  const colors2 = [...baseColors];
+  let i = 0;
+  while (colors2.length < count) {
+    const anchor = anchors[i % anchors.length];
+    const step = Math.floor(i / anchors.length + 1);
+    const hueOffset = step * 25 * (i % 2 === 0 ? 1 : -1);
+    const satOffset = i % 3 === 0 ? -6 : 6;
+    const lightOffset = i % 4 === 0 ? 6 : -4;
+    const newH = (anchor.h + hueOffset + 360) % 360;
+    const newS = Math.max(30, Math.min(95, anchor.s + satOffset));
+    const newL = Math.max(25, Math.min(45, anchor.l + lightOffset));
+    colors2.push(hslToHex(newH, newS, newL));
+    i += 1;
+  }
+  return colors2.slice(0, count);
+};
+
+// src/components/rechart/PeriodsDropdown.tsx
+var import_react35 = require("react");
+var import_framer_motion7 = require("framer-motion");
+var import_ssr3 = require("@phosphor-icons/react/dist/ssr");
+var import_ssr4 = require("@phosphor-icons/react/dist/ssr");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var menuVariants = {
+  hidden: { opacity: 0, y: -6, scale: 0.98 },
+  visible: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -6, scale: 0.98 }
+};
+var itemVariants = {
+  hidden: { opacity: 0, x: -6 },
+  visible: { opacity: 1, x: 0 }
+};
+var PeriodsDropdown = ({
+  processedData,
+  onOpenPeriod,
+  rightOffset,
+  topOffset,
+  activePeriod,
+  activePeriods
+}) => {
+  const periods = processedData.map((d) => String(d.name));
+  const [open, setOpen] = (0, import_react35.useState)(false);
+  const wrapperRef = (0, import_react35.useRef)(null);
+  const firstItemRef = (0, import_react35.useRef)(null);
+  const listRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target)) setOpen(false);
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, []);
+  (0, import_react35.useEffect)(() => {
+    if (open && firstItemRef.current) {
+      firstItemRef.current.focus();
+    }
+  }, [open]);
+  const handleSelect = (p) => {
+    onOpenPeriod(p);
+    setOpen(false);
+  };
+  const containerStyle = typeof rightOffset === "number" ? { position: "relative", zIndex: 60 } : { position: "relative", zIndex: 60 };
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref: wrapperRef, style: containerStyle, className: "mr-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      "button",
+      {
+        className: "relative p-2 rounded-md hover:bg-accent/10 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition z-10 flex items-center",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") setOpen(true);
+        },
+        title: open ? "Fechar lista de per\xEDodos" : "Abrir lista de per\xEDodos",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ssr3.DotsThreeIcon, { size: 18 }),
+          periods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "absolute -top-1 -right-1 bg-accent text-foreground text-xs rounded-full w-5 h-5 flex items-center justify-center", children: periods.length })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion7.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      import_framer_motion7.motion.div,
+      {
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        variants: menuVariants,
+        transition: { type: "spring", stiffness: 500, damping: 30 },
+        className: "bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+        style: {
+          minWidth: 180,
+          maxHeight: 260,
+          overflow: "hidden",
+          position: "absolute",
+          top: typeof topOffset === "number" ? topOffset : "calc(100% + 6px)",
+          right: typeof rightOffset === "number" ? rightOffset : 0
+        },
+        role: "menu",
+        "aria-orientation": "vertical",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground", children: "Per\xEDodos" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px bg-border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "div",
+            {
+              ref: listRef,
+              className: "flex flex-col p-2 gap-1",
+              style: { maxHeight: 200, overflowY: "auto" },
+              children: periods.map((p, idx) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                import_framer_motion7.motion.button,
+                {
+                  className: "flex items-center justify-between w-full text-left px-3 py-2 rounded focus:outline-none transition-colors " + (activePeriods && activePeriods.includes(p) || p === activePeriod ? "bg-accent/10" : "hover:bg-accent/5 focus:bg-accent/10"),
+                  variants: itemVariants,
+                  initial: "hidden",
+                  animate: "visible",
+                  whileTap: { scale: 0.98 },
+                  onClick: () => handleSelect(p),
+                  ref: idx === 0 ? firstItemRef : void 0,
+                  role: "menuitem",
+                  "aria-checked": activePeriods && activePeriods.includes(p) || p === activePeriod,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: p }),
+                    (activePeriods && activePeriods.includes(p) || p === activePeriod) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ml-2 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ssr4.Check, { size: 16, weight: "bold" }) })
+                  ]
+                },
+                p
+              ))
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+var PeriodsDropdown_default = PeriodsDropdown;
+
+// src/components/rechart/ShowOnly.tsx
+var import_framer_motion8 = require("framer-motion");
+var import_react36 = require("@phosphor-icons/react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var ShowOnly = ({
+  showOnlyHighlighted,
+  setShowOnlyHighlighted,
+  highlightedSeriesSize
+}) => {
+  const hasHighlights = highlightedSeriesSize > 0;
+  if (!hasHighlights) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    import_framer_motion8.motion.div,
+    {
+      whileTap: { scale: hasHighlights ? 0.985 : 1 },
+      whileHover: { y: hasHighlights ? -2 : 0 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        ButtonBase,
+        {
+          variant: "secondary",
+          onClick: () => hasHighlights && setShowOnlyHighlighted((v) => !v),
+          "aria-pressed": showOnlyHighlighted,
+          "aria-label": showOnlyHighlighted ? "Exibir todos" : "Mostrar somente destacados",
+          title: showOnlyHighlighted ? "Exibir todos" : "Mostrar somente destacados",
+          disabled: !hasHighlights,
+          className: cn(
+            "flex items-center gap-2 text-sm px-3 py-1 rounded-md transition-shadow",
+            !hasHighlights ? "opacity-60 cursor-not-allowed" : showOnlyHighlighted ? "bg-primary/10 text-primary shadow-sm border" : "bg-transparent text-muted-foreground border border-transparent hover:bg-muted/5"
+          ),
+          children: showOnlyHighlighted ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react36.EyeSlash, { size: 16, weight: "regular" }) }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react36.Eye, { size: 16, weight: "bold" }) })
+        }
+      )
+    }
+  ) });
+};
+var ShowOnly_default = ShowOnly;
+
+// src/components/rechart/Highlights.tsx
+var import_framer_motion9 = require("framer-motion");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var Highlights = ({
+  allKeys,
+  mapperConfig,
+  finalColors,
+  highlightedSeries,
+  toggleHighlight,
+  containerWidth
+}) => {
+  const count = allKeys.length || 1;
+  const available = containerWidth && containerWidth > 0 ? containerWidth : 600;
+  const perPill = Math.floor(available / count);
+  const showFullLabel = perPill >= 96;
+  const showShortLabel = perPill >= 64;
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.03 } }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    import_framer_motion9.motion.div,
+    {
+      className: "flex-1 flex items-center gap-2 flex-wrap",
+      initial: "hidden",
+      animate: "visible",
+      variants: containerVariants,
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_framer_motion9.AnimatePresence, { initial: false, mode: "popLayout", children: allKeys.map((k) => {
+        const isHighlighted = highlightedSeries.has(k);
+        const label = mapperConfig[k]?.label ?? k;
+        const color = finalColors[k];
+        const pillClasses = cn(
+          "inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm border transition-all select-none",
+          isHighlighted ? "bg-card/95 border-2 text-foreground shadow-[0_6px_18px_rgba(0,0,0,0.12)]" : "bg-muted/10 border-border text-muted-foreground"
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_framer_motion9.motion.div,
+          {
+            layout: true,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              ButtonBase,
+              {
+                asChild: true,
+                variant: "ghost",
+                onClick: () => toggleHighlight(k),
+                title: isHighlighted ? `Desativar ${label}` : `Ativar ${label}`,
+                className: pillClasses,
+                style: { minWidth: showFullLabel ? void 0 : 36 },
+                "aria-pressed": isHighlighted,
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                  import_framer_motion9.motion.button,
+                  {
+                    whileHover: { scale: isHighlighted ? 1.04 : 1.03 },
+                    whileTap: { scale: 0.96 },
+                    animate: isHighlighted ? { scale: 1.02 } : { scale: 1 },
+                    className: "flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                        import_framer_motion9.motion.span,
+                        {
+                          className: cn("w-3 h-3 rounded-sm flex-shrink-0 border"),
+                          style: {
+                            backgroundColor: color,
+                            borderColor: isHighlighted ? color : "transparent",
+                            boxShadow: isHighlighted ? `0 6px 20px ${color}33` : void 0
+                          },
+                          layout: true,
+                          initial: { scale: 0.8, opacity: 0.9 },
+                          animate: { scale: 1, opacity: 1 },
+                          transition: { type: "spring", stiffness: 400, damping: 30 }
+                        }
+                      ),
+                      showFullLabel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_framer_motion9.motion.span, { className: "truncate max-w-[10rem]", layout: true, children: label }) : showShortLabel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                        import_framer_motion9.motion.span,
+                        {
+                          className: "truncate max-w-[6rem] text-xs",
+                          layout: true,
+                          children: label
+                        }
+                      ) : null,
+                      isHighlighted ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                        import_framer_motion9.motion.span,
+                        {
+                          initial: { opacity: 0, scale: 0.6 },
+                          animate: { opacity: 1, scale: 1 },
+                          transition: {
+                            type: "spring",
+                            stiffness: 450,
+                            damping: 28
+                          },
+                          className: "ml-1 text-xs text-foreground",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            "svg",
+                            {
+                              width: "12",
+                              height: "12",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
+                              "aria-hidden": true,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                                "path",
+                                {
+                                  d: "M20 6L9 17l-5-5",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              }
+            )
+          },
+          `pill-${k}`
+        );
+      }) })
+    }
+  );
+};
+var Highlights_default = Highlights;
+
+// src/components/rechart/Chart.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var DEFAULT_COLORS4 = ["#55af7d", "#8e68ff", "#2273e1"];
+var Chart = ({
+  data,
+  series,
+  className,
+  height = 350,
+  width = 900,
+  colors: colors2 = DEFAULT_COLORS4,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  xAxis,
+  labelMap,
+  enableHighlights = false,
+  enableShowOnly = false,
+  enablePeriodsDropdown = false,
+  enableDraggableTooltips = false
+}) => {
+  const smartConfig = (0, import_react37.useMemo)(() => {
+    const xAxisConfig2 = typeof xAxis === "string" ? { dataKey: xAxis, label: formatFieldName2(xAxis), autoLabel: true } : xAxis;
+    const detectedFields = detectDataFields2(data, xAxisConfig2.dataKey);
+    const mapperConfig2 = detectedFields.reduce((acc, field) => {
+      acc[field] = {
+        label: labelMap?.[field] ?? formatFieldName2(field),
+        type: "number",
+        visible: true
+      };
+      return acc;
+    }, {});
+    return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
+  }, [data, xAxis, labelMap]);
+  const { xAxisConfig, mapperConfig } = smartConfig;
+  const [activeTooltips, setActiveTooltips] = (0, import_react37.useState)([]);
+  const [highlightedSeries, setHighlightedSeries] = (0, import_react37.useState)(
+    /* @__PURE__ */ new Set()
+  );
+  const [showOnlyHighlighted, setShowOnlyHighlighted] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
+    if (highlightedSeries.size === 0 && showOnlyHighlighted) {
+      setShowOnlyHighlighted(false);
+    }
+  }, [highlightedSeries, showOnlyHighlighted]);
+  const processedData = data.map((item) => ({
+    ...item,
+    name: String(item[xAxisConfig.dataKey] || "N/A")
+  }));
+  const wrapperRef = (0, import_react37.useRef)(null);
+  const [measuredWidth, setMeasuredWidth] = (0, import_react37.useState)(null);
+  (0, import_react37.useLayoutEffect)(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const r = entries[0];
+      if (r && typeof r.contentRect.width === "number") {
+        setMeasuredWidth(Math.round(r.contentRect.width));
+      }
+    });
+    ro.observe(el);
+    setMeasuredWidth(Math.round(el.getBoundingClientRect().width));
+    return () => ro.disconnect();
+  }, []);
+  const seriesOrder = [];
+  if (series) {
+    if (series.bar)
+      series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
+    if (series.line)
+      series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
+    if (series.area)
+      series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
+  } else {
+    Object.keys(mapperConfig).forEach(
+      (k) => seriesOrder.push({ type: "bar", key: k })
+    );
+  }
+  const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
+  const generateColors = (dataKeys) => {
+    const colorMap = {};
+    const allColors = generateAdditionalColors3(colors2, dataKeys.length);
+    dataKeys.forEach((key, index) => {
+      colorMap[key] = mapperConfig[key] && mapperConfig[key].color || allColors[index] || colors2[index % colors2.length];
+    });
+    return colorMap;
+  };
+  const finalColors = generateColors(allKeys);
+  const adaptDataForTooltip = (0, import_react37.useCallback)(
+    (universalData) => ({
+      ...universalData,
+      name: String(universalData[xAxisConfig.dataKey] || "N/A")
+    }),
+    [xAxisConfig.dataKey]
+  );
+  const activePeriods = (0, import_react37.useMemo)(
+    () => activeTooltips.map((t) => adaptDataForTooltip(t.data).name),
+    [activeTooltips, adaptDataForTooltip]
+  );
+  const openTooltipForPeriod = (periodName) => {
+    if (!enableDraggableTooltips) return;
+    const row = processedData.find((r) => String(r.name) === periodName);
+    if (!row) return;
+    const tooltipId = `${periodName}`;
+    const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+    if (existingIndex !== -1) {
+      setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+      return;
+    }
+    const offsetIndex = activeTooltips.length;
+    const availableWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
+    const newTooltip = {
+      id: tooltipId,
+      data: row,
+      position: {
+        top: 48 + offsetIndex * 28,
+        left: Math.max(120, availableWidth - 260 - offsetIndex * 28)
+      }
+    };
+    setActiveTooltips((prev) => [...prev, newTooltip]);
+  };
+  (0, import_react37.useEffect)(() => {
+    window.dispatchEvent(new Event("recountTooltips"));
+  }, [activeTooltips.length]);
+  const toggleHighlight = (0, import_react37.useCallback)((key) => {
+    setHighlightedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const niceCeil = (value) => {
+    if (!isFinite(value) || value <= 0) return 1;
+    const pow = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / pow;
+    const multipliers = [
+      1,
+      1.25,
+      1.5,
+      2,
+      2.5,
+      3,
+      4,
+      5,
+      7.5,
+      10,
+      15,
+      20,
+      25,
+      50,
+      100
+    ];
+    for (const m of multipliers) {
+      if (m >= normalized) return Math.ceil(m * pow);
+    }
+    return Math.ceil(100 * pow);
+  };
+  const maxDataValue = (0, import_react37.useMemo)(() => {
+    let max = 0;
+    const numericKeys = allKeys;
+    for (const row of processedData) {
+      const r = row;
+      for (const key of numericKeys) {
+        const v = r[key];
+        if (typeof v === "number" && Number.isFinite(v) && v > max) max = v;
+      }
+    }
+    return max;
+  }, [processedData, allKeys]);
+  const niceMax = (0, import_react37.useMemo)(() => {
+    let padding = 0.08;
+    if (maxDataValue > 1e6) padding = 0.05;
+    if (maxDataValue > 1e7) padding = 0.03;
+    if (maxDataValue === 0) padding = 0.12;
+    const padded = maxDataValue * (1 + padding);
+    return niceCeil(padded);
+  }, [maxDataValue]);
+  const computedWidth = (0, import_react37.useMemo)(() => {
+    if (typeof width === "number") return width;
+    const points = processedData.length || 1;
+    const barCount = series?.bar?.length ?? 0;
+    const lineCount = series?.line?.length ?? 0;
+    const areaCount = series?.area?.length ?? 0;
+    const basePerPoint = 84;
+    const perBarExtra = Math.max(0, barCount - 1) * 10;
+    const perOtherExtra = (lineCount + areaCount) * 6;
+    let sizeFactor = 1;
+    if (niceMax > 1e5) sizeFactor = 1.18;
+    if (niceMax > 1e6) sizeFactor = 1.36;
+    if (niceMax > 1e7) sizeFactor = 1.6;
+    const perPoint = Math.round(
+      (basePerPoint + perBarExtra + perOtherExtra) * sizeFactor
+    );
+    const marginExtra = 140;
+    const raw = Math.round(points * perPoint + marginExtra);
+    const min = 380;
+    const max = 2200;
+    return Math.max(min, Math.min(max, raw));
+  }, [
+    width,
+    processedData.length,
+    series?.bar?.length,
+    series?.line?.length,
+    series?.area?.length,
+    niceMax
+  ]);
+  const handleBarClick = (data2, index, event) => {
+    if (!enableDraggableTooltips) return;
+    event.stopPropagation();
+    const xAxisValue = data2[xAxisConfig.dataKey] || "N/A";
+    const tooltipId = `${xAxisValue}`;
+    const rect = event.target.getBoundingClientRect();
+    const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+    if (existingIndex !== -1) {
+      setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+    } else {
+      const newTooltip = {
+        id: tooltipId,
+        data: data2,
+        position: { top: rect.top - 10, left: rect.right + 10 }
+      };
+      setActiveTooltips((prev) => [...prev, newTooltip]);
+    }
+  };
+  const handleChartClick = (e) => {
+    if (!enableDraggableTooltips) return;
+    const ev = e;
+    if (ev && ev.activePayload && ev.activePayload.length > 0) {
+      const clickedData = ev.activePayload[0].payload;
+      const xAxisValue = clickedData[xAxisConfig.dataKey] || clickedData.name || "N/A";
+      const tooltipId = `${xAxisValue}`;
+      const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+      if (existingIndex !== -1) {
+        setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+      } else {
+        const newTooltip = {
+          id: tooltipId,
+          data: clickedData,
+          position: {
+            top: (ev?.chartY || 100) - 10,
+            left: (ev?.chartX || 100) - 100
+          }
+        };
+        setActiveTooltips((prev) => [...prev, newTooltip]);
+      }
+      return;
+    }
+    setActiveTooltips([]);
+  };
+  const handleSeriesClick = (...args) => {
+    if (args.length >= 3) {
+      const [data2, index, event] = args;
+      handleBarClick(data2, index, event);
+      return;
+    }
+    handleChartClick(args[0]);
+  };
+  const onTooltipPositionChange = (id, position) => {
+    setActiveTooltips(
+      (prev) => prev.map((t) => t.id === id ? { ...t, position } : t)
+    );
+  };
+  const CustomTooltip = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (!active || !payload) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
+      payload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "div",
+          {
+            className: "w-3 h-3 rounded-sm",
+            style: {
+              backgroundColor: finalColors[entry.dataKey] || entry.color
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-muted-foreground", children: [
+          entry.name,
+          ":"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+      ] }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+    ] });
+  };
+  const getTitleClassName = () => {
+    return "text-xl font-semibold text-foreground mb-3";
+  };
+  const finalEnableHighlights = enableHighlights;
+  const finalEnableShowOnly = enableShowOnly;
+  const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
+  const chartRightMargin = 30;
+  const containerPaddingLeft = 16;
+  const chartLeftMargin = 20;
+  const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
+  const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
+  const chartInnerWidth = effectiveChartWidth - chartLeftMargin - chartRightMargin;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      style: {
+        width: "100%",
+        overflowX: typeof width === "number" ? "auto" : "visible",
+        overflowY: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        "div",
+        {
+          className: cn("rounded-lg bg-card p-4 relative", className),
+          style: typeof width === "number" ? { width: `${width + 32}px` } : { width: "100%", maxWidth: "100%" },
+          children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                style: {
+                  paddingLeft: `${containerPaddingLeft + chartLeftMargin}px`,
+                  width: "100%",
+                  maxWidth: `${chartInnerWidth}px`,
+                  display: "flex",
+                  justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: getTitleClassName(), children: title })
+              }
+            ),
+            allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              "div",
+              {
+                className: "flex items-center w-full",
+                style: {
+                  paddingLeft: `${containerPaddingLeft + chartLeftMargin}px`,
+                  width: "98%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem"
+                },
+                children: [
+                  finalEnableHighlights && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    Highlights_default,
+                    {
+                      allKeys,
+                      mapperConfig,
+                      finalColors,
+                      highlightedSeries,
+                      toggleHighlight,
+                      containerWidth: chartInnerWidth
+                    }
+                  ),
+                  finalEnableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    ShowOnly_default,
+                    {
+                      showOnlyHighlighted,
+                      setShowOnlyHighlighted,
+                      highlightedSeriesSize: highlightedSeries.size,
+                      clearHighlights: () => setHighlightedSeries(/* @__PURE__ */ new Set())
+                    }
+                  ),
+                  finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    "div",
+                    {
+                      style: {
+                        marginLeft: "auto",
+                        display: "flex",
+                        alignItems: "center"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        PeriodsDropdown_default,
+                        {
+                          processedData,
+                          onOpenPeriod: openTooltipForPeriod,
+                          rightOffset: chartRightMargin,
+                          activePeriods
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            !(allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly)) && finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                style: {
+                  paddingLeft: `${containerPaddingLeft + chartLeftMargin}px`,
+                  paddingRight: `${chartRightMargin}px`,
+                  width: "100%",
+                  maxWidth: `${chartInnerWidth}px`,
+                  display: "flex",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  PeriodsDropdown_default,
+                  {
+                    processedData,
+                    onOpenPeriod: openTooltipForPeriod,
+                    rightOffset: chartRightMargin
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              import_recharts4.ComposedChart,
+              {
+                data: processedData,
+                height,
+                margin: {
+                  top: showLabels ? 48 : 20,
+                  right: 30,
+                  left: 20,
+                  bottom: 5
+                },
+                onClick: handleChartClick,
+                children: [
+                  showGrid && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts4.CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      stroke: gridColor || "hsl(var(--muted-foreground))",
+                      opacity: 0.5
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts4.XAxis,
+                    {
+                      dataKey: xAxisConfig.dataKey,
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tickFormatter: xAxisConfig.formatter
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts4.YAxis,
+                    {
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tickFormatter: (value) => Number(value).toLocaleString("pt-BR"),
+                      domain: [0, niceMax],
+                      tickCount: 6
+                    }
+                  ),
+                  showTooltip && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts4.Tooltip,
+                    {
+                      content: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CustomTooltip, {}),
+                      cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                    }
+                  ),
+                  showLegend && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts4.Legend,
+                    {
+                      wrapperStyle: {
+                        color: "hsl(var(--foreground))",
+                        fontSize: "14px"
+                      }
+                    }
+                  ),
+                  seriesOrder.map((s) => {
+                    const key = s.key;
+                    if (showOnlyHighlighted && !highlightedSeries.has(key))
+                      return null;
+                    const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
+                    const color = finalColors[key];
+                    if (s.type === "bar") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts4.Bar,
+                        {
+                          dataKey: key,
+                          name: label,
+                          fill: color,
+                          radius: [4, 4, 0, 0],
+                          onClick: handleBarClick,
+                          style: {
+                            cursor: "pointer",
+                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
+                          },
+                          activeBar: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts4.Rectangle,
+                            {
+                              fill: color,
+                              stroke: color,
+                              strokeWidth: 2,
+                              opacity: 0.8
+                            }
+                          ),
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts4.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 8
+                            }
+                          ) : null
+                        },
+                        `bar-${key}`
+                      );
+                    }
+                    if (s.type === "line") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts4.Line,
+                        {
+                          dataKey: key,
+                          name: label,
+                          stroke: color,
+                          strokeWidth: 2,
+                          dot: { r: 3 },
+                          activeDot: { r: 6 },
+                          onClick: handleSeriesClick,
+                          style: {
+                            cursor: "pointer",
+                            pointerEvents: "all",
+                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
+                          },
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts4.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 14
+                            }
+                          ) : null
+                        },
+                        `line-${key}`
+                      );
+                    }
+                    if (s.type === "area") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts4.Area,
+                        {
+                          dataKey: key,
+                          name: label,
+                          stroke: color,
+                          fill: color,
+                          fillOpacity: 0.15,
+                          onClick: handleSeriesClick,
+                          style: {
+                            cursor: "pointer",
+                            pointerEvents: "all",
+                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
+                          },
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts4.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "soft"),
+                              offset: 12
+                            }
+                          ) : null
+                        },
+                        `area-${key}`
+                      );
+                    }
+                    return null;
+                  })
+                ]
+              }
+            ) }),
+            enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              DraggableTooltip_default,
+              {
+                id: tooltip.id,
+                data: adaptDataForTooltip(tooltip.data),
+                position: tooltip.position,
+                title,
+                dataKeys: allKeys,
+                finalColors,
+                onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
+                onPositionChange: onTooltipPositionChange,
+                periodLabel: "Per\xEDodo Selecionado",
+                dataLabel: "Dados do Per\xEDodo",
+                globalTooltipCount: activeTooltips.length,
+                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+                closeAllButtonPosition: "top-center",
+                closeAllButtonVariant: "floating"
+              },
+              tooltip.id
+            )),
+            enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              CloseAllButton_default,
+              {
+                count: activeTooltips.length,
+                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+                position: "top-center",
+                variant: "floating"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var Chart_default = Chart;
+
+// src/hooks/use-drag.tsx
+var import_react38 = require("react");
+var useDrag = (options = {}) => {
+  const [isDragging, setIsDragging] = (0, import_react38.useState)(null);
+  const [positions, setPositions] = (0, import_react38.useState)({});
+  const dragStartPos = (0, import_react38.useRef)(null);
+  const dragId = (0, import_react38.useRef)(null);
+  const handleMouseDown = (0, import_react38.useCallback)((id, e) => {
+    e.preventDefault();
+    const currentPosition = positions[id] || { top: 0, left: 0 };
+    dragStartPos.current = {
+      x: e.clientX,
+      y: e.clientY,
+      elementX: currentPosition.left,
+      elementY: currentPosition.top
+    };
+    dragId.current = id;
+    setIsDragging(id);
+    options.onDragStart?.(id);
+  }, [positions, options]);
+  const handleMouseMove = (0, import_react38.useCallback)((e) => {
+    if (!isDragging || !dragStartPos.current || !dragId.current) return;
+    const deltaX = e.clientX - dragStartPos.current.x;
+    const deltaY = e.clientY - dragStartPos.current.y;
+    const newPosition = {
+      left: dragStartPos.current.elementX + deltaX,
+      top: dragStartPos.current.elementY + deltaY
+    };
+    newPosition.left = Math.max(0, Math.min(window.innerWidth - 300, newPosition.left));
+    newPosition.top = Math.max(0, Math.min(window.innerHeight - 200, newPosition.top));
+    setPositions((prev) => ({
+      ...prev,
+      [dragId.current]: newPosition
+    }));
+    options.onDrag?.(dragId.current, newPosition);
+  }, [isDragging, options]);
+  const handleMouseUp = (0, import_react38.useCallback)(() => {
+    if (dragId.current) {
+      options.onDragEnd?.(dragId.current);
+    }
+    setIsDragging(null);
+    dragStartPos.current = null;
+    dragId.current = null;
+  }, [options]);
+  (0, import_react38.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.userSelect = "none";
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.userSelect = "";
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const setPosition = (0, import_react38.useCallback)((id, position) => {
+    setPositions((prev) => ({
+      ...prev,
+      [id]: position
+    }));
+  }, []);
+  const getPosition = (0, import_react38.useCallback)((id) => {
+    return positions[id] || { top: 0, left: 0 };
+  }, [positions]);
+  const isElementDragging = (0, import_react38.useCallback)((id) => {
+    return isDragging === id;
+  }, [isDragging]);
+  return {
+    handleMouseDown,
+    getPosition,
+    setPosition,
+    isElementDragging,
+    isDragging: isDragging !== null
+  };
+};