@mlw-packages/react-components 1.5.7 → 1.5.8

package/dist/index.mjs

@@ -4393,11 +4393,87 @@ function ModeToggleBase({
   ] });
 }
 
+// src/components/ui/DestructiveDialog.tsx
+import * as React29 from "react";
+import { XCircleIcon as XCircleIcon2 } from "@phosphor-icons/react";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var DestructiveDialog = ({
+  title,
+  description,
+  onConfirm,
+  onCancel,
+  children,
+  triggerContent
+}) => {
+  const titleId = "destructive-dialog-title";
+  const descriptionId = "destructive-dialog-description";
+  const triggerEl = React29.isValidElement(children) ? /* @__PURE__ */ jsx43(AlertDialogTriggerBase, { asChild: true, children }) : /* @__PURE__ */ jsx43(AlertDialogTriggerBase, { children: /* @__PURE__ */ jsx43(ButtonBase, { variant: "destructive", children: triggerContent ?? "Excluir" }) });
+  return /* @__PURE__ */ jsxs25(AlertDialogBase, { children: [
+    triggerEl,
+    /* @__PURE__ */ jsxs25(
+      AlertDialogContentBase,
+      {
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        className: cn("border border-destructive bg-background"),
+        children: [
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-4", children: [
+            /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-destructive/30", children: /* @__PURE__ */ jsx43(XCircleIcon2, { className: "w-6 h-6 text-destructive" }) }),
+            /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx43(
+                AlertDialogTitleBase,
+                {
+                  id: titleId,
+                  className: "text-lg sm:text-xl font-semibold text-destructive",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                AlertDialogDescriptionBase,
+                {
+                  id: descriptionId,
+                  className: "mt-2 text-sm text-muted-foreground",
+                  children: description
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs25(AlertDialogFooterBase, { className: "mt-2 flex justify-end gap-3", children: [
+            /* @__PURE__ */ jsx43(
+              AlertDialogCancelBase,
+              {
+                onClick: onCancel,
+                className: cn(
+                  buttonVariantsBase({ variant: "outline", size: "default" }),
+                  "hover:bg-foreground/5 hover:text-primary hover:opacity-90 hover:shadow-none"
+                ),
+                children: "Cancelar"
+              }
+            ),
+            /* @__PURE__ */ jsx43(
+              AlertDialogActionBase,
+              {
+                onClick: onConfirm,
+                className: cn(
+                  buttonVariantsBase({ variant: "destructive", size: "default" })
+                ),
+                children: "Confirmar"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/components/date-time-picker/DateTimePicker.tsx
 import { add, format } from "date-fns";
 
 // src/components/date-time-picker/calendar.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import {
   CaretLeftIcon as CaretLeftIcon2,
@@ -4406,35 +4482,35 @@ import {
   CalendarIcon
 } from "@phosphor-icons/react";
 import { AnimatePresence as AnimatePresence4 } from "framer-motion";
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function CalendarBase2({
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }) {
-  const [month, setMonth] = React29.useState(
+  const [month, setMonth] = React30.useState(
     props.month || props.defaultMonth || /* @__PURE__ */ new Date()
   );
-  const [direction, setDirection] = React29.useState(1);
+  const [direction, setDirection] = React30.useState(1);
   const handleMonthChange = (newMonth) => {
     const isNext = newMonth > month ? 1 : -1;
     setDirection(isNext);
     setMonth(newMonth);
     props.onMonthChange?.(newMonth);
   };
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: cn(
         "rounded-2xl border bg-background p-4 shadow-lg overflow-hidden w-full h-full flex flex-col",
         className
       ),
-      children: /* @__PURE__ */ jsx43("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx43(AnimatePresence4, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx44(AnimatePresence4, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ jsx44(
         "div",
         {
           className: "w-full h-full flex flex-col",
-          children: /* @__PURE__ */ jsx43(
+          children: /* @__PURE__ */ jsx44(
             DayPicker2,
             {
               showOutsideDays,
@@ -4483,8 +4559,8 @@ function CalendarBase2({
                 ...classNames
               },
               components: {
-                IconLeft: () => /* @__PURE__ */ jsx43(CaretLeftIcon2, { className: "h-4 w-4" }),
-                IconRight: () => /* @__PURE__ */ jsx43(CaretRightIcon5, { className: "h-4 w-4" })
+                IconLeft: () => /* @__PURE__ */ jsx44(CaretLeftIcon2, { className: "h-4 w-4" }),
+                IconRight: () => /* @__PURE__ */ jsx44(CaretRightIcon5, { className: "h-4 w-4" })
               },
               ...props
             }
@@ -4503,11 +4579,11 @@ import { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/date-time-picker/TimePicker.tsx
 import { motion as motion6, AnimatePresence as AnimatePresence5 } from "framer-motion";
-import * as React31 from "react";
+import * as React32 from "react";
 
 // src/components/date-time-picker/TimePickerInput.tsx
 import { CaretUpIcon as CaretUpIcon2, CaretDownIcon as CaretDownIcon4 } from "@phosphor-icons/react";
-import React30 from "react";
+import React31 from "react";
 
 // src/components/date-time-picker/time-picker-utils.ts
 function isValidHour(value) {
@@ -4649,8 +4725,8 @@ function display12HourValue(hours) {
 }
 
 // src/components/date-time-picker/TimePickerInput.tsx
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
-var TimePickerInput = React30.forwardRef(
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+var TimePickerInput = React31.forwardRef(
   ({
     className,
     type = "tel",
@@ -4669,10 +4745,10 @@ var TimePickerInput = React30.forwardRef(
     label,
     ...props
   }, ref) => {
-    const [flag, setFlag] = React30.useState(false);
-    const [prevIntKey, setPrevIntKey] = React30.useState("0");
-    const [isFocused, setIsFocused] = React30.useState(false);
-    React30.useEffect(() => {
+    const [flag, setFlag] = React31.useState(false);
+    const [prevIntKey, setPrevIntKey] = React31.useState("0");
+    const [isFocused, setIsFocused] = React31.useState(false);
+    React31.useEffect(() => {
       if (flag) {
         const timer = setTimeout(() => {
           setFlag(false);
@@ -4680,7 +4756,7 @@ var TimePickerInput = React30.forwardRef(
         return () => clearTimeout(timer);
       }
     }, [flag]);
-    const calculatedValue = React30.useMemo(() => {
+    const calculatedValue = React31.useMemo(() => {
       return getDateByType(date, picker);
     }, [date, picker]);
     const calculateNewValue = (key) => {
@@ -4736,8 +4812,8 @@ var TimePickerInput = React30.forwardRef(
       const baseLabel = getPickerLabel();
       return `${baseLabel}, valor atual: ${calculatedValue}.`;
     };
-    return /* @__PURE__ */ jsxs26("div", { className: "relative group flex flex-col items-center", children: [
-      getPickerLabel() && /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsxs27("div", { className: "relative group flex flex-col items-center", children: [
+      getPickerLabel() && /* @__PURE__ */ jsx45(
         "label",
         {
           htmlFor: id || picker,
@@ -4745,7 +4821,7 @@ var TimePickerInput = React30.forwardRef(
           children: getPickerLabel()
         }
       ),
-      /* @__PURE__ */ jsxs26(
+      /* @__PURE__ */ jsxs27(
         "div",
         {
           className: cn(
@@ -4753,7 +4829,7 @@ var TimePickerInput = React30.forwardRef(
             "transition-all duration-200"
           ),
           children: [
-            showArrows && /* @__PURE__ */ jsx44(
+            showArrows && /* @__PURE__ */ jsx45(
               "button",
               {
                 type: "button",
@@ -4769,11 +4845,11 @@ var TimePickerInput = React30.forwardRef(
                 ),
                 tabIndex: -1,
                 "aria-label": `Incrementar ${getPickerLabel().toLowerCase()}`,
-                children: /* @__PURE__ */ jsx44(CaretUpIcon2, { size: 14, className: "sm:w-4 sm:h-4" })
+                children: /* @__PURE__ */ jsx45(CaretUpIcon2, { size: 14, className: "sm:w-4 sm:h-4" })
               }
             ),
-            /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx45(
                 "input",
                 {
                   ref,
@@ -4818,9 +4894,9 @@ var TimePickerInput = React30.forwardRef(
                   ...props
                 }
               ),
-              isFocused && /* @__PURE__ */ jsx44("div", { className: "absolute inset-0 rounded-lg ring-2 ring-primary/20 pointer-events-none animate-pulse" })
+              isFocused && /* @__PURE__ */ jsx45("div", { className: "absolute inset-0 rounded-lg ring-2 ring-primary/20 pointer-events-none animate-pulse" })
             ] }),
-            showArrows && /* @__PURE__ */ jsx44(
+            showArrows && /* @__PURE__ */ jsx45(
               "button",
               {
                 type: "button",
@@ -4836,7 +4912,7 @@ var TimePickerInput = React30.forwardRef(
                 ),
                 tabIndex: -1,
                 "aria-label": `Decrementar ${getPickerLabel().toLowerCase()}`,
-                children: /* @__PURE__ */ jsx44(CaretDownIcon4, { size: 14, className: "sm:w-4 sm:h-4" })
+                children: /* @__PURE__ */ jsx45(CaretDownIcon4, { size: 14, className: "sm:w-4 sm:h-4" })
               }
             )
           ]
@@ -4848,16 +4924,16 @@ var TimePickerInput = React30.forwardRef(
 TimePickerInput.displayName = "TimePickerInput";
 
 // src/components/date-time-picker/TimePicker.tsx
-import { Fragment as Fragment4, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function TimePicker({
   date,
   setDate,
   hideSeconds,
   enableButton
 }) {
-  const minuteRef = React31.useRef(null);
-  const hourRef = React31.useRef(null);
-  const secondRef = React31.useRef(null);
+  const minuteRef = React32.useRef(null);
+  const hourRef = React32.useRef(null);
+  const secondRef = React32.useRef(null);
   const containerVariants = {
     hidden: { opacity: 0, y: 10 },
     visible: {
@@ -4873,7 +4949,7 @@ function TimePicker({
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 }
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     motion6.div,
     {
       variants: containerVariants,
@@ -4881,12 +4957,12 @@ function TimePicker({
       animate: "visible",
       className: "flex items-end justify-center gap-2 sm:gap-3 p-2 sm:p-3 md:p-4 rounded-lg bg-muted/20 border border-border/50 w-full max-w-full overflow-hidden",
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           motion6.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               TimePickerInput,
               {
                 picker: "hours",
@@ -4899,12 +4975,12 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           motion6.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               TimePickerInput,
               {
                 picker: "minutes",
@@ -4918,7 +4994,7 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ jsx45(AnimatePresence5, { children: !hideSeconds && /* @__PURE__ */ jsx45(Fragment4, { children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(AnimatePresence5, { children: !hideSeconds && /* @__PURE__ */ jsx46(Fragment4, { children: /* @__PURE__ */ jsx46(
           motion6.div,
           {
             variants: itemVariants2,
@@ -4926,7 +5002,7 @@ function TimePicker({
             animate: "visible",
             exit: "hidden",
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               TimePickerInput,
               {
                 picker: "seconds",
@@ -4946,7 +5022,7 @@ function TimePicker({
 
 // src/components/date-time-picker/DateTimePicker.tsx
 import { CalendarBlankIcon, ClockIcon } from "@phosphor-icons/react";
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function DateTimePicker({
   label,
   date,
@@ -4995,10 +5071,10 @@ function DateTimePicker({
       setInternalDate(date);
     }
   }, [date, open]);
-  return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-2 w-full sm:w-auto", className), children: [
-    label && /* @__PURE__ */ jsx46(LabelBase_default, { children: label }),
-    /* @__PURE__ */ jsxs28(PopoverBase, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx46(PopoverTriggerBase, { disabled, asChild: true, children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-2 w-full sm:w-auto", className), children: [
+    label && /* @__PURE__ */ jsx47(LabelBase_default, { children: label }),
+    /* @__PURE__ */ jsxs29(PopoverBase, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx47(PopoverTriggerBase, { disabled, asChild: true, children: /* @__PURE__ */ jsxs29(
         ButtonBase,
         {
           variant: "outline",
@@ -5010,12 +5086,12 @@ function DateTimePicker({
             !date && "text-muted-foreground"
           ),
           children: [
-            /* @__PURE__ */ jsx46("span", { className: "truncate flex-1", children: date ? format(date, getDisplayFormat(), { locale: ptBR }) : "Pick a date" }),
-            /* @__PURE__ */ jsx46(CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+            /* @__PURE__ */ jsx47("span", { className: "truncate flex-1", children: date ? format(date, getDisplayFormat(), { locale: ptBR }) : "Pick a date" }),
+            /* @__PURE__ */ jsx47(CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         PopoverContentBase,
         {
           className: "w-full p-0",
@@ -5024,8 +5100,8 @@ function DateTimePicker({
           side: "bottom",
           avoidCollisions: true,
           collisionPadding: 8,
-          children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col space-y-2 sm:space-y-3 p-2 sm:p-3 md:p-4 max-h-[calc(100vh-4rem)] overflow-y-auto", children: [
-            /* @__PURE__ */ jsx46(
+          children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col space-y-2 sm:space-y-3 p-2 sm:p-3 md:p-4 max-h-[calc(100vh-4rem)] overflow-y-auto", children: [
+            /* @__PURE__ */ jsx47(
               CalendarBase2,
               {
                 mode: "single",
@@ -5038,13 +5114,13 @@ function DateTimePicker({
                 className: "w-full"
               }
             ),
-            !(hideHour && hideMinute) && /* @__PURE__ */ jsx46("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ jsxs28(
+            !(hideHour && hideMinute) && /* @__PURE__ */ jsx47("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ jsxs29(
               PopoverBase,
               {
                 open: timePickerOpen,
                 onOpenChange: setTimePickerOpen,
                 children: [
-                  /* @__PURE__ */ jsx46(PopoverTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs28(
+                  /* @__PURE__ */ jsx47(PopoverTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs29(
                     ButtonBase,
                     {
                       variant: "outline",
@@ -5060,14 +5136,14 @@ function DateTimePicker({
                         "min-h-[36px] sm:min-h-[40px]"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx46(ClockIcon, { className: "text-primary/70 flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
-                        /* @__PURE__ */ jsx46("span", { className: "text-foreground truncate", children: internalDate ? format(internalDate, getTimeFormat() || "HH:mm", {
+                        /* @__PURE__ */ jsx47(ClockIcon, { className: "text-primary/70 flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
+                        /* @__PURE__ */ jsx47("span", { className: "text-foreground truncate", children: internalDate ? format(internalDate, getTimeFormat() || "HH:mm", {
                           locale: ptBR
                         }) : "00:00" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx47(
                     PopoverContentBase,
                     {
                       className: "w-[calc(100vw-2rem)] max-w-sm p-3 sm:p-3 rounded-md",
@@ -5076,9 +5152,9 @@ function DateTimePicker({
                       sideOffset: 8,
                       avoidCollisions: true,
                       collisionPadding: 8,
-                      children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center space-y-2 sm:space-y-3", children: [
-                        /* @__PURE__ */ jsx46("h4", { className: "text-sm sm:text-base font-medium text-center", children: "Alterar Hor\xE1rio" }),
-                        /* @__PURE__ */ jsx46(
+                      children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center space-y-2 sm:space-y-3", children: [
+                        /* @__PURE__ */ jsx47("h4", { className: "text-sm sm:text-base font-medium text-center", children: "Alterar Hor\xE1rio" }),
+                        /* @__PURE__ */ jsx47(
                           TimePicker,
                           {
                             setDate: handleTimeChange,
@@ -5086,7 +5162,7 @@ function DateTimePicker({
                             hideSeconds
                           }
                         ),
-                        /* @__PURE__ */ jsx46(
+                        /* @__PURE__ */ jsx47(
                           ButtonBase,
                           {
                             size: "sm",
@@ -5110,7 +5186,7 @@ function DateTimePicker({
 }
 
 // src/components/selects/Select.tsx
-import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 function Select({
   items,
   groupItems,
@@ -5119,9 +5195,9 @@ function Select({
   errorMessage,
   testIds = {}
 }) {
-  return /* @__PURE__ */ jsxs29("div", { "data-testid": testIds.root ?? "select-root", children: [
-    /* @__PURE__ */ jsxs29(SelectBase, { onValueChange: onChange, "data-testid": testIds.base ?? "select-base", children: [
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs30("div", { "data-testid": testIds.root ?? "select-root", children: [
+    /* @__PURE__ */ jsxs30(SelectBase, { onValueChange: onChange, "data-testid": testIds.base ?? "select-base", children: [
+      /* @__PURE__ */ jsx48(
         SelectTriggerBase,
         {
           className: cn(
@@ -5129,7 +5205,7 @@ function Select({
             errorMessage && "border-red-500"
           ),
           "data-testid": testIds.trigger ?? "select-trigger",
-          children: /* @__PURE__ */ jsx47(
+          children: /* @__PURE__ */ jsx48(
             SelectValueBase,
             {
               placeholder,
@@ -5138,9 +5214,9 @@ function Select({
           )
         }
       ),
-      /* @__PURE__ */ jsx47(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsx47(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ jsx47(Fragment5, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ jsxs29(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: [
-        /* @__PURE__ */ jsx47(SelectLabelBase, { "data-testid": testIds.label ?? "select-label", children: key }),
-        groupItems[key].map((item) => /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx48(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsx48(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ jsx48(Fragment5, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ jsxs30(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: [
+        /* @__PURE__ */ jsx48(SelectLabelBase, { "data-testid": testIds.label ?? "select-label", children: key }),
+        groupItems[key].map((item) => /* @__PURE__ */ jsx48(
           SelectItemBase,
           {
             value: item.value,
@@ -5149,7 +5225,7 @@ function Select({
           },
           item.value
         ))
-      ] }, key)) }) : /* @__PURE__ */ jsx47(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ jsx47(
+      ] }, key)) }) : /* @__PURE__ */ jsx48(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ jsx48(
         SelectItemBase,
         {
           value: item.value,
@@ -5159,7 +5235,7 @@ function Select({
         item.value
       )) }) }) })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx47(
+    errorMessage && /* @__PURE__ */ jsx48(
       "p",
       {
         className: "text-sm text-red-500",
@@ -5170,141 +5246,233 @@ function Select({
   ] });
 }
 
-// src/components/ui/DestructiveDialog.tsx
-import * as React32 from "react";
-import { XCircleIcon as XCircleIcon2 } from "@phosphor-icons/react";
-import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
-var DestructiveDialog = ({
-  title,
-  description,
-  onConfirm,
-  onCancel,
-  children,
-  triggerContent
-}) => {
-  const titleId = "destructive-dialog-title";
-  const descriptionId = "destructive-dialog-description";
-  const triggerEl = React32.isValidElement(children) ? /* @__PURE__ */ jsx48(AlertDialogTriggerBase, { asChild: true, children }) : /* @__PURE__ */ jsx48(AlertDialogTriggerBase, { children: /* @__PURE__ */ jsx48(ButtonBase, { variant: "destructive", children: triggerContent ?? "Excluir" }) });
-  return /* @__PURE__ */ jsxs30(AlertDialogBase, { children: [
-    triggerEl,
-    /* @__PURE__ */ jsxs30(
-      AlertDialogContentBase,
-      {
-        role: "alertdialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        "aria-describedby": descriptionId,
-        className: cn("border border-destructive bg-background"),
-        children: [
-          /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-4", children: [
-            /* @__PURE__ */ jsx48("div", { className: "flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-destructive/30", children: /* @__PURE__ */ jsx48(XCircleIcon2, { className: "w-6 h-6 text-destructive" }) }),
-            /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx48(
-                AlertDialogTitleBase,
-                {
-                  id: titleId,
-                  className: "text-lg sm:text-xl font-semibold text-destructive",
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ jsx48(
-                AlertDialogDescriptionBase,
-                {
-                  id: descriptionId,
-                  className: "mt-2 text-sm text-muted-foreground",
-                  children: description
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs30(AlertDialogFooterBase, { className: "mt-2 flex justify-end gap-3", children: [
-            /* @__PURE__ */ jsx48(
-              AlertDialogCancelBase,
-              {
-                onClick: onCancel,
-                className: cn(
-                  buttonVariantsBase({ variant: "outline", size: "default" }),
-                  "hover:bg-foreground/5 hover:text-primary hover:opacity-90 hover:shadow-none"
-                ),
-                children: "Cancelar"
-              }
-            ),
-            /* @__PURE__ */ jsx48(
-              AlertDialogActionBase,
-              {
-                onClick: onConfirm,
-                className: cn(
-                  buttonVariantsBase({ variant: "destructive", size: "default" })
-                ),
-                children: "Confirmar"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-};
+// src/components/charts/Chart.tsx
+import {
+  useState as useState11,
+  useEffect as useEffect10,
+  useCallback as useCallback7,
+  useMemo as useMemo6,
+  useRef as useRef4,
+  useLayoutEffect
+} from "react";
+import {
+  ComposedChart,
+  Bar,
+  Line,
+  Area,
+  Rectangle,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  LabelList,
+  ResponsiveContainer
+} from "recharts";
 
-// src/components/charts/components/controls/PeriodsDropdown.tsx
-import { useState as useState9, useRef as useRef2, useEffect as useEffect8 } from "react";
-import { motion as motion7, AnimatePresence as AnimatePresence6 } from "framer-motion";
-import { DotsThreeIcon as DotsThreeIcon2 } from "@phosphor-icons/react/dist/ssr";
-import { Check } from "@phosphor-icons/react/dist/ssr";
-import { jsx as jsx49, jsxs as jsxs31 } from "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 }
+// src/components/charts/utils/helpers.ts
+var formatFieldName = (fieldName) => {
+  return fieldName.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
 };
-var itemVariants = {
-  hidden: { opacity: 0, x: -6 },
-  visible: { opacity: 1, x: 0 }
+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"
+  );
 };
-function PeriodsDropdown({
-  processedData,
-  onOpenPeriod,
-  rightOffset,
-  topOffset,
-  activePeriod,
-  activePeriods
-}) {
-  const periods = processedData.map((d) => String(d.name));
-  const [open, setOpen] = useState9(false);
-  const wrapperRef = useRef2(null);
-  const firstItemRef = useRef2(null);
-  const listRef = useRef2(null);
-  useEffect8(() => {
-    const handleClickOutside = (e) => {
-      if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target)) setOpen(false);
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") setOpen(false);
+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
+  );
+  return stringFields[0] || Object.keys(firstItem)[0] || "name";
+};
+var generateAdditionalColors = (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)
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+  };
+  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");
     };
-  }, []);
-  useEffect8(() => {
-    if (open && firstItemRef.current) {
-      firstItemRef.current.focus();
-    }
-  }, [open]);
-  function handleSelect(p) {
-    onOpenPeriod(p);
-    setOpen(false);
-  }
-  const containerStyle = typeof rightOffset === "number" ? { position: "relative", zIndex: 30 } : { position: "relative", zIndex: 30 };
-  return /* @__PURE__ */ jsxs31("div", { ref: wrapperRef, style: containerStyle, className: "mr-4", children: [
-    /* @__PURE__ */ jsxs31(
-      "button",
-      {
-        className: "relative p-2.5 rounded-md hover:bg-accent/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent/50 transition flex items-center justify-center",
-        "aria-expanded": open,
+    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);
+};
+var 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);
+};
+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 resolveContainerPaddingLeft = (padding, containerPaddingLeft, defaultLeft = 16) => {
+  if (typeof padding === "number") return padding;
+  if (padding && typeof padding === "object" && padding.left != null)
+    return padding.left;
+  if (typeof containerPaddingLeft === "number") return containerPaddingLeft;
+  return defaultLeft;
+};
+var resolveChartMargins = (margins, chartMargins, showLabels) => {
+  const defaultRight = 30;
+  const defaultLeft = 20;
+  const topDefault = showLabels ? 48 : 20;
+  const bottomDefault = 5;
+  return {
+    top: margins?.top ?? chartMargins?.top ?? topDefault,
+    right: margins?.right ?? chartMargins?.right ?? defaultRight,
+    left: margins?.left ?? chartMargins?.left ?? defaultLeft,
+    bottom: margins?.bottom ?? chartMargins?.bottom ?? bottomDefault
+  };
+};
+
+// src/components/charts/Chart.tsx
+import { toast as toast2 } from "sonner";
+
+// src/components/charts/components/controls/PeriodsDropdown.tsx
+import { useState as useState9, useRef as useRef2, useEffect as useEffect8 } from "react";
+import { motion as motion7, AnimatePresence as AnimatePresence6 } from "framer-motion";
+import { DotsThreeIcon as DotsThreeIcon2 } from "@phosphor-icons/react/dist/ssr";
+import { Check } from "@phosphor-icons/react/dist/ssr";
+import { jsx as jsx49, jsxs as jsxs31 } from "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 }
+};
+function PeriodsDropdown({
+  processedData,
+  onOpenPeriod,
+  rightOffset,
+  topOffset,
+  activePeriod,
+  activePeriods
+}) {
+  const periods = processedData.map((d) => String(d.name));
+  const [open, setOpen] = useState9(false);
+  const wrapperRef = useRef2(null);
+  const firstItemRef = useRef2(null);
+  const listRef = useRef2(null);
+  useEffect8(() => {
+    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);
+    };
+  }, []);
+  useEffect8(() => {
+    if (open && firstItemRef.current) {
+      firstItemRef.current.focus();
+    }
+  }, [open]);
+  function handleSelect(p) {
+    onOpenPeriod(p);
+    setOpen(false);
+  }
+  const containerStyle = typeof rightOffset === "number" ? { position: "relative", zIndex: 30 } : { position: "relative", zIndex: 30 };
+  return /* @__PURE__ */ jsxs31("div", { ref: wrapperRef, style: containerStyle, className: "mr-4", children: [
+    /* @__PURE__ */ jsxs31(
+      "button",
+      {
+        className: "relative p-2.5 rounded-md hover:bg-accent/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent/50 transition flex items-center justify-center",
+        "aria-expanded": open,
         "aria-haspopup": "menu",
         "aria-controls": "periods-menu",
         onClick: () => setOpen((v) => !v),
@@ -6375,200 +6543,60 @@ var TooltipSimple = ({
 };
 var TooltipSimple_default = TooltipSimple;
 
-// src/components/charts/utils/helpers.ts
-var formatFieldName = (fieldName) => {
-  return fieldName.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
-};
-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"
-  );
+// src/components/charts/utils/pillLabelRenderer.tsx
+import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
+var formatCompactNumber = (value) => {
+  const isNegative = value < 0;
+  const absValue = Math.abs(value);
+  let formatted;
+  if (absValue >= 1e9) {
+    formatted = (absValue / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+  } else if (absValue >= 1e6) {
+    formatted = (absValue / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  } else if (absValue >= 1e3) {
+    formatted = (absValue / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
+  } else {
+    formatted = absValue.toString();
+  }
+  return isNegative ? `-${formatted}` : formatted;
 };
-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
-  );
-  return stringFields[0] || Object.keys(firstItem)[0] || "name";
+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 generateAdditionalColors = (baseColors, count) => {
-  const hexToRgb = (hex) => {
-    const clean = hex.replace("#", "");
-    const bigint = parseInt(
-      clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean,
-      16
+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
     );
-    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);
-};
-var 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);
-};
-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 resolveContainerPaddingLeft = (padding, containerPaddingLeft, defaultLeft = 16) => {
-  if (typeof padding === "number") return padding;
-  if (padding && typeof padding === "object" && padding.left != null)
-    return padding.left;
-  if (typeof containerPaddingLeft === "number") return containerPaddingLeft;
-  return defaultLeft;
-};
-var resolveChartMargins = (margins, chartMargins, showLabels) => {
-  const defaultRight = 30;
-  const defaultLeft = 20;
-  const topDefault = showLabels ? 48 : 20;
-  const bottomDefault = 5;
-  return {
-    top: margins?.top ?? chartMargins?.top ?? topDefault,
-    right: margins?.right ?? chartMargins?.right ?? defaultRight,
-    left: margins?.left ?? chartMargins?.left ?? defaultLeft,
-    bottom: margins?.bottom ?? chartMargins?.bottom ?? bottomDefault
-  };
-};
-
-// src/components/charts/utils/pillLabelRenderer.tsx
-import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
-var formatCompactNumber = (value) => {
-  const isNegative = value < 0;
-  const absValue = Math.abs(value);
-  let formatted;
-  if (absValue >= 1e9) {
-    formatted = (absValue / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
-  } else if (absValue >= 1e6) {
-    formatted = (absValue / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
-  } else if (absValue >= 1e3) {
-    formatted = (absValue / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
-  } else {
-    formatted = absValue.toString();
-  }
-  return isNegative ? `-${formatted}` : formatted;
-};
-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;
+    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;
@@ -6630,51 +6658,2165 @@ var renderPillLabel = (color, variant) => {
 };
 var pillLabelRenderer_default = renderPillLabel;
 
-// src/hooks/use-drag.tsx
-import { useState as useState11, useCallback as useCallback7, useRef as useRef4, useEffect as useEffect10 } from "react";
-var useDrag = (options = {}) => {
-  const [isDragging, setIsDragging] = useState11(null);
-  const [positions, setPositions] = useState11({});
-  const dragStartPos = useRef4(null);
-  const dragId = useRef4(null);
-  const handleMouseDown = useCallback7((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 = useCallback7((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
+// src/components/charts/Chart.tsx
+import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+var DEFAULT_COLORS = ["#55af7d", "#8e68ff", "#2273e1"];
+var Chart = ({
+  data,
+  series,
+  className,
+  height = 350,
+  width = "100%",
+  colors: colors2 = DEFAULT_COLORS,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  xAxis,
+  labelMap,
+  enableHighlights = false,
+  enableShowOnly = false,
+  enablePeriodsDropdown = false,
+  enableDraggableTooltips = false,
+  showTooltipTotal = false,
+  maxTooltips = 5,
+  chartMargin
+}) => {
+  const smartConfig = useMemo6(() => {
+    const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
+    const xAxisConfig2 = typeof xAxis === "string" ? {
+      dataKey: resolvedXAxisKey,
+      label: formatFieldName(resolvedXAxisKey),
+      autoLabel: true
+    } : {
+      dataKey: resolvedXAxisKey,
+      label: xAxis?.label ?? formatFieldName(resolvedXAxisKey),
+      formatter: xAxis?.formatter,
+      autoLabel: xAxis?.autoLabel ?? true
     };
-    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 = useCallback7(() => {
-    if (dragId.current) {
-      options.onDragEnd?.(dragId.current);
+    const detectedFields = detectDataFields(data, xAxisConfig2.dataKey);
+    const mapperConfig2 = detectedFields.reduce((acc, field) => {
+      acc[field] = {
+        label: labelMap?.[field] ?? formatFieldName(field),
+        type: "number",
+        visible: true
+      };
+      return acc;
+    }, {});
+    return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
+  }, [data, xAxis, labelMap]);
+  const { xAxisConfig, mapperConfig } = smartConfig;
+  const [activeTooltips, setActiveTooltips] = useState11([]);
+  const [highlightedSeries, setHighlightedSeries] = useState11(
+    /* @__PURE__ */ new Set()
+  );
+  const [showOnlyHighlighted, setShowOnlyHighlighted] = useState11(false);
+  useEffect10(() => {
+    if (highlightedSeries.size === 0 && showOnlyHighlighted) {
+      setShowOnlyHighlighted(false);
     }
-    setIsDragging(null);
-    dragStartPos.current = null;
-    dragId.current = null;
-  }, [options]);
+  }, [highlightedSeries, showOnlyHighlighted]);
+  const processedData = data.map((item) => ({
+    ...item,
+    name: String(item[xAxisConfig.dataKey] || "N/A")
+  }));
+  const wrapperRef = useRef4(null);
+  const [measuredWidth, setMeasuredWidth] = useState11(null);
+  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 = useCallback7(
+    (dataKeys) => {
+      const colorMap = {};
+      const allColors = generateAdditionalColors(colors2, dataKeys.length);
+      dataKeys.forEach((key, index) => {
+        colorMap[key] = mapperConfig[key]?.color || allColors[index] || colors2[index % colors2.length];
+      });
+      return colorMap;
+    },
+    [colors2, mapperConfig]
+  );
+  const finalColors = useMemo6(
+    () => generateColors(allKeys),
+    [generateColors, allKeys]
+  );
+  const adaptDataForTooltip = useCallback7(
+    (universalData) => ({
+      ...universalData,
+      name: String(universalData[xAxisConfig.dataKey] || "N/A")
+    }),
+    [xAxisConfig.dataKey]
+  );
+  const activePeriods = useMemo6(
+    () => activeTooltips.map((t) => adaptDataForTooltip(t.data).name),
+    [activeTooltips, adaptDataForTooltip]
+  );
   useEffect10(() => {
+    window.dispatchEvent(new Event("recountTooltips"));
+  }, [activeTooltips.length]);
+  const toggleHighlight = useCallback7((key) => {
+    setHighlightedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const maxDataValue = useMemo6(() => {
+    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 minDataValue = useMemo6(() => {
+    let min = 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 < min)
+          min = v;
+      }
+    }
+    return min;
+  }, [processedData, allKeys]);
+  const niceMax = useMemo6(() => {
+    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 = useMemo6(() => {
+    if (typeof width === "number") return width;
+    const points = Math.max(1, processedData.length);
+    const barCount = series?.bar?.length ?? 0;
+    const lineCount = series?.line?.length ?? 0;
+    const areaCount = series?.area?.length ?? 0;
+    const basePerPoint = 60;
+    const perBarExtra = barCount > 0 ? Math.max(0, barCount - 1) * 8 : 0;
+    const perOtherExtra = (lineCount + areaCount) * 4;
+    let sizeFactor = 1;
+    if (niceMax > 1e5) sizeFactor = 1.1;
+    if (niceMax > 1e6) sizeFactor = 1.2;
+    if (niceMax > 1e7) sizeFactor = 1.3;
+    const perPoint = Math.round(
+      (basePerPoint + perBarExtra + perOtherExtra) * sizeFactor
+    );
+    const marginExtra = 120;
+    const calculated = points * perPoint + marginExtra;
+    const minWidth = 300;
+    const maxWidth = 1800;
+    return Math.max(minWidth, Math.min(maxWidth, calculated));
+  }, [
+    width,
+    processedData.length,
+    series?.bar?.length,
+    series?.line?.length,
+    series?.area?.length,
+    niceMax
+  ]);
+  const toggleTooltip = useCallback7(
+    (tooltipId, data2, basePosition) => {
+      const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+      if (existingIndex !== -1) {
+        setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+      } else {
+        if (activeTooltips.length >= maxTooltips) {
+          toast2.warning(
+            `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
+          );
+        }
+        const offsetIndex = activeTooltips.length;
+        const gap = 28;
+        const newTooltip = {
+          id: tooltipId,
+          data: data2,
+          position: {
+            top: basePosition.top + offsetIndex * gap,
+            left: basePosition.left + offsetIndex * gap
+          }
+        };
+        setActiveTooltips((prev) => {
+          const next = [...prev, newTooltip];
+          return next.length > maxTooltips ? next.slice(1) : next;
+        });
+      }
+    },
+    [activeTooltips, maxTooltips]
+  );
+  const handleChartClick = useCallback7(
+    (e) => {
+      if (!enableDraggableTooltips) return;
+      const ev = e;
+      if (ev?.activePayload?.length) {
+        const clickedData = ev.activePayload[0].payload;
+        const xAxisValue = clickedData[xAxisConfig.dataKey] || clickedData.name || "N/A";
+        const tooltipId = String(xAxisValue);
+        toggleTooltip(tooltipId, clickedData, {
+          top: (ev.chartY || 100) - 10,
+          left: (ev.chartX || 100) - 100
+        });
+      } else {
+        setActiveTooltips([]);
+      }
+    },
+    [enableDraggableTooltips, xAxisConfig.dataKey, toggleTooltip]
+  );
+  const handleBarClick = useCallback7(
+    (data2, index, event) => {
+      if (!enableDraggableTooltips) return;
+      event.stopPropagation();
+      const xAxisValue = data2[xAxisConfig.dataKey] || "N/A";
+      const tooltipId = String(xAxisValue);
+      const rect = event.target.getBoundingClientRect();
+      toggleTooltip(tooltipId, data2, {
+        top: Math.max(8, rect.top - 10),
+        left: rect.right + 10
+      });
+    },
+    [enableDraggableTooltips, xAxisConfig.dataKey, toggleTooltip]
+  );
+  const handleSeriesClick = useCallback7(
+    (...args) => {
+      if (args.length >= 3) {
+        const [data2, index, event] = args;
+        handleBarClick(data2, index, event);
+        return;
+      }
+      handleChartClick(args[0]);
+    },
+    [handleBarClick, handleChartClick]
+  );
+  const onTooltipPositionChange = useCallback7(
+    (id, position) => {
+      setActiveTooltips(
+        (prev) => prev.map((t) => t.id === id ? { ...t, position } : t)
+      );
+    },
+    []
+  );
+  const titleClassName = useMemo6(
+    () => "text-xl font-semibold text-foreground mb-3",
+    []
+  );
+  const finalEnableHighlights = enableHighlights;
+  const finalEnableShowOnly = enableShowOnly;
+  const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
+  const defaultChartRightMargin = 30;
+  const defaultChartLeftMargin = 0;
+  const containerPaddingLeft = 16;
+  const finalChartRightMargin = chartMargin?.right ?? defaultChartRightMargin;
+  const finalChartLeftMargin = chartMargin?.left ?? defaultChartLeftMargin;
+  const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
+  const finalChartBottomMargin = chartMargin?.bottom ?? 5;
+  const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
+  const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
+  const openTooltipForPeriod = useCallback7(
+    (periodName) => {
+      if (!enableDraggableTooltips) return;
+      const row = processedData.find((r) => String(r.name) === periodName);
+      if (!row) return;
+      const tooltipId = String(periodName);
+      const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+      if (existingIndex !== -1) {
+        setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+        return;
+      }
+      if (activeTooltips.length >= maxTooltips) {
+        toast2.warning(
+          `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
+        );
+      }
+      const offsetIndex = activeTooltips.length;
+      const availableWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
+      const gap = 28;
+      const leftGap = 28;
+      const newTooltip = {
+        id: tooltipId,
+        data: row,
+        position: {
+          top: 48 + offsetIndex * gap,
+          left: Math.max(120, availableWidth - 280 - offsetIndex * leftGap)
+        }
+      };
+      setActiveTooltips((prev) => {
+        const next = [...prev, newTooltip];
+        return next.length > maxTooltips ? next.slice(1) : next;
+      });
+    },
+    [
+      enableDraggableTooltips,
+      processedData,
+      activeTooltips,
+      width,
+      measuredInner,
+      computedWidth,
+      maxTooltips
+    ]
+  );
+  if (!data) return null;
+  if (Array.isArray(data) && data.length === 0) {
+    return /* @__PURE__ */ jsx57(
+      "div",
+      {
+        className: cn(
+          "rounded-lg bg-card p-4 relative w-full text-muted-foreground"
+        ),
+        children: /* @__PURE__ */ jsx57(
+          "div",
+          {
+            style: {
+              paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`
+            },
+            children: "Sem dados para exibir"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx57(
+    "div",
+    {
+      ref: wrapperRef,
+      style: {
+        width: "100%",
+        overflowX: "hidden",
+        overflowY: "hidden",
+        minWidth: 0
+      },
+      children: /* @__PURE__ */ jsxs39(
+        "div",
+        {
+          className: cn("rounded-lg bg-card p-2 relative", className),
+          style: { width: "100%", maxWidth: "100%", minWidth: 0 },
+          children: [
+            title && /* @__PURE__ */ jsx57(
+              "div",
+              {
+                style: {
+                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
+                  width: "100%",
+                  maxWidth: `${chartInnerWidth}px`,
+                  display: "flex",
+                  justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
+                  alignItems: "center",
+                  marginTop: 4
+                },
+                children: /* @__PURE__ */ jsx57("h3", { className: titleClassName, children: title })
+              }
+            ),
+            allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ jsxs39(
+              "div",
+              {
+                className: "flex items-center w-full",
+                style: {
+                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
+                  width: "98%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem"
+                },
+                children: [
+                  finalEnableHighlights && /* @__PURE__ */ jsx57(
+                    Highlights_default,
+                    {
+                      allKeys,
+                      mapperConfig,
+                      finalColors,
+                      highlightedSeries,
+                      toggleHighlight,
+                      containerWidth: chartInnerWidth
+                    }
+                  ),
+                  finalEnableShowOnly && /* @__PURE__ */ jsx57(
+                    ShowOnly_default,
+                    {
+                      showOnlyHighlighted,
+                      setShowOnlyHighlighted,
+                      highlightedSeriesSize: highlightedSeries.size,
+                      clearHighlights: () => setHighlightedSeries(/* @__PURE__ */ new Set())
+                    }
+                  ),
+                  finalEnablePeriodsDropdown && /* @__PURE__ */ jsx57(
+                    "div",
+                    {
+                      style: {
+                        marginLeft: "auto",
+                        display: "flex",
+                        alignItems: "center"
+                      },
+                      children: /* @__PURE__ */ jsx57(
+                        PeriodsDropdown_default,
+                        {
+                          processedData,
+                          onOpenPeriod: openTooltipForPeriod,
+                          rightOffset: finalChartRightMargin,
+                          activePeriods
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            !(allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly)) && finalEnablePeriodsDropdown && /* @__PURE__ */ jsx57(
+              "div",
+              {
+                style: {
+                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
+                  paddingRight: `${finalChartRightMargin}px`,
+                  width: "100%",
+                  maxWidth: `${chartInnerWidth}px`,
+                  display: "flex",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx57(
+                  PeriodsDropdown_default,
+                  {
+                    processedData,
+                    onOpenPeriod: openTooltipForPeriod,
+                    rightOffset: finalChartRightMargin
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx57(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs39(
+              ComposedChart,
+              {
+                data: processedData,
+                height,
+                margin: {
+                  top: finalChartTopMargin,
+                  right: finalChartRightMargin,
+                  left: finalChartLeftMargin,
+                  bottom: finalChartBottomMargin
+                },
+                onClick: handleChartClick,
+                children: [
+                  showGrid && /* @__PURE__ */ jsx57(
+                    CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      stroke: gridColor || "hsl(var(--muted-foreground))",
+                      opacity: 0.5
+                    }
+                  ),
+                  /* @__PURE__ */ jsx57(
+                    XAxis,
+                    {
+                      dataKey: xAxisConfig.dataKey,
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tickFormatter: xAxisConfig.formatter
+                    }
+                  ),
+                  /* @__PURE__ */ jsx57(
+                    YAxis,
+                    {
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tickFormatter: (value) => Number(value).toLocaleString("pt-BR"),
+                      domain: [Math.min(minDataValue, 0), niceMax],
+                      tickCount: 6
+                    }
+                  ),
+                  minDataValue < 0 && /* @__PURE__ */ jsx57(
+                    ReferenceLine,
+                    {
+                      y: 0,
+                      stroke: "hsl(var(--muted-foreground))",
+                      strokeWidth: 1,
+                      strokeDasharray: "4 4"
+                    }
+                  ),
+                  showTooltip && /* @__PURE__ */ jsx57(
+                    Tooltip,
+                    {
+                      content: showTooltipTotal ? /* @__PURE__ */ jsx57(TooltipWithTotal_default, { finalColors }) : /* @__PURE__ */ jsx57(TooltipSimple_default, { finalColors }),
+                      cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                    }
+                  ),
+                  showLegend && /* @__PURE__ */ jsx57(
+                    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] ?? formatFieldName(key);
+                    const color = finalColors[key];
+                    if (s.type === "bar") {
+                      return /* @__PURE__ */ jsx57(
+                        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__ */ jsx57(
+                            Rectangle,
+                            {
+                              fill: color,
+                              stroke: color,
+                              strokeWidth: 2,
+                              opacity: 0.8
+                            }
+                          ),
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx57(
+                            LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 8
+                            }
+                          ) : null
+                        },
+                        `bar-${key}`
+                      );
+                    }
+                    if (s.type === "line") {
+                      return /* @__PURE__ */ jsx57(
+                        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__ */ jsx57(
+                            LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 14
+                            }
+                          ) : null
+                        },
+                        `line-${key}`
+                      );
+                    }
+                    if (s.type === "area") {
+                      return /* @__PURE__ */ jsx57(
+                        Area,
+                        {
+                          dataKey: key,
+                          name: label,
+                          stroke: color,
+                          fill: color,
+                          fillOpacity: 0.35,
+                          strokeWidth: 2,
+                          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__ */ jsx57(
+                            LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "soft"),
+                              offset: 12
+                            }
+                          ) : null
+                        },
+                        `area-${key}`
+                      );
+                    }
+                    return null;
+                  })
+                ]
+              }
+            ) }),
+            enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx57(
+              DraggableTooltip_default,
+              {
+                id: tooltip.id,
+                data: adaptDataForTooltip(tooltip.data),
+                position: tooltip.position,
+                title,
+                dataKeys: allKeys,
+                finalColors,
+                highlightedSeries,
+                toggleHighlight,
+                showOnlyHighlighted,
+                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__ */ jsx57(
+              CloseAllButton_default,
+              {
+                count: activeTooltips.length,
+                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+                position: "top-center",
+                variant: "floating"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var Chart_default = Chart;
+
+// src/components/charts/BarChart.tsx
+import { useState as useState12, useEffect as useEffect11, useCallback as useCallback8, useMemo as useMemo7 } from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar as Bar2,
+  Rectangle as Rectangle2,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  CartesianGrid as CartesianGrid2,
+  Tooltip as Tooltip2,
+  Legend as Legend2,
+  LabelList as LabelList2
+} from "recharts";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
+var BarChart = ({
+  data,
+  className,
+  height = 350,
+  width = 900,
+  colors: colors2 = DEFAULT_COLORS2,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  xAxis,
+  mapper,
+  yAxis,
+  labelMap,
+  autoDetect = false,
+  padding,
+  margins,
+  containerPaddingLeft,
+  chartMargins
+}) => {
+  const resolvedContainerPaddingLeft = resolveContainerPaddingLeft(
+    padding,
+    containerPaddingLeft,
+    16
+  );
+  const smartConfig = useMemo7(() => {
+    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] = useState12([]);
+  const [isDragging, setIsDragging] = useState12(null);
+  const [dragOffset, setDragOffset] = useState12({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = useState12(0);
+  const [alignmentGuides, setAlignmentGuides] = useState12([]);
+  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 = generateAdditionalColors(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 maxDataValue = useMemo7(() => {
+    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 = useMemo7(() => {
+    let padding2 = 0.08;
+    if (maxDataValue > 1e6) padding2 = 0.05;
+    if (maxDataValue > 1e7) padding2 = 0.03;
+    if (maxDataValue === 0) padding2 = 0.12;
+    const padded = maxDataValue * (1 + padding2);
+    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_THRESHOLD2 = 25;
+  const GUIDE_THRESHOLD2 = 60;
+  const STRONG_SNAP_THRESHOLD2 = 35;
+  const PRECISION_SNAP_THRESHOLD2 = 8;
+  const updateAlignmentGuides = useCallback8(
+    (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_THRESHOLD2) {
+          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_THRESHOLD2) {
+          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 = useCallback8(
+    (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_THRESHOLD2) {
+            snappedPosition.top = guide.position;
+            hasSnapped = true;
+          }
+        } else if (guide.type === "vertical") {
+          const diff = Math.abs(position.left - guide.position);
+          if (diff <= PRECISION_SNAP_THRESHOLD2) {
+            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_THRESHOLD2) {
+              snappedPosition.top = guide.position;
+            }
+          } else if (guide.type === "vertical") {
+            const diff = Math.abs(position.left - guide.position);
+            if (diff <= STRONG_SNAP_THRESHOLD2) {
+              snappedPosition.left = guide.position;
+            }
+          }
+        });
+      }
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position.top - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD2 && snappedPosition.top === position.top) {
+            snappedPosition.top = guide.position;
+          }
+        } else if (guide.type === "vertical") {
+          const diff = Math.abs(position.left - guide.position);
+          if (diff <= ALIGNMENT_THRESHOLD2 && 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 });
+  };
+  useEffect11(() => {
+    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
+  ]);
+  useEffect11(() => {
+    const handleCloseAllTooltips = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
+    };
+  }, []);
+  useEffect11(() => {
+    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]);
+  useEffect11(() => {
+    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__ */ jsxs40("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ jsx58("p", { className: "font-medium text-foreground mb-2", children: label }),
+      payload.map(
+        (entry, index) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx58(
+            "div",
+            {
+              className: "w-3 h-3 rounded-sm",
+              style: { backgroundColor: entry.color }
+            }
+          ),
+          /* @__PURE__ */ jsxs40("span", { className: "text-muted-foreground", children: [
+            entry.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx58("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+        ] }, index)
+      ),
+      /* @__PURE__ */ jsx58("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__ */ jsxs40(
+    "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__ */ jsx58("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx58("h3", { className: getTitleClassName(titlePosition), children: title }) }),
+        /* @__PURE__ */ jsxs40(
+          RechartsBarChart,
+          {
+            data: processedData,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: resolveChartMargins(margins, chartMargins, showLabels),
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ jsx58(
+                CartesianGrid2,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ jsx58(
+                XAxis2,
+                {
+                  dataKey: xAxisConfig.dataKey,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: xAxisConfig.formatter
+                }
+              ),
+              /* @__PURE__ */ jsx58(
+                YAxis2,
+                {
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: (value) => value.toLocaleString("pt-BR"),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ jsx58(
+                Tooltip2,
+                {
+                  content: /* @__PURE__ */ jsx58(CustomTooltip, {}),
+                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                }
+              ),
+              showLegend && /* @__PURE__ */ jsx58(
+                Legend2,
+                {
+                  wrapperStyle: {
+                    color: "hsl(var(--foreground))",
+                    fontSize: "14px"
+                  }
+                }
+              ),
+              dataKeys.map((key) => {
+                const fieldConfig = mapperConfig[key];
+                return /* @__PURE__ */ jsx58(
+                  Bar2,
+                  {
+                    dataKey: key,
+                    name: fieldConfig?.label || key,
+                    fill: fieldConfig?.color || finalColors[key],
+                    radius: [4, 4, 0, 0],
+                    onClick: handleBarClick,
+                    style: { cursor: "pointer" },
+                    activeBar: /* @__PURE__ */ jsx58(
+                      Rectangle2,
+                      {
+                        fill: finalColors[key],
+                        stroke: finalColors[key],
+                        strokeWidth: 2,
+                        opacity: 0.8
+                      }
+                    ),
+                    children: showLabels && /* @__PURE__ */ jsx58(
+                      LabelList2,
+                      {
+                        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__ */ jsxs40("div", { children: [
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58(
+              "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__ */ jsx58(
+              "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__ */ jsx58(
+          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/charts/LineChart.tsx
+import { useState as useState13, useEffect as useEffect12, useCallback as useCallback9, useMemo as useMemo8 } from "react";
+import {
+  LineChart as RechartsLineChart,
+  Line as Line2,
+  XAxis as XAxis3,
+  YAxis as YAxis3,
+  CartesianGrid as CartesianGrid3,
+  Tooltip as Tooltip3,
+  Legend as Legend3,
+  LabelList as LabelList3
+} from "recharts";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+var defaultData = [
+  { name: "A", value: 100 },
+  { name: "B", value: 200 },
+  { name: "C", value: 150 }
+];
+var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
+var CustomLineChart = ({
+  data = defaultData,
+  className,
+  height = 300,
+  width = "100%",
+  colors: colors2 = DEFAULT_COLORS3,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  strokeWidth = 2,
+  showDots = true,
+  showLabels = false,
+  padding,
+  margins,
+  containerPaddingLeft,
+  chartMargins
+}) => {
+  const resolvedContainerPaddingLeft = resolveContainerPaddingLeft(
+    padding,
+    containerPaddingLeft,
+    16
+  );
+  const [activeTooltips, setActiveTooltips] = useState13([]);
+  const [isDragging, setIsDragging] = useState13(null);
+  const [dragOffset, setDragOffset] = useState13({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = useState13(0);
+  const [alignmentGuides, setAlignmentGuides] = useState13([]);
+  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 = useMemo8(
+    () => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
+    [data]
+  );
+  const finalColors = generateColors(dataKeys);
+  const maxDataValue = useMemo8(() => {
+    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 = useMemo8(() => {
+    let padding2 = 0.08;
+    if (maxDataValue > 1e6) padding2 = 0.05;
+    if (maxDataValue > 1e7) padding2 = 0.03;
+    if (maxDataValue === 0) padding2 = 0.12;
+    const padded = maxDataValue * (1 + padding2);
+    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__ */ jsx59(
+      "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 = useCallback9(() => {
+    window.dispatchEvent(new CustomEvent("closeAllTooltips"));
+  }, []);
+  const updateAlignmentGuides = useCallback9(
+    (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 = useCallback9(
+    (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 });
+  };
+  useEffect12(() => {
+    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
+  ]);
+  useEffect12(() => {
+    const handleCloseAllTooltips2 = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    };
+  }, []);
+  useEffect12(() => {
+    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]);
+  useEffect12(() => {
+    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__ */ jsx59("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs41(
+    "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__ */ jsx59("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx59("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ jsx59("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
+        /* @__PURE__ */ jsxs41(
+          RechartsLineChart,
+          {
+            data,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: resolveChartMargins(margins, chartMargins, showLabels),
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ jsx59(
+                CartesianGrid3,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.3
+                }
+              ),
+              /* @__PURE__ */ jsx59(
+                XAxis3,
+                {
+                  dataKey: "name",
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12
+                }
+              ),
+              /* @__PURE__ */ jsx59(
+                YAxis3,
+                {
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12,
+                  tickFormatter: (value) => compactTick(Number(value)),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ jsx59(Tooltip3, { content: () => null }),
+              showLegend && /* @__PURE__ */ jsx59(
+                Legend3,
+                {
+                  wrapperStyle: {
+                    fontSize: "12px",
+                    color: "hsl(var(--muted-foreground))"
+                  }
+                }
+              ),
+              dataKeys.map((key) => /* @__PURE__ */ jsx59(
+                Line2,
+                {
+                  type: "monotone",
+                  dataKey: key,
+                  stroke: finalColors[key],
+                  strokeWidth,
+                  dot: showDots ? { r: 4, cursor: "pointer" } : false,
+                  activeDot: (props) => /* @__PURE__ */ jsx59(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ jsx59(
+                    LabelList3,
+                    {
+                      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__ */ jsxs41("div", { children: [
+            /* @__PURE__ */ jsx59(
+              "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__ */ jsx59(
+              "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__ */ jsx59(
+              "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__ */ jsx59(
+          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/charts/PieChart.tsx
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer as ResponsiveContainer2,
+  Tooltip as Tooltip4,
+  Legend as Legend4
+} from "recharts";
+import { jsx as jsx60, jsxs as jsxs42 } from "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_COLORS4 = [
+  "#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__ */ jsx60(
+    "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_COLORS4;
+  return /* @__PURE__ */ jsx60("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsx60(ResponsiveContainer2, { width, height, children: /* @__PURE__ */ jsxs42(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsx60(
+      Pie,
+      {
+        data,
+        cx: centerX,
+        cy: centerY,
+        labelLine: false,
+        label: showLabels ? renderCustomizedLabel : false,
+        outerRadius,
+        innerRadius,
+        fill: "#8884d8",
+        dataKey: "value",
+        children: data.map((entry, index) => /* @__PURE__ */ jsx60(
+          Cell,
+          {
+            fill: finalColors[index % finalColors.length]
+          },
+          `cell-${entry.name}-${index}`
+        ))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx60(
+      Tooltip4,
+      {
+        contentStyle: {
+          backgroundColor: "hsl(var(--popover))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "6px",
+          color: "hsl(var(--popover-foreground))"
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx60(Legend4, {})
+  ] }) }) });
+};
+var PieChart_default = CustomPieChart;
+
+// src/components/charts/hooks/useChartHighlights.tsx
+import { useState as useState14, useCallback as useCallback10 } from "react";
+var useChartHighlights = () => {
+  const [highlightedSeries, setHighlightedSeries] = useState14(
+    /* @__PURE__ */ new Set()
+  );
+  const [showOnlyHighlighted, setShowOnlyHighlighted] = useState14(false);
+  const toggleHighlight = useCallback10((key) => {
+    setHighlightedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const clearHighlights = useCallback10(() => {
+    setHighlightedSeries(/* @__PURE__ */ new Set());
+    setShowOnlyHighlighted(false);
+  }, []);
+  const isHighlighted = useCallback10(
+    (key) => {
+      return highlightedSeries.has(key);
+    },
+    [highlightedSeries]
+  );
+  const getSeriesStyle = useCallback10(
+    (key) => {
+      const hasHighlights = highlightedSeries.size > 0;
+      const isSeriesHighlighted = highlightedSeries.has(key);
+      if (showOnlyHighlighted && !isSeriesHighlighted) {
+        return {
+          opacity: 0,
+          pointerEvents: "none",
+          transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+        };
+      }
+      if (!hasHighlights) {
+        return {
+          opacity: 1,
+          transform: "scale(1)",
+          transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+        };
+      }
+      if (isSeriesHighlighted) {
+        return {
+          opacity: 1,
+          transform: "scale(1.02)",
+          filter: "drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15))",
+          transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+        };
+      }
+      return {
+        opacity: 0.25,
+        transform: "scale(0.98)",
+        transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+      };
+    },
+    [highlightedSeries, showOnlyHighlighted]
+  );
+  return {
+    highlightedSeries,
+    showOnlyHighlighted,
+    toggleHighlight,
+    setShowOnlyHighlighted,
+    clearHighlights,
+    getSeriesStyle,
+    isHighlighted
+  };
+};
+
+// src/hooks/use-drag.tsx
+import { useState as useState15, useCallback as useCallback11, useRef as useRef5, useEffect as useEffect13 } from "react";
+var useDrag = (options = {}) => {
+  const [isDragging, setIsDragging] = useState15(null);
+  const [positions, setPositions] = useState15({});
+  const dragStartPos = useRef5(null);
+  const dragId = useRef5(null);
+  const handleMouseDown = useCallback11((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 = useCallback11((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 = useCallback11(() => {
+    if (dragId.current) {
+      options.onDragEnd?.(dragId.current);
+    }
+    setIsDragging(null);
+    dragStartPos.current = null;
+    dragId.current = null;
+  }, [options]);
+  useEffect13(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -6686,16 +8828,16 @@ var useDrag = (options = {}) => {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const setPosition = useCallback7((id, position) => {
+  const setPosition = useCallback11((id, position) => {
     setPositions((prev) => ({
       ...prev,
       [id]: position
     }));
   }, []);
-  const getPosition = useCallback7((id) => {
+  const getPosition = useCallback11((id) => {
     return positions[id] || { top: 0, left: 0 };
   }, [positions]);
-  const isElementDragging = useCallback7((id) => {
+  const isElementDragging = useCallback11((id) => {
     return isDragging === id;
   }, [isDragging]);
   return {
@@ -6722,6 +8864,7 @@ export {
   AvatarFallbackBase,
   AvatarImageBase,
   BadgeBase,
+  BarChart_default as BarChart,
   BreadcrumbBase,
   BreadcrumbEllipsisBase,
   BreadcrumbItemBase,
@@ -6743,6 +8886,7 @@ export {
   CarouselItemBase,
   CarouselNextBase,
   CarouselPrevious,
+  Chart_default as Chart,
   CheckboxBase,
   CloseAllButton_default as CloseAllButton,
   CollapsibleBase,
@@ -6821,6 +8965,7 @@ export {
   InputOTPSeparatorBase,
   InputOTPSlotBase,
   LabelBase_default as LabelBase,
+  LineChart_default as LineChart,
   LoadingBase,
   ModeToggleBase,
   MultiCombobox,
@@ -6833,6 +8978,7 @@ export {
   NavigationMenuTriggerBase,
   NavigationMenuViewportBase,
   PeriodsDropdown_default as PeriodsDropdown,
+  PieChart_default as PieChart,
   PopoverAnchorBase,
   PopoverBase,
   PopoverContentBase,
@@ -6928,6 +9074,7 @@ export {
   resolveChartMargins,
   resolveContainerPaddingLeft,
   toast,
+  useChartHighlights,
   useDrag,
   useIsMobile,
   useTheme